_grid.scss 666 B

1234567891011121314151617181920212223242526272829
  1. // edit these values
  2. $cols: 8;
  3. $margin: 15;
  4. $layout-width: 850;
  5. // do not edit these values
  6. $layout-margin-width: $layout-width + $margin * 2;
  7. $col-width: $layout-margin-width / $cols;
  8. $percent-margin: $margin / $layout-margin-width;
  9. // Grid Container
  10. .wrapper {
  11. position: relative;
  12. width: $layout-margin-width + px;
  13. margin: 0 auto;
  14. @extend .group;
  15. }
  16. // Grid Columns
  17. @for $i from 1 through $cols {
  18. .grid-#{$i} {
  19. float: left;
  20. width: ( ($col_width * $i / $layout-margin-width) - 2 * $percent-margin) * 100%;
  21. padding: 0;
  22. margin-left: $percent-margin * 100%;
  23. margin-right: $percent-margin * 100%;
  24. }
  25. }