Most web development projects require the creation of an HTML/CSS template. Often there is a “mockup” created in photoshop which you need to realize.

As a developer, code reuse is instinctual. Naturally, I want to find reusable components to apply to my projects. Searching for “css framework” yields projects like Blueprint CSS and YAML. These are designed around the idea that you won’t write any CSS, but rather include layout instructions in your HTML file in the form of classes etc. This is not what I’m looking for.

  • It’s not using CSS/HTML as they are intended
  • It removes me from the styling via another layer of abstraction.

Another approach is to take a nice existing template and adapt it to your needs. Andreas Viklund provides some nice themes. This is unsatisfying because you are forced to use the original designer’s (often not ideal) choices about code structure.

Content with Style’s Modular CSS article articulates a good general strategy for separating the various parts of template style design into orthogonal concerns:

  • Layout
  • Navigation
  • Typography
  • Forms
  • Color

A small framework based on this separation is available from the same site. There was also a design contest using this framework which yielded some nice base themes.

Ideally, I’d like to find library of interchangeable implementations of these files. This would require conventions about the naming of markup elements. Does such exist?

The Silverstripe wiki has a page on developing templates, with a few useful links:

Ideas:

  • Pick layouts from Layout Gala
  • Use builtin typography?