// // Grid // —————————————-
// grid mixins/functions
@mixin init-grid() {
.container-liquid, .container-fixed { padding-left: $grid-column-padding; padding-right: $grid-column-padding; @include clearfix(); } .container-fixed { &.left { margin-left: 0; margin-right: auto; float: left; } &, &.center { margin-left: auto; margin-right: auto; } &.right { margin-left: auto; margin-right: 0; float: right; } @include container-fixed(); } .row { margin-left: $grid-column-padding * -1; margin-right: $grid-column-padding * -1; @include clearfix(); } %column-standard-settings { padding-left: $grid-column-padding; padding-right: $grid-column-padding; position: relative; float: left; min-height: 1px; // Prevents empty columns from collapsing } @for $size-index from 1 through length($grid-settings) { $size-settings: nth($grid-settings, $size-index); $screen-size: nth($size-settings, 1); $size-name: map-get($grid-screen-sizes, $screen-size); $size-min: nth($size-settings, 2); $size-max: nth($size-settings, 3); $column-name: #{$grid-column-prefix}#{$size-name}; // shared column settings @for $column-outer-idx from 1 through $grid-number-of-columns { .#{$column-name}-#{$column-outer-idx} { @extend %column-standard-settings; } } // column widths ( -> nested widths) @if $size-min { @if $size-max { @media screen and (min-width: #{$size-min}px) and (max-width: #{$size-max}px) { @include create-columns($size-settings); } } @else { @media screen and (min-width: #{$size-min}px) { @include create-columns($size-settings); } } } @else { @if $size-max { @media screen and (max-width: #{$size-max}px) { @include create-columns($size-settings); } } @else { @include create-columns($size-settings); } } }
}
@mixin grid-debug() {
.grid-debug { &.row, .row { background: url('../images/blackAlpha10.png'); background: rgba(0, 100, 0, .05); } &.container-fixed, .container-fixed { .row { background: rgba(100, 0, 0, .05); } } %debug-col-settings { background: url('../images/greenAlpha10.png'); background: rgba(0, 128, 0, .1); outline: 1px inset #ccc; outline: 1px inset rgba(0, 0, 0, .1); outline-offset: -1px; &:before, &:after { content: ' '; display: block; width: $grid-column-padding; height: 100%; background: url('../images/greenAlpha50.png'); background: rgba(0, 255, 0, .5); position: absolute; top: 0; } &:before { left: 0; } &:after { right: 0; } } %debug-col-settings-fixed { background: url('../images/magentaAlpha10.png'); background: rgba(128, 0, 64, .2); &:before, &:after { background: url('../images/magentaAlpha50.png'); background: rgba(255, 0, 128, .5); } } } @each $size, $size-name in $grid-screen-sizes { $size-name: #{$grid-column-prefix}#{$size-name}; @for $i from 1 through $grid-number-of-columns { .#{$size-name}-#{$i} { @extend %debug-col-settings; } .grid-debug .container-fixed, .container-fixed.grid-debug { .#{$size-name}-#{$i} { @extend %debug-col-settings-fixed; } } } }
}
@mixin create-columns($size-settings) {
// first level columns' widths & offsets; $screen-size: nth($size-settings, 1); $size-name: map-get($grid-screen-sizes, $screen-size); // widths $column-name: #{$grid-column-prefix}#{$size-name}; @for $column-outer-idx from 1 through $grid-number-of-columns { .#{$column-name}-#{$column-outer-idx} { width: percentage($column-outer-idx / $grid-number-of-columns) + .00001; // + .00001 to fix rounding error in safari for col-*-1 at 768 } } // offset @if $compile-grid-offsets { $offset-name: offset-#{$size-name}; $grid-number-of-offsets: $grid-number-of-columns - 1; @for $column-offset-idx from 0 through $grid-number-of-offsets { .#{$offset-name}-#{$column-offset-idx} { @if $column-offset-idx == 0 { margin-left: 0; } @else { margin-left: percentage($column-offset-idx / $grid-number-of-columns); } } } }
}
@mixin create-emphased-classes($grid-settings) {
// manual default values ... .col-emphased { font-weight: bold; } // default size large @media screen and (min-width: #{$grid-large-min}px) and (max-width: #{(-1 + $grid-extra-large-min)}px) { @if $compile-grid-emphased-class { .col-l-emphased { font-weight: bold; } .debug-thingy .screensize.col-l-emphased { color: #fff; } } } @for $size-index from 1 through length($grid-settings) { $size-settings: nth($grid-settings, $size-index); $size-name: map-get($grid-screen-sizes, nth($size-settings, 1)); $size-name: #{$grid-column-prefix}#{$size-name}; $size-min: nth($size-settings, 2); $size-max: nth($size-settings, 3); @if $size-min { @if $size-max { @media screen and (min-width: #{$size-min}px) and (max-width: #{$size-max}px) { @if $compile-grid-emphased-class { .#{$size-name}-emphased { font-weight: bold; } .debug-thingy .screensize.#{$size-name}-emphased { color: #fff; } } } } @else { @media screen and (min-width: #{$size-min}px) { @if $compile-grid-emphased-class { .#{$size-name}-emphased { font-weight: bold; } .debug-thingy .screensize.#{$size-name}-emphased { color: #fff; } } } } } @else { @if $size-max { @media screen and (max-width: #{$size-max}px) { @if $compile-grid-emphased-class { .#{$size-name}-emphased { font-weight: bold; } .debug-thingy .screensize.#{$size-name}-emphased { color: #fff; } } } } } }
}
@mixin create-visibility-classes($grid-settings) {
// manual default values ... .col-hide { display: none !important;} // default size large @media screen and (min-width: #{$grid-large-min}px) and (max-width: #{(-1 + $grid-extra-large-min)}px) { @if $compile-grid-hide-class {.col-l-hide { display: none !important;}} } @media screen and (min-width: #{$grid-extra-large-min}), screen and (max-width: #{(-1 + $grid-large-min)}px) { @if $compile-grid-show-class {.col-l-show { display: none !important; }} } @for $size-index from 1 through length($grid-settings) { $size-settings: nth($grid-settings, $size-index); $size-name: map-get($grid-screen-sizes, nth($size-settings, 1)); $size-name: #{$grid-column-prefix}#{$size-name}; $size-min-hide: nth($size-settings, 2); $size-max-hide: nth($size-settings, 3); $size-min-show: nth($size-settings, 2) - 1; $size-max-show: nth($size-settings, 3) + 1; @if $size-min-hide { @if $size-max-hide { @media screen and (min-width: #{$size-min-hide}px) and (max-width: #{$size-max-hide}px) { @if $compile-grid-hide-class {.#{$size-name}-hide { display: none !important; }} } @media screen and (max-width: #{$size-min-show}px), screen and (min-width: #{$size-max-show}px) { @if $compile-grid-show-class {.#{$size-name}-show { display: none !important; }} } } @else { @media screen and (min-width: #{$size-min-hide}px) { @if $compile-grid-hide-class {.#{$size-name}-hide { display: none !important; }} } @media screen and (max-width: #{$size-min-show}px) { @if $compile-grid-show-class {.#{$size-name}-show { display: none !important; }} } } } @else { @if $size-max-hide { @media screen and (max-width: #{$size-max-hide}px) { @if $compile-grid-hide-class {.#{$size-name}-hide { display: none !important; }} } @media screen and (min-width: #{$size-max-show}px) { @if $compile-grid-show-class {.#{$size-name}-show { display: none !important; }} } } } }
}
// grid initialization //
@if $compile-grid {
@include init-grid(); // deprecated in favor of .visibile-* and hidden-* in v2.1.0 @include create-visibility-classes($grid-settings-size-exclusive);
}