/* Grid System ===============================================================*/
.container {
max-width: 100%; width: 100%; margin: auto; padding: 0 $gutter; &.xl { width: $xl; } &.l { width: $l; } &.m { width: $m; } &.s { width: $s; } @include s() { padding: 0 $gutter/2; }
}
// Rows .row {
margin: 0 (-$gutter/2) $gutter; // Column Grid &:after { content: ""; display: table; clear: both; } &.collapse { margin: 0 !important; .column { padding: 0; } } // Table Grid &.table { @include table(); &:after { content: none; } } &.xl-table { @include xl() { @include table(); } } &.l-table { @include l() { @include table(); } } &.m-table { @include m() { @include table(); } } &.s-table { @include s() { @include table(); } } // Reverse Grid &.reverse { @include reverse(); } &.xl-reverse { @include xl() { @include reverse(); } } &.l-reverse { @include l() { @include reverse(); } } &.m-reverse { @include m() { @include reverse(); } } &.s-reverse { @include s() { @include reverse(); } }
}
// Column Grid .column {
float: left; min-height: 0.125rem; padding: 0 $gutter/2;
} @for $i from 1 through 12 {
.column.l#{$i} { width: percentage($i/12); }
} @include m() {
@for $i from 1 through 12 { .column.m#{$i} { width: percentage($i/12); } }
} @include s() {
@for $i from 1 through 12 { .column.s#{$i} { width: percentage($i/12); } }
}
// Uniform Height Clearing @include l() {
.column.l2:nth-child(6n+1) { clear: both; } .column.l3:nth-child(4n+1) { clear: both; } .column.l4:nth-child(3n+1) { clear: both; } .column.l6:nth-child(2n+1) { clear: both; }
} @include m() {
.column.m2:nth-child(6n+1) { clear: both; } .column.m3:nth-child(4n+1) { clear: both; } .column.m4:nth-child(3n+1) { clear: both; } .column.m6:nth-child(2n+1) { clear: both; }
} @include s() {
.column.s2:nth-child(6n+1) { clear: both; } .column.s3:nth-child(4n+1) { clear: both; } .column.s4:nth-child(3n+1) { clear: both; } .column.s6:nth-child(2n+1) { clear: both; }
}
// Flex Grid .flex {
@include flex(); @include box-orient--vertical(); @include flex-direction(column); .row { @include flex(); @include flex-direction(row); .box { margin: 0 $gutter/2 $gutter; flex: auto; align-self: center; &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } &.center { text-align: center; align-items: center; } } @include s() { @include flex-direction(column); .box { width: 100%; margin: 0 0 $gutter; } } }
}
// Grid helpers @include xl() {
.xl-hide { display: none !important; } .xl-left { text-align: left; } .xl-center { text-align: center; } .xl-right { text-align: right; } .l-show, .m-show, .s-show { display: none !important; }
} @include l() {
.l-hide { display: none !important; } .l-left { text-align: left; } .l-center { text-align: center; } .l-right { text-align: right; } .xl-show, .m-show, .s-show { display: none !important; }
} @include m() {
.m-hide { display: none !important; } .m-left { text-align: left; } .m-center { text-align: center; } .m-right { text-align: right; } .l-show { display: none !important; } .xl-show, .l-show, .s-show { display: none !important; }
} @include s() {
.s-hide { display: none !important; } .s-left { text-align: left; } .s-center { text-align: center; } .s-right { text-align: right; } .l-show { display: none !important; } .xl-show, .l-show, .m-show { display: none !important; }
}