Follow Slashdot stories on Twitter


Forgot your password?

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."
This discussion has been archived. No new comments can be posted.

CSS Zen Garden Turns 10

Comments Filter:
  • by suso ( 153703 ) * on Tuesday May 07, 2013 @06:12PM (#43659123) Homepage Journal

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

  • While I am all about digital preservation, this is what 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

    • by slimjim8094 ( 941042 ) <> on Tuesday May 07, 2013 @10:53PM (#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.

      • by houghi ( 78078 )

        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.

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

    • While I am all about digital preservation, this is what 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...?

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

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

    by Animats ( 122034 ) on Wednesday May 08, 2013 @01:08AM (#43662203) Homepage

    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)

      by Anonymous Coward on Wednesday May 08, 2013 @03:54AM (#43662847)


      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: (Score:2, Insightful)

        by 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?

    • by Martz ( 861209 )

      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.

      • 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 "":
        <table bgcolor="333333" class="thisday-tb"><tbody> <tr>
        <td class="thisday-yr"> 2012 </td>
        <a href="//">TSA's mm-Wave Body Scanner Breaks Diabetic Teen's $10K Insulin Pump</a> </td>
        <span style="" class="cmntcnt"><span style="bac

  • by Cyberax ( 705495 ) on Wednesday May 08, 2013 @02:01AM (#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.
    • by 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...

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

An elephant is a mouse with an operating system.