Revision: 63222
Updated Code
at April 17, 2013 02:20 by BuschFunker
Updated Code
/*--- 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');
Revision: 63221
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at April 17, 2013 01:54 by BuschFunker
Initial Code
/*--- variables ---*/ @gridMaxWidth: @contentWidth; @gridMaxCols: 16; @gutter: @hSpacing; @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');
Initial URL
Initial Description
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)
Initial Title
Ultimate grid with LESS
Initial Tags
Initial Language
CSS