CSS Zen Garden is 10 years old, open for business

May 7, 2013 10:27 AM

Today is the 10-year anniversary of the CSS Zen Garden Originally created to showcase and inspire the kind of design possible with CSS2 and standards-based design, the CSS Zen Garden is 10 years old today.

The garden has been closed to submissions for a while. However, in honor of this anniversary along with pressure from designers asking when it will reopen, David Shea has reopened the doors. Instead of copying the CSS and HTML from the site, the codebase is up on Github if you want to grab a copy and start work.

New guidelines urge you to think about making new submissions responsive, and "Webkit-only designs will be discarded with prejudice."

Standards have changed somewhat. The original requirements specified that designs must work in "at least IE5+/Win and Mozilla." Your new list: IE9+, recent Chrome/Firefox/Safari, and iOS/Android.

posted by fifteen schnitzengruben is my limit (21 comments total)

(Note, the garden site itself seems to be down at the moment, I think the poor thing wasn't built for the kind of traffic it would get on this anniversary.)
posted by fifteen schnitzengruben is my limit at 10:30 AM on May 7, 2013

Whoa, ten years, that's amazing. I'm curious what new versions of this would look like with all the latest and greatest improvements to CSS3 support in browsers.

(I can't get to csszengarden.com, maybe it's collapsing from everyone linking to it?)
posted by mathowie at 10:30 AM on May 7, 2013

Vertical alignment and columned layout STILL a pain in the ass... But hey, animation!
posted by Artw at 10:36 AM on May 7, 2013 [5 favorites]

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="10%">Cool!</td>
<td width="90%"><blink>10 years?</blink></td>
</tr>
</table>
posted by blue_beetle at 11:51 AM on May 7, 2013 [3 favorites]

Back in the day, they had a great article on Chinese UI, a design analysis
posted by infini at 11:51 AM on May 7, 2013

Blue_beetle - now you'd do that with divs and display: table, which is totally different and better for some reason I've not worked out.
posted by Artw at 12:01 PM on May 7, 2013 [6 favorites]

blue_beetle: <table […]

I'll cut you. ;P
posted by ob1quixote at 1:06 PM on May 7, 2013 [3 favorites]

Jesus, 10 years already?
posted by thsmchnekllsfascists at 1:30 PM on May 7, 2013

Vertical alignment and columned layout STILL a pain in the ass... But hey, animation!

Yeah. One day the thought came into my head: "what if the problem wasn't even standards compliance, but the standards themselves?" And I was enlightened.
posted by invitapriore at 1:51 PM on May 7, 2013 [1 favorite]

I was going to ask what was wrong with 'column', knowing full well that it would only be supported by Opera. Except, now that Opera is moving to Google's WebKit fork, the only browser that supports it is... IE.

Wtf, internets?
posted by sodium lights the horizon at 2:33 PM on May 7, 2013

Here's the original (I think) post on Mefi about the Garden.

now you'd do that with divs and display: table, which is totally different and better for some reason I've not worked out.

I clearly explained this a decade ago. Really. Crap. Technically only 9.something years ago.
posted by yerfatma at 4:01 PM on May 7, 2013 [1 favorite]

I got a little tutorial on how to handle columns by checking out the code on the Metafilterest format of this year's April Fool's Front Page. Haven't put it into use yet, but I still view the page in that format from time to time, with the "Tumblr" picture option, just to see some of the interesting correlations. (this post got the "LONGBOAT" pic)
posted by oneswellfoop at 4:23 PM on May 7, 2013

The reason why you don't use tables has finally arrived, after years of promise. As the folks at the Garden suggest, responsiveness is everything. Your site has to look good in portrait mode on my smartphone AND on my hi-res monitor AND on my TV, from ten feet away. I'm not sure exactly how the cult of table-less design got any traction, considering that tables have been the most effective layout option right up until mobile devices started to proliferate just a few years ago.
posted by blue t-shirt at 5:57 PM on May 7, 2013 [1 favorite]

I would like to see an example of a complex, real-world, application input page - 20 or 30 input fields and their labels, vertical alignment, columned layout handled correctly, with no strange stuff happening when the page is resized.

Can I see an example of that with tables? I must admit I've never had to work with anything with that many fields.
posted by 23 at 6:29 PM on May 7, 2013

ArtW, JeffL: CSS display: table-cell is your friend. Same control, no need to give up semantic markup.
posted by adamsc at 6:41 PM on May 7, 2013

My high school web design teacher showed us CSS Zen Garden. Oof.
posted by nrobertson at 8:14 PM on May 7, 2013

Can I see an example of that with tables? I must admit I've never had to work with anything with that many fields.

At first blush it does sound like a UI fail: if you have that many unique fields, break the thing up into steps. If you have a bunch of the same field so users can enter an arbitrary number of records, make the form dynamically add fields. Either way, if you have a form with 20+ fields, use a table if you like. I can see that. My now-ancient way for aligning forms and labels was to use either divs or list elements with position:relative; padding-left: whatever-px; and then do something like


form li label {
position: absolute;
top: 2px; /* or whatever aligns where you like */
left: 0;
}


to get the labels in place. That also allows you to adjust the top position of the label for rows with textareas, large selects or what have you.
posted by yerfatma at 10:05 AM on May 8, 2013

I like the ones that replace the text with an image of the text.
posted by 3.2.3 at 4:03 PM on May 8, 2013

Anyone rembered the moment of insanity when dynamically replacing text with flash movies of the text in the font you desired was a thing? What the fuck was everyone thinking?
posted by Artw at 4:08 PM on May 8, 2013 [1 favorite]

Dynamically replacing text with flash movies of the text in the font you desired

I thought I had successfully repressed this, and now it's all coming back. Damn you, Milkman Artw.

(Though it was the dark days before web fonts and I guess for some folks, if the only tool you have is Flash, every problem looks like a .swf. Was so weird when I had to rip that out of a site I'd inherited.)
posted by fifteen schnitzengruben is my limit at 4:15 PM on May 8, 2013 [1 favorite]

I'm not sure exactly how the cult of table-less design got any traction, considering that tables have been the most effective layout option right up until mobile devices started to proliferate just a few years ago.

THIS

SO MUCH THIS
posted by ook at 5:58 PM on May 10, 2013