Skip to content

Instantly share code, notes, and snippets.

@gordonbrander
Created August 31, 2012 23:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gordonbrander/3560923 to your computer and use it in GitHub Desktop.
Save gordonbrander/3560923 to your computer and use it in GitHub Desktop.
Flexible Grid factory in Less
/* Creates a grid with a margins on either side of all units. To do the left-margin style of grid, change the .unit definition, subtracting 1 from the number of columns. */
@context: 740px;
@col: 40px;
@gutter: 20px;
.unit(@cols) {
@target: (@cols * @col) + (@cols * @gutter);
width: 100% * (@target / @context);
}
.gutter() {
@target: (@gutter/2);
@margin: 100% * (@target/@context);
margin-left: @margin;
margin-right: @margin;
}
[class*="unit-"] {
float: left;
min-height: 1px;
.gutter;
}
.grid-12 {
.unit-1 {
.unit(1);
}
.unit-2 {
.unit(2);
}
.unit-3 {
.unit(3);
}
.unit-4 {
.unit(4);
}
.unit-5 {
.unit(5);
}
.unit-6 {
.unit(6);
}
.unit-7 {
.unit(7);
}
.unit-8 {
.unit(8);
}
.unit-9 {
.unit(9);
}
.unit-10 {
.unit(10);
}
.unit-11 {
.unit(11);
}
.unit-12 {
.unit(12);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment