// ============================================================================= // Grid // =============================================================================
// Settings // =============================================================================
// Create widths for each column.
@mixin column-generator() {
@for $i from 1 through ($columns - 1) { &.with-#{$i}col { width: $one-column * $i; } }
}
// Create offsets for columns.
@mixin offset-generator() {
@for $i from 1 through ($columns - 1) { &.with-#{$i}off { margin-left: $one-column * $i; } }
}
// Reset column width to 100%. // Reset offsets to a margin-left of 0.
@mixin responsive-grid-generator() {
@for $i from 1 through ($columns - 1) { &.with-#{$i}col { width: 100%; } &.with-#{$i}off { margin-left: 0; } }
}
// Component // =============================================================================
.grid {
display: block; padding: 0; margin: 0 $negative-gutter; font-size: 0; text-align: left;
}
// Descendants // =============================================================================
// Creates a grid cell. Add `with-co`l to define the number of coloms the // cell needs to span. Do not use 'with-col` if you wish to span the entire // width.
.grid-cell {
@include column-generator(); @include offset-generator(); display: inline-block; width: 100%; padding: 0 $gutter; margin: 0; font-size: $base-font-size; text-align: left; vertical-align: top; &.is-centered { text-align: center; } &.is-right { text-align: right; } &.is-top { vertical-align: top; } &.is-middle { vertical-align: middle; } &.is-bottom { vertical-align: bottom; }
}
// Centers your grid container with a max-width.
.grid-centered {
max-width: $max-width; margin-right: auto; margin-left: auto;
}
// Responsive // =============================================================================
@include breakpoint(small) {
.grid-cell { @include responsive-grid-generator(); }
}