By Craig Buckler

Happy 10th Birthday CSS Zen Garden

By Craig Buckler

CSS Zen Garden is ten years old. If you started coding recently you may not have heard about the site, but Zen Garden was a defining moment in web history.

Zen’s developer, Dave Shea, had a simple objective: to illustrate why CSS should be taken seriously and inspire designers. The concept provided a static HTML page and allowed developers to apply and submit their own styles. The only restrictions were that the CSS should validate and the resulting page worked in IE5+ and Mozilla (Firefox’s predecessor).

The number of submissions increased exponentially and there was a sudden realization that CSS could do more than just apply color to H1 titles. To put it into historical context, by 2003 CSS techniques had been viable for several years but tables and spacer GIFs remained the predominant page layout methods. Tables worked in all browsers and were well understood.

Zen Garden did for CSS what Jesse James Garrett’s A New Approach to Web Applications did for Ajax a couple of years later. The technologies already existed, but it required a spark to ignite developer passion and revolutionize its application.

Zen Garden 2013

Zen Garden achieved its goal — who isn’t using CSS layouts now? To celebrate an amazing ten years, Dave Shea has re-released Zen Garden, put the code on GitHub and started work on a new HTML5 version. A lot has happened in the past decade, so the modern requirements permit:

  • CSS3 transitions, transformations, animations, shadows, gradients and effects. Remember to prefix properties where necessary but Webkit-only designs will be “discarded with prejudice”!
  • Responsive Web Designs
  • Web fonts
  • Support for IE9+, recent versions of Chrome, Firefox and Safari, and iOS/Android

New designs can be submitted now. Please send us the URLs of your groundbreaking examples or designs you like.

  • James

    Awesome to hear of a re-launch. Zen Garden still has the power to amaze when you realise that you are looking at exactly the same web page but changing only the CSS gives the impression of a totally different creation. Stunning effect.

    • Absolutely. It provided many designers with a CSS eureka moment. It changed perceptions of the web and was constructive in moving it beyond magazine-style static layouts.

  • I love history. The web history has always fascinated me. I am surprised that I got to know about zen garden today!

  • CSS Zen Garden was a huge illustrator for me years ago. I just blew my mind that people could do so much without altering the site’s code one bit. It still kind of blows my mind.

  • This website is an absolute classic, has my vote for the web development hall of fame.

  • Zen Garden was absolutely the first thing thing i saw that made me realize how cool the internet could be. Sure in the big picture it’s pretty basic technology, but I’ve essentially been living off of CSS skinning for 10 years now.

  • Ruthie

    Agree with Dave, James and Craig — finding that was like Christmas year ’round for me — it still amazes me what people did with what they were given and I learned SO MUCH plying the code myself. Happy Birthday CSS Zen Garden!

  • Mike

    Wow!, can’t believe it’s been around for 10 years already. Zen Garden was definitely my CSS eureka moment and I have used concepts I learned from it my whole career. I think it’s fair to say that Zen Garden was the original responsive design even without media queries. Congrats Zen Garden, can’t wait to check out the 2013 version.

  • walter

    10ans, déjà… Je rends ici hommage à Monsieur Shea pour avoir créé Css Zen Garden qui fut une étape charnière pour nombre de web designer et bien d’autres, changeant par la-même notre paradigme de la conception du web bouleversée comme une élévation spirituelle; au même titre que les premières perspectives naissantes sous la plume des peintres de la Renaissance qui mirent l’infini dans le fini, se rapprochant ainsi de leur aspiration à exprimer le Divin. Dave a certainement été touché par la grâce ! :-) Chapeau bas…. (je m’excuse par avance de ne pas m’exprimer en anglais mais dans ma langue le Français. Peur d’écrire du contenu plein de fautes, incompréhensible, et d’une sombre platitude… :-)

Get the latest in Front-end, once a week, for free.