CSS Zen Garden Turns 10 37
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."
CSS is Awesome (Score:5, Funny)
CSS Zen Garden taught me just how awesome [zazzle.com] CSS can be. If I could just learn it.
Re: (Score:2)
Re:CSS is Awesome (Score:5, Funny)
Yeah, it taught me to hate myself for continuing to use an HTML table to form the layout of webpages. =)
Re:CSS is Awesome (Score:4, Interesting)
Re:CSS is Awesome (Score:4, Funny)
Re:CSS is Awesome (Score:5, Funny)
Re: (Score:2)
I must know, was the padded cell reference intentional?
Re:CSS is Awesome (Score:5, Informative)
Re: (Score:2)
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 s
Re: (Score:2)
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 [csszengarden.com] one, for example, which requires the user stylesheet not to set any font sizes.
The Zen Garden Should Go Away (Score:1)
While I am all about digital preservation, this is what archive.org is for, no?
This was useful around a decade ago, now it's not. It might be useful to have CSS3, HTML 5 and responsive design examples up there, but, honestly, there are plenty of examples of that elsewhere. I don't think they translate directly to making a single document beautiful.
It's not that the Zen Garden did not speak to me, it did, but I always thought this made CSS sound too special. Like something you have to be aesthetically tuned
Re:The Zen Garden Should Go Away (Score:5, Insightful)
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.
Re: (Score:2)
Re: (Score:2)
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: (Score:1)
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: (Score:2)
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.
Just out of interest ... (Score:1)
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.
CSS hype (Score:5, Interesting)
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 (Score:4, Interesting)
Erm..
Tada. [960.gs] Problem solved.
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.
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: (Score:2, Insightful)
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: (Score:3)
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.
Fanboy problem (Score:2)
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="bac
For a change, I _hate_ Zen Garden (Score:5, Interesting)
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: (Score:1)
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: (Score:1)