Skip to content

Instantly share code, notes, and snippets.

@brettbuddin
Created October 17, 2010 17:17
Show Gist options
  • Save brettbuddin/631039 to your computer and use it in GitHub Desktop.
Save brettbuddin/631039 to your computer and use it in GitHub Desktop.
My sassy CSS grid template. This is usually where I start from.
$column_width: 60px;
$gutter_width: 20px;
$columns: 12;
.container {
margin-bottom: 2em;
width: ($column_width * $columns) + ($columns - 1 * $gutter_width);
}
.clearfix, .container { display: block; }
.clearfix:after,
.container:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
.column { float: left; margin-right: $gutter_width; }
.first { clear: left; }
.last { margin-right: 0; }
@for $i from 1 through $columns {
.span-#{$i} {
width: $column_width * $i + ($gutter_width * ($i - 1));
position: relative;
}
}
@for $i from 1 through $columns - 1 {
.push-#{$i} {
margin-right: -$column_width * $i + ($gutter_width * ($i - 1));
margin-left: $column_width * $i + ($gutter_width * ($i - 1));
}
.pull-#{$i} { margin-left: -$column_width * $i + ($gutter_width * ($i - 1)); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment