CSS Zen Garden


Return to CSS Zen Garden

Can I use these designs for other things?

No, mostly. You may not use any of the graphics (image files: GIF, JPG, PNG, SVG, etc.) on the Zen Garden elsewhere without the original designer’s written permission. There are no exceptions to this. The Zen 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 email the designer for permission before doing this, and respect their wishes if they prefer that you don’t or consider other options if you can’t get in touch with them.

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. 20 years is a long time on the internet.

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.

Even with those measures however, accessibility is not necessarily achieved. WCAG guidelines contain multiple checkpoints that can not be tested automatically; they require a judgment call made by a human, not software. Many designs use techniques like hiding text from the browser that 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.

How do I view each design’s CSS?

There’s a convenient link under the ‘Resources’ header titled ‘View This Design’s CSS.’

How do I get the HTML file?

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.

Is the Zen Garden accepting new submissions?

Probably not. Read more here.