Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SASS baseline grid overlay mixin
// Baseline grid
// Overlays a baseline grid on your pages.
$show-baseline-grid: false !default ;
$baseline-grid-color: rgb(204, 204, 204) !default;
$baseline-grid-opacity: 0.8 !default;
$baseline-top-offset: 0 !default;
// When no grid row height is given, we assume each row is 16px * 1.5 tall.
$baseline-grid-height: 16 * 1.5 !default; // 1rem * line-height: normal
@mixin baseline-grid($grid-height: 24) {
body {
// Force ::after psuedo element fill to the height of the body.
position: relative;
&:after {
display: block;
position: absolute;
width: auto;
height: auto;
z-index: 9999;
content: "";
pointer-events: none;
right: 0px;
bottom: 0px;
left: 0px;
opacity: $baseline-opacity;
// Configure top offset
top: $baseline-top-offset;
// Draw grid
background: linear-gradient(#{$baseline-color} 1px, transparent 1px) left top / 1px #{$grid-height+px};
}
// Hides grid psuedo element when clicked. This can happen on browswers that don't support the pointer-events rule.
&:active:after {
display: none;
}
}
}
// -----------------------------------------------------------------------------
//
// ++ LOOK BELOW ++
// X<---------->X
// XXXXXXXXXXXXXXXX
// XXXXXXXXXXXXXXXX
// XXXXXXXXXXXXXXXXXX
// __ XXXXXXXXXXXXXXXXXX ___
// |XXX\___ XXXXXXXXXXXXXXXXXXXX ___/XXX|
// |XXXXXXX\ XXXXXXXXXXXXXXXXXXXX /XXXXXXX|
// |XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
// |XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
// |XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
// |---+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX+--|
// |---+---+XXXXXXXXXXXXXXXXXXXXXXX+---+--|
// \--+---+---+XXXXXXXXXXXXXXX+---+---+--/
// \+---+---+--+XXXXXXXXX+--+---+---+/
// \+---+--+--+XXX+--+--+---+/
// \+--+--+---+--+--+/
// \+--+---+--+/
// \+---+/
//
// -----------------------------------------------------------------------------
// Uncomment the next section to turn the grid on.
// @if $show-baseline-grid {
// @warn "Baseline grids are on! Please disable before deploying.";
// @include baseline-grid($baseline-grid-height);
// }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment