Inspiration

For this template I decided to create something that could be used for a blog or portfolio site. The idea behind the 25% width blue column is that it can provide meta information on the item it is associated with. This way visitors can quickly scan an item and decide if they want more detail.

The design inspiration came from the fall, which is really a beautiful season here in Canada. The only downside is that it's followed by winter.

Template Use

The header image was taken by Claudia Meyer, who has some great shots available on sxc.hu. If you use it for your site, you should give her credit in the footer. On that note, the template is released under the Creative Commons license, which means you can do as you want with it, but you need to credit me.

Coding

Column Layout

This template makes heavy use of generic CSS classes, so it's very easy to customize to your needs. The basic layout elements are width and float classes:

• Width: .width25, .width50, .width75 and .width100
• Float: .floatRight and .floatLeft

These are used together to create all the different column layouts. For examples of this check out the style page. The one catch with using them is that you must make sure that together, your column widths don't add up to over 100%. Otherwise the rightmost column will be pushed down.

Element padding within the columns is handled by the contained elements. The reason for this is because when you apply padding to a container with a defined width, browsers will apply this inconsistently.

Images

To position images inline with the text, the same generic .floatRight and .floatLeft classes can be used. The top level headings all have clearing applied to them, so images won't "escape" their sections.

Header Image

The header image is defined as a background, so it'll expand and contract as needed to accomodate the menu. Because of this, you should choose an image with a lot of room to grow vertically.