Skip to: Navigation | Content | Sidebar | Footer

CSS Zen Garden

Frequently Asked Questions

A list of frequently asked questions that will hopefully address any issue that might spring to mind before you even decide to bring it up.

Is the Zen Garden accepting new submissions?
Yes! After a few years hiatus, the CSS Zen Garden has been re-opened with an HTML5 refresh for its ten year anniversary. Submit your work here, or view instructions for submitting on GitHub below.
What browsers should I support with my design?
Unlike the first run, we’re now looking forward instead of back. IE9 is your minimum cutoff on the desktop, otherwise target the most recent versions of other desktop browsers. You should test your work on mobile browsers as well; recent iOS and Android browsers should be on your testing list. All designs should have the proper vendor prefixes where required — work that is -webkit- prefixed only is not acceptable.
Can I use CSS3, responsive, etc. in my design?
Yes! Forget the old browser requirements and CSS limitations, modern responsive designs and CSS3 are all acceptable, and even expected. Rounded corners, shadows, transitions, etc. are all just fine. (Make sure to see the note about prefixes above, however.)
Can I use web fonts in my design?
Yes, but please ensure your license allows you to distribute them on a publicly-available site. In most cases this means you should limit yourself to free fonts; due to the way the Zen Garden style switching works hosted font services are not currently viable (but perhaps one day they will be.)
How do I submit my design on GitHub?
If you’re reading this, let’s assume you know how GitHub works. The repo is here; clone a copy, create a new branch (don’t skip the new branch step), and add your design as a new top-level folder the same way the other ones exist. Submit your branch as a pull request, and we’ll have a look. If none of that made sense, just use the standard form. And you probably won't get the exact number or folder name you submitted as if your design is chosen.
How do I get in touch with a certain designer?
Follow the link to their own site, and use the contact options there. If the site no longer exists, we can’t get in touch with them either. No really. Ten years is a long time on the internet.
Where did this idea come from?
It’s been something I’ve thought about doing for a long time. Inspired in roughly equal parts by Chris Casciano’s Daily CSS Fun, the Hack Hotbot contest, and an independent idea I’ve had stuck in my head forever, I finally committed to creating this.
Who created it?
Dave Shea, a web designer from Vancouver, Canada.
Why a page refresh when loading new styles?
It’s tempting to think it could be handled with a Javascript style switcher instead of the current server-side method. There are two important reasons why it’s better not to: 1) you can bookmark each style this way. 2) the Javascript method only adds to the existing style, instead of replacing it. A flush would be necessary to clear each one, and the simplest way to achieve this just happens to be a page refresh.
How do I view each design’s CSS?
There’s a convenient link under the ‘Resources’ header titled ‘View This Design’s CSS’. Guess what that does?
How do I see the unstyled HTML file?
By following this link. Use your browser's view source function to see the full markup source, or download the source and open it in your favourite text editor.
Font resizing breaks some of the designs!
Yes, it may. See this article for why the fancy image work of the Garden and font scaling don’t go so well together. However, starting from submission 11 or so, all new designs must account for at least two font sizes larger than the default. Hopefully this will satisfy any font scaling urges.
How are you switching style sheets like that?
The Zen Garden uses a customized PHP script to allow for maximum flexibility. You may download that script in PHP or ASP formats and use it freely in your own work. Alternatively, there exists an excellent Javascript style switcher available from A List Apart that uses cookies to keep a selected style persistent.
Can I use these designs for other things?
You may not use any of the graphics (image files: GIF, JPG, and PNG) on the Zen Garden elsewhere without the original designer's written permission. There are no exceptions to this. The Garden is about learning from other people's work, but not using it uncompensated. While the CSS files themselves are provided as-is under a very open Creative Commons license, we'd encourage you to learn from them and create your own designs instead of using them as a basis for your work. Go ahead and learn from the files, and grab bits and pieces of the CSS as you need them. But if you're using the bulk of the original .css file and only changing a few colours and images, you're basically cloning the design. Please e-mail the designer for permission before doing this, and respect their wishes if they prefer that you don't.
Is the CSS Zen Garden fully accessible?

Probably not. The markup is as semantic as possible and WAI-ARIA roles have been added where appropriate. The “A11y” link on the main Zen Garden page even used to point to automated tests that checked the Zen Garden’s markup for AAA/Section 508 compliance. It passed, but these validators are no longer available.

But even with those measures, accessibility was not necessarily achieved. The WCAG guidelines contain multiple checkpoints which can not be tested automatically; they require a judgment call made by a human, not software. Many designs use techniques (hiding text from the browser, fonts sized with the px unit) which are by nature inaccessible, so the CSS of any particular design is as relevant as the markup when it comes to accessibility.

In some cases and with certain designs, the Zen Garden may come close to achieving AAA compliance. But we can’t in good conscience say that the Zen Garden is a fully accessible site, since we now need such a long disclaimer.

What ever happened to that big huge list of designs?
It’s still around. The current design list only features the “official” designs, meaning those that are hosted at itself. Previously every single design submitted was linked in the main archives, but now only official designs will be. The former list is still available for you to browse however, just be aware that that there are many broken links.