Apr
272009

Making a perfect grid-aligned website using Gridfox and Firebug

Have you ever sliced a layout, only for it not to be grid-aligned once it’s scripted? This post explains what to do in this situation to restore the appearance of the website. Thanks to Eric Puidokas, there is a program that adds a grid overlay in Firefox itself, and in combination with Firebug, you receive a very easy way to grid-align a website.

  1. Install firebug. This will let you edit CSS real-time in the browser window, allowing you to fine tune the margins and padding to appear just as desired.
  2. Install gridfox. This will give you the flexibility of specifying where to draw the gridlines, how wide, and what color they will be. In conjunction with firebug, it works wonders.
  3. Right click anywhere in the browser window, hover over “Gridfox” and select “options”. Here you can specify the number of columns you want, the width of your site wrapper, and under “appearance” set the line thickness (also called the “gutter”) that seperates the columns. You might want to turn the opacity down to 0.2, as you’ll be wanting to see under it. When you’re ready, click “ok”.
    gridfox-options gridfox-options1
  4. Here’s the mathematical part. Say you have a 900px wrapper, and you want 3 columns. The “gutter” or in Gridfox’s terminology “line thickness” refers to the line in between each column. Assuming you wanted a 3px line seperating the columns, this must be subtracted from the wrapper. And since there’s two lines that seperate a 3-column layout, you would subtract 6px.The equation: COLUMN WIDTH = (Wrapper width – total gutter width) / number of columns. Therefore every column you have would need to be 298px (or less depending on how much padding you use).grid-measurements
  5. Any element you need to align, right click on the element itself, and click “inspect element”. This pops out firebug. On the left, you’re going to hover over the DIV or SPAN that you want to align to grid. When you hover over it, the it will outline the block of space that it takes up, along with the padding and margin in different colors.firebug-instructions
  6. Click on the element, and use the panel to the right to edit the width, padding, and margins to align it perfectly to your overlay grid. Double click the element ID or Class to add a CSS property, or if it already exists, click on it to edit the info. Take note of what you edit, since you’ll have to make these changes over in the actual CSS file and then upload it.css-firebugAnd that’s it! A grid-aligned page. Send me a message if you have any questions
Posted Under: Design by Robin
3 comments
Danny
Danny

Hey bud, thanks for the tips. Just downloaded Gridfox at your suggestion and plan on tackling this process for my next WordPress theme.

Vince
Vince

Interesting concept. Will try this out in an upcoming project soon!

Emerson of Montreal
Emerson of Montreal

Classy post - good use of screenshots.

I've never done an official "grid based layout," but I have used the golden ratio (1.62) in my pixel calculations. Just checked out Gridfox and it looks interesting; makes me want to get into some grid stuff...

Trackbacks

  1. [...] download di Gridfox (premere “Install GridFox v1.1″), qui trovate un ottimo e semplice tutorial in inglese per poter usare Gridfox con firebug. GA_googleFillSlot(“post”); Salva, Condividi e [...]