Skip to content

Instantly share code, notes, and snippets.

@climboid
Created September 24, 2015 13:41
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save climboid/753b8631c8bce6650829 to your computer and use it in GitHub Desktop.
Just a SCSS grid with configurable gutters
$gutter: 30px;
$columns: 12;
$break-xs: 414px;
$break-sm: 768px;
$break-md: 992px;
$break-lg: 1200px;
.grid {
background: white;
margin: 0 0 $gutter 0;
&:after {
/* Or @extend clearfix */
content: "";
display: table;
clear: both;
}
@for $i from 1 through $columns {
.col-xs-#{$i} {
width : $i * 100% / $columns;
}
}
@for $i from 1 through $columns {
.col-xs-offset-#{$i} {
margin-left : $i * 100% / $columns;
}
}
@media(min-width: $break-sm) {
@for $i from 1 through $columns {
.col-sm-#{$i} {
width : $i * 100% / $columns;
}
}
@for $i from 1 through $columns {
.col-sm-offset-#{$i} {
margin-left : $i * 100% / $columns;
}
}
}
@media(min-width: $break-md) {
@for $i from 1 through $columns {
.col-md-#{$i} {
width : $i * 100% / $columns;
}
}
@for $i from 1 through $columns {
.col-md-offset-#{$i} {
margin-left : $i * 100% / $columns;
}
}
}
@media(min-width: $break-lg) {
@for $i from 1 through $columns {
.col-lg-#{$i} {
width : $i * 100% / $columns;
}
}
@for $i from 1 through $columns {
.col-lg-offset-#{$i} {
margin-left : $i * 100% / $columns;
}
}
}
}
[class*='col-'] {
float: left;
padding-right: $gutter/2;
padding-left: $gutter/2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment