Advanced Search

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

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // 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]);}})();
  2. (function(){
  3.  
  4.   var grid, 
  5.       id        = 'css-typographic-grid', 
  6.       rows      = '', 
  7.       i         = 99, 
  8.       message   = 'grid height (leave blank to remove previous grid)';
  9.  
  10.   y = prompt(message);
  11.  
  12.   (function(previousGrid){
  13.     if (previousGrid) {
  14.       previousGrid.parentNode.removeChild(previousGrid);
  15.     }
  16.   })(document.getElementById(id));
  17.  
  18.   if (y) {
  19.  
  20.     y--;
  21.  
  22.     (function(bd){
  23.  
  24.       bd.style.position = 'relative';
  25.  
  26.       grid = document.createElement('div');
  27.       grid.id = id;
  28.       grid.style.position = 'absolute';
  29.       grid.style.top = '0';
  30.       grid.style.right = '0';
  31.       grid.style.bottom = '0';
  32.       grid.style.left = '0';
  33.       grid.style.zIndex = '1';
  34.       grid.style.color = 'transparent';
  35.       grid.style.lineHeight = y + 'px';
  36.  
  37.       while(i--) {
  38.         rows += '<div style="height: ' + y  + 'px; border-bottom: 1px solid rgba(128, 128, 128, 0.5)">.</div>';
  39.       }
  40.  
  41.       grid.innerHTML = rows;
  42.  
  43.       bd.appendChild(grid);
  44.  
  45.     })(document.getElementsByTagName('body')[0]);
  46.   }
  47. })();

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.