Grids and The Box Model

May 9, 2010 at 6:05 pm | Layout | 18 comments

This is my first official post on Carbon 13. It is only courteous that I introduce myself – my name is Matthew and if you are reading this you might be the first.

I’d like to start off by talking about web page layout because it is one of the foundations of building a good website. This involves talking a little bit about grids and the CSS box model.

Grids

Ill leave the brief definition to Wikipedia:

A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.

Figure 1: Carbon13's Grid Layout

To the right is a block style mock up of Carbon13’s main page that I made in Adobe Phototshop. After doing some brainstorming on paper, Photoshop or another graphics program (like Gimp for Linux – which is free) are great places to start for a page layout. Photoshop ‘Guides’ which can be overlaid on a document (View >> New Guide) are an important tool to help you build your grid.

Though your design is meant to change and grow, it is important to make a few decisions on where you want to start. One of these first decisions is whether you want to have a fixed or fluid width website. If the site is a blog, or a website where there is content that is meant to be read, I recommend a fixed width layout. This is because studies show that there is an ideal column width of about 12 words and that reading rate slows and retention decreases as you make the lines longer. I think that 12 is a little on the conservative side, but do recommend that there shouldn’t be too many more than 20 words per line.

Using Carbon13 as an example, I have a fixed width two column layout with a 600px content and 300px sidebar for sponsors, featured posts, and other links. There is also a consistent spacing between grid elements which is referred to as a gutter. Carbon 13 features 20px gutters that separate blocks of content . Gutters can not only separate boxes of content but serve as padding for the text or objects nested inside a block. In the binding of a book, gutters are the extra space allowed in the center of the book while space between columns are called alleys. More modern definitions refer to both grid spacings (gutters and alleys) as gutters. I find that using one gutter width helps to bring a feeling of consistency and professionalism to a sites look.

The CSS Box Model

Figure 2: The CSS Box Model

Transforming a grid layout that you have designed in a graphics program or on paper to HTML and CSS requires an understanding of the CSS box model. The image here to the left is a depiction of how the CSS box model works. When I first started coding CSS it took me a while to get a hold of how this worked and I often had ran into trouble because I didn’t know what the ‘true width’ (‘true height’) of a box element. Margins should be used to create gutters between box elements, while padding should be used position text or images inside of box. The ‘true width’ of a box then is the border-left + border-right + padding-left + padding-right + width (similarly the ‘true-height’ is the border-top + border-bottom + padding-top + padding-bottom + height). To help clarify further lets look at some example code. Say I created a div with the HTML and CSS below:



/* The CSS */

#aBox
{
   width: 100px;
   height: 40px;
   border: 5px solid #3D9436;
   padding: 25px 10px 0px 40px;
   background: #A4E84A;
}






<!-- The HTML -->

<div id ="aBox">
Hello World!
</div>

Would look like this:

Hello World!

Try these tools out! Will write a post about Firebug soon.

Tools: