Skip to content

Instantly share code, notes, and snippets.

@jcornelius

jcornelius/_grid.scss

Last active Aug 29, 2015
Embed
What would you like to do?
Simple Grid in Sass
////////////////////////////////////////////
// Grid.scss
// Configs
$width: 960px;
$full: 100;
$common: 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100;
$gutter-width: 30px;
%container {
max-width: $width;
width: percentage($full);
margin-right: auto;
margin-left: auto;
padding-bottom:3em;
padding-left: ($gutter-width / 2);
padding-right: ($gutter-width / 2);
@include clearfix();
}
%row {
margin-bottom:1em;
margin-left: ($gutter-width / -2);
margin-right: ($gutter-width / -2);
@include clearfix();
}
////////////////////////////////////////////
// Columns and Offsets
@each $i in $common {
$row-full: $full;
@if ($i == 33) or ($i == 66) {
$row-full: $full - 1;
}
%col-#{$i} {
float:left;
min-height: 1px;
padding-left: ($gutter-width / 2);
padding-right: ($gutter-width / 2);
position: relative;
width: percentage($i / $row-full);
@include breakpoint(xs){
width: $full;
padding-left: 0;
padding-right: 0;
}
}
%offset-#{$i} {
margin-left: percentage($i / $row-full);
@include breakpoint(xs){
left: 0;
}
@include breakpoint(sm){
left: 0;
}
}
}
// Portrait Tablet
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
%col-33, %col-40, %col-60, %col-66 {
width: $full / 2;
}
}
//////////////////////////
// Content Scaffold
main {
@extend %container;
>div {
@extend %row;
.content {
@extend %col-100;
article {
@extend %col-75;
}
aside {
@extend %col-25;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment