Skip to content

Instantly share code, notes, and snippets.

@minipai
Created December 24, 2010 06:08
Show Gist options
  • Save minipai/753956 to your computer and use it in GitHub Desktop.
Save minipai/753956 to your computer and use it in GitHub Desktop.
960 style grid in LESS
@grid_width: 60px;
@grid_num: 12;
@gutter: 10px;
@total_width: (@grid_width + @gutter * 2) * @grid_num;
.grid_width (@grid_num: 1) {
width: (@grid_width + @gutter * 2) * @grid_num - @gutter * 2;
}
.container {
width: @total_width;
margin-left: auto;
margin-right: auto;
}
.grid(@grid_num) {
.grid_width (@grid_num);
display: inline;
margin-left: @gutter;
margin-right: @gutter;
float: left;
}
.prefix(@grid_num) {
padding-left: (@grid_width + @gutter*2) * @grid_num;
}
.suffix(@grid_num) {
padding-right: (@grid_width + @gutter*2) * @grid_num;
}
.push(@grid_num) {
left: (@grid_width + @gutter*2) * @grid_num;
position: relative;
}
.pull(@grid_num) {
right: (@grid_width + @gutter*2) * @grid_num;
position: relative;
}
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment