simple settings to toggle grids on and off while you work

This commit is contained in:
Eric Meyer 2011-04-17 17:44:33 -06:00
parent 3921e6f856
commit bc8b71b133

View File

@ -20,6 +20,13 @@ $grid-background-baseline-color : rgba(0, 0, 0, 0.5) !default;
// Set the height of your baseline grid // Set the height of your baseline grid
$grid-background-baseline-height : 1.5em !default; $grid-background-baseline-height : 1.5em !default;
// toggle your columns grids on and off
$show-column-grid-backgrounds : true !default;
// toggle your vertical grids on and off
$show-baseline-grid-backgrounds : true !default;
// toggle all your grids on and off
$show-grid-backgrounds : true !default;
// optionally force your grid-image to remain fluid // optionally force your grid-image to remain fluid
// no matter what units you used to declared your grid. // no matter what units you used to declared your grid.
$grid-background-force-fluid : false !default; $grid-background-force-fluid : false !default;
@ -118,10 +125,12 @@ $grid-background-force-fluid : false !default;
$baseline : $grid-background-baseline-height, $baseline : $grid-background-baseline-height,
$color : $grid-background-baseline-color $color : $grid-background-baseline-color
) { ) {
@if $show-grid-backgrounds and $show-baseline-grid-backgrounds {
@include background-image(get-baseline-gradient($color)); @include background-image(get-baseline-gradient($color));
@include background-size(100% $baseline); @include background-size(100% $baseline);
background-position: left top; background-position: left top;
} }
}
// Add just the horizontal grid to an element's background // Add just the horizontal grid to an element's background
@mixin column-grid-background( @mixin column-grid-background(
@ -133,11 +142,13 @@ $grid-background-force-fluid : false !default;
$gutter-color : $grid-background-gutter-color, $gutter-color : $grid-background-gutter-color,
$force-fluid : $grid-background-force-fluid $force-fluid : $grid-background-force-fluid
) { ) {
@if $show-grid-backgrounds and $show-column-grid-backgrounds {
@include background-image( @include background-image(
get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid) get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
); );
background-position: left top; background-position: left top;
} }
}
// Add both horizontal and baseline grids to an element's background // Add both horizontal and baseline grids to an element's background
@mixin grid-background( @mixin grid-background(
@ -151,10 +162,17 @@ $grid-background-force-fluid : false !default;
$baseline-color : $grid-background-baseline-color, $baseline-color : $grid-background-baseline-color,
$force-fluid : $grid-background-force-fluid $force-fluid : $grid-background-force-fluid
) { ) {
@if $show-grid-backgrounds {
@if $show-baseline-grid-backgrounds and $show-column-grid-backgrounds {
@include background-image( @include background-image(
get-baseline-gradient($baseline-color), get-baseline-gradient($baseline-color),
get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid) get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
); );
@include background-size(100% $baseline, auto); @include background-size(100% $baseline, auto);
background-position: left top; background-position: left top;
} @else {
@include baseline-grid-background($baseline, $baseline-color);
@include column-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid);
}
}
} }