csszengarden.com

The official repo of the CSS Zen Garden.

Pull requests with improvements welcomed, but remember that changes to the HTML file affect the entire archive of 200+ designs. If you're changing the markup, you'll need to commit changes to all designs affected.

If you plan to submit new designs via Github, please create a new branch for your work and submit that as a pull request. Make sure to update masterlist.php and zengarden.xml with entries for your submission. Best to assign your submission a name instead of a number, since those are dependent on publishing order.

If that makes no sense, just use the traditional submission form here: http://www.mezzoblue.com/zengarden/submit/

Using TypeKit

The CSS Zen Garden fully supports TypeKit. To include custom type in your submission, first create a TypeKit account and build a custom kit with the fonts you want to use. Include the Typekit embed code as usual in your local copy of the Zen Garden HTML file for development.

When you are ready to submit your design, you'll need to copy your Typekit Kit ID to your CSS file before you submit. This will ensure that, when your submission is approved, Typekit fonts will continue to work and font usage won't be charged to your personal account. To do this, copy the Kit ID (found in the Kit Editor, under "Embed Code" in the upper right corner) and paste it into a new comment near the top of your CSS file.

/* TYPEKIT_KIT_ID: <kit-id> */

Replace with your Kit ID. For example, if your Kit ID is "vhu0zxe" the resulting comment in your CSS file should be:

/* TYPEKIT_KIT_ID: vhu0zxe */

Once you added the comment you are ready to submit your design to the CSS Zen Garden. If you have any questions about using Typekit with your CSS Zen Garden submission, do not hesitate to contact [email protected].

Running a local copy

Here's an incomplete list of steps for getting a localhost version of this repo up and running. (You're on your own if you're on Windows, most of the actions are relevant but I have no idea what crazy install/config voodoo you'll need to make it work.)

• Install git if you need to. http://git-scm.org/
• Copy this repo URL. Find the address bar near the top, select 'ssh', and hit the clipboard icon to the right.
• Open a terminal window. Use 'cd' to browse to the parent folder you want the repo to exist in. Hit Cmd+V and Return.
• That'll take a while. While it's downloading, go get and install a localhost server environment like MAMP (http://www.mamp.info/en/index.html) -- or configure your local Apache/PHP if you prefer.
• You'll want to point your server to the files you've downloaded. In MAMP, open up the Preferences screen, choose the Apache tab, and hit Select to choose a document root location. Point this to the root folder where this repo's files live. If you've done it right you'll be able to point your browser to http://localhost/ and should see a fully navigable version of the CSS Zen Garden.

Submitting Designs

There are two ways to submit a new design. If you're reading this, you're likely comfortable with issuing a pull request from GitHub -- please feel free to do it that way.

Everyone else can just use this submission form: http://www.mezzoblue.com/zengarden/submit/