Javascript Bookmarklet Baseliner

If you need to add a baseline to your website, you can inject it to any website through the javascript: command by pasting the following content in the URL bar.

var baseline = 30;
var addRule = (function(style){
    var sheet = document.head.appendChild(style).sheet;
    return function(selector, css){
        var propText = Object.keys(css).map(function(p){
            return p+":"+css[p]
        }).join(";");
        sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
    }
})(document.createElement("style"));
addRule("body", {
    position: "relative"
});
addRule("body:after", {
    background: "url(http://basehold.it/i/"+baseline+") repeat top left",
    position: "absolute",
    width: "auto",
    height: "auto",
    "z-index": "9999",
    content: "''",
    display: "block",
    "pointer-events": "none",
    top: "0",
    right: "0",
    bottom: "0",
    left: "0"
});

It will look something like javascript: var baseline = 30; var add .... Change the value of baseline to update its size.

Baseline Bookmarklet

Is this new? Nah, might as well just use an actual bookmarklet like this one. However, the javascript here is actually a derivation from a css code I found in the InuitCSS project by Harry Roberts:

html {
   @if $show-baseline-grid == true {
     $baseline-size: strip-units($base--spacing-unit);
     background-image: url(http://basehold.it/i/#{$baseline-size});
  }
}

Pretty much it means (it's SASS) that you can set up a variable to determine whether you want to load this as a background image or not; through the :after pseudo element + the pointer-events: none, you can have that on top of webpage without interfering your other elements.