Skip to content

Instantly share code, notes, and snippets.

@craigmdennis
Created December 8, 2011 13:01
Show Gist options
  • Save craigmdennis/1446936 to your computer and use it in GitHub Desktop.
Save craigmdennis/1446936 to your computer and use it in GitHub Desktop.
Simple LESS Grid Calculator
#grid {
/* Consult http://gridulator.com for viable grids */
@totalColumns: 12;
@siteWidth: 960px;
@margin: 10px;
.container() {
margin-left: auto;
margin-right: auto;
width: @siteWidth;
}
.columns(@columnNumber, @float:left) {
display: inline;
float: @float;
margin-left: @margin / 2;
margin-right: @margin / 2;
width: ((@siteWidth / @totalColumns) * @columnNumber) - @margin;
.clearfix();
}
}
.container {
#grid > .container();
}
.content {
#grid > .columns(8);
}
.sidebar {
#grid > .columns(4);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment