CSS Zen Garden relaunched

http://www.csszengarden.com/

by jmduke • 13 years ago

218 47 13 years ago

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• 13 years ago

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.

MattJ100• 13 years ago

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.

anishkothari• 13 years ago

I too was inspired by CSS Zen Garden years ago. It looks just as beautiful now as it did then.

zevyoura• 13 years ago

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 [1] http://www.csszengarden.com/?cssfile=/213/213.css

mwd_• 13 years ago

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!

Jitle• 13 years ago

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.

stigi• 13 years ago

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

omegote• 13 years ago

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

ChuckMcM• 13 years ago

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

plg2• 13 years ago

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• 13 years ago

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

plg2• 13 years ago

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

spohlenz• 13 years ago

I could be wrong but it seems to me that only the latest two designs (A Robot Named Jimmy and Verde Moderna) are what would be considered "modern" designs and the rest are from before the relaunch.

conroy• 13 years ago

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.

danso• 13 years ago

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• 13 years ago

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

lucisferre• 13 years ago

Good thing Dave never got that Pizza he asked for: https://twitter.com/mezzoblue/status/210779736652251138

Tycho• 13 years ago

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.

pacomerh• 13 years ago

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.

vfl0• 13 years ago

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.

beauxespirits• 13 years ago

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

sanbor• 13 years ago

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• 13 years ago

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.

tzury• 13 years ago

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

Myrmornis• 13 years ago

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

9diov• 13 years ago

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

mahmud• 13 years ago

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

Brajeshwar• 13 years ago

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

hawkharris• 13 years ago

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_3• 13 years ago

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

_greim_3• 13 years ago

Yay! Zen Garden. 059 reporting in.

mmgutz• 13 years ago

Heading fonts not so pretty on Windows + Chrome.

teeja• 13 years ago

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.

neilkelty• 13 years ago

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?

CSS Zen Garden relaunched

Related Stories