Stuff and Nonsense

Malarkey is Andy Clarke, a UK based designer, author and speaker who has a passion for design, CSS and web accessibility.

Andy has been working on the web for almost ten years. He is a visual web designer and author and he founded Stuff and Nonsense in 1998. Andy regularly writes about creating beautiful, accessible web sites and he speaks at events worldwide. Andy is the author of Transcending CSS: The Fine Art of Web Design, published by New Riders in 2006.

3d CSS Zen Garden

I've been thinking about making a CSS Zen Garden entry for a little while now, so I started by making a graphic to illustrate the Garden XHTML structure.

I've been thinking about making a CSS Zen Garden entry for a little while now, but before I think about design, I wanted to understand the Garden's XHTML structure. I don't know if this has come up anywhere before, but it seemed sensible for me to make a graphic illustration of the XHTML file.

Here it is...

3d CSS Zen Garden
(JPG 165Kb)

Replies

  1. #1 On October 23, 2004 02:25 PM John Oxton said:

    That's an interesting idea.

    When I did my submission I knocked up a quick CSS file that outlined each specific div in a different colour and/or border style. that was a pretty useful way to see what was going on.

  2. #2 On October 23, 2004 03:44 PM Tobin Jones said:

    A beautiful rendition, I must say!

    You probably already knew this - but for a web developer on the go, I find using the "Web Developer Toolbar" extension for Firefox indespensible. "Information > Display Topographic Information" uses some custom CSS to show a psuedo-3d rendition of the page using layers of grey. When used in conjunction with "Information > Display ID & Class Information" and "Disable > Styles" , a lot of valuable information can be discovered, very quickly.

    It doesn't look as nice as this though :)

  3. #3 On October 24, 2004 12:23 PM Yasuhisa said:

    Nice.

    I've made a similar chart like you made for my zen garden article (in Japan). Visualization like this helps organize ideas and ... specially... a good communication tool for other designers and developers.

  4. #4 On October 25, 2004 12:25 AM Andrew K. said:

    Great!
    I've been meaning to get off my butt and do a Zen Garden submission for over a year now...
    This is just the helping hand I needed. Thanks Comrade :D

  5. #5 On October 25, 2004 02:27 AM Metrostation said:

    I've written time back on this
    article
    in my blog, Very useful to understand the page structure.
    Ciao Emiliano..

  6. #6 On October 25, 2004 08:37 AM mearso said:

    I too used the trusty 'border everything' trick. And to combat my leaky memory I use color names whilst setting out the structure of pages.

    I like your graphic though. Anything that clarifies the process has got to be good to help you work.

  7. #7 On October 25, 2004 07:02 PM Keith said:

    That's great. I could see how something like this might be very good in a style guide that firms hand off to clients.

  8. #8 On October 25, 2004 07:37 PM Rob Mientjes said:

    Thanks a lot man, I've always been put off by the fact that there is so much extraneous code... This really motivates me to try it again.

  9. #9 On October 25, 2004 08:52 PM Dave S. said:

    Hey, now that's a neat idea. Nice work Andy. (There's definitely too much markup in there from today's perspective, now that we know the spans are unnecessary for image replacement.)

  10. #10 On October 25, 2004 09:09 PM jadwigo said:

    Now all we need is a nice automated script that does this for any given html file :)

    The webdeveloper toolbar extensions are getting close... so in Firefox it might be possible to write a stylesheet to do that :)

  11. #11 On October 26, 2004 04:42 AM Eric Slade said:

    Thank you, thank you!
    On a day when CSS has not been my friend, this is a welcome light at the end of the web standards tunnel.

  12. #12 On October 26, 2004 11:14 AM Dave Child said:

    > Now all we need is a nice automated script that does this for any given html file :)

    I created a script to output a page in a similar form to the above, so you can see the structure of a page in a nested format. Admittedly the result isn't as pretty as your piccy above, but I find the thing useful...

    It's at http://www.ilovejackdaniels.com/resources/view-page-structure/

  13. #13 On October 26, 2004 01:01 PM Malarkey said:

    Thanks guys!

    I can't see you changing the Garden XHTML any time soon Dave, but I do wish you would add a 'content' wrapper around <div id="intro"> and <div id="supportingText">. It shouldn't break any existing designs and would my life a lot easier! ;)

  14. #14 On October 26, 2004 04:11 PM Philipp Keller said:

    Malarkey: In what programming language did you do the code..? PHP or such..?
    Can you share it..? pleeease...?

  15. #15 On October 26, 2004 04:25 PM Malarkey said:

    @ Philip: The code for what, this site, Karova Stores...?

    The site is based on MT with a bunch of plugins including Amputator, Flip-flop, Switch and Blacklist.

    Most sites that we develop use a mixture of ASP and PHP (seldom), although a new site builder product which Karova will launch in a few months time will become the norm.

    Karova Stores are based on three .Net applications, written in C#. They use an XML architecture with XSLT to transform the data into XHTML.

    Does that help?

    (Edit: Ohhhhh, I think I understand... the graphic for the Garden was made with three brain cells, sellotape and a brown-paper bag... actually it was made in Fireworks.)

  16. #16 On October 27, 2004 08:33 AM Philipp Keller said:

    @ Malarkey:
    Hehe.. yes, my question was answered with the "fireworks-answer", but, wel.. the rest is pretty interesting too..! Thanks.

  17. #17 On October 27, 2004 11:32 PM Root said:

    That is going to be very handy for a lot of folks. Thanks.

  18. #18 On October 28, 2004 11:22 AM Stefan Isarie said:

    Belive it or not, I was just about to request an entry to css Zen Garden and, before starting to efectively design the page, I have made, on a pice of paper, the same structure you have here. I did this on Saturday, 23 October, 2004.

    I would also wanted to publish an article regarding the design process of my css Zen Garden entry... So, I'm behind the schedule again :( Somebody, like you, is some steps ahead...

    BTW, great picture :D
    [please excuse my bad English, I'm Romanian]

  19. #19 On October 28, 2004 11:36 AM Malarkey said:

    @ Stefan: Looks like I just beat you to it. ;) No problem about your English. I know some Brits who speak worse English than you, and I know not a single word of Romanian, is it like Russian at all?

    @ Jadwigo: Tools like Firefox's Web Developer toolbar and automated scripts are great, but in making my design (not public, sorry) I took my graphic, added the full Garden text and then moved the boxes around (like Jason Santa Maria's grey boxes) in Fireworks to make the comp. I could then work on the CSS after knowing that it would look like I wanted it to. A script couldn't do that - otherwise some clever geezer would write a script and we'd be on the dole.

  20. #20 On November 2, 2004 08:57 AM J�rg Petermann said:

    Look nice! :))
    I also think about a design. A nice inspiration for me.
    Hope it help me to start over soon. A nice inspiration for the german fans of css zen garden.

This article was originally published by Andy Clarke on his personal web site And All That Malarkey and is reproduced here for archive purposes. This article is published under a Creative Commons By Attribution License 2.0.

Andy Clarke Stuff and Nonsense Ltd.
The Cow Shed Studio, Eversleigh Gwaenysgor Flintshire LL18 6EP UK

Or call us on the dog and bone on +44 1745 851848. Download our vcard.

© Copyright Stuff and Nonsense Ltd. All Rights Reserved except as noted.