Advanced Search

Grid System on SASS

/ Published in: SASS
Save to your folder(s)
You just need to configure the width, columns, and gutter

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // Custom Grid System
  2. $grid_width : 960px;
  3. $grid_col   : 12;
  4. $grid_gut   : 20px;
  5. body { min-width: $grid_width; }
  6. .container_#{$grid_col} { margin-left: auto; margin-right: auto; width: $grid_width;
  7.   @for $i from 1 through $grid_col {
  8.     .grid_#{$i} { display: inline; float: left; margin-left: $grid_gut / 2; margin-right: $grid_gut / 2; }
  9.     .push_#{$i}, .pull_#{$i} { position: relative; }
  10.     .grid_#{$i} { width: ( ($grid_width / $grid_col - $grid_gut) * $i ) + (($i - 1) * $grid_gut); }
  11.     .prefix_#{$i} { padding-left: $grid_width / $grid_col * $i ; }
  12.     .suffix_#{$i} { padding-right: $grid_width / $grid_col * $i ; }
  13.     .push_#{$i} { left: $grid_width / $grid_col * $i ; }
  14.     .pull_#{$i} { right: $grid_width / $grid_col * $i ; }
  15.   }
  16.   .alpha { margin-left: 0; } // no left margin
  17.   .omega { margin-right: 0; } // no right margin
  18. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.