mezzoblue § 10 Years

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.