public
Last active

My take on twitter-bootstrap's grid, implemented in sass/compass

  • Download Gist
gistfile1.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
/*
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
40 100 160 220 280 340 400 460 520 580 640 700 760 820 880 940
*/
 
$gridColumns: 16;
$gridColumnWidth: 40px;
$gridGutterWidth: 20px;
 
@function columnWidth($columns) {
@return ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
}
 
@mixin grid($columns: $gridColumns) {
width: columnWidth($columns);
@include clearfix;
margin-left: auto;
margin-right: auto;
}
 
// TODO: make row mixin support nesting?
@mixin row() {
@include pie-clearfix;
margin-left: -1 * $gridGutterWidth;
}
 
@mixin rowless() {
@include pie-clearfix;
&:first-child {
margin-left: 0; // Fuck IE6. Using selectivizr polyfill
}
}
 
@mixin gridElement() {
float: left;
margin-left: $gridGutterWidth;
}
 
@mixin alpha() {
margin-left: 0;
}
 
@mixin columns($columns: 1) {
@include gridElement;
width: columnWidth($columns);
}
 
// Use margins for gutters, padding for prefix/suffixing.
// That way, it's hard to step on your own toes.
@mixin prefix($columns: 1) {
padding-left: column-width($columns);
}
 
@mixin suffix($columns: 1) {
padding-right: column-width($columns);
}
 
@mixin full($columns: 1) {
@include columns($columns);
$pad: $gridColumnsTotal - $columns;
$halfpad: $pad/2;
@if $pad % 2 == 0 {
@include prefix($halfpad);
@include suffix($halfpad);
} @else {
/* TODO: implement a weight param that can control which side gets the
larger half of the padding. */
@include prefix(floor($halfpad));
@include suffix(ceil($halfpad));
}
}
 
// Unique column sizes for 16-column grid
@mixin span-one-third { @include gridElement; width: 300px; }
@mixin span-two-thirds { @include gridElement; width: 620px; }
@mixin prefix-one-third { margin-left: 340px; }
@mixin prefix-two-thirds { margin-left: 660px; }
 
 
 
// Toys
@mixin debug-grid-background($columns) {
@include column-grid-background($columns, $gridColumnWidth, $gridGutterWidth, 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;}
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.