The 133 theme for WordPress: Version 2

The 133 theme has been redesigned. Now with even less.

Download the 133 theme for WordPress (version 2, ZIP, 16K)

Flicking and reading

The thinking behind 133 was to provide a theme that gave the reader nothing to do apart from read posts and flick to the next one. It was built on Sandbox and took a grand total of 133 minutes to write (geddit?)

It was actually my second most popular theme (surprising, considering it wasn’t listed by Smashing Magazine), perhaps providing evidence that there’s a demand for design that promotes reading and little else (see Readability and Today’s Guardian).

Screenshot of the 133 theme. 3 columns, first is empty, content off centre to the right. Uses serifs for body copy, headings in an old looking font.

Screenshot of the 133 theme.

To get an idea of what it does it’s best to list what it doesn’t:

  1. no search
  2. no archives
  3. no tags or categories
  4. no navbar
  5. no menu
  6. no comments
  7. no Twitter integration (there was in version one, but it was pointless)

Usage

Excerpts

The theme makes use of excerpts by displaying them on the front page and above posts on single pages. If a post doesn’t have an excerpt, the front page will display the whole post instead, and the single page won’t display an excerpt (obviously), nor an abbreviated version of the full post. In short, feel free to use excerpts but don’t worry if you don’t.

Images

The content column is 560 pixels wide. If you add the class pull to an image it’ll place it in the empty left hand column. Pulled images must be 265 pixels wide; if they’re not, they’ll be resized. (Note: you can apply the pull class to any element). Centring images and floating left and right work in the normal way.

Asides

I’m a fan of (proper) conversational asides in blog posts. Wrap anything in aside tags and 133 will pull it into the left hand column. (Warning: WordPress can be somewhat moody with asides; check your HTML after making any amendments).

Additional information

The theme will attempt to display the following info from behind the scenes:

  • Users → Your profile → About yourself → Biographical information is displayed in the footer
  • Settings → General → Description serves as a tagline and is displayed in the header, aligned right

Behind the scenes

The theme has been re–written from the ground up. It’s now marked up in shiny HTML5 and I’ve used the Google Font API to sprinkle some IM Fell DW Pixa around.

(A by–product of all this is to reduce the size of the zipped theme to 15.7K, including a screenshot. The stylesheet weighs in at 291 lines, including comments.)

It looks different

The structure is essentially the same: three columns, the first left mainly empty, the content placed off centre to the right. Titles are now set in IM Fell DW Pixa and body copy remains 100% (16 pixels). If you’re on Windows you’ll get Georgia. If you’re on a Mac or Linux you’ll get Palatino. Everyone’s happy.

The content column has been widened from 500 pixels to 560 pixels.