Layout Grid Bookmarklet | July 23, 2006
Inspired by Khoi Vinh’s post about using a background image of a grid for layout, and a subsequent post over at Smiley Cat about the same thing, I decided to knock up a quick Photoshop style Layout Grid Bookmarklet
The above bookmarklet simply applies a layout grid image to the body of the page. I have also created a Layout Grid Overlay Bookmarklet which creates a div, positions it absolutely and then applies the background image to the div. Because the image is transparent, you get a nice overlay effect. By changing the position of the div to “fixed” you can also create a nice Layout Grid Fixed Overlay Bookmarklet which may be useful on occasion.
[UPDATE:] Marcus Breese just emailed me a show/hide layout grid bookmarklet, which is great becasue now I don’t have to make one. Thanks Marcus.
Comment
Oooh, useful.
Comment
Cool. But the grid image is linked from your site?
Comment
Yes, the grid image is currently hosted on my server. Feel free to grab a copy here and post it on your server if you want to make sure you can always acess it. This will alos help me keep my bandwidth overhead down, so it would be appreciated.
Comment
How nice! A built-in grid is a very nice way to measure where to position elements without copypasting into Photoshop and measuring there. This idea would do great as a Firefox extension!
Comment
Thats a really handy feature Andy but the problem I’ve noticed with the Overlay bookmarklet is that the content underneath is inaccessible once the new DIV is overlayed. It sounds obvious but it makes trying to click links underneath difficult unless the page is refreshed.
Maybe you could update the bookmarklet so the overlay DIV “hides” on click or double-click?
Comment
Fab idea Andy, many thanks!
I have 2 suggestions to offer:
- a 24-bit PNG with alpha transparency would be a bit clearer to work with (especially on darker sites), and
- making the bookmarklet a toggle button so you can easily turn it on and off and on again :)
Comment
I really like this idea and I posted my own improvements at SmilyCats :)
I really like your bookmarklets because they are cross browser compatible, unlike the a firefox extention, and allow proper cross browser testing.
I would still suggest that you place the grid on the HTML tag rather than the BODY tag incase someone uses their body for a fixed width layout and you then make the body tag slightly transparent as in my example.
Thus I have made another bookmarlet that does just that:
I really do like this Grid for improving css design and compatibility :)
Cheers
GK
Comment
Si: I’m not sure the overlay issue is that much of a problem as it’s only really there to help people position theirt layouts, and doesn’t need to be on the whole time. However the ability to toggle the overlay would be a nice feature.
Roger: I did think about doing an alpha transparent version, but I decided that rather tyhan tyrying to make a gra[phic that would work on every possible background, it would be easier if people simply make their own graphics. More than happy to upload my origional PSD if people would find it useful.
I did initially try to make a togggle version, but forgot that you can’t read styles set in an external CSS files using the DOM, so you couldn’t toggle back to the origional state. The only way to do it would have been to toggle in a more specific stylesheet, but it seemes a little overkill. However feel free to knock up a version if you fancy.
Stephen: Interesting idea, but I guess setting the body trannsparency won’t work on all browsers.
Comment
Andy: Yeah, setting the body transparent via JavaScript only seems to work in FF and not IE.
Although setting the body transparent manual via CSS work for all.
Cheers
GK
Comment
Looks great, thanks! This will come in handy even to measure different elements (in Safari). I have the measuring tool in FF, but nothing like it in Safari.
Comment
This is just what I needed! Thank you thank you thank you.
If anyone needs an accompanying bookmarklet to toggle this off rather than reload, like in Roger’s comment, here it is.
Comment
Just to clarify my above comment, that fix only works for the overlays (which I find to be more useful anyway)
Comment
You could also just use this (Firefox users):
http://www.kevinfreitas.net/extensions/measureit/
Comment
I was talking about this a while ago (I think 2-4 weeks) with my dad, after telling him about a client that was bitching about something that wasn’t pixelperfect. I said I would look in to it sometime, but didn’t get around to doing so. Now I saw this in my RSS reader, and I love it!
Comment
I often just use a similar method, of slapping on a background image with lines all about the place. One at 800×600 and so on. Liking your method much more though.
Comment
Nice! What about a centered version? ;-)
Comment
Thanks for this handy little tool.
Greetings,
Patrick
Comment
OMG, really cool, thanx.
Comment
> but I guess setting the body trannsparency won’t work on all browsers.
Sure it can…
-moz-opacity: 0.9;
opacity:.90;
filter: alpha(opacity=90);
Comment
When I said that I meant in a nice, non hackey way. But you are of course right, it is possible.
Comment
Centered version:
http://bbuchs.f2o.org/layoutgrid/
Comment
Toggle-able Translucent (24bit PNG) Centered Overlay FFx, Safari, IE5.5–7
http://subtlegradient.com/articles/2006/07/27/grid-overlay-bookmarklet
Your grid thing is an awesome idea. I might have to make some other versions of this. Thanks!
Comment
Awesome, Andy. If you get a chance, you might check this out, too: How to Lay Out Percent-Based Rulers in CSS, in 4 Easy Steps.
Comment
Ty si obycajny kokot alebo zeby picus ?
Comment
We did this on a project late last year, which had multiple component based templates. It was a fixed width design, and I came up with a unique grid that would work for all variations we needed. Tom, the developer, saved it out and placed it on a show/hide layer in the background. The result was pixel perfect files.
Comment
Just like Dreamweaver has had for years! And like Tarantula had in 1996.
Comment
Very handy tool.
I also made myself a greasemonkey script that overlays the grid on any existing webpage when I append ?grid or &grid at the end of the url.
;void(el=d.getElementsByTagName('body'));void(el%5B0%5D.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');){kind=link}
);void(myBody=document.getElementsByTagName('body')%5B0%5D);void(myDiv.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');void(myDiv.style.position='absolute');void(myDiv.style.width='100%');void(myDiv.style.height='100%');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));){kind=link}
);void(myBody=document.getElementsByTagName('body')%5B0%5D);void(myDiv.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');void(myDiv.style.position='fixed');void(myDiv.style.width='100%');void(myDiv.style.height='100%');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));){kind=link}
);void(myBody=document.getElementsByTagName('body')%5B0%5D);if(myDiv!=null){void(myBody.removeChild(myDiv));}else{void(myDiv=document.createElement ('div'));void(myDiv.id='_grid_div_mrb');void(myDiv.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');void(myDiv.style.position='absolute');void(myDiv.style.width=myBody.offsetWidth+ 'px');void(myDiv.style.height=myBody.offsetHeight+'px');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));}){kind=link}
Comments on: Layout Grid Bookmarklet
Jump to the comment form