CSS Templating Basics and Demos

Starting with the primitives in CSS Tinderbox to the full blown OpenWeb Designs, there are many CSS design concepts to view and demo; multi-column, fixed width, fluid. As well as a little CSS magic with rounded corners, gradient backgrounds and Web 2.0 look and feel.



I liked the look of pogy366's fixed width template Slight Amnesia. Very clean and simple. He came up with this by "flinging code around with no real objective or vision." His main goal was to focus on overall accessibility and browser text-resizing being as painless as possible.

Another style of of pogy's, Tree Hugger, features a single main column with three sub-columns underneath. I am seeing this type of layout pop-up more and more nowadays. It is based on one of CSS Tinderbox's fixed width box templates.

The Bright Side of Life looks familiar to me. It is a three column fixed width design which is blog template ready. Most of the CSS styling is here, comments boxes, comment form, more, yada yada. Nice tweak on the top with a tabbed navigation bar and the contrasting background image makes the page seem to jump out at you.

With over 2300 designs to browse, you could spend hours here. Fortunately they have a half-way decent method of narrowing your viewing selection down by contrast, primary and secondary colors and document validity type. The category search is pretty useless with only 'business' and 'fun' as your only choices. Still it is a nice place to flip through.

Technorati Tags: css, template, design, fixed, width, fluid, demo, free, open, source