Return to Snippet

Revision: 64872
at September 28, 2013 05:12 by adambuczek


Initial Code
$layout: 1218px; //set desired layout width
$columnsNum: 12; //choose number of columns
$gridGutter: 30px; //set gutter
$gridCol: ($layout - $columnsNum*$gridGutter)/$columnsNum; //column width will set itself

/*
 * Mixin takes 2 arguments. Number of columns the content should occupy 
 * and left hand ofset  which defaults to 0
 */ 

@mixin grid($columns, $offset:0) {  
 @if $columns <= $columnsNum {
  width:$gridCol*$columns + $gridGutter*($columns - 1);
  margin: 0 $gridGutter/2;
  @if $columns != $columnsNum {
    float: left;
  }
  @if $offset > 0 {
    margin-left: $gridCol*$offset + $gridGutter*($offset - 1);
  }
 } @else {
   @warn "No more than "+ $columnsNum +" columns";
 }
}

Initial URL


Initial Description
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;
 }`

Initial Title
Grid building mixin.

Initial Tags
layout

Initial Language
SASS