1///////////////// 2// Semantic.gs // for LESS: http://lesscss.org/ 3///////////////// 4 5// Defaults which you can freely override 6@column-width: 60; 7@gutter-width: 20; 8@columns: 12; 9 10// Utility variable — you should never need to modify this 11@gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px; 12 13// Set @total-width to 100% for a fluid layout 14@total-width: @gridsystem-width; 15 16// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html 17// @min-width: 960; 18// @correction: 0.5 / @min-width * 100 * 1%; 19 20// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ 21.clearfix() { 22 *zoom:1; 23 24 &:before, 25 &:after { 26 content:""; 27 display:table; 28 } 29 &:after { 30 clear:both; 31 } 32} 33 34 35////////// 36// GRID // 37////////// 38 39body { 40 width: 100%; 41 .clearfix; 42} 43 44.row(@columns:@columns) { 45 display: block; 46 width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width); 47 margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1); 48 // *width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width)-@correction; 49 // *margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1)-@correction; 50 .clearfix; 51} 52.column(@x,@columns:@columns) { 53 display: inline; 54 float: left; 55 width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width); 56 margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width); 57 // *width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width)-@correction; 58 // *margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width)-@correction; 59} 60.push(@offset:1) { 61 margin-left: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width); 62} 63.pull(@offset:1) { 64 margin-right: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width); 65}