Skip to content
The source of csszengarden.com
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
001 Re-adding 002-005 legacy May 23, 2013
002
003
004
005 Re-adding 002-005 legacy May 23, 2013
006
007
008 Updating language file, adding 006-010 May 23, 2013
009 Updating language file, adding 006-010 May 23, 2013
010
011
012 Adding legacy 011-025 May 23, 2013
013
014
015
016 Adding legacy 011-025 May 23, 2013
017
018 Adding legacy 011-025 May 23, 2013
019
020 Adding legacy 011-025 May 23, 2013
021
022 Adding legacy 011-025 May 23, 2013
023
024
025
026 Restoring original CSS files for 026-040 May 23, 2013
027 Restoring original CSS files for 026-040 May 23, 2013
028 Restoring original CSS files for 026-040 May 23, 2013
029 Restoring original CSS files for 026-040 May 23, 2013
030 Restoring original CSS files for 026-040 May 23, 2013
031
032 Restoring original CSS files for 026-040 May 23, 2013
033
034 Restoring original CSS files for 026-040 May 23, 2013
035
036
037 Restoring original CSS files for 026-040 May 23, 2013
038
039
040 Restoring original CSS files for 026-040 May 23, 2013
041
042 Restoring original CSS files for 041-060 May 23, 2013
043
044
045 Restoring original CSS files for 041-060 May 23, 2013
046 Restoring original CSS files for 041-060 May 23, 2013
047 Restoring original CSS files for 041-060 May 23, 2013
048
049 Restoring original CSS files for 041-060 May 23, 2013
050
051 Restoring original CSS files for 041-060 May 23, 2013
052
053 Restoring original CSS files for 041-060 May 23, 2013
054
055 Restoring original CSS files for 041-060 May 23, 2013
056 Restoring original CSS files for 041-060 May 23, 2013
057 Restoring original CSS files for 041-060 May 23, 2013
058
059
060 Restoring original CSS files for 041-060 May 23, 2013
061
062 Restoring original CSS files for 061-100 May 23, 2013
063 Restoring original CSS files for 061-100 May 23, 2013
064 Restoring original CSS files for 061-100 May 23, 2013
065
066 Restoring original CSS files for 061-100 May 23, 2013
067 Restoring original CSS files for 061-100 May 23, 2013
068
069 Restoring original CSS files for 061-100 May 23, 2013
070 Restoring original CSS files for 061-100 May 23, 2013
071 Change padding to prevent text overlapping other text or design eleme… Jan 27, 2016
072 Restoring original CSS files for 061-100 May 23, 2013
073 Restoring original CSS files for 061-100 May 23, 2013
074 Restoring original CSS files for 061-100 May 23, 2013
075
076
077
078 Restoring original CSS files for 061-100 May 23, 2013
079
080 Restoring original CSS files for 061-100 May 23, 2013
081 Restoring original CSS files for 061-100 May 23, 2013
082
083
084 Restoring original CSS files for 061-100 May 23, 2013
085
086 Restoring original CSS files for 061-100 May 23, 2013
087 Restoring original CSS files for 061-100 May 23, 2013
088
089
090 Restoring original CSS files for 061-100 May 23, 2013
091 Restoring original CSS files for 061-100 May 23, 2013
092 Restoring original CSS files for 061-100 May 23, 2013
093
094
095
096
097
098 Restoring original CSS files for 061-100 May 23, 2013
099
100
101 Restoring all original CSS files May 23, 2013
102 Restoring all original CSS files May 23, 2013
103 Restoring all original CSS files May 23, 2013
104
105 Restoring all original CSS files May 23, 2013
106 Restoring all original CSS files May 23, 2013
107 Restoring all original CSS files May 23, 2013
109
110
111
112
113
114
115
116 Restoring all original CSS files May 23, 2013
117 Restoring all original CSS files May 23, 2013
118 Restoring all original CSS files May 23, 2013
119 Restoring all original CSS files May 23, 2013
120
121 Restoring all original CSS files May 23, 2013
122 Restoring all original CSS files May 23, 2013
123 Restoring all original CSS files May 23, 2013
124
125 Restoring all original CSS files May 23, 2013
126
127 Restoring all original CSS files May 23, 2013
128
130
131 Restoring all original CSS files May 23, 2013
132
133 Restoring all original CSS files May 23, 2013
134
135
136 Restoring all original CSS files May 23, 2013
137
138
139
140 Restoring all original CSS files May 23, 2013
141
142 Restoring all original CSS files May 23, 2013
143 Restoring all original CSS files May 23, 2013
144
145
146 Restoring all original CSS files May 23, 2013
147 Restoring all original CSS files May 23, 2013
148
149 Restoring all original CSS files May 23, 2013
150
151 Restoring all original CSS files May 23, 2013
152
153 Restoring all original CSS files May 23, 2013
154
155
156 Restoring all original CSS files May 23, 2013
157 Restoring all original CSS files May 23, 2013
158 Restoring all original CSS files May 23, 2013
159
160 Restoring all original CSS files May 23, 2013
161
162 Restoring all original CSS files May 23, 2013
163
164 Restoring all original CSS files May 23, 2013
165 Restoring all original CSS files May 23, 2013
166 Restoring all original CSS files May 23, 2013
167
168
169 Restoring all original CSS files May 23, 2013
170
171 Restoring all original CSS files May 23, 2013
172
173 Restoring all original CSS files May 23, 2013
174
175
176
177
178 Restoring all original CSS files May 23, 2013
179
180 Restoring all original CSS files May 23, 2013
181
182
184 Restoring all original CSS files May 23, 2013
185
186
187
188
189 Restoring all original CSS files May 23, 2013
190 Restoring all original CSS files May 23, 2013
191 Restoring all original CSS files May 23, 2013
192
193 Restoring all original CSS files May 23, 2013
194
195 Restoring all original CSS files May 23, 2013
196
197 Restoring all original CSS files May 23, 2013
198
199 Restoring all original CSS files May 23, 2013
200
201
202
203 Restoring all original CSS files May 23, 2013
204
205 Restoring all original CSS files May 23, 2013
206
207
208
209 Restoring all original CSS files May 23, 2013
210
211 Restoring all original CSS files May 23, 2013
212 Styling tweak to make 212 work better on large screens Feb 29, 2016
213
214 Background colour on 214 Sep 19, 2013
215 Fixed bug at 650px width Jul 18, 2013
216
217
218
219 Merging server-side changes Dec 12, 2013
220
221 Getting 221 on CSSZG TypeKit Jun 27, 2014
examples Updating example files to work better with each other Feb 29, 2016
includes
lang add Simplified Chinese support Sep 18, 2014
legacy
script Adding HTML5 shiv Jul 10, 2013
tr
.htaccess Cleanup of htaccess. Now allows for translations & paging to show up … Apr 16, 2014
LICENSE
favicon.ico
index.php
readme.md
submissions.json
zengarden.xml

readme.md

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 support@typekit.com.

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/

You can’t perform that action at this time.