Bruce Lawson’s personal site

CSS Zen Garden turns 18

Saturday 8 May was the 18th birthday of the famous CSS Zen Garden. To quote the Web Design Museum

The project offered a simple HTML template to be downloaded, the graphic design of which could be customized by any web designer, but only with the help of cascading styles and one’s own pictures. The goal of the project was to demonstrate the various possibilities of CSS in creating visual web design. The CSS Zen Garden gallery exhibited hundreds of examples of diverse web design, all based on a single template containing the same HTML code.

I too designed a theme, which never made it to creator Dave Shea’s official list, but did the rounds on blogs in its day. For a long time, it languished rather broken, because Dave had rejigged the HTML to use HTML5 elements and changed the names of the classes and IDs that I had used as selectors for styling. To mark the occasion, I spent a while reconstructing it. You can enjoy its glory at Geocities 1996 (Seizure warning!). (You might want to use Vivaldi browser which allows you to turn off animated GIFs).

After I tweeted the link on Saturday to celebrate CSS Zen Garden’s birthday, a number of people noted that the site isn’t responsive, so looks broken on mobile. This is because there weren’t any mobile devices when I wrote it in 2003! Sure, I could rewrite the CSS and use Grid and all the modern cool stuff, but that wasn’t my intent. Apart from class and ID names, the only things I changed were the mechanism of hiding text that’s replaced by images. Tt’s now color:transparent as opposed to floating h3 span off screen, as Dave got rid of the spans. The * html hacks for IE6 are still there. (If you don’t know what that means, lucky you. It was my preferred way to target IE6, which believed there was an unnamed selector above the html element in the tree, so * html #whatever would select that ID only in IE6. I liked it because it was valid CSS, albeit nonsensical.)

It’s there as a working artefact of web development in the early 2000s, in the same way as its “exuberant” design is a fond homage to the early web aesthetic that I first discovered in 1996. And what better accolade can there be than this:

Dave’s project opened the eyes of many designers and sent a message across our then-small community of Web Standards wonks that CSS was ready for prime-time. I’m told by many that the Zen Garden is still used by educators, 18 years later. Thank you, Dave Shea!

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.