The North grid

html meta web dev

Note: Extremely nerdy content follows. Also, the following CSS/HTML excerpts have been edited for brevity/relevance.

The Grid

The underlying grid for cmerrill.com is a 935-pixel wide container with nine 95-pixel columns separated by 10-pixel gutters.

I have set of classes to define the widths for any size box from one column to nine columns.

.col1 { width: 95px; }
...
.col4 { width: 410px; }
...
.col9 { width: 935px; }


The columns aren't multiples of 95 because of the built-in gutters. So to get four columns, the width needs to accomodate all four colums (4 x 95) plus the gutters between the columns (3 X 10) for a total of 410 pixels.

With this system, there are a ton of potential layouts: one 9-column area, three 3-column areas, two 4-column areas plus one 1-column area, one 5-column area plus one 4-column area, etc.

leftMiddle vs. rightmost

In order to maintain the gutter space between columns, I need 10 pixels of margin between two columns. But, I don't want any margin on the far left or far right of grid. To manage this, I created two classes: leftMiddle and rightmost.

.leftMiddle { margin-right: 10px; }
.rightmost { margin-right: 0; }


Basically, any column that has another column to the right gets the margin. The column furthest to the right doesn't get the margin.

By assigning multiple classes to a single div, I'm able to create the layout. For a two-column layout (one 5-col and one 4-col), the HTML looks like this:



...

For a three column layout, it might look like this:



...

...

Horizontal divisions

The system of columns breaks up the page vertically, but there are also sections of the page split horizontally, which I'll refer to as "rows". Unlike the columns, whose widths are fixed, the height of a row isn't specified, it should grow and shrink depending on the contents.

I have five rows defined in the CSS (names influenced by my newspaper layout experience): header, aboveFold, fold, belowFold and footer.

The header is the brown area with the North logotype, aboveFold is the main content area, fold is the blue strip, belowFold is the brown area near the bottom and footer is at the very bottom of the page (though it's currently not used).

The glue

If you open a wide browser window, you'll notice the content is centered, but the brown background of the header and footer areas extends across the entire
page. This is where the container div comes in to keep the different areas aligned.

Normally, for fixed-width pages, the container div would be the outermost div.








But if I were to do that, the background colors of the header, belowFold and fold would only be 935 pixels -- not stretched across the entire page. So what I've done is used a container div inside each of the rows to rein in the content.






The outer div (belowFold) specifies the background color and extends across the page. The container div centers the content and keeps it within a 9-column wide area.

.container { margin: 0 auto; width: 935px; }


Sidebar

When you have two adjacent pieces in a print publication, you need someway to differentiate them visually. Otherwise it's easy to assume they're part of the same piece. This is usually accomplished by using a thin rule to separate the elements, or shading the background of one of the elements.

I chose to shade the background of the sidebar. This created a particular challenge. My 10-pixel gutter between columns separated the main content from the sidebar, but the content inside the sidebar was running up against the edge

I had to create a new class, sidebar, to alleviate this problem.

.sidebar { padding: 10px; }


This created another problem. Now the content area of the sidebar is 20 pixels narrower than normal. So my regular column classes won't fit.

In a 4-column sidebar, my content area is now 390 pixels. But if I want to put two 2-column sections inside, their total is still 410 pixels. My workaround is to create a special case for a smaller col2 class that will fit in the sidebar.

.sidebar .col2 { width: 190px !important; }


Now, anytime a col2 div occurs within a sidebar div, it's smaller to accomodate the padding on the sidebar. Here's what the HTML looks like:






For now, I've only created the special case for using col2 within the sidebar because that's the only size I'm using so far. If I ever decide to use other widths within the sidebar, I can create modified versions of the other column classes.

Conclusion

Using a grid system gives me plenty of layout options while helping to maintain visual consistenty across the site.

The main problem I see with this system is the large amount of nested divs. I'm sure people smarter than I could create a more streamlined CSS/HTML version of the same thing, and at some point, I'll probably try to go back and see if I can trim some of the fat. For now, though, I'm pretty happy with how it turned out.

Questions, comments and recommendations are welcome.