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 […]

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!) (but 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’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 web 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!


Print Share Comment Cite Upload Translate
APA
Bruce | Sciencx (2024-03-29T08:35:41+00:00) » CSS Zen Garden turns 18. Retrieved from https://www.scien.cx/2021/05/12/css-zen-garden-turns-18/.
MLA
" » CSS Zen Garden turns 18." Bruce | Sciencx - Wednesday May 12, 2021, https://www.scien.cx/2021/05/12/css-zen-garden-turns-18/
HARVARD
Bruce | Sciencx Wednesday May 12, 2021 » CSS Zen Garden turns 18., viewed 2024-03-29T08:35:41+00:00,<https://www.scien.cx/2021/05/12/css-zen-garden-turns-18/>
VANCOUVER
Bruce | Sciencx - » CSS Zen Garden turns 18. [Internet]. [Accessed 2024-03-29T08:35:41+00:00]. Available from: https://www.scien.cx/2021/05/12/css-zen-garden-turns-18/
CHICAGO
" » CSS Zen Garden turns 18." Bruce | Sciencx - Accessed 2024-03-29T08:35:41+00:00. https://www.scien.cx/2021/05/12/css-zen-garden-turns-18/
IEEE
" » CSS Zen Garden turns 18." Bruce | Sciencx [Online]. Available: https://www.scien.cx/2021/05/12/css-zen-garden-turns-18/. [Accessed: 2024-03-29T08:35:41+00:00]
rf:citation
» CSS Zen Garden turns 18 | Bruce | Sciencx | https://www.scien.cx/2021/05/12/css-zen-garden-turns-18/ | 2024-03-29T08:35:41+00:00
https://github.com/addpipe/simple-recorderjs-demo