Posted By

adambuczek on 09/28/13


Tagged

layout grid


Versions (?)

Grid building mixin.


 / Published in: SASS
 

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; }

  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  

You need to login to post a comment.