Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

10 Years

May 07, 2013

Wow. It’s finally happened. The CSS Zen Garden is 10 years old today.

The web has come a long way in the past decade. CSS3, HTML5, responsive web design, web fonts, a version of Internet Explorer that doesn’t make you want to commit seppuku every time you debug, and any other progress that we already take for granted. (You can get a sense of just how far we’ve come by reading the original cringe-worthy requirements.)

As you can probably imagine, I’ve had a lot of proposals for a “CSS Zen Garden for X” over the years. Javascript, PHP, the mobile web, CSS3, HTML5, ebooks, responsive web design. (And curiously, Joomla. There have been a disproportionate number of Joomla copycats/ripoffs over the years. What is it about that CMS?)

I’ve never been in a hurry to create a new site for any of those; part of what made the original work is that we were stuck in a time when no one was considering CSS seriously. It had an agenda: to try and change that. A CSS3/HTML5 Zen Garden doesn’t need to exist, because who isn’t using those at this point?

But still… it might be fun.

There hasn’t been a conference yet where someone didn’t corner me about a modern update. I’ve seen many blog posts over the years about why we need a responsive or CSS3 version of the site. Even more convincingly, I’ve seen blog posts about why the original has outlived its effectiveness as a teaching aid.

So for the tenth anniversary, the Zen Garden is open for business once more. I’ve thrown the codebase on Github, given the dusty copy a refresh, started the conversion of the site to HTML5, and brought all of the existing designs kicking and screaming into the modern age. The work isn’t done yet, but it’s a darn sight closer to how we would build it these days. If you see an area that needs help, consider sending a patch. (Here’s the current list of issues to resolve, for example.)

The requirements are, of course, quite different this time around:

  • CSS3 is in. Transitions, gradients, shadows, whatever. Just make sure to properly prefix it for all browsers. Webkit-only designs will be discarded with prejudice.
  • Responsive is so in. You don’t have to build a responsive version of your design, but it wouldn’t be a bad idea. It might even be a great idea.
  • Web fonts? Sure. Though I’m not quite sure how you’re gonna pull it off. TypeKit and other hosted services that require tag insertion are out, and licensing probably means you shouldn’t submit your purchased font files. If you can work out some other way to make it work legally, go nuts, but it’s looking like free fonts are your best friend here.
  • Your new browser testing list: IE9+, recent Chrome/Firefox/Safari, and iOS/Android. That should be your baseline. Graceful degradation is acceptable, and in fact highly encouraged.
  • Only the best will be published. High quality design, well coded execution. Same as it has ever been.
  • Please, no garden-themed / Zen pun / self-referential designs. Let’s see some originality.

The form is open. I can’t wait to see what happens next.


Dave S. says:
May 07, 09h

This is probably the part where I’d tell you about a brand new default design, but I’ve been juggling way too much lately for that to happen. Maybe soon.

May 07, 09h

Thanks Dave, this brings back memories. Really glad to see this brought back and updated. Time to go build a submission.

May 07, 09h

Congrats Dave! I’m following since the day 1. It’s still awesome!

May 07, 09h

This brings the the same level of excitement a new series of Strong Bad emails would bring, only with a bit more consequence. Thanks for being a mentor to me in my early days…

May 07, 09h

Ooh! ooh! ooh!

MAJOR procrastinator—I built a design for the first zen garden but never submitted. I’ll have to take a stab again this time around. Although I’m sure the competition is much tougher. :)

KMB says:
May 07, 10h

Seems to be down (not just for me).

You should have updated the server, too ;-)

May 07, 10h

Google Web Fonts can be included via an @import so I suppose they’ll work fine for the zen garden constraints.
Excited!

8
Chris says:
May 07, 10h

Of course, http://csszengarden.com is down right now.

Dan Rubin says:
May 07, 10h

Yay! :D Happy Tenth!

May 07, 10h

Ten years! Wow! Congrats :)

Dave S. says:
May 07, 10h

Thanks all, glad to see some excitement for this! It’s been fun strolling down memory lane over the past week getting ready for this.

The server seems to be spotty right now, but MediaTemple is looking into it. It’s related to a ‘flurry of network activity’ – I’m not saying I’m taking the blame here, but…

@Paul Irish – thanks, that’ll be useful. Free fonts are our best bet unless I can work something else out, luckily there are some not awful Google Fonts.

May 07, 11h

Congrats again on the project rebirth!

May 07, 11h

It’s both inspiring and heartbreaking to me that after 10 years, college and university instructors are still assigning a Zen Garden theme as part of the curriculum.

It’s inspiring because it’s a great assignment. Students are given HTML and must use CSS to change the look. This provides a clear differentiation between markup and presentation, and students learn to push the bounds of CSS.

It’s heartbreaking because we’re teaching the same code we’ve been teaching for 10 years.

Thank you for updating this. I hope the colleges and universities finally update their curricula to match, teaching HTML5, CSS3, and responsive design, and stop letting Internet Explorer 6/7 be the excuse for modernizing the curriculum.

14
Jared says:
May 07, 11h

Btw, what have you been upto lately? Its been a long time since you’ve been active on this blog..

May 07, 11h

This is exciting news. Viva la Zen Garden!

Michelle says:
May 07, 11h

Happy anniversary! Thank you for writing for the book and creating the site. I learned so much from your hard work.

Thanks too for reopening submissions. Maybe all the procrastinators will finally take action…

May 07, 12h

Congrats!

It seems like just yesterday that CSS Zen rocked my world. How time does fly. Here’s to 10 more years of code fu! :)

May 07, 12h

Thanks Dave and welcome back! It’s been a great 10 years.

19
Brian Hart says:
May 07, 12h

Congratulations on 10 years Dave! So glad to see this revived.

May 07, 12h

The CSS Zen Garden is probably one of the number one projects that got me really into web design; great to see you bring the project back to life after 10 years!

21
luis santos says:
May 07, 12h

where is Opera on the browsers list?
it’s the best out there, at least for css standards. they even help define css.

they seem to be going in the wrong direction now. still, their browser is still great.
and yes, i’m writing thing on Firefox, on a public library computer. still, Opera should be the reference for the css part of a site.

Scott says:
May 07, 13h

Hey Dave,

Just wanted to thank you. I owe a large part of my career to CSS Zen Garden. The project helped shape my view of what was possible with web standards and CSS. My submission was also published in a Chinese web design text book, and helped me land a number of jobs. Glad to see it back in business.

Cheers!

23
Vijay Patel says:
May 07, 13h

Congrats! Indeed. Sure many things have changed. But in many ways this was the pebble that started the ripple that started the Tsunami!

May 07, 13h

I am very happy to see you updating this. I have been out there probably three times this past year hoping to see that you have made a change. I will be glad to see what comes of it. Thanks so much this was a great source of inspiration early on, and still fun to revisit from time to time.

May 07, 13h

Congrats on 10 years!

Now excuse me while I walk back to my desk feeling quite dated. ;)

May 07, 13h

I am just so happy about this. CSS Zen Garden basically changed the playing field for the whole industry… it will be nice to see how it is approached in 2013! I hope to find some time to submit something.

May 07, 13h

I probably owe my professional career to the CSS Zen Garden. Thank you Dave.

28
lilmissindie says:
May 07, 13h

Happy 10th! We used CSS Zen Garden for a class assignment, and it was the thing that opened my eyes and made everything I was learning about website html and css fall into place. To be able to see the CSS the designers used - Under the Sea was my favorite - was so helpful and a wonderful privilege. I bought the companion book and spent hours, days, and weeks in awe of the effects I could create with it. Thanks for your efforts in creating the site and now updating it. It may be the inspiration I need to start playing again!

May 07, 13h

Wow! Ten years… Happy Birthday CSS Zen garden, thanks for everything!

30
Crispen Smith says:
May 07, 14h

What a great resource to have come back. I agree that the justification element isn’t needed anymore (I remember feeling very excited when I first discovered CSS Zen Garden in 04 or 05) and understood how important it was to teach the idea of CSS as an essential tool.

