The previous grid article dealt with how to come up with a CSS strategy when you're working with another visual designer's comps. Now I'd like to discuss doing grid-based theme design for open source content management systems, e.g. Drupal and WordPress. The purpose of this article is to give you an idea of how to approach blog theme design using a grid system. After reading this, you should be able to create a fully-functional grid-based design and HTML prototype that can be coverted into a theme template.

Creating the design grid

I recently redesigned this site because I wanted a layout that provided larger areas for my content. I needed a system that provided me the flexibility to get creative with the layout, but I also wanted to be sure not to lose control of the order and balance of page elements. While the spare layout of my previous design worked well, the new design would be a little more information dense.

For the new layout I used a grid with a simple division of thirds at a fixed width of 801 px. To get to this width, I played around with different sizes that could be centered within a 1024px x 768px browser window with ample white space on the sides. I targetted my maximum width around 800px.

I started by dividing up 800px into thirds and had an approximate width of 267px per third to play with. I borrowed the idea from the MIG design of using a 3 pixel border to separate each division. This odd-sized gutter makes room for 1px vertical border lines with 1px of padding at each side if I need it. I kept sub-dividing the thirds and after a bit of tweaking came up with the grid below. Each little pink box is 1/12 the width of the page (64px wide). 4 of these side to side make up a third of the width, which I would use for normal column of text. 2 or 3 of these side to side would be nice for a narrow column.

Screen shot of the grid (shrunken to fit)

So now I have a grid that could easily be divided into the thirds I needed to make a multi-column layout. This gives me a very simple grid to work with and I don't think I'd need to have smaller grid divisions for blog themes. Next step is to start looking at layout sketches I had in mind and think about how to turn them into XHTML & CSS. The visual design I'm basing this demo on is an old theme I once used on my blog, with a little modification of the graphics and color palette. You can see a screenshot of the old theme (it's the one in the upper left hand corner).

Turning boxes into content areas

To get started, I think about the page elements I want to use. I want the page to have these parts:

• header
  • logo
  • graphic element
• body
  • weblog content
    • blog entry
      • entry metadata
      • comments
  • local navigation
  • advertisements
• footer

I have some hierarchy of elements established in this list. You probably won't need to jot down a list of elements like this to do a weblog layout, but it helps to show where we're going.

Using the list as a starting point, I start to think about where I want these elements to go on the grid. You can use the grid like a wireframe (page schematic) by selecting areas of content and blocking them out, labeling them as you go.

Wireframe of content areas

Above, I took each of the page elements and blocked them out. We're going to take the wireframe and create the visual design elements for the page and design the layout of the content blocks.

Visual design comprehensive sketch over grid

As I'm doing this design, I realize that I don't actually need 3 grid blocks for the ads, so I use 2 instead. The layout is looking good to me so far, so now I start thinking about how to turn the blocks into CSS.

Turning content areas into CSS elements

Working with grids makes it easier to visualize a strategy for the CSS layout. I start by thinking of the hierarchy of divs that will make up my page wrapper and all of the child divs nested within it. I'll label those in the wireframe to show what I'm thinking.

As you can see, I'm going to enclose the entire page in div#wrapper. The rest is a bit like a sandwich. On the top, I put the #logo and #graphic in div#header. On the bottom, I have div#footer with my copyright info. And sandwiched in the middle is div#main which encloses the 3 column layout of #localnav, #content and #ads.

Next I go about measuring each content block and recording it's dimensions. I'm mainly looking for widths here except for the header, where I actually want the height as well. Heights will, of course, stretch vertically in the div#main. I measure the #header out to be 801px wide by 131px high. In the screenshot below, I show how I get the dimensions of #logo using the Info panel in Photoshop. I do this to each content area, getting fixed widths for all the areas.

Creating the style sheet for the layout

Constructing a shell

When I'm done gathering my measurements, I can start to construct the stylesheet. I start by creating a barebones shell that will look a bit like our wireframe. First I record the main divisions in my CSS file.

Then I put in all the dimensions and positioning. To test my sanity and the precision of my measurements, I put the grid into the div#wrapper as a background image. The core CSS for the layout is below.

