/ Published in: CSS
A simple to use yet very flexible fluid grid with less.
See an example list of [responsive grid layouts](http://snipplr.com/view/73096/example-responsive-grid-layouts-for-responsibly/)
See an example list of [responsive grid layouts](http://snipplr.com/view/73096/example-responsive-grid-layouts-for-responsibly/)
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/** * Grid requirements * * 1. Grid must be fluid so it adjusts on every viewport's content width * 2. Grid must be able to float items on multiple lines, e.g. 4 items on one or 2 lines (2 items each) * 3. Grid should be applicable as HTML classes and/or mixins * 4. You should be able to set up responsive grid layouts * e.g. different amount of columns in different viewports (see requirement 2) * * * Grid specs * * 1. We use percentage widths and spacings to cover requirement 1 * 2. We use a negative margin row with all left margin cols to cover requirement 2 * 3. The grid can be set up completely in HTML by using the given classes: .row, .layout-responsive-x, .col, .col-span-x, .offset-x, etc. * Or you can apply the same styles in LESS by using the mixins: .row(), .layout-responsive-x(), .col(), .col-span(x), .offset(x), etc. * 4. To build a responsive grid use .layout-responsive classes on your grid .rows and declare the .cols inside those layouts. * Use .col-x instead of .col-span-x as logical unit inside such a layout if columns have different sizes * * NEW * Use .ordered, .pull-x and .push-x to optically reposition elements while keeping the html order! * credit for this goes to twitter bootstrap * * * Hint: since everything gets calculated within mixins you could even use float numbers for grid widths ;) * .col-span(3.5) **/ /*--- base variables ---*/ @grid-fixed-width: 960px; @grid-fixed-gutter: 20px; @grid-max-cols: 12; /*-- set up fluid grid ---*/ @grid-fluid-width: 100%; @decimal-places: 3; // used for rounding calculated numbers // fluid gutter is calculated relatively to the static gutter in fixed grid width @grid-fluid-gutter: round(percentage((100 / (@grid-fixed-width / @grid-fixed-gutter)) / 100), @decimal-places); // calculate the width of one grid column @grid-one-col: (@grid-fluid-width - (@grid-fluid-gutter * (@grid-max-cols))) / @grid-max-cols; /*--- mixins ---*/ #grid { .span-width(@num: @grid-max-cols) { width: round((@grid-one-col * @num) + (@grid-fluid-gutter * (@num - 1)), @decimal-places); } .indent(@num: 0) when (@num >= 0) { margin-left: round((@grid-one-col * @num) + (@grid-fluid-gutter * (@num + 1)), @decimal-places); } .indent(@num: -1) when (@num < 0) { margin-left: round((@grid-one-col * @num) + (@grid-fluid-gutter * (@num - 1)), @decimal-places); } .push(@num) when (@num >= 0) { position: relative; left: round((@grid-one-col * @num) + (@grid-fluid-gutter * @num), @decimal-places); } .pull(@num) when (@num >= 0) { position: relative; right: round((@grid-one-col * @num) + (@grid-fluid-gutter * @num), @decimal-places); } // less loop .loop (@index, @class: item, @mixin: '') when (@index > 0) { // create the actual css selector .@{class}-@{index} { #loopMixin > .apply(@mixin, @index); } // next iteration .loop(@index - 1, @class, @mixin); } // end the loop when index is 0 .loop (@index) when (@index = 0) { } } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix { /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ *zoom: 1; &:before, &:after { content: " "; /* 1 */ display: table; /* 2 */ } &:after { clear: both; } } /*--- base layout styles ---*/ .row, .col { display: block; margin-right: 0; padding-left: 0; padding-right: 0; } .row { .clearfix(); margin-left: -@grid-fluid-gutter; &.ordered { position: relative; } } .col { margin-left: @grid-fluid-gutter; float: left; &.spacer { min-height: 1px; } } // make simpler mixins available (mainly for class/mixin name consistency) .col-span(@num: 0) when (@num >= 0) { #grid > .span-width(@num); } .offset(@num: 0) { #grid > .indent(@num); } .push(@num: 0) when (@num >= 0) { #grid > .push(@num); } .pull(@num: 0) when (@num >= 0) { #grid > .pull(@num); } /*--- generate grid classes ---*/ /** * Parameters: * 1) amount of iterations * 2) class selector prefix to generate * 3) mixin to apply to each selector * * Example: * .loop(12, item, 'setTabIndex'); * * NOTE: you can not use the generated classes themselves as mixins! */ .row { #grid > .loop(@grid-max-cols, col-span, 'grid-span'); #grid > .loop(@grid-max-cols - 1, offset, 'grid-offset'); #grid > .loop(@grid-max-cols - 1, push, 'grid-push'); #grid > .loop(@grid-max-cols - 1, pull, 'grid-pull'); } // mixins to call inside less loop #loopMixin { // base grid loops .apply('grid-span', @index) { #grid > .span-width(@index); } .apply('grid-offset', @index) { #grid > .indent(@index); } .apply('grid-push', @index) { #grid > .push(@index); } .apply('grid-pull', @index) { #grid > .pull(@index); } // grid loops end }