Skip to content

Instantly share code, notes, and snippets.

@Samstiles
Created February 9, 2015 16:29
Show Gist options
  • Save Samstiles/087454c7c8aabdded6b0 to your computer and use it in GitHub Desktop.
Save Samstiles/087454c7c8aabdded6b0 to your computer and use it in GitHub Desktop.
.container {
padding: 0 1.5rem;
margin: 0 auto;
max-width: 1280px;
width: 90%;
}
@media only screen and (min-width: 601px) {
.container {
width: 85%;
}
}
@media only screen and (min-width: 993px) {
.container {
width: 70%;
}
}
.container .row {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
.section {
padding-top: 1rem;
padding-bottom: 1rem;
}
.section.no-pad {
padding: 0;
}
.section.no-pad-bot {
padding-bottom: 0;
}
.section.no-pad-top {
padding-top: 0;
}
.row {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.row .col {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 0.75rem;
}
.row .col.s1 {
width: 8.33333%;
margin-left: 0;
}
.row .col.s2 {
width: 16.66667%;
margin-left: 0;
}
.row .col.s3 {
width: 25%;
margin-left: 0;
}
.row .col.s4 {
width: 33.33333%;
margin-left: 0;
}
.row .col.s5 {
width: 41.66667%;
margin-left: 0;
}
.row .col.s6 {
width: 50%;
margin-left: 0;
}
.row .col.s7 {
width: 58.33333%;
margin-left: 0;
}
.row .col.s8 {
width: 66.66667%;
margin-left: 0;
}
.row .col.s9 {
width: 75%;
margin-left: 0;
}
.row .col.s10 {
width: 83.33333%;
margin-left: 0;
}
.row .col.s11 {
width: 91.66667%;
margin-left: 0;
}
.row .col.s12 {
width: 100%;
margin-left: 0;
}
.row .col.offset-s1 {
margin-left: 8.33333%;
}
.row .col.offset-s2 {
margin-left: 16.66667%;
}
.row .col.offset-s3 {
margin-left: 25%;
}
.row .col.offset-s4 {
margin-left: 33.33333%;
}
.row .col.offset-s5 {
margin-left: 41.66667%;
}
.row .col.offset-s6 {
margin-left: 50%;
}
.row .col.offset-s7 {
margin-left: 58.33333%;
}
.row .col.offset-s8 {
margin-left: 66.66667%;
}
.row .col.offset-s9 {
margin-left: 75%;
}
.row .col.offset-s10 {
margin-left: 83.33333%;
}
.row .col.offset-s11 {
margin-left: 91.66667%;
}
.row .col.offset-s12 {
margin-left: 100%;
}
@media only screen and (min-width: 601px) {
.row .col.m1 {
width: 8.33333%;
margin-left: 0;
}
.row .col.m2 {
width: 16.66667%;
margin-left: 0;
}
.row .col.m3 {
width: 25%;
margin-left: 0;
}
.row .col.m4 {
width: 33.33333%;
margin-left: 0;
}
.row .col.m5 {
width: 41.66667%;
margin-left: 0;
}
.row .col.m6 {
width: 50%;
margin-left: 0;
}
.row .col.m7 {
width: 58.33333%;
margin-left: 0;
}
.row .col.m8 {
width: 66.66667%;
margin-left: 0;
}
.row .col.m9 {
width: 75%;
margin-left: 0;
}
.row .col.m10 {
width: 83.33333%;
margin-left: 0;
}
.row .col.m11 {
width: 91.66667%;
margin-left: 0;
}
.row .col.m12 {
width: 100%;
margin-left: 0;
}
.row .col.offset-m1 {
margin-left: 8.33333%;
}
.row .col.offset-m2 {
margin-left: 16.66667%;
}
.row .col.offset-m3 {
margin-left: 25%;
}
.row .col.offset-m4 {
margin-left: 33.33333%;
}
.row .col.offset-m5 {
margin-left: 41.66667%;
}
.row .col.offset-m6 {
margin-left: 50%;
}
.row .col.offset-m7 {
margin-left: 58.33333%;
}
.row .col.offset-m8 {
margin-left: 66.66667%;
}
.row .col.offset-m9 {
margin-left: 75%;
}
.row .col.offset-m10 {
margin-left: 83.33333%;
}
.row .col.offset-m11 {
margin-left: 91.66667%;
}
.row .col.offset-m12 {
margin-left: 100%;
}
}
@media only screen and (min-width: 993px) {
.row .col.l1 {
width: 8.33333%;
margin-left: 0;
}
.row .col.l2 {
width: 16.66667%;
margin-left: 0;
}
.row .col.l3 {
width: 25%;
margin-left: 0;
}
.row .col.l4 {
width: 33.33333%;
margin-left: 0;
}
.row .col.l5 {
width: 41.66667%;
margin-left: 0;
}
.row .col.l6 {
width: 50%;
margin-left: 0;
}
.row .col.l7 {
width: 58.33333%;
margin-left: 0;
}
.row .col.l8 {
width: 66.66667%;
margin-left: 0;
}
.row .col.l9 {
width: 75%;
margin-left: 0;
}
.row .col.l10 {
width: 83.33333%;
margin-left: 0;
}
.row .col.l11 {
width: 91.66667%;
margin-left: 0;
}
.row .col.l12 {
width: 100%;
margin-left: 0;
}
.row .col.offset-l1 {
margin-left: 8.33333%;
}
.row .col.offset-l2 {
margin-left: 16.66667%;
}
.row .col.offset-l3 {
margin-left: 25%;
}
.row .col.offset-l4 {
margin-left: 33.33333%;
}
.row .col.offset-l5 {
margin-left: 41.66667%;
}
.row .col.offset-l6 {
margin-left: 50%;
}
.row .col.offset-l7 {
margin-left: 58.33333%;
}
.row .col.offset-l8 {
margin-left: 66.66667%;
}
.row .col.offset-l9 {
margin-left: 75%;
}
.row .col.offset-l10 {
margin-left: 83.33333%;
}
.row .col.offset-l11 {
margin-left: 91.66667%;
}
.row .col.offset-l12 {
margin-left: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment