Apr 08
3
At the beginning of this year I discovered an article by Jeff Croft in the web magazine A List Apart. In it he extols the virtues of using a framework when designing web sites. Frameworks have been used forever in the coding and programming of applications and it seemed only natural that CSS and XHTML would follow suit.
According to Croft a framework is:
“…a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around.”
After reading the article and doing some additional research on the subject I thought it made complete sense. In fact I had been using my own pseudo framework for Wordpress development – using existing Wordpress templates as a layout and coding guide.
My workflow went something like this:
- Mock up the home page and maybe a couple other pages in Photoshop.
- Search for a Wordpress theme that has a similar layout to my mockup
- Evaluate the themes I found for the best semantic seo friendly markup
- Wrangle the code to insert my images and functions into the site.
- Rinse and repeat.
One of the advantages in using Wordpress is that there are literally thousands of frameworks already in existence. In fact one could argue that every single theme built for Wordpress is a framework. So how can this help you the Wordpress developer and designer? I’ve compiled a list of themes that in my opinion provide the best frameworks for developing in Wordpress.
Please note. I am in no way advocating blatant copying of stylesheets or markup in anyway. These themes are to be used as a guide
Typography and Semantic Markup
- Copyblogger
- Cutline
- Thesis (not free – but incredibly awesome nonetheless)
Magazine Style
Sandbox and Other Very Flexible Themes
If there are other themes you have used and loved for a framework let it be made known in the comments!
On a side note, more recently instead of using actual Wordpress themes I’ve been using specific frameworks that you might be interested in taking a look at.
Blueprint is a framework that is very popular. According to its site these are some of its notable features:
- An easily customizable grid
- Sensible typography
- Relative font-sizes everywhere
- A typographic baseline
- Perfected CSS reset
- A stylesheet for printing
- Powerful scripts for customizing your layout
- No bloat of any kind
Another brilliant framework I’ve discovered in the last couple of weeks is 960 by Nathan Smith. One of the main differences between 960 and Blueprint is the size of grid used and how many columns are included. Blueprint has a width of 950px broken into 24 columns. 960 has a width of…wait for it…960px! And it is broken into 16 and 12 columns respectively.
No matter what you use I think most people will agree that having some sort of framework in your workflow will greatly increase your productivity. And at least for me not having to put my limited brain power in those areas leaves it open for more creativity.
Posted in Development, Frameworks

July 12th, 2008
Interesting post- I also read that article in A List Apart and I also started researching frameworks- to summarise my findings so far:
have one blank site with standard plugins whose database can be cloned onto other sites using mysql commands
use a css file to reset all browser styles (as in Blueprint fw)
use custom css files and firebug
install everything using subversion which makes updates millions of times quicker
I’ll be blogging about some of my discoveries on my site as soon as I finish the new theme I’m developing for it. :)