Next I start putting the widths (and heights for the #header) I recorded into the style sheet, creating a shell for the site. To make the boxes lay out precisely, I use left floats for columns and the Position Is Everything easy clearing method. If you view a demo of the CSS shell you'll see that the boxes line up precisely against the background grid. Things are looking pretty good. Now we have to add the graphic elements from the comp.

Completing the wrapper

We're almost done now with the wrapper. To finish off the wrapper we have to cut up the background graphics and tweak the the widths just a little so that our border backgrounds fit around the grid. Take a look at the wrapper with header graphics and borders in place .

Final touches

It's looking nearly finished now. All that's left is to do the style elements for the HTML inside the major divs. I put in all of the HTML for the template areas. I create the site logo and drop that into div#logo. I add some padding to the columns inside div#main. Finally, I add color and sizes to the fonts. Now you can view the final HTML template .

Conclusion

Grids are very useful for doing even simple blog themes. They give you a solid system you can rely on to lay out your template and evolve it as needs require.

I showed you how I approach layout and site development for a weblog template and gave you an HTML prototype you can convert into a theme. You are free to use the template in this example, I'm releasing it under GPL. I hope this article helps Drupal developers in some way by giving them a process for approaching their theme designs. Have fun theming!

See also: Cutting and sewing grid-based design: Part 1, working with other people's comps

Yahoo! Small Business offers two new ways for companies to start blogging with a hosted Movable Type or WordPress solution. Very good news for small businesses that don't want to maintain their own system on their machines or a webhost. You pay a reasonable monthly fee and Yahoo! handles the software administration and upgrades.

The Management Innovation Group re-launched their site with a new design. This was the second of two WordPress projects I developed this summer. The first was the Winning Connections site.

The WC site gave me the foundation for learning how to make the most out of WP without having to do any module writing. In the end, these both turned out to very interesting projects for me. And where I used to use MovableType for small client projects, I am now happily using WordPress. I still love Drupal, of course, for the projects that need it.

The MIG project was the more interesting of the two because the design specifications called for a different design template for each section. Quite an interesting problem when you're using a publishing system that is really intended for weblogs. I'm going to discuss 2 things below: 1) how to set your templates up to do section-specific CSS and 2) how to output local navigation.

1) Section-specific CSS

The key to getting the custom templates was to find a way to figure out what section a page is part of. WP gives you an excellent way to establish parent-child relationships when editing pages by simply selecting a Page Parent. But the default sidebar shows the entire hierarchy. The local navigation on both of these sites only shows the children of the section you are currently navigating. To get that to work, I had to do a little scripting.

Using the Page Tools plugin, you can insert a few lines into your template that gets the page's ancestor (top most parent). Then check that variable to see if it's one of your site's top sections, i.e. the links in your global navigation and assign that to the variable $section. If it's not a global navigation section, then assign the post name to the section variable.

Now you have a variable to identify the section in the global navigation. I used this variable to target a set of CSS rules that apply to this section, and voila. Instant section-specific CSS.

<body id="<?php echo $section; ?>">

Then in my CSS, I have a bunch of rules for each major element (div) of the page that gives positioning and other style information. So, for instance, the #content div can be different in the #services section from the #content div in the #principals section. Think of it as doing a mini-CSS Zen Garden within one site. All good.

Now, the next step is to determine what page WordPress is serving so you can pass that information to the style sheet as well. This is useful, for instance, in showing an on or selected state for the current page's link in the navigation. You can do this by grabbing the post name and assigning it to a variable:

Then drop that variable into the body tag as well:

<body id="<?php echo $section ?>" class="<?php echo $csstmp ." ". $bodyclass; ?>">

Then if you assigned CSS IDs to the links in your navigation, you've got a way to target the link as selected or not (e.g. making text color bold and black versus using default link color). Rockin.

2. Putting out local navigation

The next bit of trickery is actually echoing the links for children to output the local navigation. The Winning Connections site is the better example of the two, if you want to see how this works. What is happening here is that all of the children of a main section (a tab in the global navigation) are being displayed in a left sidebar (for local navigation).

This was a little trickier to do and I wish it was handled in a better way by default in WordPress. Maybe someone will point to a better method. My method was similar to the above method for determing what you were looking at. Check the entry IDs to see if we're looking at a global nav parent. If so, do MySQL query to put out links. If not, do a different query to put out local nav links. I won't go over all the details, but here's an example of the code I used to put out the local navigation. Should give you the gist:

None of this would have been possible if it weren't for the efforts of others to make WordPress extendable. It's the same experience I have in using Drupal modules. People who contribute their ideas or code to make open source software better are cool. They're the ones that make some of these projects possible to implement with little effort.

Necessary plugins

These are the plugins I had to use to make these sites work.

• Page Tools -- for retrieving the highest ancestor (parent). This was useful for establishing what section is being viewed and then inserting that section name in the body tag as a CSS ID.
• The Excerpt Reloaded -- perfect for customizing the appearance of excerpts.
• wp-cache -- not that this site needs it, but excellent for taking the load off your server and saving you in case you get slashdotted for some reason.

A plugin to modify the style of WordPress administrative interface.

FeedWordPress is an Atom/RSS aggregator for WordPress. It syndicates content from newsfeeds that you select into your WordPress blog; if you syndicate several newsfeeds then you can use WordPress’s posts database and templating engine as the back-end of an aggregation website.

We launched the Winning Connections site, my first project using WordPress. It's great to work on small projects like these that use weblogs for pushing news and marketing information. This kind of site development gets easier and easier with the evolution of weblog systems that can accomodate both pages and weblog entries as Drupal and WordPress do naturally.