5px Baseline grid

app.html

<!-- 5px baseline grid conditionally added to application layout in development and not production, put at end of of page next to </body> -->
<style>
.baseline_grid_toggle {
  position: fixed;
  left: 0;
  bottom: 0;
  background: #600;
  color: #fff;
  font-size: 11px;
  padding: 1px 8px;
  cursor: pointer;
}
.baseline_grid {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
  background-repeat: repeat;
  // base64 encoded 5px block with 5px spacing
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY5NDMwQzgzMDg4RDExRTU5NDlGRTE3QUQxMEQ0NDY3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY5NDMwQzg0MDg4RDExRTU5NDlGRTE3QUQxMEQ0NDY3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Rjk0MzBDODEwODhEMTFFNTk0OUZFMTdBRDEwRDQ0NjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk0MzBDODIwODhEMTFFNTk0OUZFMTdBRDEwRDQ0NjciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7YvL7kAAAAIElEQVR42mL8//8/AzGAiYFIMIAKWRgPMIQMF88ABBgAsbsEKILHaEsAAAAASUVORK5CYII=);
}
.baseline_grid.js-show {
  display: block;
}
}
</style>
<span class="baseline_grid_toggle">Toggle baseline grid</span>
<span class="baseline_grid"></span>
<script>
 document.querySelectorAll(".baseline_grid_toggle")[0].addEventListener("click",function(event){
    event.preventDefault();
    if (new RegExp('(^| )js-show( |$)', 'gi').test(this.nextElementSibling.className)) {
      this.nextElementSibling.className = 'baseline_grid';
    } else {
      this.nextElementSibling.className = 'baseline_grid js-show';
    }
},false);
</script>