Posted By

nerdfiles on 11/19/12


Tagged

css grid SASS mixin scss


Versions (?)

Simple Grid System in SCSS with Mixins


 / Published in: CSS
 

URL: http://webjournal.nerdfiles.net/2012/12/31/benefits-of-noclass-css/

Based on various grid systems.

  1. /**
  2.  * Simple 960 Grid System
  3.  *
  4.  * Adjust grid_width (max width), grid_col (total columns), and
  5.  * grid_gut (gutter) to perfection.
  6.  *
  7.  * @note: Consider base-8 widths for optimal image rendering;
  8.  * or golden ratios; or Villard Diagrams for perspective grids.
  9.  *
  10.  * @see: http://smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/,
  11.  * http://thegridsystem.org/tags/golden-ratio/,
  12.  * http://danielecapo.com/wp/2009/05/04/villard-diagram/,
  13.  * http://code.google.com/p/the-golden-grid/
  14.  *
  15.  * @usage: div.grid-12>div.row>(div.columns-6+div.columns+6), etc.
  16.  */
  17.  
  18. /* Core Settings */
  19.  
  20. $grid_width : 960px;
  21. $grid_col : 12;
  22. $grid_gut : 20px;
  23. body { min-width: $grid_width; }
  24.  
  25. /* Grid Container */
  26.  
  27. .grid-#{$grid_col} {
  28.  
  29. margin-left: auto;
  30. margin-right: auto;
  31. width: $grid_width;
  32.  
  33. /* Grid System Classes */
  34.  
  35. @for $i from 1 through $grid_col {
  36. .columns-#{$i} { display: inline; float: left; margin-left: $grid_gut / 2; margin-right: $grid_gut / 2; }
  37. .push-#{$i}, .pull-#{$i} { position: relative; }
  38. .columns-#{$i} { width: ( ($grid_width / $grid_col - $grid_gut) * $i ) + (($i - 1) * $grid_gut); }
  39. .prefix-#{$i} { padding-left: $grid_width / $grid_col * $i; }
  40. .suffix-#{$i} { padding-right: $grid_width / $grid_col * $i; }
  41. .push-#{$i} { left: $grid_width / $grid_col * $i; }
  42. .pull-#{$i} { right: $grid_width / $grid_col * $i; }
  43. }
  44.  
  45. .row {
  46. zoom: 1;
  47. &:before, &:after {
  48. content: "";
  49. display: table;
  50. }
  51. &:after {
  52. clear: both;
  53. }
  54. }
  55.  
  56. /* Grid Resets */
  57.  
  58. .alpha { margin-left: 0; } // no left margin
  59. .omega { margin-right: 0; } // no right margin
  60.  
  61. /* Grid System Mixins */
  62.  
  63. @mixin row() {
  64. @extend .row;
  65. }
  66.  
  67. @mixin columns($col: 1) {
  68. @extend .columns-#{$col};
  69. }
  70.  
  71. @mixin push($col: 1) {
  72. @extend .push-#{$col};
  73. }
  74.  
  75. @mixin pull($col: 1) {
  76. @extend .pull-#{$col};
  77. }
  78.  
  79. @mixin prefix($col: 1) {
  80. @extend .prefix-#{$col};
  81. }
  82.  
  83. @mixin suffix($col: 1) {
  84. @extend .suffix-#{$grid_col};
  85. }
  86.  
  87. @mixin alpha() {
  88. @extend .alpha;
  89. }
  90.  
  91. @mixin omega() {
  92. @extend .omega;
  93. }
  94.  
  95. }// Grid Container

Report this snippet  

You need to login to post a comment.