Skip to content

Instantly share code, notes, and snippets.

@omnifroodle
Created April 23, 2010 21:42
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 omnifroodle/377223 to your computer and use it in GitHub Desktop.
Save omnifroodle/377223 to your computer and use it in GitHub Desktop.
/*
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/
Licensed under GPL and MIT.
*/
/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 () {
margin-left: auto;
margin-right: auto;
width: 960px;
}
/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid (@level: 1) {
display:inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
width: (@level * 60px) + ((@level - 1) * 20px);
}
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha () {
margin-left: 0;
}
.omega () {
margin-right: 0;
}
.prefix (@plevel: 1) {
padding-left: @plevel * 80px;
}
.suffix (@slevel: 1) {
padding-right: @slevel * 80px;
}
.push (@pulevel: 1) {
left: @pulevel * 80px;
}
.pull (@pllevel: 1) {
left: @pllevel * -80px;
}
/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear (){
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.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