Skip to content

Instantly share code, notes, and snippets.

@zerob13
Created August 9, 2016 03:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zerob13/853a190b692a2897f51ca170c443a7b1 to your computer and use it in GitHub Desktop.
Save zerob13/853a190b692a2897f51ca170c443a7b1 to your computer and use it in GitHub Desktop.
1200px grid system scss
.container_15 {
width: 1200px;
margin-left: auto;
margin-right: auto
}
@for $i from 1 through 15{
.grid_#{$i} {
position: relative;
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px
}
}
.alpha {
margin-left: 0px
}
.omega {
margin-right: 0px
}
.container_15{
@for $i from 1 through 15{
.grid_#{$i} {
width: 60px * $i + 20px * ($i - 1);
}
}
@for $i from 1 through 11{
.prefix_#{$i}{
padding-left: 80px * $i;
}
}
@for $i from 1 through 11{
.suffix_#{$i}{
padding-right:80px * $i;
}
}
@for $i from 1 through 11{
.push_#{$i}{
left:80px*$i
}
}
@for $i from 1 through 11{
.pull_#{$i}{
left:-80px*$i
}
}
}
.clear {
width: 0px;
display: block;
height: 0px;
visibility: hidden;
clear: both;
overflow: hidden
}
.clearfix:after {
line-height: 0;
width: 0px;
display: block;
height: 0px;
visibility: hidden;
clear: both;
font-size: 0px;
content: ' '
}
.clearfix {
display: inline-block
}
* HTML .clearfix {
height: 1%
}
.clearfix {
display: block
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment