The Hickensian

25.09.07

Technorati Tags design, grids, javascript

Grid Layouts.com

Last week, I put out a plea on Twitter:

This was something I needed at that moment. To be able to toggle the grid on and off quickly, without having to comment/uncomment a line of code each time. In particular, I was working in Coda, and was looking for something that didn’t require a bookmarklet to toggle.

I’m absolutely gobsmacked by the response! Stephen Hallgren jumped to the challenge first, and has set up Grid Layouts.com where you grab the javascript. I used the script earlier today, and it worked exactly as I hoped it would! No more making background grid images, no more fiddling with css to toggle it on/off. The way the variables are set up mean that I can easily experiment with different grids on the fly,

This is now one of my default tools when creating a site, thanks Stephen!

Comments | RSS

No.1

Fernando Mateus said 647 days ago:

Thanks for sharing the information.
I have to try this tomorrow, but right now it seems wonderful :-)

No.2

Matthew said 647 days ago:

Andy Budd also did a favelet a while back – here

No.3

Jon Hicks said 647 days ago:

He did – but that’s a general ruler type grid.

This actually shows you the bits you need to know, the columns and gutters, and is configurable. Also bookmarklets can;t be used in web previews in things like Textmate or Coda. Quite different!

No.4

Simon Clayson said 647 days ago:

There was me using an alt stylesheet I made myself

No.5

Si Jobling said 647 days ago:

The power of Twitter comes to the rescue again! This is a great little code snippet that I’m sure will become standard in most Web designers toolbox now. If not, they obviously don’t design correctly!

No.6

Jimmy Nordlund said 647 days ago:

I was looking around for something similar just the other day, but I couldn’t find a solution that I was satisfied with. This, however, does everything I need and it works in Coda. It’s perfect!

Thanks for the tip! And a big thanks to Stephen for making this.

No.7

Puzzled said 647 days ago:

Can’t seem to get this one to work, unfortunately. Where should I paste the two divs, ans where should I put my content?

No.8

Erwin Heiser said 647 days ago:

Not seeing anything either. Tried it with my local install of jQuery as well and no joy :(

No.9

Puzzled said 647 days ago:

Erwin: ctrl+shift+g is the magic key combination. It really should be mentioned on the site. I know it’s on the header graphic, but still..

No.10

Jon Hicks said 647 days ago:

It really should be mentioned on the site. I know it’s on the header graphic, but still..

Its bloody huge on the site! C’mon!

No.11

nick said 647 days ago:

Terrific!

No.12

Tilman said 646 days ago:

Great tool. I would be even more happy if it would also deal with vertical rhythm. Would it be hard to implement repeating horizontal lines with adjustable distance? Like this, preferrably overlaying with transparency