// javascript:(function(){var%20id,%20grid,%20rows,%20i,%20y%20=%20prompt(%27grid%20height%20(leave%20blank%20to%20remove%20previos%20grid):%20%27);id%20=%20%27css-typographic-grid%27;(function(previousGrid){if%20(previousGrid)%20{previousGrid.parentNode.removeChild(previousGrid);}})(document.getElementById(id));if%20(y)%20{y--;(function(bd){bd.style.position%20=%20%27relative%27;grid%20=%20document.createElement(%27div%27);grid.id%20=%20id;grid.style.position%20=%20%27absolute%27;grid.style.top%20=%20%270%27;grid.style.right%20=%20%270%27;grid.style.bottom%20=%20%270%27;grid.style.left%20=%20%270%27;grid.style.zIndex%20=%20%271%27;grid.style.color%20=%20%27transparent%27;grid.style.lineHeight%20=%20y%20+%20%27px%27;rows%20=%20%27%27;i%20=%2099;while(i--)%20{rows%20+=%20%27<div%20style=%22height:%20%27%20+%20y%20+%20%27;%20border-bottom:%201px%20solid%20rgba(128,%20128,%20128,%200.5)%22>.</div>%27;}grid.innerHTML%20=%20rows;bd.appendChild(grid);})(document.getElementsByTagName(%27body%27)[0]);}})();
(function(){
  
  var grid, 
      id        = 'css-typographic-grid', 
      rows      = '', 
      i         = 99, 
      message   = 'grid height (leave blank to remove previous grid)';
  
  y = prompt(message);
  
  (function(previousGrid){
    if (previousGrid) {
      previousGrid.parentNode.removeChild(previousGrid);
    }
  })(document.getElementById(id));
  
  if (y) {
    
    y--;
    
    (function(bd){
      
      bd.style.position = 'relative';
      
      grid = document.createElement('div');
      grid.id = id;
      grid.style.position = 'absolute';
      grid.style.top = '0';
      grid.style.right = '0';
      grid.style.bottom = '0';
      grid.style.left = '0';
      grid.style.zIndex = '1';
      grid.style.color = 'transparent';
      grid.style.lineHeight = y + 'px';
      
      while(i--) {
        rows += '<div style="height: ' + y  + 'px; border-bottom: 1px solid rgba(128, 128, 128, 0.5)">.</div>';
      }
      
      grid.innerHTML = rows;
      
      bd.appendChild(grid);
      
    })(document.getElementsByTagName('body')[0]);
  }
})();

// javascript:(function(){var%20id,%20grid,%20rows,%20i,%20y%20=%20prompt(%27grid%20height%20(leave%20blank%20to%20remove%20previos%20grid):%20%27);id%20=%20%27css-typographic-grid%27;(function(previousGrid){if%20(previousGrid)%20{previousGrid.parentNode.removeChild(previousGrid);}})(document.getElementById(id));if%20(y)%20{y--;(function(bd){bd.style.position%20=%20%27relative%27;grid%20=%20document.createElement(%27div%27);grid.id%20=%20id;grid.style.position%20=%20%27absolute%27;grid.style.top%20=%20%270%27;grid.style.right%20=%20%270%27;grid.style.bottom%20=%20%270%27;grid.style.left%20=%20%270%27;grid.style.zIndex%20=%20%271%27;grid.style.color%20=%20%27transparent%27;grid.style.lineHeight%20=%20y%20+%20%27px%27;rows%20=%20%27%27;i%20=%2099;while(i--)%20{rows%20+=%20%27<div%20style=%22height:%20%27%20+%20y%20+%20%27;%20border-bottom:%201px%20solid%20rgba(128,%20128,%20128,%200.5)%22>.</div>%27;}grid.innerHTML%20=%20rows;bd.appendChild(grid);})(document.getElementsByTagName(%27body%27)[0]);}})();
(function(){
  
  var grid, 
      id        = 'css-typographic-grid', 
      rows      = '', 
      i         = 99, 
      message   = 'grid height (leave blank to remove previous grid)';
  
  y = prompt(message);
  
  (function(previousGrid){
    if (previousGrid) {
      previousGrid.parentNode.removeChild(previousGrid);
    }
  })(document.getElementById(id));
  
  if (y) {
    
    y--;
    
    (function(bd){
      
      bd.style.position = 'relative';
      
      grid = document.createElement('div');
      grid.id = id;
      grid.style.position = 'absolute';
      grid.style.top = '0';
      grid.style.right = '0';
      grid.style.bottom = '0';
      grid.style.left = '0';
      grid.style.zIndex = '1';
      grid.style.color = 'transparent';
      grid.style.lineHeight = y + 'px';
      
      while(i--) {
        rows += '<div style="height: ' + y  + '; border-bottom: 1px solid rgba(128, 128, 128, 0.5)">.</div>';
      }
      
      grid.innerHTML = rows;
      
      bd.appendChild(grid);
      
    })(document.getElementsByTagName('body')[0]);
  }
})();

typogrid bookmarklet, a vertical grid tool for balancing typography in designs

javascript

JavaScript