Beta
×

Welcome to the Slashdot Beta site -- learn more here. Use the link in the footer or click here to return to the Classic version of Slashdot.

Thank you!

Before you choose to head back to the Classic look of the site, we'd appreciate it if you share your thoughts on the Beta; your feedback is what drives our ongoing development.

Beta is different and we value you taking the time to try it out. Please take a look at the changes we've made in Beta and  learn more about it. Thanks for reading, and for making the site better!

CSS Zen Garden Turns 10

Soulskill posted about a year ago | from the still-kicking dept.

Programming 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."

cancel ×

37 comments

Sorry! There are no comments related to the filter you selected.

CSS is Awesome (5, Funny)

suso (153703) | about a year ago | (#43659123)

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

Re:CSS is Awesome (2)

Mr_DW (894313) | about a year ago | (#43659487)

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

Re:CSS is Awesome (4, Funny)

Tarlus (1000874) | about a year ago | (#43659681)

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

Re:CSS is Awesome (3, Interesting)

CastrTroy (595695) | about a year ago | (#43659723)

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 (3, Funny)

Anaerin (905998) | about a year ago | (#43659773)

Burn him!

Re:CSS is Awesome (4, Funny)

wonkey_monkey (2592601) | about a year ago | (#43662753)

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

Re:CSS is Awesome (0)

Anonymous Coward | about a year ago | (#43663271)

10px or 20?
What about margins?
Inset border?

Re:CSS is Awesome (1)

MindStalker (22827) | about a year ago | (#43665143)

I must know, was the padded cell reference intentional?

Re:CSS is Awesome (0)

Anonymous Coward | about a year ago | (#43661911)

People have been saying this for a decade now.

Essentially it means "I should've learned CSS properly 10 years ago but I didn't and I still have no plan to, so other people will just have to put up with my shitty outdated code."

Re:CSS is Awesome (-1, Troll)

mikael_j (106439) | about a year ago | (#43662465)

Seriously, if you're still using tables for layout you probably shouldn't be doing web development.

Tables are horrible to work with yet I still see horribly hacked-up amateurish table-based layouts that are almost impossible to modify and work with cranked out by developers who should either consider that HTML has changed since 1999 or stick to writing server-side code.

Based on my experience I suspect you also never use <!DOCTYPE> tags, use deprecated elements, nest your elements in nearly unparseable ways and don't quite grasp how to write even basic JavaScript (I'm not claiming to be a JS expert but the incredibly poor quality of JS that some people with CS degrees and 10+ years of experience come up with makes me wonder how they have jobs in the first place).

Re:CSS is Awesome (4, Informative)

hcs_$reboot (1536101) | about a year ago | (#43660479)

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 (1)

gbjbaanb (229885) | about a year ago | (#43663695)

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 (1)

pjt33 (739471) | about a year ago | (#43663911)

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.

Re:CSS is Awesome (0)

Anonymous Coward | about a year ago | (#43663737)

Hey, they might give us grid layout after all. Somewhere in the next ten years or so whene anyone will bother to implement it and all of the old browsers have died out...

The Zen Garden Should Go Away (0)

techsoldaten (309296) | about a year ago | (#43660027)

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 into to work with. This actually isn't true, I just think CSS is one of those things everyone needs to know something about.

Re:The Zen Garden Should Go Away (4, Insightful)

slimjim8094 (941042) | about a year ago | (#43661435)

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:The Zen Garden Should Go Away (1)

houghi (78078) | about a year ago | (#43666851)

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 (1)

slimjim8094 (941042) | about a year ago | (#43668037)

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 (-1)

Anonymous Coward | about a year ago | (#43661887)

...honestly, there are plenty of examples of that elsewhere.

RTFA n00b.

Re:The Zen Garden Should Go Away (1)

haydensdaddy (1719524) | about a year ago | (#43670137)

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 (1)

techsoldaten (309296) | about a year ago | (#43680033)

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 ... (1)

Etrigoth (1119741) | about a year ago | (#43660081)

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 Zen garden vs myspace (0)

Anonymous Coward | about a year ago | (#43660593)

The only thing that ever peeked my interest in truely comphrehending CSS more than garden of zen was myspace meat market.

Both incredibly useful and incredibly scary...

Re:CSS Zen garden vs myspace (0)

Anonymous Coward | about a year ago | (#43661777)

piqued.

CSS hype (4, Interesting)

Animats (122034) | about a year ago | (#43662203)

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 (4, Interesting)

Anonymous Coward | about a year ago | (#43662847)

Erm..

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

Tada. [960.gs] 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 (2, Insightful)

Anonymous Coward | about a year ago | (#43664019)

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 (0)

Anonymous Coward | about a year ago | (#43665301)

..with a fixed number of columns..

You mean like 99% of the websites on the internet?

Let's not forget the millions of other grid frameworks out there which are more flexible than this one. (e.g. this one [profoundgrid.com]

Have you ever used one of these grid systems?

(I'm the AC you replied to btw)

Re:CSS hype (2)

Martz (861209) | about a year ago | (#43664429)

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 (1)

Animats (122034) | about a year ago | (#43666481)

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:Fanboy problem (0)

Anonymous Coward | about a year ago | (#43668557)

When a grid is needed, most sites use a table.

That's very different to arguing that "many sites went back to tables for layout" as you did in your first post, as the implication that the whole site was laid out using tables. The table tag is still there in HTML. It's supposed to be used for displaying tablular style stuff. I, and others, were railing against you for the suggestion that tables should be used for the entire layout instead of demonstrably better alternatives.

I think you managed to pick the only place on the entire page that uses tables... Everything else uses divs, spans, a smattering of HTML 5 tags etc. and plenty of CSS, so you original argument is even less relevant now thanks to your own intervention than it was before.

For a change, I _hate_ Zen Garden (4, Interesting)

Cyberax (705495) | about a year ago | (#43662479)

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 (1)

Anonymous Coward | about a year ago | (#43662783)

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 (1)

Common Joe (2807741) | about a year ago | (#43671759)

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.

Re:For a change, I _hate_ Zen Garden (0)

Anonymous Coward | about a year ago | (#43663415)

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.

While there is merit to your argument, some assumptions about font size have to be made[*]. Whether they're reasonable or not is the actual matter.

[*] Setting a font to 3000 pixels will mess up any UI layout that's not meant for a billboard display.

Re:For a change, I _hate_ Zen Garden (0)

Anonymous Coward | about a year ago | (#43663655)

Even with ‘standard’ font sizes (whatever that means, I guess 16 pixels?) most of the styles on Zen Garden are completely unusable. Large areas of screen space go unused while in many cases the presentational bits (photos, drawings, borders) detract from the content they're supposed to present.
I think the best style is as minimalist as possible. Nowadays most sites follow a kind of standard pattern: a header, navigation, sidebar, content, footer. The header, footer and sidebar are almost always useless and big. The sidebar is usually something that would have been better implemented as something else (like a menu or a link to the home page depending on its use) but it's there because Wikipedia has it and now everyone must have it even though for most of their readers it only eats up space.
Navigation is useful, content is what people actually come for. And the essence of good design and aesthetics is minimalism. Now go create a site that is actually beautiful.

Re: For a change, I _hate_ Zen Garden (0)

Anonymous Coward | about a year ago | (#43673173)

Okay. Are you paying?

Web developers/designers aren't throwing endless sidebars in because they think it looks good or works well but because the client wants to show off what the browser isn't there to see.

Check for New Comments
Slashdot Login

Need an Account?

Forgot your password?

Submission Text Formatting Tips

We support a small subset of HTML, namely these tags:

  • b
  • i
  • p
  • br
  • a
  • ol
  • ul
  • li
  • dl
  • dt
  • dd
  • em
  • strong
  • tt
  • blockquote
  • div
  • quote
  • ecode

"ecode" can be used for code snippets, for example:

<ecode>    while(1) { do_something(); } </ecode>