Malarkey is Andy Clarke, a creative designer with a passion for accessibility and web standards. This is his personal website.

3d CSS Zen Garden

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.

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 https://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.