Grid Overlay for Testing Vertical Rhythm

vertical-rhythm-grid.scss

// For Testing
// Vertical rhythm grid
// Based on the Bourbon/Neat Column Grid Mixin 

$vertical-grid: no !global;
$vertical-grid-color: #444444 !global;
$vertical-grid-index: front !global;
$vertical-grid-height: (1em * 1.5);
$vertical-grid-opacity: 0.3 !global;

@mixin grid-vertical-rhythm($grid-height) {

  $transparent: rgba(0,0,0,0);
  $color: $vertical-grid-color;
  $repeat: $grid-height * 2;

  background-image: -webkit-repeating-linear-gradient(to bottom, $transparent, $transparent $grid-height, $color $grid-height, $color $repeat);
  background-image: -moz-repeating-linear-gradient(to bottom, $transparent, $transparent $grid-height, $color $grid-height, $color $repeat);
  background-image: -ms-repeating-linear-gradient(to bottom, $transparent, $transparent $grid-height, $color $grid-height, $color $repeat);
  background-image: -o-repeating-linear-gradient(to bottom, $transparent, $transparent $grid-height, $color $grid-height, $color $repeat);
  background-image: repeating-linear-gradient(to bottom, $transparent, $transparent $grid-height, $color $grid-height, $color $repeat);
}

@if $vertical-grid == true or $vertical-grid == yes {
  body:before {
	content: '';
	display: inline-block;
	@include grid-vertical-rhythm($vertical-grid-height);
	height: 100%;
	left: 0;
	margin: 0 auto;
	opacity: $vertical-grid-opacity;
	position: fixed;
	right: 0;
	width: 100%;
	pointer-events: none;

	@if $vertical-grid-index == back {
	  z-index: -1;
	}

	@else if $vertical-grid-index == front {
	  z-index: 9999;
	}
    }
}