But I see an opportunity here to do the same sort of boundary pushing/best practice discussion/proof of concept work that the original was beautiful for.

Sure, there are resources today for like codepen, that allow for specific exploration of one idea, but this showcases the marriage of tech and design like nothing else.

Thank you, thank you, thank you for bringing it back.

May 07, 15h

Whahou 10 years already for CSS Zen Garden! Time is running out but we did not loose faith in what motivate us and now we are thousands more to embrace quality and front-end technologies =)

Happy birthday CSS Zen Garden!

P.S: Did you brew a special beer for this event?!

May 07, 15h

Wow.. cool. Loved it back in the day… such an inspiration. I can’t wait to see what people come up with!
Thx for bringing it back!

May 07, 15h

Only ten years ago? Ah, good. That makes me feel less old.

34
Steve Haney says:
May 07, 15h

I agree with luis santos. Opera should be included since it is one of the top CSS-compliant browsers out there.

Steve Haney

Karine says:
May 07, 15h

Awesome, I actually thought it was older than that!

Congratulations, and thanks, because it taught me a lot about CSS, and I remember it being a great source of inspiration! Can’t wait to see it refreshed.

May 07, 16h

Still have my print copy of The Zen of CSS Design, between that and the site I fumbled my way into a career. Thanks and congratulations on 10 years.

May 07, 16h

Great to see it open back up… I’m one that also had their life change because of CSS Zen Garden. My design (#182) helped me realize how much I wanted to learn more about designing for the web and even brought be into the role of teaching (a couple of years after my submission). Yes, I’m one of those professors who still assigns the Zen Garden Theme challenge (with modified restrictions over the past couple of years). Students have always enjoyed the challenge of the Zen Garden competition and look forward to seeing the new designs. The first 20-100 entries, I expect, will showcase flat design. ;)

Maybe this will finally inspire me to get my own (woefully out-of-date) website updated.

Couple of questions, Dave

Q: If we have an official design, can we send you an updated link if we change our portfolio website URL?

Q: Was there a reason not to add the meta element with the viewport? Just wondering.

May 07, 16h

Holy crap! Welcome back! This site taught me sooooo much about CSS. I forgot all about it until now!

Seriously, thank you for everything you have done.

May 07, 17h

BOOM! Nicely done sir. Especially with your busy schedule.

Dave S. says:
May 07, 18h

@Jen Kramer - an educator helped push me to update to more modern code with this post: http://www.nateomedia.com/notebook/web-development/css-zen-garden-html5/ It’s probably not as dire as you think out there!

@luis @Steve - I hate to be the one to break this to you, but Opera’s former Presto rendering engine is gone. http://thenextweb.com/insider/2013/04/04/opera-confirms-it-will-follow-google-and-ditch-webkit-for-blink-as-part-of-its-commitment-to-chromium/

@Adrien - see my first comment about juggling. Not this time!

@Thomas - great questions. #1 - yes, absolutely. #2 - good catch! I ran out of time, there’s still more to be done. That’s a large part of the reason it’s on Github now, to allow people to contribute fixes like that directly. (But I’ll add that one myself tonight, thanks for the nudge.)

@Adam @Scott @Blagovest @Thomas - it’s an honour, guys. Thank YOU.

May 07, 18h

I added a submission to this site so long ago, 2003 or 2004 that it’s no longer hosted on the server it once was. The company went under during the RealEstate bust. At any rate, shows you how I used CSS Zen Garden to turn my web design and development from tables coupled with WYSIWYG to pure vim or another text editor with semantic HTML and CSS.

May 07, 18h

Happy Tenth Birthday!

This is a really exciting release, and its a great time too. Well done - let the games begin!

Who wants to join me in creating an aggregate site that pulls in all the designs people make on their blogs etc.

Are you going to be choosing the designs that are featured again David?

May 07, 19h

congrats, mate! happy to see it back again. i owe so much to the csszengarden since it boost my career into new dimensions.

Mayu says:
May 07, 20h

Happy anniversary!
Wow, 10 years - brings back memories.
We’ve come a long way and CSS Zen Garden played a big part in making the difference. Thank you.

Maybe you can fix the errors in the translated versions when you get a chance.
I’m the one who translated the site into Japanese way back when :)
http://www.csszengarden.com/tr/japanese/

May 07, 20h

Great work. Happy 10!

CSS Zen inspired me to learn CSS 10 years ago when I was still a grubby high schooler with ethernet cable running down my parents’ hallway to my room. I had a P166 and 13in CRT that I’d brought home from school on the schoolbus over several days time. Now I do web development for my job. Glad to see it making a comeback to inspire the next generation.

46
Joe says:
May 07, 20h

Wow. Zen Garden looks dated and ugly now…

Dave S. says:
May 07, 21h

@Joe - so does your mom!

Dave S. says:
May 07, 21h

@Mayu - definitely on the agenda! The whole reason for adding the site to Github was to allow people who actually speak the language to figure out the best translation without my involvement, and hopefully contribute new ones.

You might also be happy to learn that while I’ve heard complaints about some translations, I’ve never heard any about yours. I’ve even mentioned in talks I’ve given that the Japanese translation is one of the better ones. Thanks for your work all those years ago!

May 07, 21h

Good stuff. I cut my teeth with webmonkey.com and Netscape composer back in the day! Years later a buddy told me about tableless layouts and housing styles in an external file and I was like ‘no F’n way!’ Haha.

50
Al says:
May 07, 22h

I guess I came into the web world late, in 2005-6 so I never learned how to use tables to build web sites. When I had to update a web site, I used CSS and never have used tables, that was a decision I made early on when I started learning HTML and CSS. The future did teach me that this was a wise decision. I am looking forward to updates to this site and the addition of new entries using udated HTML and CSS code. Congrats Dave on 10 years.

Al

Edwin Yip says:
May 07, 23h

Congratulations! That’s quite a long period of time. I wish I had paid attention to the web front end development earlier, then my LIVEditor project (code editor that let’s you see result of CSS/html edits in real-time) would be even more interesting at the earlier years :)

Edwin Yip says:
May 07, 23h

I forgot to add the URL in my previous comment: http://liveditor.com

Lelala says:
May 08, 00h

Its such a wonderful resource; first time i heard about it when getting the book into my hands.
It saved me tons of hours and teached me a lot.
Great Success!
Regards

54
Hans Kuijpers says:
May 08, 02h

great news from a great site like CSS Zen Garden.
I’ve used the zen garden a lot while explaining css to others and it inspired me to do more with css. I’m on of those who used the css zen garden to create a Mambo / Joomla template… And noticed a huge overhead of html in the default Joomla output.
Perhaps a new book too?

55
lboncenne says:
May 08, 04h

IE mobile for windows phone and Blackberry support should be added…

May 08, 05h

This sounds like fun! I do think more people need to learn about CSS3 and use it and that is why I did a http://speakerdeck.com/suzettefranck on CSS3 and using it in WordPress. I hope I can find time to make a submission.

57
Andrew Phillipo says:
May 08, 05h

I have a feeling I’ll be wowed just like I was the first time around with what people can do.

I think you could probably ask typekit/font deck/etc. to just allow all font’s on the zen garden domain as a kind of sponsorship (supposing you wanted to). I would suggest it would be pretty great for their businesses.

Looking forward to seeing how far we’ve come!

Andy.

Django says:
May 08, 06h

I was introduced to CSS Zen Garden in 2007 when I first began web development. I come back at least a couple times a year, just for the nostalgia, and to remember my humble roots. I knew nothing, but was so inspired by the idea that I picked up “CSS: The Definitive Guide, 3rd Edition” from O’Reilly and read the 3 most important chapters of it while at the laundromat with my wife (our washer broke that day). 6 years later, I’m a software engineer, and I owe a huge portion of my inspiration to CSS Zen Garden (and to this site called WordHugger which closed years ago).

59
Nick T says:
May 08, 08h

Awesome news Dave! CSSZenGarden was a huge learning tool for me all those years(10?!) ago. I’m really glad to see it’s being continued. Seeing so many different viewpoints create on the same source was a huge eye-opener to potential. I’ll be keeping tabs on the project again - thank you, and here’s to another 10 years!

