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...
#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 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 :)
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.
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 On October 25, 2004 02:27 AM Metrostation said:
I've written time back on this
in my blog, Very useful to understand the page structure.
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.
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 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.
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.)
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 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 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/
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 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...?
@ 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 On October 27, 2004 08:33 AM Philipp Keller said:
Hehe.. yes, my question was answered with the "fireworks-answer", but, wel.. the rest is pretty interesting too..! Thanks.
That is going to be very handy for a lot of folks. Thanks.
#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]
@ 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 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.