Baseline grid templates for Fireworks

posted on January 16th, 2011 by Anthony

This is something that’s come about out of necessity. I’m currently reading through Khoi Vinh’s new book ‘Ordering Disorder: Grid Principles for Web Design‘. So far it has been very useful, and has cleared up a few of the more foggy grid based theories in my mind.

One of the things I have always struggled to get my head around is the baseline grid. I got the basic idea, but implementation and use was a bit fuzzy for me. Khoi’s usage of it in the book really clarified a few things for me, and got me inspired to try and implement the ideas on the Fireworks canvas.

Being a lazy git I did a bit of looking around to see if anyone had produced a simple base line grid template like you can find for vertical grid systems such as 960.gs. I couldn’t find anything, so I made my own.

It’s nothing complicated, just a few layers of lines spaced at 16px, 17px, 18px, 19px, 20px, 21px and 22px. Nothing ground breaking but it will save me a few minutes in the future, and hopefully now it save you a couple too. I’ve made it the same width as the 960 Fireworks templates so you should just be able to copy and past them on top of your existing projects.

Grab the Baseline Grid template png file. (It might be best to do the old right click, save as thing)