// ## Grid System // // The TurboSass grid system is loosely based on Nathan Smith's fantastic // 960.gs system.

// Change this variable to alter the container width and the amount of // grid columns $gridwidth: 960px / 12 !default;

// Change this variable to alter the gutter margins. $gridmargin: 10px !default;

// Make this object a container for grid columns @mixin c12 {

margin-left: auto;
margin-right: auto;
width: 12*$gridwidth;

}

// Internal helper with grid column properties @mixin gridbox {

display: inline;
float: left;
margin-left: $gridmargin;
margin-right: $gridmargin;

}

// Internal helper with push-pull properties @mixin pushpull {

position: relative;

}

// To nest grid cells in other grid cells apply the alpha mixin to the // left inner cell and omega to the right inner cell. This prevents // double gutters from appearing. @mixin alpha { margin-left:0; } @mixin omega { margin-right: 0; }

// Grid cell mixins. The number indicates the width of the cell in columns. @mixin g1 { @include gridbox; width: ($gridwidth)-(2*$gridmargin); } @mixin g2 { @include gridbox; width: (2*$gridwidth)-(2*$gridmargin); } @mixin g3 { @include gridbox; width: (3*$gridwidth)-(2*$gridmargin); } @mixin g4 { @include gridbox; width: (4*$gridwidth)-(2*$gridmargin); } @mixin g5 { @include gridbox; width: (5*$gridwidth)-(2*$gridmargin); } @mixin g6 { @include gridbox; width: (6*$gridwidth)-(2*$gridmargin); } @mixin g7 { @include gridbox; width: (7*$gridwidth)-(2*$gridmargin); } @mixin g8 { @include gridbox; width: (8*$gridwidth)-(2*$gridmargin); } @mixin g9 { @include gridbox; width: (9*$gridwidth)-(2*$gridmargin); } @mixin g10 { @include gridbox; width: (10*$gridwidth)-(2*$gridmargin); } @mixin g11 { @include gridbox; width: (11*$gridwidth)-(2*$gridmargin); } @mixin g12 { @include gridbox; width: (12*$gridwidth)-(2*$gridmargin); }

// Push this cell to the right @mixin push1 { @include pushpull; left: $gridwidth; } @mixin push2 { @include pushpull; left: 2*$gridwidth; } @mixin push3 { @include pushpull; left: 3*$gridwidth; } @mixin push4 { @include pushpull; left: 4*$gridwidth; } @mixin push5 { @include pushpull; left: 5*$gridwidth; } @mixin push6 { @include pushpull; left: 6*$gridwidth; } @mixin push7 { @include pushpull; left: 7*$gridwidth; } @mixin push8 { @include pushpull; left: 8*$gridwidth; } @mixin push9 { @include pushpull; left: 9*$gridwidth; } @mixin push10 { @include pushpull; left: 10*$gridwidth; } @mixin push11 { @include pushpull; left: 11*$gridwidth; }

// Pull this cell to the left @mixin pull1 { @include pushpull; left: -$gridwidth; } @mixin pull2 { @include pushpull; left: -2*$gridwidth; } @mixin pull3 { @include pushpull; left: -3*$gridwidth; } @mixin pull4 { @include pushpull; left: -4*$gridwidth; } @mixin pull5 { @include pushpull; left: -5*$gridwidth; } @mixin pull6 { @include pushpull; left: -6*$gridwidth; } @mixin pull7 { @include pushpull; left: -7*$gridwidth; } @mixin pull8 { @include pushpull; left: -8*$gridwidth; } @mixin pull9 { @include pushpull; left: -9*$gridwidth; } @mixin pull10 { @include pushpull; left: -10*$gridwidth; } @mixin pull11 { @include pushpull; left: -11*$gridwidth; }

// Apply padding to the left of the cell. @mixin p1 { padding-left: $gridwidth; } @mixin p2 { padding-left: 2*$gridwidth; } @mixin p3 { padding-left: 3*$gridwidth; } @mixin p4 { padding-left: 4*$gridwidth; } @mixin p5 { padding-left: 5*$gridwidth; } @mixin p6 { padding-left: 6*$gridwidth; } @mixin p7 { padding-left: 7*$gridwidth; } @mixin p8 { padding-left: 8*$gridwidth; } @mixin p9 { padding-left: 9*$gridwidth; } @mixin p10 { padding-left: 10*$gridwidth; } @mixin p11 { padding-left: 11*$gridwidth; }

// Apply padding to the right of the cell. @mixin s1 { padding-right: $gridwidth; } @mixin s2 { padding-right: 2*$gridwidth; } @mixin s3 { padding-right: 3*$gridwidth; } @mixin s4 { padding-right: 4*$gridwidth; } @mixin s5 { padding-right: 5*$gridwidth; } @mixin s6 { padding-right: 6*$gridwidth; } @mixin s7 { padding-right: 7*$gridwidth; } @mixin s8 { padding-right: 8*$gridwidth; } @mixin s9 { padding-right: 9*$gridwidth; } @mixin s10 { padding-right: 10*$gridwidth; } @mixin s11 { padding-right: 11*$gridwidth; }

// This is the clearfix from HTML5 Boilerplate @mixin clearfix {

zoom: 1;

&:before, &:after {
    content: "\0020"; 
    display: block; 
    height: 0; 
    visibility: hidden; 
}

&:after { 
    clear: both; 
}

}