Skip to content

Instantly share code, notes, and snippets.

@idan
Created June 6, 2011 08:40
Show Gist options
  • Save idan/1009952 to your computer and use it in GitHub Desktop.
Save idan/1009952 to your computer and use it in GitHub Desktop.
More is Less
$less-column-width: 68px;
$less-gutter-width: 24px;
@function column-width($columns) {
@return ($less-column-width * $columns) + ($less-gutter-width * ($columns - 1));
}
@function grid-padding-px($columns) {
@if $columns == 10 {
@return 48px;
} @else if $columns == 8 {
@return 28px;
} @else if $columns == 5 {
@return 22px;
} @else if $columns == 3 {
@return 34px;
} @else {
// should never be here...
@return 0px;
}
}
@function input-width($columns, $border: 0, $padding: 0) {
@return column-width($columns) - (2 * $border) - (2 * $padding);
}
@mixin less-grid-background($columns) {
@include column-grid-background(
$columns, $less-column-width, $less-gutter-width,
grid-padding-px($columns));
}
@mixin grid($columns) {
@include clearfix;
width: column-width($columns);
padding-left: grid-padding-px($columns);
padding-right: grid-padding-px($columns);
margin-left: auto;
margin-right: auto;
}
@mixin columns($columns) {
display: inline;
float: left;
width: column-width($columns);
margin-right: $less-gutter-width;
}
@mixin full($columns, $pad: 0) {
@include columns($columns);
@include pad($pad);
@include omega;
}
@mixin prefix($columns) {
padding-left: column-width($columns) + $less-gutter-width;
}
@mixin suffix($columns) {
padding-right: column-width($columns);
}
@mixin pad($columns) {
@include prefix($columns);
@include suffix($columns);
}
@mixin omega {
margin-right: 0;
}
@mixin accessible-selection-color($color) {
$textcolor: contrast-color($color);
::selection {background: $color; color: $textcolor;}
::-moz-selection {background: $color; color: $textcolor;}
img::selection {background: transparent;}
img::-moz-selection {background: transparent;}
body {-webkit-tap-highlight-color: $color;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment