CSS: Zen Garden

Just posted this to cyberdash and thought a few people here might be interested, if for no other reason than to see a wide look at the creative range of CSS:

Here's an interesting look at CSS design. Found it through urlgreyhot's post about his submission acceptance to Zen Garden, a CSS design challenge for web designers.

From Zen Garden:

The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.

Zen Garden goes on to challenge web designers to download the main page and the accompanying CSS file, and, without modifing the HTML, create a new style sheet which demonstrates the creative range of CSS. There are a number of submissions already, each an impressive design skin for the Zen Garden home page. Here are a few:

However, one of the most interesting to me is Douglas Bowman's Golden Mean, not only because of the design itself, but what Bowman has added by explaining his creation process for building Golden Mean. . . .

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
cel4145's picture

Re: Douglas Bowman

Note: Bowman designed the current Wired website theme (among other well known web designs).

Viewing the style sheets

For those interested in learning from the masters, the style sheets are easily viewable. For example, Boddhidarma's style sheet is here:

http://www.csszengarden.com/015/015.css

I think all the style sheets follow the same pattern.

cel4145's picture

Re: Viewing the style sheets

"I think all the style sheets follow the same pattern."

They have to, to a certain extent, in that each will work with the div id classes defined in the original html. To say that there is a pattern may be oversimplying the design intricacies. As well as the difficulty in achieving the different look.

Meanwhile, I've been working recently with the xtemplate theme used with drupal.org to prepare a theme for Kairsonews (when we switch to Drupal as the platform). xtemplate is like Zen Gardens in the sense that the real design comes out in the style sheet. In working on this, I realized that I only wished I was half as good as the designers above at designing a style sheet to work with an existing template :)

Re: Viewing the style sheets

I actually meant naming pattern. I don't have a clue whether the sheets themselves follow the same pattern--I'm lucky if I can get CSS to specify fonts, leading, and margins:)

cel4145's picture

Re: Viewing the style sheets

"I'm lucky if I can get CSS to specify fonts, leading, and margins"

me, too. :)

css Zen Graden theme design

I'm very excited about the project as I just finished a design theme for csszengarden.com
You can have a look at http://www.celebrityblog.net/zengarden/zengarden-sample.htm