Vertical Rhythm Guides and Helper Bookmarklet

verticalRhythmHelper.js

/**
 * Tiny helper that adds horizontal guidelines over the complete website.
 * It can be used to validate the "vertical rhythm" in the current document.
 *
 * Use UP/DOWN keys to adjust height when cursor is inside text input.
 */
(function (d) {
  var ROW_HEIGHT = 24;

  function resetGrid(rowHeight) {
    var numRows = Math.ceil(d.body.scrollHeight / rowHeight);
    var containerEl = d.querySelector('#vr-grid') || d.createElement('div');

    containerEl.innerHTML = '';
    containerEl.style = 'position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; pointer-events: none';
    containerEl.setAttribute('id', 'vr-grid');
    for (var i=0; i < numRows; i += 1) {
      var rowEl = d.createElement('div');
      rowEl.style = 'position: absolute; width: 100%; left: 0px; top: ' + ((i + 1) * rowHeight) + 'px;height: 0px; border-bottom: dashed 1px rgba(0, 0, 0, 0.5);   mix-blend-mode: luminosity;';
      containerEl.appendChild(rowEl);
      // document.body.appendChild(rowEl);
    }
    d.body.appendChild(containerEl);
  }

  // create controls
  var controlsEl = d.createElement('div');
  controlsEl.style = 'position:fixed;top:10px;left:10px;background:#4a4a4a;border-radius:4px;padding:5px;z-index:100;';
  controlsEl.innerHTML = `<a target="_blank" href="https://gist.github.com/ryx/f68dd641f10f75e7ef2be20cc26cc835" title="Vertical Rhythm Helper" style="color:#fff">VRH</a>
    <input id="vr-rowheight" type="text" value="${ROW_HEIGHT}" title="Use up/down keys to adjust" />
    <button id="vr-refresh" style="positon:absolute;top:0px;left:0px">Add/Refresh Guides</button>
  `;
  var rowHeightEl = controlsEl.querySelector('#vr-rowheight');
  rowHeightEl.addEventListener('keydown', function(e) {
    var newH = parseInt(controlsEl.querySelector('#vr-rowheight').value, 10);
    if (e.keyCode === 40) {
      newH -= 1;
    } else if (e.keyCode === 38) {
      newH += 1;
    }
    rowHeightEl.value = newH;
    resetGrid(newH);
  });
  controlsEl.querySelector('#vr-refresh').addEventListener('click', function() {
    const rowHeight = parseInt(controlsEl.querySelector('#vr-rowheight').value, 10);
    resetGrid(rowHeight);
  });
  d.body.appendChild(controlsEl);
})(window.document);