Skip to content

Instantly share code, notes, and snippets.

@davidicus
Last active August 29, 2015 14:04
Show Gist options
  • Save davidicus/c64d83038c9765cd96e4 to your computer and use it in GitHub Desktop.
Save davidicus/c64d83038c9765cd96e4 to your computer and use it in GitHub Desktop.
A grid by @Guilh made with sass
.grid-1 {
width: 6.5%;
}
.grid-2 {
width: 15%;
}
.grid-3 {
width: 23.5%;
}
.grid-4 {
width: 32%;
}
.grid-5 {
width: 40.5%;
}
.grid-6 {
width: 49%;
}
.grid-7 {
width: 57.5%;
}
.grid-8 {
width: 66%;
}
.grid-9 {
width: 74.5%;
}
.grid-10 {
width: 83%;
}
.grid-11 {
width: 91.5%;
}
.grid-12 {
width: 100%;
}
// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----
$col-width : 65px;
$gutter-width : 20px;
$columns : 12;
@for $i from 1 through $columns {
// Set container width relative to user variables
$width: ($col-width * $columns) + ($gutter-width * ($columns - 1));
// First, calculate grid size in pixels
$grid: ($col-width * $i) + ($gutter-width * ($i - 1));
// Then, calculate the responsive grid
$grid: ($grid / $width) * 100%;
// Generate the grid classes
.grid-#{$i} {
width: $grid;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment