Slashdot Mirror

← Back to Stories (view on slashdot.org)

CSS Zen Garden Turns 10

Posted by Soulskill on from the still-kicking dept.

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

37 comments

  1. CSS is Awesome by suso · · Score: 5, Funny

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

    1. Re:CSS is Awesome by Mr_DW · · Score: 2

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

    2. Re:CSS is Awesome by Tarlus · · Score: 4, Funny

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

      --
      /* No Comment */
    3. Re:CSS is Awesome by CastrTroy · · Score: 3, Interesting

      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.

      --

      Anthropic principle: We see the universe the way it is because if it were different we would not be here to see it.
    4. Re:CSS is Awesome by Anaerin · · Score: 3, Funny

      Burn him!

    5. Re:CSS is Awesome by hcs_$reboot · · Score: 4, Informative

      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.

      --
      Slashdot, fix the reply notifications... You won't get away with it...
    6. Re:CSS is Awesome by Anonymous Coward · · Score: 0

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

    7. Re:CSS is Awesome by wonkey_monkey · · Score: 4, Funny

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

      --
      systemd is Roko's Basilisk.
    8. Re:CSS is Awesome by Anonymous Coward · · Score: 0

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

    9. Re:CSS is Awesome by gbjbaanb · · Score: 1

      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.

    10. Re:CSS is Awesome by Anonymous Coward · · Score: 0

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

    11. Re:CSS is Awesome by pjt33 · · Score: 1

      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.

    12. Re:CSS is Awesome by MindStalker · · Score: 1

      I must know, was the padded cell reference intentional?

  2. The Zen Garden Should Go Away by techsoldaten · · Score: 0

    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.

    1. Re:The Zen Garden Should Go Away by slimjim8094 · · Score: 4, 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.

      --
      I have developed a truly marvelous proof of this comment, which this signature is too narrow to contain.
    2. Re:The Zen Garden Should Go Away by houghi · · Score: 1

      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.

      --
      Don't fight for your country, if your country does not fight for you.
    3. Re:The Zen Garden Should Go Away by slimjim8094 · · Score: 1

      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.

      --
      I have developed a truly marvelous proof of this comment, which this signature is too narrow to contain.
    4. Re:The Zen Garden Should Go Away by haydensdaddy · · 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...?

    5. Re:The Zen Garden Should Go Away by techsoldaten · · Score: 1

      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.

  3. Just out of interest ... by Etrigoth · · 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.

    --
    When we remember we are all mad, the mysteries disappear and life stands explained.
  4. CSS Zen garden vs myspace by Anonymous Coward · · Score: 0

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

    1. Re:CSS Zen garden vs myspace by Anonymous Coward · · Score: 0

      piqued.

  5. CSS hype by Animats · · Score: 4, 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.

    1. Re:CSS hype by Anonymous Coward · · Score: 4, Interesting

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

    2. Re:CSS hype by Anonymous Coward · · 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?

    3. Re:CSS hype by Martz · · Score: 2

      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.

    4. Re:CSS hype by Anonymous Coward · · Score: 0

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

      Have you ever used one of these grid systems?

      (I'm the AC you replied to btw)

  6. For a change, I _hate_ Zen Garden by Cyberax · · Score: 4, Interesting

    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.

    1. Re:For a change, I _hate_ Zen Garden by Anonymous Coward · · 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...

    2. Re:For a change, I _hate_ Zen Garden by Anonymous Coward · · Score: 0

      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.

    3. Re:For a change, I _hate_ Zen Garden by Anonymous Coward · · Score: 0

      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.

    4. Re:For a change, I _hate_ Zen Garden by Common+Joe · · Score: 1

      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.

    5. Re: For a change, I _hate_ Zen Garden by Anonymous Coward · · Score: 0

      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.

  7. Fanboy problem by Animats · · Score: 1

    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.

    1. Re:Fanboy problem by Anonymous Coward · · Score: 0

      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.