simple settings to toggle grids on and off while you work
This commit is contained in:
parent
3921e6f856
commit
bc8b71b133
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user