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

Screenshot of layout grid

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.

Posted at July 23, 2006 2:26 PM

Comments

Jon Hicks said on July 23, 2006 4:25 PM

Genius!!

Francis Storr said on July 23, 2006 5:18 PM

Oooh, useful.

Scott said on July 23, 2006 5:18 PM

What Jon said! Well done indeed.

Lim Chee Aun said on July 23, 2006 5:26 PM

Cool. But the grid image is linked from your site?

Andy Budd said on July 23, 2006 5:47 PM

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.

Kalle said on July 23, 2006 8:36 PM

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!

Malarkey said on July 23, 2006 10:28 PM

Classic!

Khoi Vinh said on July 24, 2006 5:28 AM

Fantastic!

Si Jobling said on July 24, 2006 7:53 AM

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?

Thomas Schimana said on July 24, 2006 8:03 AM

Thanks!

Roger Herbert said on July 24, 2006 8:45 AM

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 :)

Stephen Hill said on July 24, 2006 9:22 AM

I really like this idea and I posted my own improvements at SmilyCats :)

gatekiller.co.uk/LayoutGrid

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:

Layout Gird

I really do like this Grid for improving css design and compatibility :)

Cheers
GK

Andy Budd said on July 24, 2006 9:37 AM

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.

Stephen Hill said on July 24, 2006 10:18 AM

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

Steven Tew said on July 24, 2006 10:22 AM

Thanks for sharing.

Nate K said on July 24, 2006 1:02 PM

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.

Steve Cochrane said on July 24, 2006 4:40 PM

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.

Steve Cochrane said on July 24, 2006 4:51 PM

Just to clarify my above comment, that fix only works for the overlays (which I find to be more useful anyway)

Biff said on July 24, 2006 4:56 PM

You could also just use this (Firefox users):
http://www.kevinfreitas.net/extensions/measureit/

dharmesh said on July 24, 2006 5:54 PM

Can you upload PSD file

Martijn Engler said on July 24, 2006 9:54 PM

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!

Reno said on July 25, 2006 12:40 AM

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.

Jens said on July 25, 2006 8:06 AM

Nice! What about a centered version? ;-)

Patrick said on July 25, 2006 1:34 PM

Thanks for this handy little tool.

Greetings,
Patrick

alvar said on July 25, 2006 1:39 PM

OMG, really cool, thanx.

Justin Perkins said on July 25, 2006 5:08 PM

> 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);

Andy Budd said on July 25, 2006 8:32 PM

When I said that I meant in a nice, non hackey way. But you are of course right, it is possible.

Bryan Buchs said on July 26, 2006 7:38 PM

Centered version:
http://bbuchs.f2o.org/layoutgrid/

Thomas Aylott said on July 27, 2006 4:21 PM

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!

Charlie Park said on July 27, 2006 8:33 PM

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.

Abdul said on August 3, 2006 1:40 PM

Ty si obycajny kokot alebo zeby picus ?

Bec Smith said on August 9, 2006 3:29 PM

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.

lee said on August 10, 2006 10:43 AM

Just like Dreamweaver has had for years! And like Tarantula had in 1996.

carl said on August 28, 2006 9:59 AM

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.