🥇 Javascript Bookmarklet Baseliner

Se você precisar adicionar uma linha de base ao seu site, pode injetá-la em qualquer site por meio do javascript:comando, colando o seguinte conteúdo na barra de URL.

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"
});

Será algo assim javascript: var baseline = 30; var add .... Altere o valor de baselinepara atualizar seu tamanho.

Bookmarklet de linha de base

Isso é novo? Nah, pode muito bem usar um bookmarklet real como este . Entretanto, o javascript aqui é na verdade uma derivação de um código css que encontrei no projeto InuitCSS de Harry Roberts :

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

Basicamente, significa (é SASS) que você pode configurar uma variável para determinar se deseja carregá-la como uma imagem de fundo ou não; através do :afterpseudoelemento + the pointer-events: none, você pode colocá-lo no topo da página da web sem interferir em seus outros elementos.

Bookmarklet de linha de base

Related Posts