CSS Zen Garden Turns 10

mlingojones writes "The CSS Zen Garden — an attempt to showcase the power of CSS, from ye olden days when most sites used tables for layout, when CSS2 was bleeding edge, when IE5 was the most popular web browser — turns 10 today. In celebration, the maintainer Dave Shea is reopening the project for submissions, with a focus on CSS3 and responsive design."

Comments

CSS is Awesome

[suso]

CSS Zen Garden taught me just how awesome CSS can be. If I could just learn it.

Re:CSS is Awesome

[Mr_DW]

I LOVED CSS Zen Garden. Such a mind opening site for it's time!!!

Re:CSS is Awesome

[Tarlus]

Yeah, it taught me to hate myself for continuing to use an HTML table to form the layout of webpages. =)

Re:CSS is Awesome

[CastrTroy]

I tend to use a little bit of both. While I'm sure everything can done without tables, those of us with real time constraints on projects sometimes just need to get things done. A few simple tables can sometimes save you a significant amount of time in getting your design to look right.

Re:CSS is Awesome

[Anaerin]

Burn him!

Re:CSS is Awesome

[hcs_$reboot]

CSS indeed brings a lot to webpages, compared to no-CSS design. Too bad the CSS creators, while they had some good ideas, were not able to realize what programmers/designers really need.

Re:CSS is Awesome

[wonkey_monkey]

No, he's obviously insane. Throw him into a padded cell!

Re:CSS is Awesome

[gbjbaanb]

I rather think you mean "what programmers want and expect". CSS obviously can do great things for a designer - as showcased by CSS Zen Garden! So if they can do that (and it doesn't seem particularly too way out for clever programmers) how come that said clever programmers can't do it?

I blame the tools, if all you do is slap together some server-side presentation and display it all on the client as a pre-formatted page, with absolute coordinates, then yes - you deserve to keep doing that. If you wanted to split design from content and ship both of them for the browser to display.. then you'll have a much easier time. Too bad the tooling pretty much demands you generate those pre-formatted pages.

Maybe things will change now the browsers are a lot more compatible.

Re:CSS is Awesome

[pjt33]

display it all on the client as a pre-formatted page, with absolute coordinates

Funnily enough, that reminds me of some CSS Zen Garden entries. This one, for example, which requires the user stylesheet not to set any font sizes.

Re:CSS is Awesome

[MindStalker]

I must know, was the padded cell reference intentional?

Just out of interest ...

[Etrigoth]

On a related note, I recall an amazing flash demo from around the same time, it was called Ray Of Light.

Does anyone have an archive of that somewhere? I remember it had an interesting font where all the vowels were underlined.

Re:The Zen Garden Should Go Away

[slimjim8094]

The 'zen' was that you could load a new .css file and have a completely different-looking web page with the same content. I was doing some web design about 8 years ago - badly, I was about 14 and working for my high school over the summer - and even though I didn't know what I was doing it was so obviously a better way to do things than the table-based layout of the existing website that I tried (and failed) to figure out how to do it myself.

Never could figure out web design, so I switched to programming.

CSS hype

[Animats]

CSS has its uses, but the approach to layout is awful. The "float/clear" model is fundamentally one-dimensional. Tables are 2D grids. Most layout systems, like Qt, have some kind of 2D grid formatting system. With float/clear, just getting a few columns to work right is tough.

In practice, many sites went back to tables for layout. Facebook uses tables. Google uses tables. Amazon uses tables. eBay uses tables. Even Slashdot uses tables. Pure float/clear layout is seen mostly in HTML generated by content-management systems, like Wordpress.

CSS certainly didn't make web pages shorter. The claimed "abstraction benefit" never materialized. Some content management systems generate a separate page of CSS for each HTML page. Others just keep generating the same verbose junk over and over again. There are rather routine web pages with 4000 lines of HTML/CSS.

Re:CSS hype

[Anonymous Coward]

Erm..

With float/clear, just getting a few columns to work right is tough.

Tada. Problem solved.

Pure float/clear layout is seen mostly in HTML generated by content-management systems.

I could almost believe you were trying to be funny or deliberately inciteful with this statement, if the rest of your comment wasn't so ridiculous.

The claimed "abstraction benefit" never materialized.

I think this is the biggest WTF in your entire post. Every time you 're-use' a CSS class in several places on your site you're seeing the benefit. Don't want to have the same styles applied to every widget DIV within the HTML? Put them in your CSS file and apply the class. How is that not a benefit? What is your suggested alternative? And this is just the simplest case - there are many others obvious ones.

Your post also talks a lot about CMSs and CSS generation. I don't buy that at all. The CMS we use doesn't generate any CSS - it's just an easy way to create content with templates that we've defined entirely statically.

One last thing: I'm a developer, not a 'web designer'. I've noticed that quite often 'web designers' don't take a particularly structured approach to writing CSS. They look at something in their mock-up, write the HTML for it and style it and then move on to the next thing. Wash, rinse, repeat. This leads to large CSS files and many repeated styles within. I find that I approach it entirely differently (as it's the way I approach writing code I suspect) and will look at the mockup, break it down into chunks and composable/re-usable styles etc. and end up with short style sheets.

