The Template

This template is valid CSS and XHTML Strict 1.0 that has been tested in Firefox, Netscape, Opera, Safari, IE6 and IE7.

The layout is coded using generic CSS classes, so like lazydays, it's easy to customize.

Grid Layout

The layout is based on a four column grid, each column weighing in at 244px. Columns can be combined so it's easy to come up with the layout you want.

Total width of the template is just under 1024px, but below that, it will still maintain its layout correctly.

View Project

An example of the meta format that could be used for a post.

Author
Pat Heard
Date
December 10th, 2007
Comments
7 (read)

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.

View Project
Author
Pat Heard
Date
December 9th, 2007
Comments
0 (post)

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

Image Demo 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.