/* ==========================================================================
Watermark Flexible Grid ========================================================================== */
$row-width: 960px !default; //60rem !default; $column-gutter: .9375rem !default; $total-columns: 12 !default; $show-grid: false !default;
.flex-row {
@include clearfix; margin: 0 auto; max-width: $row-width; width: 100%; // nested row .flex-row { margin-bottom: 0; margin-left: -($column-gutter); margin-right: -($column-gutter); margin-top: 0; width: auto; } &.collapse > .column, &.collapse > .columns { padding-left: 0; padding-right: 0; } &.collapse-outer > .column, &.collapse-outer > .columns { &:first-child { padding-left: 0; } &:last-child { padding-right: 0; } } &.full-width { max-width: none; }
}
// all columns need the .column class .column, .columns {
float: left; padding-left: $column-gutter; padding-right: $column-gutter; position: relative; width: 100%; // center a column &.centered { float: none; margin-left: auto; margin-right: auto; } // if $show-grid is set to true all grid columns will // be visible, just for test or example purposes @if $show-grid == true { background-color: rgba(red,.1); border: 1px solid rgba(red,.2); border-top: none; border-bottom: none; }
}
// // Column-widths created dynamically //
// generate small grid classes @for $i from 1 through $total-columns {
.small-#{$i} { width: ((100 / $total-columns) * $i) * 1%; } .small-offset-#{$i} { margin-left: ((100 / $total-columns) * $i) * 1%; } .small-push-#{$i} { position: relative; left: ((100 / $total-columns) * $i) * 1%; right: auto; } .small-pull-#{$i} { position: relative; right: ((100 / $total-columns) * $i) * 1%; left: auto; }
}
@media screen and (min-width: $medium-breakpoint) {
// generate flexible grid above mobile @for $i from 1 through $total-columns { .medium-#{$i} { width: ((100 / $total-columns) * $i) * 1%; } .medium-offset-#{$i} { margin-left: ((100 / $total-columns) * $i) * 1%; } .medium-push-#{$i} { position: relative; left: ((100 / $total-columns) * $i) * 1%; right: auto; } .medium-pull-#{$i} { position: relative; right: ((100 / $total-columns) * $i) * 1%; left: auto; } } .medium-reset-order { float: left; margin-left: 0; margin-right: 0; left: auto; right: auto; }
}
@media screen and (min-width: $large-breakpoint) {
@for $i from 1 through $total-columns { .large-#{$i} { width: ((100 / $total-columns) * $i) * 1%; } .large-offset-#{$i} { margin-left: ((100 / $total-columns) * $i) * 1%; } .large-push-#{$i} { position: relative; left: ((100 / $total-columns) * $i) * 1%; right: auto; } .large-pull-#{$i} { position: relative; right: ((100 / $total-columns) * $i) * 1%; left: auto; } } .large-reset-order { float: left; margin-left: 0; margin-right: 0; left: auto; right: auto; }
}