Posted By

madr on 03/26/11


Tagged

javascript bookmarklet


Versions (?)

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


 / Published in: JavaScript
 

  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  

You need to login to post a comment.