Advanced Search

Grid building mixin.

/ Published in: SASS
Save to your folder(s)
Mixin sets element width without clogging your markup. Set layout width, number of columns and gutter width.
I use it to make sites responsive when if don't need to change the amount of columns.
eg. 1218px, 978px and 768px grids.

Usage:

Full width

`.hero {
text-align: center;
@include grid(12);
}`

Two columns

`article {
@include grid(6);
}`
`article:nth-child(2n) { //for two column layout
@include clearfix; //html5 boilerplate clearfix
}`

Three columns

`a {
@include grid(4);
text-align: center;
img, span {
margin: 0 auto;
display: block;
}
img {
margin-top: rhythm(2);
}
span:nth-child(2) {
margin-top: rhythm(1);
}
}`

`a:nth-child(3n) {
@include clearfix;
}`

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $layout: 1218px; //set desired layout width
  2. $columnsNum: 12; //choose number of columns
  3. $gridGutter: 30px; //set gutter
  4. $gridCol: ($layout - $columnsNum*$gridGutter)/$columnsNum; //column width will set itself
  5.  
  6. /*
  7.  * Mixin takes 2 arguments. Number of columns the content should occupy 
  8.  * and left hand ofset  which defaults to 0
  9.  */ 
  10.  
  11. @mixin grid($columns, $offset:0) {  
  12.  @if $columns <= $columnsNum {
  13.   width:$gridCol*$columns + $gridGutter*($columns - 1);
  14.   margin: 0 $gridGutter/2;
  15.   @if $columns != $columnsNum {
  16.     float: left;
  17.   }
  18.   @if $offset > 0 {
  19.     margin-left: $gridCol*$offset + $gridGutter*($offset - 1);
  20.   }
  21.  } @else {
  22.    @warn "No more than "+ $columnsNum +" columns";
  23.  }
  24. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.