Grid System on SASS


/ Published in: SASS
Save to your folder(s)

You just need to configure the width, columns, and gutter


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.