Styles for debugging your grid alignments
This file can be imported using:
@import "blueprint/debug"
=showgrid($image: false)
@if $image
background: image-url($image)
@else
+grid-background($baseline: $blueprint-font-size * 1.5, $column: $blueprint-grid-width, $gutter: $blueprint-grid-margin, $total: $blueprint-grid-columns)
@mixin showgrid($image: false) {
@if $image {
background: image-url($image);
}
@else {
@include grid-background($baseline: $blueprint-font-size * 1.5, $column: $blueprint-grid-width, $gutter: $blueprint-grid-margin, $total: $blueprint-grid-columns);
}
}
Shows a background that can be used to check grid alignment. By default this is a pure css version that only works in browsers that support gradients and multiple backgrounds, but you can pass an image url if you prefer.
=blueprint-debug($grid-image: false)
// Use this class on any column or container to see the grid.
// TODO: prefix this with the project path.
.showgrid
+showgrid($grid-image)
@mixin blueprint-debug($grid-image: false) {
// Use this class on any column or container to see the grid.
// TODO: prefix this with the project path.
.showgrid {
@include showgrid($grid-image);
}
}