// Simple Adjustable Gutter Grid for LessCSS (NOT TESTED! But should work)
// For a 960px width, !grid = 80px = 12 columns; 60px = 16 columns
// gutter is base gutter. You can change the gutter per element. See Grid mixin
@pageWidth: 960px;
@grid: 80px;
@gutter: 20px;
//used for page wrapper
.container {
width: @pageWidth;
margin: 0 auto;
}
// Grid mixin functions sets size and width of element boxes. Function variables are as follows
// @col = number of columns,
// @gutterLeft = size of left gutter
// @gutterRight = size of right gutter
//gridFlush sets gutter via padding, gridFloat formed by margin
.gridBase {float: left; overflow: hidden; display: inline;}
.gridFlush(@col: 1,@gutterLeft: @gutter/2, @gutterRight = @gutter/2){
padding-left: @gutterLeft;
padding-right: @gutterRight;
width: @col * @grid - @gutterRight - @gutterLeft;
.gridBase;
}
.gridFloat(@col: 1,@gutterLeft: @gutter/2, @gutterRight = @gutter/2){
margin-left: @gutterLeft;
margin-right: @gutterRight;
width: @col * @grid - @gutterRight - @gutterLeft;
.gridBase;
}
// first is only required if you want to clear a row of elements which did not equal total width
.first { clear: both;}
Hey there! I see you're running Internet Explorer 6.
That's neat. This reminds me of my grandpa. He had this old car that he kept having to fix. He spent so much money on it that he didn't want to get rid of it (even when it stopped running).
0 Comments