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.
Blog: Subscribe via RSS
Video: Subscribe via RSS
Blog: Subscribe via Email
Video: Subscribe via iTunes
CSSVille, population: 11032
Script & Style is a community driven feed of links and exclusive tutorials to help you grow as a designer and developer. Got a great link? Submit it now!
Loading ...
Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.
{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='http://css-tricks.com/wp-content/uploads/2008/01/gridcontrolbookmarklet.png' alt='GridControl' title=){kind=link}
1
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!
Comment by David Sparks — January 19, 2008 @ 1:04 pm
2
Yep, you are right, it does turn off clicking it again. My bad, I updated the info in the article.
Comment by Chris Coyier — January 19, 2008 @ 1:42 pm
3
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.
Comment by Jaime J Aleman — January 19, 2008 @ 11:41 pm
4
Works great. Thanx a lot.
Comment by Ingo — January 21, 2008 @ 1:00 pm