// ----------------------------------------------- // Grid Overlay & Background // // Uses all your settings to create a grid background for a container element. // There are three ways you can display a grid: // // 1. Manually apply the background to the element - // // .container { // @include background-grid; // } // // 2. Add a switch to toggle an overlay - // // @include grid-overlay('.container'); // // 3. Toggle grid with JavaScript // // @include grid-toggle; // Add [data-development-grid="show"] to item you want grid applied to // Add "grid.min.js" to your HTML // // The first will apply a grid background to your container calculated using your // grid settings, media breakpoints etc. // // The second will add a switch to your page which allows you to view a grid // overlay over your container (or if none is provided) by hovering over // the switch. if you need your mouse for other things you can toggle the overlay // on permanently by inspecting and checking :hover in your styles panel. // // The thid will allow you to toggle your background grid on and off by pressing the 'g' on your keyboard. // // Note: Sub-pixel rounding can lead to several pixels of variation between browsers. // ----------------------------------------------- // Imports @import "compass/css3"; // ----------------------------------------------- // Grid Overlay // The overlay is painted over your container's ::after pseudo-element, so we must // give position to the container itself, if relative doesn't suit your layout // it can be replaced by absolute/fixed. $overlay-position: relative !default; // Set the position of the switch. $overlay-switch-position: left bottom !default; $background-grid-color: Chocolate !default; @mixin grid-overlay ( $selector: 'body', $columns: false, $gutter: false, $color: $background-grid-color ) { $vert: nth($overlay-switch-position, 1); $horz: nth($overlay-switch-position, 2); head { display: block; position: fixed; #{$horz}: 10px; #{$vert}: 10px; z-index: 99; color: #333; text-shadow: 0 0 3px #fff; @include transition(all .4s); &::before { content: "||||"; display: block; padding: 10px 14px; letter-spacing: -1; font: { family: sans-serif; size: 26px; weight: bold; } } &:hover { color: #333; text-shadow: 1px 1px #fff; ~ body #{$selector} { position: unquote($overlay-position); } ~ #{$selector}::after, ~ body #{$selector}::after { content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; @include background-grid($columns, $gutter, $color); } } } } // ----------------------------------------------- // Grid Toggle @mixin grid-toggle( $columns: false, $gutter: false, $color: $background-grid-color ) { [data-development-grid="show"] { @include background-grid($columns, $gutter, $color); } } // ----------------------------------------------- // Grid Background @mixin background-grid( $columns: false, $gutter: false, $color: $background-grid-color ) { $background-length: length($grids); @if (not $columns) { $grid: find-grid($columns); @include background-build($grid, $gutter, $color); @if ($grid != $grids) { @for $i from 2 through $background-length { $mq: nth(nth($grids, $i), 2); $grid: nth(nth($grids, $i), 1); @include breakpoint($mq) { @include background-build($grid, $gutter, $color); } } } } @else { @include background-build($columns, $gutter, $color); } } @mixin background-build($columns, $gutter, $color) { $columns: find-grid($columns); $gutter: find-gutter($gutter); $widths: (); $colors: (); $length: length($columns); $symmetric: false; @if type-of($columns) == 'number' or $length == 1 { $symmetric: true; $length: nth($columns, 1); } @for $i from 1 through $length { $column-span: column-span($i, 1, $columns); $gutter-span: $column-span + gutter-span($gutter, $columns); @if $i != $columns { $widths: append($widths, $column-span); $colors: append($colors, rgba($color, .5)); $widths: append($widths, $gutter-span); $colors: append($colors, rgba($color, .25)); } @else { $widths: append($widths, $column-span); $colors: append($colors, rgba($color, .5)); } } @include background-gradient-generate($widths, $colors); } ////////////////////////////// // Get the columns ////////////////////////////// @mixin background-gradient-generate($widths, $colors, $direction: left) { @if (length($widths) != length($colors)) and (length($widths) != length($colors) - 1) { @warn 'You either need an equal number of widths and colors or one less width than color, in which case it is assumed that the last width goes to 100%. Please provide the correct amount of widths and colors.'; } @else { $stops: (); @if length($widths) == (length($colors) - 1) { $widths: append($widths, 100%); } $i: 1; @each $width in $widths { $width: nth($widths, $i); $color: nth($colors, $i); @if $i == 1 { $stops: join($stops, build-gradient-piece($width, $color), comma); } @else { $position: nth($widths, $i - 1); $stops: join($stops, build-gradient-piece($width, $color, $position), comma); } $i: $i + 1; } // @debug $stops; @include background-image( linear-gradient($direction, $stops) ); } } @function build-gradient-piece($width, $color, $position: false) { @if ($position == 'last') { @return ($color $width); } @else if ($position != false) { @return $color $position, $color $width; } @else { @return $color, $color $width; } }