ALF535 says:
May 08, 08h

I remember when I didn’t really believe in CSS. It looked like an unnecessary, uphill hassle.

A friend told me to have a look at Zen Garden. I was obstinant at first, but the designs kept me engaged… and then, exploring someone else’s css, the lights suddenly came on and I understood the elgance of the cascade. One of the few “aha” moments in my life that I truly remember.

I owe you dude.

61
Brad says:
May 08, 08h

Zen Garden taught me so much about the use of CSS when I was a beginner. I cannot express enough how much I appreciated this site and how happy I am its starting over to help people learn and learn to think outside the box. Well done Zen Garden!

David says:
May 08, 10h

I cut my teeth on CSS Zen Garden and Eric Meyer on CSS.

Between these 2 resources, I finally understood the separation between HTML and CSS. It was really a ‘lightbulb’ moment.

Zen is a treasure and will be more so, when HTML5’d..

63
DRoss says:
May 08, 12h

Amazing how the web has evolved in the 10 year since the inception of the Zen Garden. I was so inspired by the sites back then and learned so much from them.

Seems like it’s been longer than 10 years though. Time flies!

64
Lu says:
May 08, 12h

Weeeeh! Yes, good memories :)
Thank you! <3

May 08, 12h

It’s been awhile.

May 08, 13h

Awesome! It’s been too long. :D

Rui Silva says:
May 09, 02h

o.O

Congrats!

IT Knol says:
May 09, 07h

Please excuse my ignorance, but if I were to submit a contribution/design to ZenGarden, how would I go about doing that?


Regards,
Yavor Mladenov

May 09, 07h

I was a fan of the Zen Garden when I was a beginner and It was my teach early days and it helped me to start as front end developer freelance service

Django says:
May 09, 07h

This is great, The Zen garden came out just after I graduated and threw out the table-based dreamweaver designing we’d learned. I embraced the manifesto like a creed, and it has served me ever-since.

I look forward to seeing the next generation of designs.

Happy birthday!

May 09, 09h

Happy 10th b’day Zen Garden. Here’s to 10 more years.

May 09, 11h

I learn CSS because of CSS Zen Garden, Happy Birthday and Thank you!

May 10, 01h

My god it’s been ten years already. I just might create another design, it sure was fun the last time! Oh, how I miss IE6.

Mike L says:
May 10, 03h

*{#$! There goes my free time :)

75
The Aysberg says:
May 10, 03h

“strolling down memory lane” sounds nice. 10 years ago we were in the second year of our web development agency and many things happened since! Thank you for Zen Garden which certainly has influenced our work!

RickD says:
May 10, 14h

I disagree that CSS Zen Garden v1 has outlived it usefulness as teaching tool. I learned a lot from it five years ago and most, if not all, of that is still valuable. Granted things have evolved since then and an updated version will be most valuable.

May 13, 01h

Happy 10th Birthday. I remember visiting CSSZenGarden 10 years ago :) Good old days.

Would be nice to add some CSS 4 experimental stuff in it too. Bring the new version on. Can’t wait.

May 13, 09h

Remember when I first started learning CSS, Zen was a great help!

May 14, 21h

What about using something like sass or less? Too complex for this initial fase?

May 14, 21h

Maybe you could add more information about how to develop your page locally, start the server and how to fork the project. Also how to name the folder for your version and what we need to do for creating a new design.

May 18, 05h

It was great to see this back online, I remember CSS Zen Garden sparking my interest and use of CSS and moving me away from sliced / table layouts.

82
Al says:
May 18, 15h

in looking at the CSS code, I did not realize how much “position: absolute” was used in some of the examples, but it seems to be prolific and overused. perhaps the new generation of coding entries will eliminate that questionable technique for positioning content. of course, that all depends on the HTML code layout you are presented with and need to handle. using the absolute parameter for positioning sure would not be conducive to a responsive design.

Al

Dave S. says:
May 21, 08h

Wow has comment spam ever gotten out of control in the past few years. Closing discussion for the sake of my sanity, thanks all.