grid.scss 948 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. /* grid container
  2. ============================================== */
  3. $cols: 12;
  4. $margin: 5;
  5. $layout-width: 950 + $margin * 2;
  6. $col-width: $layout-width / $cols - $margin * 2;
  7. .container-#{$cols} {
  8. @include group;
  9. // width: $layout-width + px;
  10. max-width: 1200px;
  11. min-width: $layout-width + px;
  12. margin: 0 auto;
  13. position: relative;
  14. }
  15. /* grid divisions
  16. ============================================== */
  17. .grid-1,
  18. .grid-2,
  19. .grid-3,
  20. .grid-4,
  21. .grid-5,
  22. .grid-6,
  23. .grid-7,
  24. .grid-8,
  25. .grid-9,
  26. .grid-10,
  27. .grid-11,
  28. .grid-12 {
  29. margin: $margin + px $margin + px;
  30. padding: 0;
  31. display: inline;
  32. float: left;
  33. }
  34. @for $i from 1 through $cols {
  35. .grid-#{$i} {
  36. width: (( ($col_width * $i) + ($margin * 2 * ($i - 1)) ) / $layout-width)*100%;
  37. }
  38. }
  39. @for $i from 1 through $cols {
  40. .from-left-#{$i} {
  41. margin-left: ($col_width * $i) + ($margin * 2 * ($i - 1)) + px;
  42. }
  43. }
  44. .grid-centered {
  45. display: block;
  46. float: none;
  47. margin: 0 auto;
  48. }