

CSS Zen Garden relaunched - jmduke
http://www.csszengarden.com/

======
MattJ100
I'm sure I'm not alone - this site really inspired me to first get into web
design and development. Great to see it alive and contributions as imaginative
as ever.

~~~
zevyoura
It's amazing the level of nostalgia produced by looking at some of the old
designs, like Orchid Beauty[0] and Under the Sea[1].

[0]
[http://www.csszengarden.com/?cssfile=/211/211.css](http://www.csszengarden.com/?cssfile=/211/211.css)
[1]
[http://www.csszengarden.com/?cssfile=/213/213.css](http://www.csszengarden.com/?cssfile=/213/213.css)

~~~
mwd_
I'm not nostalgic about the old, low-resolution monitors though. The content
in those design fits into 630/700 pixel wide columns and the 11 pixel text in
Orchid Beauty looks tiny on my screen!

~~~
jimktrains2
Aside: Why do people use px for text and not pt? pt seems like it'd be much
more portable.

~~~
blauwbilgorgel
I think relative font-sizing with "em" and "rem" [1] is a popular and good
choice these days. "em" has been popular since 2004 after an article by Rutter
[2].

IE9- (and Android 1.6-) didn't scale/zoom well when the font was set in px.
But using px was widespread despite these (and other) cons because it was
easy, reliable and consistent to implement across browsers. [3]

Pt (point type) are only for printer style sheets [4], not screen style
sheets. Using them for screen styles is not-done and doesn't make much sense.
[5]

[1] [http://snook.ca/archives/html_and_css/font-size-with-
rem](http://snook.ca/archives/html_and_css/font-size-with-rem)

[2] [http://clagnut.com/blog/348/](http://clagnut.com/blog/348/)

[3]
[http://alistapart.com/article/howtosizetextincss](http://alistapart.com/article/howtosizetextincss)

[4] [http://css-tricks.com/css-font-size/](http://css-tricks.com/css-font-
size/)

[5]
[http://style.cleverchimp.com/font_size/points/font_wars.GIF](http://style.cleverchimp.com/font_size/points/font_wars.GIF)

~~~
jimktrains2
Thanks! for all the information.

------
adrianhoward
Kind of odd to remember era when CSS Zen Garden launched - when you had to
convince people that CSS was a good idea, and when IE leading the way

~~~
eksith
Ditto! I had the most heated arguments with people who complained that tables
"just worked". It didn't help that Photoshop was (is?) king and web slices
split into table/tr/td backgrounds was the most common way to display fancier
layouts.

I also think existing software played a large part in the proliferation of
tables. E.G. WordPress/B2 and phpBB (as well as practically every other forum
system) layouts at the time were all heavily dependent on tables. There was
really no incentive other than "well, CSS is a _better_ way!" Until you came
up with your own examples, there was no convincing.

It was a slow and arduous process, but I hope we keep going forward and not
backward into JS-only land.

------
omegote
So nice, some weeks ago there were some news about CSS Zen Garden's birthday.
Now knowing it's been relaunched is great.

BTW, here's the design I sent... 8 years ago o_O

[http://www.csszengarden.com/?cssfile=185/185.css](http://www.csszengarden.com/?cssfile=185/185.css)

------
Tycho
It's interesting that some of the designs look very contemporary but only use
CSS 1 and 2. Suggests the change in web design is driven more by fashion (or
maybe hardware) than by rendering technology.

On the subject of CSS, I've often thought it would be great if somebody made a
sort of 'CSS koans.' Like each koan would be a little puzzle where you
manipulate the box model etc. to get the desired physical layout.

------
lucisferre
Good thing Dave never got that Pizza he asked for:
[https://twitter.com/mezzoblue/status/210779736652251138](https://twitter.com/mezzoblue/status/210779736652251138)

------
danso
Awesome...I can't remember the last time I've visited this site...but I can't
remember a resource on CSS that I ever read before this one...

Even though it's "just CSS"...I think CSS Zen Garden, and other sites like it,
were _absolutely critical_ to my web development career. Not because I
specialized in web design, but because it demonstrated that CSS was
_cool_...and not just some other syntax to learn (which, when you're new to
web development, can be quite intimidating).

Zen Garden inspired me to learn CSS...and it wasn't the CSS itself that was
important, but the concept that CSS is based on: separation of presentation
and content...something that is very hard to grok until you _just do it_...Zen
Garden's fantastic demos encouraged me to try it out, even if I could never
match the site's artistry.

And if I had never gotten the concept of separation down...I don't think I
would be a web developer today. I think the maintenance of even a simple
personal website built on inline HTML would've driven me to quit web
development long ago...

That said, in my career (which admittedly hasn't been focused on design), I've
never been in a situation where a client has wanted to redesign the site and
to do so was just a task of rewriting the CSS sheets, no matter how well-
written the HTML templates were. Redesigns almost always go hand-in-hand with
addition of new features, technology, and content...the architectural ideal
that CSS Zen Garden strives for is a great one, but it doesn't seem to occur
often in professional work.

~~~
agumonkey
This site taught me the presentation / content separation in an easy manner.
Thankful.

------
teeja
How to put this? Most CSS proponents seem to focus on "beauty" for individual
elements and fairly simple data representation. It'd be useful to see more
design aimed at representing LOTS of data in a way which retains uncluttered
"good looks" without throwing away multiple navigation options.

People with large, rich databases -especially- need ideas on how to represent
that data from many potential angles-of-view while maintaining clarity. 4 or 5
pretty boxes on a page with minimal text just don't suffice. Such ideas are
vanishingly rare on most sites dedicated to CSS.

------
Myrmornis
Why is all the content squashed into the middle of the page when I view on a
laptop? Am I supposed to think it looks good like that or is it designed for a
phone/tablet? Shouldn't the site be showcasing technology that allows pages to
look good on desktop and mobile? (Honest, and probably stupid question -- I
would like to understand.)

e.g.
[http://www.csszengarden.com/?cssfile=/211/211.css](http://www.csszengarden.com/?cssfile=/211/211.css)

~~~
9diov
This is designed around 2004 I guess when 800x600 resolution is not that
uncommon.

------
ChuckMcM
This is awesome, that site has launched a lot of careers and made the web a
better place overall I think.

------
mahmud
That site pretty much put me on the open-standards side of web development. I
was a huge Flash nut.

------
conroy
As a young web developer, I had been using tables and frames to organize my
layout. CSS Zen Garden taught me to separate style and content. I credit this
site for making me a better web developer.

------
Brajeshwar
In the old days, this was one of my task to ask candidates that I interview,
"Can you show-n-tell a CSS Zen Garden Design."

------
sanbor
Am I the only one that finds the site slow in the scrolling and effects? I'm
using Firefox 22 on a Macbook Air from 2012.

~~~
stan_rogers
Probably. Except for the two most recent designs (the new default and "Robot
Boy"), the designs are aimed at something more along the lines of Firefox 1.0,
Netscape 6, IE6 and whatever version of Safari was contemporary with them,
running on a Pentium III/4 with under a gig of RAM. I'm having no trouble with
either of the new designs using an Atom-based Win7 netbook and Chrome 28.

------
Jitle
I am so happy CZG has been relaunched and updated.

This site was my inspiration for a senior project in an independent study
class on web design where I surprised and completely redesigned my teacher's
website while only changing the CSS file, and the original site was not
designed well –- at all.

------
vfl0
Currently used to designing websites, when I found out about this in class I
was so excited. The only problem I found was that I wasn't sure what theme to
make it as most of them follow a certain style but I guess that's down to
myself.

Some fantastic designs produced by it though.

------
pacomerh
CSS Zen Garden was so useful when I started. It was the first time I saw that
you could separate markup and style. I impressed my boss by telling him that
we could just build one functional site and have different skins and we could
save money.

------
neilkelty
Was at a conference last October where Dave Shea talked about the impact of
CSS Zen Garden - but said that the web didnt need it or another one anymore. I
wonder what changed his mind?

------
stigi
Oh wow. Good to have CSSZG back. How could I forget about you... \o/

------
tzury
CSS Zen Garden was the site caused me writing my first CSS file.

------
mmgutz
Heading fonts not so pretty on Windows + Chrome.

------
hawkharris
I love CSS Zen Garden, but it seems like no new content has been added with
this "relaunch." Maybe one or two designs at most.

~~~
_greim_
Didn't it just relaunch? I imagine many people even now are furiously coding
their submissions.

------
beauxespirits
this is the site that inspired me to get into code~! love this site and glad
they revamped it.

------
_greim_
Yay! Zen Garden. 059 reporting in.

------
plg
Maybe I'm a curmudgeon but to me the vast majority of these examples are
outright painful to the eye, they remind me of myspace pages and the like. Can
anyone really imagine spending any significant amount of time reading /
exploring a website that is based on one of these designs? The exception is
the main landing page, I like that one.

~~~
untog
It's not really there to demonstrate viable page designs, it's to show the
flexibility that CSS allows.

~~~
plg
sure I get that ... it's really really cool for that. great for finding out
how to do X by example. Just too bad the examples are so ugly

~~~
djKianoosh
not sure why you got down votes. some of the examples, i agree with you,
aren't pleasing. quite a few are.

it's been a great tool to show beginners, imo. it clearly demonstrates the
effect/power of CSS on the aesthetics of a site. the fact that some examples
are "so ugly" can be used to convey that impact...

~~~
Timothee
I think the downvotes are coming from people who have known and been inspired
by CSS Zen Garden "back in the day".

The thing you need to remember is that CSS Zen Garden was big around 2004 and
most of the designs are from that period. The site was a big inspiration at
the time to show that with a single HTML file, you could completely change the
appearance of a site. This was huge!

So the downvotes are likely coming with a thought along the line of "how dare
you show disrespect for that venerable site!".

~~~
djKianoosh
I remember. I was there :)

tangent: should downvotes be based on "how dare you?" sentiments?

