github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

simple settings to toggle grids on and off while you work

Browse Source
This commit is contained in:
Eric Meyer 2011-04-17 17:44:33 -06:00
parent 3921e6f856
commit bc8b71b133
1 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
frameworks/compass/stylesheets/compass/layout/_grid-background.scss
View File

@ -2,27 +2,34 @@
@import "compass/css3/background-size";
// Set the color of your columns
$grid-background-column-color : rgba(100, 100, 225, 0.25) !default;
$grid-background-column-color : rgba(100, 100, 225, 0.25) !default;
// Set the color of your gutters
$grid-background-gutter-color : rgba(0, 0, 0, 0) !default;
$grid-background-gutter-color : rgba(0, 0, 0, 0) !default;
// Set the total number of columns in your grid
$grid-background-total-columns : 24 !default;
$grid-background-total-columns : 24 !default;
// Set the width of your columns
$grid-background-column-width : 30px !default;
$grid-background-column-width : 30px !default;
// Set the width of your gutters
$grid-background-gutter-width : 10px !default;
$grid-background-gutter-width : 10px !default;
// Set the offset, if your columns are padded in from the container edge
$grid-background-offset : 0px !default;
$grid-background-offset : 0px !default;
// Set the color of your baseline
$grid-background-baseline-color : rgba(0, 0, 0, 0.5) !default;
$grid-background-baseline-color : rgba(0, 0, 0, 0.5) !default;
// 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
// no matter what units you used to declared your grid.
$grid-background-force-fluid : false !default;
$grid-background-force-fluid : false !default;
// Create the gradient needed for baseline grids
@ -118,9 +125,11 @@ $grid-background-force-fluid : false !default;
$baseline : $grid-background-baseline-height,
$color : $grid-background-baseline-color
) {
@include background-image(get-baseline-gradient($color));
@include background-size(100% $baseline);
background-position: left top;
@if $show-grid-backgrounds and $show-baseline-grid-backgrounds {
@include background-image(get-baseline-gradient($color));
@include background-size(100% $baseline);
background-position: left top;
}
}
// Add just the horizontal grid to an element's background
@ -133,10 +142,12 @@ $grid-background-force-fluid : false !default;
$gutter-color : $grid-background-gutter-color,
$force-fluid : $grid-background-force-fluid
) {
@include background-image(
get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
);
background-position: left top;
@if $show-grid-backgrounds and $show-column-grid-backgrounds {
@include background-image(
get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
);
background-position: left top;
}
}
// Add both horizontal and baseline grids to an element's background
@ -151,10 +162,17 @@ $grid-background-force-fluid : false !default;
$baseline-color : $grid-background-baseline-color,
$force-fluid : $grid-background-force-fluid
) {
@include background-image(
get-baseline-gradient($baseline-color),
get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
);
@include background-size(100% $baseline, auto);
background-position: left top;
@if $show-grid-backgrounds {
@if $show-baseline-grid-backgrounds and $show-column-grid-backgrounds {
@include background-image(
get-baseline-gradient($baseline-color),
get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
);
@include background-size(100% $baseline, auto);
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);
}
}
}