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”.
   
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).
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.
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.And that’s it! A grid-aligned page. Send me a message if you have any questions

Related posts:

1. Idea engineering: Making your content unique
2. Ocular Harmony has a new design
3. Making strong decisions with a designer, developer, or marketer
4. 5 great Monkey-themed websites
5. Designing a logo from scratch part 2: drawing and illustrating