/ Published in: CSS
Let LESS generate your grid classes!
[Get the .loop mixin](http://snipplr.com/view/70819/less-loop-to-generate-classes/)
This is now a fully grown and flexible to use [grid system on github](https://github.com/SimonHarte/responsibly)
[Get the .loop mixin](http://snipplr.com/view/70819/less-loop-to-generate-classes/)
This is now a fully grown and flexible to use [grid system on github](https://github.com/SimonHarte/responsibly)
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/*--- variables ---*/ @gridMaxWidth: 960; @gridMaxCols: 16; @gutter: 20; @oneCol: (@gridMaxWidth - (@gutter * (@gridMaxCols - 1))) / @gridMaxCols; /*--- mixins ---*/ #grid { .span-width(@num: 1) { width: (@oneCol * @num) + (@gutter * (@num - 1)); } .indent(@num: 1) when (@num > 0) { margin-left: (@oneCol * @num) + (@gutter * (@num + 1)); } .indent(@num: 1) when (@num < 0) { margin-left: (@oneCol * @num) + (@gutter * (@num - 1)); } } /*--- base layout styles ---*/ .row { .cf(); // clearfix margin: 0 0 0 -@gutter; padding: 0; } .col { display: block; padding: 0; float: left; margin-left: @gutter; } /*--- generate grid classes ---*/ .loop(@gridMaxCols, span, 'gridSpan'); .loop(@gridMaxCols - 1, push, 'gridPush'); .loop(@gridMaxCols - 1, pull, 'gridPull');