Style Templates

As we said back in the section on Graphic Design and Layout, this is like peeking at the answers at the back of the book. Some of these styles are like low hanging fruit, ready to pluck and use. Others take a little work to adapt. And some even let you specify a couple of things on a form, turn a crank, and out comes your styles.

So you've got no excuse for building nasty, unmaintainable web pages any more. Let's get stylin!

Any Order Columns

Big John and Holly Bergevin of Position Is Everything proudly present the holy grail for web designers: multiple column layouts where you can present the columns in any order using style sheets only! Eric Meyer adds a timely comment about a recent bug that showed up in the Firefox beta possibly breaking this design.

Ben Meadowcroft's Templates

Licensed with a Non-commercial share-alike license from Creative Commons.

Column Styles

Super examples of 1-1 menu left, 1-1 menu right, plus another half dozen layouts.

CSS Creator

Select stuff from a form (colors, number of columns, (X)HTML version), push the button, and out comes a CSS template for your page.

CSS Intensivestation

This Swiss site has a good selection of useful templates, most of them floating -- either the whole page or the larger text section. Same site in German.

CSS Layout Techniques For Fun And Profit

At glish.com. Check the articles, too.

CSS Page Maker

From ClevaTreva Designs: fill in the form, out comes your CSSs.

The CSS Playground

Stu Nicholls' cutting edge CSS demos. It'll probably take some work to make them do something that doesn't look too awful on old browsers, but if your logs show you've got a modern crowd visiting your website, have a ball!

CSS Templates

At CSSIntensiveStation. The site is in German, but the CSS are very clear, and there's some styles we hadn't seen before.

Firda Beka's Book of Styles

Firda is busy doing work for money (for shame!), but this great resource will be back soon, and you can sign up to get an email when it is.

Fluid 2-Column Template

By "Beauregard T. Shagnasty". This is a beautifully usable template. Fluid means this expands and contracts with window size. Fixed width pages can look silly or even become unusable with browser window sizes other than the ones you designed on.

The Layout Reservoir

At bluerobot.com. Perhaps the most borrowed and adapted layouts in existence. Your basic two-column (menu right or menu left) and three-column layouts.

Layoutomatic

At Inknoise. Fill out the form, out comes your CSS.

Mediatinker's Illustrated MT Templates

This is how Movable Type sites are laid out, and what the various division classes are. Essential information if you want to customize your MT blog's appearance.

Movable Styles

Fit easily into Movable Type weblogs, but with a little work they could be used on regular websites. Or with much less work you could borrow elements from them. Be sure to read the license terms and do what's right. Note: Scotty Yang who runs this site is trying to give it to someone else at this writing, so you may be redirected.

Open Source Web Design

Designs range from XHTML/CSS to table and font tags. Note that the default for browse shows you old ones first, which are less likely to have CSS, XHTML, or validation. Hundreds of free templates, and the premium ones, which include Photoshop images, are priced very reasonably.

Real World Style

Besides the templates, they've got some articles, too.

Ruthsarian Layouts

Really mature designs here. It's tempting to use them as is, that's how nice they look.

Semantic Tabset

These tabs from Gavin Kistner use <dd> and <dt> tags so they'll degrade gracefully on older browsers.

Sensually Styled Display Lists

From Seamus Leahy of Sea Mus N Squirrel. Cool list formatting isn't just for <ul>s. Now <dl>s can play too.

Strange Banana

This is way too easy. Go to the Generator page, hit refresh until it generates a style you like, then save the page (which will have CSS embedded in the header).

Tabtastic

Imagine a page that displays as a set of tabs and includes all the content for all the tabs, so that the content for each tab magically appears when you click the appropriate tab. If you want to break your content into bite-sized pieces, Gavin Kistner's Tabtastic is a terrific way to do it.

W3C Core Styles

These styles by the World Wide Web Consortium, the folks who are responsible for the standard, are certainly standards compliant, but you need to check them in some common browsers to make sure they don't misbehave in your application.