Hold G to see the grid

Press and hold G on this page. Go on, try it. (◠‿◠)
If you’re on a touch device, please see the button in the footer instead.

By doing that you have triggered a lovely, tiny tool called hashgrid that overlays a layout grid on a web page, making the underlying structure visible. Originally created by Analog (no longer around), it’s now maintained by Jon Gibbins. It’s so wonderful to see it still going ツ

It’s a tool I first used years ago. I recently came back to it while revisiting an old Guardian storytelling piece where it only got a passing mention. It deserved a post of its own ツ That prompted me to revisit the footer on Design Margins, bringing back an approach I’d used before. It might be considered a little retro these days but I always appreciate it when people add what they used to create their sites. Now, the updated footer has two parts: one listing the tools involved, and the other giving you a little peek at the grid underneath the site.

Seeing the structure

I’ve never been someone who starts a design with a grid. I tend to begin with the content, brainstorm ideas and see where they take me. Of course, that doesn’t mean grids aren’t part of my process ~ but they are not my starting point. The relationships between elements, the measurements of an image or an icon, and the spaces that grow out of them all contribute to an underlying structure.

That’s what I love about hashgrid. It lets me see that structure. I can bring up the grid and see how things line up, how the layout holds together, and how the decisions I’ve made relate to one another. Then I can let it disappear again.

As a designer, this is my kind of tool. Small, useful and always ready. (◠‿◠)

As a teacher, it’s even better. I can show students how layouts come together rather than just talking about it. Alignment, proportion, rhythm: it’s all there to see. And perhaps, by making that underlying structure visible, I can nudge them towards layouts with a little more thought and a little more interest behind them. ツ

And then, break the grid

Of course, understanding a grid doesn’t mean sticking to it. Sometimes the most interesting thing you can do is break out of it.

On The Creative Spot, I’m giving that experimental side more room. The layouts there push against the conventions I tend to follow here. The Inspiration page is a good example. Both sites come from the same practice. They simply show different degrees of visible order.

Perhaps that’s another reason I love having this little tool on Design Margins. Making the underlying structure visible can help us understand it, question it and, eventually, find more interesting ways to move beyond it. This blog has its own playful moments, from the serif and sans type switch to this very grid (◠‿◠)

I’d love my students to feel that freedom, too. Learn the conventions, understand how layouts work, and then have the confidence to do something unexpected. Break the grid. Break the norm. Make something unique and original.

An old favourite, made more inclusive

A quick note on the addition of hashgrid here: it is not the original version ~ I wanted to update it to bring it in line with current practices. It keeps the same keys and the same idea but has been modernised a little:

• Rewritten in vanilla JavaScript ~ no jQuery.
• The grid is drawn by CSS from the site’s own design tokens, so it follows the layout and the light and dark themes.
• Addition of two new buttons, one to show and hide the grid, and one to switch the G shortcut off. Single-key shortcuts can get in the way of voice control and some assistive technology, so the grid shouldn’t depend on one.
• The shortcut ignores key presses while you’re typing in a form field.
• The grid is decorative only, so screen readers skip it.

As you might know, JavaScript is not my strength. This is why I used Claude to update the code ~ my brief and design, Jon’s original and new feature implementation by Claude ~ sorted ツ
If you’d like a copy, please feel free to inspect the code and use it (or check the demo). The originial is licensed with Apache License, Version 2.0 ~ my version retains this. A public repo doesn’t feel right, as the JS code is not mine to claim. Do get in touch if you’d like me to send it to you via email, more than happy to do that ツ

Explore the original hashgrid on GitHub. Try it, use it, and say thank you to Jon (◠‿◠)