Skip to content

Instantly share code, notes, and snippets.

@eralston
Created May 12, 2011 00:17
Show Gist options
  • Save eralston/967684 to your computer and use it in GitHub Desktop.
Save eralston/967684 to your computer and use it in GitHub Desktop.
A paramterized SASS implementation of 1KB Grid, allowing for different parameters
//basic parameters - Change for your grid
$number_of_columns: 10
$width_of_gutters: 20px
$width_of_grid: 900px
//calculate parameters
$column_width:($width_of_grid / $number_of_columns - $width_of_gutters)
$padding: $width_of_gutters / 2
.col
margin: $width_of_gutters $padding 0px $padding
overflow: hidden
float: left
display: inline
@for $i from 1 through $number_of_columns
.col-#{$i}
@extend .col
width: $i * $column_width + (($i - 1) * $width_of_gutters)
.row
width: $width_of_grid
margin: 0px auto
overflow: hidden
.row .row
margin: 0 -1 * $padding
width: auto
display: inline-block
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment