Reader Sansan generously worked up my little GridControl idea into a javascript snippet that was very simple to make into a bookmarklet.
Just drag the link button below up into your bookmark bar, and then click to activate on any webpage. Pretty sweet! Click once to turn on the grid, click again to turn it off.
{if(window.d){document.body.removeChild(d);window.d = null;}else{window.d=document.createElement('div');d.style.id='grid_overlay';d.style.position='absolute';d.style.left='0';d.style.top='0';d.style.width='100%';d.style.height=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight+’px’:’100%’;d.style.background=’url(http://pic.yupoo.com/itina/988324f5509f/q03z5507.jpg)’;document.body.appendChild(d)}})();”><img src='https://i0.wp.com/css-tricks.com/wp-content/uploads/2008/01/gridcontrolbookmarklet.png' alt='GridControl' title=){kind=link}
thats awesome. When i click it after its on it turns off for me *shrugs* what would be even more sweet is if you could right click it and set up the column and sub columns. but its still awesome. ill definitely be using it.
thanks!
Yep, you are right, it does turn off clicking it again. My bad, I updated the info in the article.
A better alternative is http://www.sprymedia.co.uk/article/Design
The grid is colors, columns, line-heights, colors, etc. are all customizable.
I forget how I came upon that site and the bookmarklet they provide, but it has been essential to my most recent grid based design restructuring.
Works great. Thanx a lot.