Skip to content

Instantly share code, notes, and snippets.

@lucasrcosta
Forked from Aeon/960gs.less
Created January 11, 2012 19:14
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 lucasrcosta/1596255 to your computer and use it in GitHub Desktop.
Save lucasrcosta/1596255 to your computer and use it in GitHub Desktop.
LessCSS and 960gs don't play well together normally. Here's the definitions for 960gs to let LessCSS work with it. Looks like we can pull all grid data out of the HTML.
/**
* A LessCSS version of the 960 Grid System
*
* http://lesscss.org/
* http://960.gs/
*/
/*********************************************************************
* Settings *
*********************************************************************/
/* Maximum width of the document
********************************/
@document_width: 960px;
/* The gutter width
********************************/
@gutter: 20px;
/* Number of columns
********************************/
@columns: 12;
/*********************************************************************
* Container *
*********************************************************************/
.container {
width: @document_width;
margin-left:auto;
margin-right:auto;
}
/*********************************************************************
* Grid *
*********************************************************************/
@column_width: (@document_width - @gutter * @columns) / @columns;
.grid(@col:1) {
width: (@column_width + ((@col - 1) * (@column_width + @gutter)));
display:inline;
float: left;
position: relative;
margin-left: @columns / 2;
margin-right: @columns / 2;
}
/*********************************************************************
* Grid >> Children (Alpha ~ First, Omega ~ Last) *
*********************************************************************/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/*********************************************************************
* Extra Space >> 2 Columns *
*********************************************************************/
.prefix(@col:1) {
padding-left: (@col) * (@column_width + @gutter);
}
.suffix(@col:1) {
padding-right: (@col) * (@column_width + @gutter);
}
/*********************************************************************
* Push & Pull >> 2 Columns *
*********************************************************************/
.push(@col:1) {
left: (@col) * (@column_width + @gutter);
}
.pull(@col:1) {
right: (@col) * (@column_width + @gutter);
}
/*********************************************************************
* Clear Floated Elements *
*********************************************************************/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment