More Eric Meyer

on CSS

Voices That Matter™

Designing in the Garden

Project 10

preview image 1 preview image 2 preview image 3
Project files
Project 10 ZIP file Project 10 Gzip file Project 10 StuffIt file

In May 2003, the CSS world was introduced to an amazing new resource: the CSS Zen Garden. The goal of this site was to provide designers with an HTML document that they could not change in any way and to challenge them to write a style sheet that would present the file with flair, visual appeal, and originality.

As of this writing, there were close to 100 different official Zen Garden designs, every one striking and every one different, some radically so. The site's goal had been to show that CSS design could be beautiful, that such beauty could be created on top of a relatively simple document structure, and that the same document could be presented in totally different ways. It has succeeded brilliantly on all counts.

Since Eric Meyer on CSS finished with a challenging project (in that case, re-creating the book's layout in CSS), it seemed to me that taking on a similar challenge would be fitting for this book. Creating a Zen Garden design seemed to fit the bill nicely.

There was only one problem. I freely admit that I'm not a strong visual artist (and some would label that a gross understatement), and Zen Garden designs need to look really good. So I decided to go to someone who is a strong visual artist: Dave Shea, founder of the CSS Zen Garden and a technical reviewer for this very book. Dave produced a beautiful design, and I turned it into a CSS-driven layout. This project is a recounting of the steps I took to make that happen.


There are no known errata for this project.