Last active
May 19, 2018 23:49
-
-
Save drhees/8751103d0b7aefa1f94f5d9dc07ace98 to your computer and use it in GitHub Desktop.
SASS baseline grid overlay mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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