Don't get me wrong, I'm sure that there are many 'web-designers' out there who do use CSS 'properly' and who understand it better, but more often than not the ones I hear complaining about it are the ones who do not understand how to write it properly and end up with 7500 line CSS files. (This number is not plucked out of thin air either - it's the length of a file we were left with after we outsourced some work to a design agency recently for a site with only about 5 different HTML templates for the entire site... each page had its own set of styles and hardly anything was reused.)

Re:CSS hype

[Anonymous Coward]

Tada. Problem solved.

"Problem solved?" It's an inflexible library with a fixed number of columns and hardcoded pixel widths. Exactly the kind of horrible design that people normally make when they try to layout a grid using just CSS. CSS is very useful, but it's just the wrong tool for this situation. You can drive a nail by tying a rock to a screwdriver, but why would you?

Re:CSS hype

[Martz]

Amazon, Facebook and slashdot DO NOT use tables for layout, that's total nonsense.

I'm not sure why you would say such a thing when anyone can easily verify this?

The rest of your argument looks weak when you make such a blatantly false claim.

For a change, I _hate_ Zen Garden

[Cyberax]

Yes, I absolutely hate and detest CSS and Zen Garden. Their so called 'designs' are filled with absolute pixel sizes and assume a lot about fonts used - set fonts to 250% and lots of these 'designs' become unintelligible. That crap has set us back at least 10 years in UI design.

It has only recently became possible to use CSS to create table-like sites, and it's still NOT possible to create non-trivial sites that resize themselves based on content.

Re:For a change, I _hate_ Zen Garden

[Anonymous Coward]

One of their conditions was that the design should handle a +50% font size change gracefully; you're doing a +150% size change.

Okay, it seems like quite a few styles are skimping on that requirement, so you do have a point...

Re:For a change, I _hate_ Zen Garden

[Common Joe]

50% font size change? In a world with 24 inch monitors and 4 inch phones? No. As far as I'm concerned, the original goals of website design are being totally trashed by today's web pages: A webpage should be able to resize itself to the specific device without the server querying which browser or device it is on. Perhaps there should be a different layout between the 4 inch and 24 inch extremes, but then the user should decide which version they want -- not the developer.

Fanboy problem

[Animats]

Amazon, Facebook and slashdot DO NOT use tables for layout, that's total nonsense.

Wrong. Take a look at the HTML for today's home page of "slashdot.com":
<table bgcolor="333333" class="thisday-tb"><tbody> <tr>
<td class="thisday-yr"> 2012 </td>
<td>
<a href="//news.slashdot.org/story/12/05/08/1817203/tsas-mm-wave-body-scanner-breaks-diabetic-teens-10k-insulin-pump?sbsrc=thisday">TSA's mm-Wave Body Scanner Breaks Diabetic Teen's $10K Insulin Pump</a> </td>
<td>
<span style="" class="cmntcnt"><span style="background:#333" class="slant"></span><span style="background: #333; color:#fff; font-weight:bold; font-size:.85em">811<span class="hide"> comments</span></span></span> </td> </tr> ...

That's the "This day on Slashdot" section. When a grid is needed, most sites use a table.

Re:The Zen Garden Should Go Away

[houghi]

Never could figure out web design, so I switched to programming.

You are one of the few. Now I am not saying that programming is the same as coding a webpage.
However too often I see PHP/HTML and other coders make extremely ugly designed web pages and web page designers write horrible code.

Zen Garden helped the coder a bit to make it look nice.

Re:The Zen Garden Should Go Away

[slimjim8094]

I've actually tried my hand at web design since, and I don't think I've completely embarrassed myself. The most important thing since 2004ish is that the tools are miles better - both the browsers themselves are, you know, predictable, and there are competent debugging utilities if the layout isn't right. In 2004 if you wanted your layout to look right, you were still stretching spacer GIFs all over the place.

Re:The Zen Garden Should Go Away

[haydensdaddy]

While I am all about digital preservation, this is what archive.org is for, no?

How does opening a site for submissions relate to digital preservation?

I just think CSS is one of those things everyone needs to know something about.

But a site dedicated to raising awareness and providing user-submitted examples of how awesome it can be when used creatively isn't useful...?

Re:The Zen Garden Should Go Away

[techsoldaten]

I just mean it was a nice site that served it's purpose, and maybe that purpose is now fulfilled. I don't know how important it is for the site to be re-opened for submissions or if there is a lot to accomplish.

Think of it this way: could the Zen Garden ever become better than it once was? Could it be more influential? I don't think it could, and believe it would be hard to trump it's earlier successes.