index.html 32.3 KB
Newer Older
1
<!DOCTYPE html>
Thomas Park's avatar
Thomas Park committed
2
3
4
<html lang="en">
  <head>
    <meta charset="utf-8">
5
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
Thomas Park's avatar
Thomas Park committed
6
	<meta name="description" content="Saving the web from default Bootstrap.">
Thomas Park's avatar
Thomas Park committed
7
    <title>Bootswatch: Free themes for Twitter Bootstrap</title>
8

Thomas Park's avatar
Thomas Park committed
9
10
11
12
    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
13

Thomas Park's avatar
Thomas Park committed
14
    <!-- Le styles -->
15
    <link href="assets/css/bootstrap.css" rel="stylesheet">
16
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Thomas Park's avatar
Thomas Park committed
17
    <link href="css/bootswatch.css" rel="stylesheet">
Thomas Park's avatar
Thomas Park committed
18
19
20
	<link rel="alternate" type="application/rss+xml" 
	  title="Bootswatch" 
	  href="http://feeds.feedburner.com/bootswatch" />
Thomas Park's avatar
Thomas Park committed
21
22
23
24

	<script type="text/javascript">

	  var _gaq = _gaq || [];
Thomas Park's avatar
Thomas Park committed
25
		  _gaq.push(['_setAccount', 'UA-23019901-1']);
Thomas Park's avatar
Thomas Park committed
26
		  _gaq.push(['_setDomainName', "bootswatch.com"]);
Thomas Park's avatar
Thomas Park committed
27
28
  		  _gaq.push(['_setAllowLinker', true]);
		  _gaq.push(['_trackPageview']);
Thomas Park's avatar
Thomas Park committed
29
30
31
32
33
34

	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
35

Thomas Park's avatar
Thomas Park committed
36
	</script>
Thomas Park's avatar
Thomas Park committed
37
	
Thomas Park's avatar
Thomas Park committed
38
39
40
41
42
43
44
45
46
47
48
  </head>

  <body>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
			<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
			</a>
Thomas Park's avatar
Thomas Park committed
49
          <a class="brand" href="./">Bootswatch</a>
Thomas Park's avatar
Thomas Park committed
50
          <div class="nav-collapse">
Thomas Park's avatar
Thomas Park committed
51
			  
Thomas Park's avatar
Thomas Park committed
52
53
54
          </div><!--/.nav-collapse -->
        </div>
      </div>
55
56
    </div>

Thomas Park's avatar
Thomas Park committed
57
    <div class="container">
58

Thomas Park's avatar
Thomas Park committed
59
60
61
      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Bootswatch</h1>
Thomas Park's avatar
Thomas Park committed
62
        <p id="tagline">&nbsp;</p>
Thomas Park's avatar
Thomas Park committed
63
64
		
        <div id="social">
65
  	      <div class="span4 github">
Thomas Park's avatar
Thomas Park committed
66
67
  			<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=thomaspark&repo=bootswatch&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
			<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=thomaspark&repo=bootswatch&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53px" height="20px"></iframe>		
Thomas Park's avatar
Thomas Park committed
68
  		  </div>
69
          <div class="span4 twitter">
Thomas Park's avatar
Thomas Park committed
70
  			<a href="https://twitter.com/thomashpark" class="twitter-follow-button" data-show-count="false" data-show-screen-name="true">Follow @thomashpark</a>
Thomas Park's avatar
Thomas Park committed
71
  			<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootswatch.com" data-via="thomashpark">Tweet</a>
Thomas Park's avatar
Thomas Park committed
72
  		  </div>
73
		  <div class="span1 rss">
74
  			<a class="btn rss-button" href="http://feeds.feedburner.com/bootswatch"><i class="icon-rss"></i><span>RSS</span></a>
Thomas Park's avatar
Thomas Park committed
75
		  </div>
Thomas Park's avatar
Thomas Park committed
76
77
78
79
  	    </div>	
      </div>

      <!-- Example row of columns -->
Thomas Park's avatar
Thomas Park committed
80
      <div class="row about">
Thomas Park's avatar
Thomas Park committed
81
82
83
84
85
86
87
88
89
90
91
        <div class="span4">
          <img src="img/glyphicons_036_file.png">
		  <h3>Easy to Install</h3>
          <p>Simply download the CSS file from the swatch of your choice and replace the one in Bootstrap. No messing around with hex values.</p>
       </div>
        <div class="span4">
		  <img src="img/glyphicons_009_magic.png">
          <h3>Whole New Feel</h3>
          <p>We've all been there with the black bar and blue buttons. See how a splash of color and typography can transform the feel of your site.</p>
        </div>
        <div class="span4">
Thomas Park's avatar
Thomas Park committed
92
          <img src="img/glyphicons_050_link.png">
Thomas Park's avatar
Thomas Park committed
93
		  <h3>Tuned for 2.0.2</h3>
94
          <p>Swatches are built for and tested with the latest version of Bootstrap. <a target="_blank" href="https://github.com/thomaspark/bootswatch/downloads">Previous versions</a> are also available for download.</p>
Thomas Park's avatar
Thomas Park committed
95
96
97
98
99
100
101
       </div>
      </div>
	  
      <div class="row about">
        <div class="span4">
		  <img src="img/glyphicons_341_github.png">
          <h3>Open Source</h3>
102
          <p>Licensed under Apache 2.0 and maintained by the community on <a target="_blank" href="https://github.com/thomaspark/bootswatch">GitHub</a>.</p>
Thomas Park's avatar
Thomas Park committed
103
104
105
106
107
108
109
110
111
112
        </div>
         <div class="span4">
           <img src="img/glyphicons_025_binoculars.png">
  	  <h3>Modular</h3>
           <p>Changes are contained in just two LESS files, enabling modification and ensuring forward compatibility.</p>
         </div>
		
        <div class="span4">
          <img src="img/glyphicons_032_wifi_alt.png">
		  <h3>Stay Updated</h3>
Thomas Park's avatar
Thomas Park committed
113
          <p>Be notified when new swatches are released by subscribing via <a href="http://feeds.feedburner.com/bootswatch">RSS feed</a>, <a href="http://feedburner.google.com/fb/a/mailverify?uri=bootswatch&loc=en_US">email</a>, or <a href="http://bootswatch.tumblr.com/">Tumblr</a>.</p>
Thomas Park's avatar
Thomas Park committed
114
115
116
117
118
        </div>
      </div>
	  
	  <div class="row">
		  <div class="span12">
Thomas Park's avatar
Thomas Park committed
119
		  	  <h1 id="gallery">Gallery</h1>
Thomas Park's avatar
Thomas Park committed
120
121
			  <ul class="thumbnails">

Thomas Park's avatar
Thomas Park committed
122
123
			    <li class="span4">
			      <div class="thumbnail">
124
			        <a href="amelia"><img src="amelia/thumbnail.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
125
126
			        <div class="caption">
			          <h3>Amelia  <span class="label label-warning">new!</label></h3>
Thomas Park's avatar
Thomas Park committed
127
			          <p>Sweet and cheery.</p>
Thomas Park's avatar
Thomas Park committed
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
			          <div class="btn-toolbar">
						<div class="btn-group"><a class="btn btn-large" href="amelia">Preview</a></div>
						<div class="btn-group">
						  <a class="btn btn-large btn-primary" target="_blank" href="amelia/bootstrap.min.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">Download</a>
						  <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
						    <span class="caret"></span>
						  </a>
						  <ul class="dropdown-menu">
						    <!-- dropdown menu links -->
							<li><a target="_blank" href="amelia/bootstrap.min.css" 
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
							<li><a target="_blank" href="amelia/bootstrap.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.css']);">bootstrap.css</a></li>
							<li class="divider"></li>
  							<li><a target="_blank" href="amelia/variables.less"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'variables.less']);">variables.less</a></li>
  							<li><a target="_blank" href="amelia/bootswatch.less"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootswatch.less']);">bootswatch.less</a></li>
						  </ul>
						</div>
					</div>
			        </div>
			      </div>
			    </li>


Thomas Park's avatar
Thomas Park committed
155
156
157

			    <li class="span4">
			      <div class="thumbnail">
158
			         <a href="cerulean"><img src="cerulean/thumbnail.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
159
160
161
162
			        <div class="caption">
			          <h3>Cerulean</h3>
			          <p>A calm, blue sky.</p>
			          <div class="btn-toolbar">
Thomas Park's avatar
Thomas Park committed
163
						<div class="btn-group"><a class="btn btn-large" href="cerulean">Preview</a></div>
Thomas Park's avatar
Thomas Park committed
164
						<div class="btn-group">
Thomas Park's avatar
Thomas Park committed
165
						  <a class="btn btn-large btn-primary" target="_blank" href="cerulean/bootstrap.min.css"
Thomas Park's avatar
Thomas Park committed
166
167
168
169
170
171
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">Download</a>
						  <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
						    <span class="caret"></span>
						  </a>
						  <ul class="dropdown-menu">
						    <!-- dropdown menu links -->
Thomas Park's avatar
Thomas Park committed
172
							<li><a target="_blank" href="cerulean/bootstrap.min.css" 
Thomas Park's avatar
Thomas Park committed
173
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
Thomas Park's avatar
Thomas Park committed
174
							<li><a target="_blank" href="cerulean/bootstrap.css"
Thomas Park's avatar
Thomas Park committed
175
176
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.css']);">bootstrap.css</a></li>
							<li class="divider"></li>
Thomas Park's avatar
Thomas Park committed
177
  							<li><a target="_blank" href="cerulean/variables.less"
Thomas Park's avatar
Thomas Park committed
178
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'variables.less']);">variables.less</a></li>
Thomas Park's avatar
Thomas Park committed
179
  							<li><a target="_blank" href="cerulean/bootswatch.less"
Thomas Park's avatar
Thomas Park committed
180
181
182
183
184
185
186
187
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootswatch.less']);">bootswatch.less</a></li>
						  </ul>
						</div>
					</div>
			        </div>
			      </div>
			    </li>

Thomas Park's avatar
Thomas Park committed
188

Thomas Park's avatar
Thomas Park committed
189
190
			    <li class="span4">
			      <div class="thumbnail">
191
			         <a href="cyborg"><img src="cyborg/thumbnail.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
192
193
194
195
196
197
			        <div class="caption">
			          <h3>Cyborg</h3>
			          <p>Jet black and electric blue.</p>
			          <div class="btn-toolbar">
						<div class="btn-group"><a class="btn btn-large" href="cyborg">Preview</a></div>
						<div class="btn-group">
Thomas Park's avatar
Thomas Park committed
198
						  <a class="btn btn-large btn-primary" target="_blank" href="cyborg/bootstrap.min.css"
Thomas Park's avatar
Thomas Park committed
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">Download</a>
						  <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
						    <span class="caret"></span>
						  </a>
						  <ul class="dropdown-menu">
						    <!-- dropdown menu links -->
							<li><a target="_blank" href="cyborg/bootstrap.min.css" 
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
							<li><a target="_blank" href="cyborg/bootstrap.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.css']);">bootstrap.css</a></li>
							<li class="divider"></li>
  							<li><a target="_blank" href="cyborg/variables.less"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'variables.less']);">variables.less</a></li>
  							<li><a target="_blank" href="cyborg/bootswatch.less"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootswatch.less']);">bootswatch.less</a></li>
						  </ul>
						</div>
					</div>
			        </div>
			      </div>
			    </li>


Thomas Park's avatar
Thomas Park committed
222
223
			    <li class="span4">
			      <div class="thumbnail">
224
			         <a href="journal"><img src="journal/thumbnail.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
225
226
			        <div class="caption">
			          <h3>Journal</h3>
Thomas Park's avatar
Thomas Park committed
227
			          <p>Crisp like a new sheet of paper.</p>
Thomas Park's avatar
Thomas Park committed
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
			          <div class="btn-toolbar">
						<div class="btn-group"><a class="btn btn-large" href="journal">Preview</a></div>
						<div class="btn-group">
						  <a class="btn btn-large btn-primary" target="_blank" href="journal/bootstrap.min.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">Download</a>
						  <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
						    <span class="caret"></span>
						  </a>
						  <ul class="dropdown-menu">
						    <!-- dropdown menu links -->
							<li><a target="_blank" href="journal/bootstrap.min.css" 
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
							<li><a target="_blank" href="journal/bootstrap.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.css']);">bootstrap.css</a></li>
							<li class="divider"></li>
  							<li><a target="_blank" href="journal/variables.less"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'variables.less']);">variables.less</a></li>
  							<li><a target="_blank" href="journal/bootswatch.less"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootswatch.less']);">bootswatch.less</a></li>
						  </ul>
						</div>
					</div>
			        </div>
			      </div>
Thomas Park's avatar
Thomas Park committed
252
253
254
				  
				  
				  
Thomas Park's avatar
Thomas Park committed
255

Thomas Park's avatar
Thomas Park committed
256
257
			    <li class="span4">
			      <div class="thumbnail">
258
			         <a href="readable"><img src="readable/thumbnail.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
			        <div class="caption">
			          <h3>Readable  <span class="label label-warning">new!</label></h3>
			          <p>Optimized for legibility.</p>
			          <div class="btn-toolbar">
						<div class="btn-group"><a class="btn btn-large" href="readable">Preview</a></div>
						<div class="btn-group">
						  <a class="btn btn-large btn-primary" target="_blank" href="readable/bootstrap.min.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">Download</a>
						  <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
						    <span class="caret"></span>
						  </a>
						  <ul class="dropdown-menu">
						    <!-- dropdown menu links -->
							<li><a target="_blank" href="readable/bootstrap.min.css" 
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
							<li><a target="_blank" href="readable/bootstrap.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.css']);">bootstrap.css</a></li>
							<li class="divider"></li>
  							<li><a target="_blank" href="readable/variables.less"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'variables.less']);">variables.less</a></li>
  							<li><a target="_blank" href="readable/bootswatch.less"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootswatch.less']);">bootswatch.less</a></li>
						  </ul>
						</div>
					</div>
			        </div>
			      </div>
			    </li>
Thomas Park's avatar
Thomas Park committed
287

Thomas Park's avatar
Thomas Park committed
288
289
290
	
  			    <li class="span4">
  			      <div class="thumbnail">
291
  			         <a href="simplex"><img src="simplex/thumbnail.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
292
293
294
295
  			        <div class="caption">
  			          <h3>Simplex</h3>
  			          <p>Flat, matte, minimalist.</p>
  			          <div class="btn-toolbar">
Thomas Park's avatar
Thomas Park committed
296
  						<div class="btn-group"><a class="btn btn-large" href="simplex">Preview</a></div>
Thomas Park's avatar
Thomas Park committed
297
  						<div class="btn-group">
Thomas Park's avatar
Thomas Park committed
298
  						  <a class="btn btn-primary btn-large" target="_blank" href="simplex/bootstrap.min.css"
Thomas Park's avatar
Thomas Park committed
299
300
301
302
303
304
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.min.css']);">Download</a>
  						  <a class="btn btn-primary btn-large dropdown-toggle" data-toggle="dropdown" href="#">
  						    <span class="caret"></span>
  						  </a>
  						  <ul class="dropdown-menu">
  						    <!-- dropdown menu links -->
Thomas Park's avatar
Thomas Park committed
305
  							<li><a target="_blank" href="simplex/bootstrap.min.css"
Thomas Park's avatar
Thomas Park committed
306
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
307
  							<li><a target="_blank" href="simplex/bootstrap.css"
Thomas Park's avatar
Thomas Park committed
308
309
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.css']);">bootstrap.css</a></li>
							<li class="divider"></li>
310
  							<li><a target="_blank" href="simplex/variables.less"
Thomas Park's avatar
Thomas Park committed
311
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'variables.less']);">variables.less</a></li>
312
  							<li><a target="_blank" href="simplex/bootswatch.less"
Thomas Park's avatar
Thomas Park committed
313
314
315
316
317
318
319
320
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootswatch.less']);">bootswatch.less</a></li>
  						  </ul>
  						</div>
  					</div>
  			        </div>
  			      </div>
  			    </li>
				  
Thomas Park's avatar
Thomas Park committed
321
322
323

			    <li class="span4">
			      <div class="thumbnail">
324
			         <a href="slate"><img src="slate/thumbnail.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
325
			        <div class="caption">
Thomas Park's avatar
Thomas Park committed
326
			          <h3>Slate</h3>
Thomas Park's avatar
Thomas Park committed
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
			          <p>Shades of gunmetal gray.</p>
			          <div class="btn-toolbar">
						<div class="btn-group"><a class="btn btn-large" href="slate">Preview</a></div>
						<div class="btn-group">
						  <a class="btn btn-large btn-primary" target="_blank" href="slate/bootstrap.min.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">Download</a>
						  <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
						    <span class="caret"></span>
						  </a>
						  <ul class="dropdown-menu">
						    <!-- dropdown menu links -->
							<li><a target="_blank" href="slate/bootstrap.min.css" 
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
							<li><a target="_blank" href="slate/bootstrap.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.css']);">bootstrap.css</a></li>
							<li class="divider"></li>
  							<li><a target="_blank" href="slate/variables.less"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'variables.less']);">variables.less</a></li>
  							<li><a target="_blank" href="slate/bootswatch.less"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootswatch.less']);">bootswatch.less</a></li>
						  </ul>
						</div>
					</div>
			        </div>
			      </div>
			    </li>

Thomas Park's avatar
Thomas Park committed
354
355
356
			
			    <li class="span4">
			      <div class="thumbnail">
357
			         <a href="spacelab"><img src="spacelab/thumbnail.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
358
359
360
361
			        <div class="caption">
			          <h3>Spacelab</h3>
			          <p>Silvery and sleek.</p>
			          <div class="btn-toolbar">
Thomas Park's avatar
Thomas Park committed
362
						<div class="btn-group"><a class="btn btn-large" href="spacelab">Preview</a></div>
Thomas Park's avatar
Thomas Park committed
363
						<div class="btn-group">
Thomas Park's avatar
Thomas Park committed
364
						  <a class="btn btn-large btn-primary" target="_blank" href="spacelab/bootstrap.min.css"
Thomas Park's avatar
Thomas Park committed
365
366
367
368
369
370
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.min.css']);">Download</a>
						  <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
						    <span class="caret"></span>
						  </a>
						  <ul class="dropdown-menu">
						    <!-- dropdown menu links -->
Thomas Park's avatar
Thomas Park committed
371
							<li><a target="_blank" href="spacelab/bootstrap.min.css"
Thomas Park's avatar
Thomas Park committed
372
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
373
							<li><a target="_blank" href="spacelab/bootstrap.css"
Thomas Park's avatar
Thomas Park committed
374
375
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.css']);">bootstrap.css</a></li>
							<li class="divider"></li>
376
  							<li><a target="_blank" href="spacelab/variables.less"
Thomas Park's avatar
Thomas Park committed
377
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'variables.less']);">variables.less</a></li>
378
  							<li><a target="_blank" href="spacelab/bootswatch.less"
Thomas Park's avatar
Thomas Park committed
379
380
381
382
383
384
385
386
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootswatch.less']);">bootswatch.less</a></li>
						  </ul>
						</div>
					</div>
			        </div>
			      </div>
			    </li>
				  
Thomas Park's avatar
Thomas Park committed
387

Thomas Park's avatar
Thomas Park committed
388
389
390
			
			    <li class="span4">
			      <div class="thumbnail">
391
			         <a href="spruce"><img src="spruce/thumbnail.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
392
			        <div class="caption">
Thomas Park's avatar
Thomas Park committed
393
			          <h3>Spruce</h3>
Thomas Park's avatar
Thomas Park committed
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
			          <p>Camping in the woods.</p>
			          <div class="btn-toolbar">
						<div class="btn-group"><a class="btn btn-large" href="spruce">Preview</a></div>
						<div class="btn-group">
						  <a class="btn btn-large btn-primary" target="_blank" href="spruce/bootstrap.min.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spruce', 'bootstrap.min.css']);">Download</a>
						  <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
						    <span class="caret"></span>
						  </a>
						  <ul class="dropdown-menu">
						    <!-- dropdown menu links -->
							<li><a target="_blank" href="spruce/bootstrap.min.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spruce', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
							<li><a target="_blank" href="spruce/bootstrap.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spruce', 'bootstrap.css']);">bootstrap.css</a></li>
							<li class="divider"></li>
  							<li><a target="_blank" href="spruce/variables.less"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spruce', 'variables.less']);">variables.less</a></li>
  							<li><a target="_blank" href="spruce/bootswatch.less"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spruce', 'bootswatch.less']);">bootswatch.less</a></li>
						  </ul>
						</div>
					</div>
			        </div>
			      </div>
			    </li>

Thomas Park's avatar
Thomas Park committed
421
422
423

			    <li class="span4">
			      <div class="thumbnail">
424
			        <a href="superhero"><img src="superhero/thumbnail.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
425
			        <div class="caption">
Thomas Park's avatar
Thomas Park committed
426
			          <h3>Superhero</h3>
Thomas Park's avatar
Thomas Park committed
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
			          <p>Batman meets... Aquaman?</p>
			          <div class="btn-toolbar">
						<div class="btn-group"><a class="btn btn-large" href="superhero">Preview</a></div>
						<div class="btn-group">
						  <a class="btn btn-large btn-primary" target="_blank" href="superhero/bootstrap.min.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.min.css']);">Download</a>
						  <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
						    <span class="caret"></span>
						  </a>
						  <ul class="dropdown-menu">
						    <!-- dropdown menu links -->
							<li><a target="_blank" href="superhero/bootstrap.min.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
							<li><a target="_blank" href="superhero/bootstrap.css"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.css']);">bootstrap.css</a></li>
							<li class="divider"></li>
  							<li><a target="_blank" href="superhero/variables.less"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'variables.less']);">variables.less</a></li>
  							<li><a target="_blank" href="superhero/bootswatch.less"
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootswatch.less']);">bootswatch.less</a></li>
						  </ul>
						</div>
					</div>
			        </div>
			      </div>
			    </li>

Thomas Park's avatar
Thomas Park committed
454
455
456
				    
			    <li class="span4">
			      <div class="thumbnail">
457
			        <a href="united"><img src="united/thumbnail.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
458
459
			        <div class="caption">
			          <h3>United</h3>
Thomas Park's avatar
Thomas Park committed
460
			          <p>Ubuntu orange and unique font.</p>
Thomas Park's avatar
Thomas Park committed
461
			          <div class="btn-toolbar">
Thomas Park's avatar
Thomas Park committed
462
						<div class="btn-group"><a class="btn btn-large" href="united">Preview</a></div>
Thomas Park's avatar
Thomas Park committed
463
						<div class="btn-group">
Thomas Park's avatar
Thomas Park committed
464
						  <a class="btn btn-large btn-primary" target="_blank" href="united/bootstrap.min.css"
Thomas Park's avatar
Thomas Park committed
465
466
467
468
469
470
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.min.css']);">Download</a>
						  <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
						    <span class="caret"></span>
						  </a>
						  <ul class="dropdown-menu">
						    <!-- dropdown menu links -->
Thomas Park's avatar
Thomas Park committed
471
							<li><a target="_blank" href="united/bootstrap.min.css"
Thomas Park's avatar
Thomas Park committed
472
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
473
							<li><a target="_blank" href="united/bootstrap.css"
Thomas Park's avatar
Thomas Park committed
474
475
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.css']);">bootstrap.css</a></li>
							<li class="divider"></li>
476
  							<li><a target="_blank" href="united/variables.less"
Thomas Park's avatar
Thomas Park committed
477
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'variables.less']);">variables.less</a></li>
478
  							<li><a target="_blank" href="united/bootswatch.less"
Thomas Park's avatar
Thomas Park committed
479
480
481
482
483
484
485
486
								onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootswatch.less']);">bootswatch.less</a></li>
						  </ul>
						</div>
					</div>
			        </div>
			      </div>
			    </li>

Thomas Park's avatar
Thomas Park committed
487

Thomas Park's avatar
Thomas Park committed
488
			    <li class="span4">
Thomas Park's avatar
Thomas Park committed
489
			      <div class="thumbnail">
Thomas Park's avatar
Thomas Park committed
490
			        <img src="img/refs/blank.png" alt="" style="background-image: url('img/refs/stripes.png');">
Thomas Park's avatar
Thomas Park committed
491
			        <div class="caption">
Thomas Park's avatar
Thomas Park committed
492
493
			          <h3>Still searching?</h3>
			          <p>Inquire about custom-built swatches.</p>
Thomas Park's avatar
Thomas Park committed
494
495
			          <div class="btn-toolbar">
						<div class="btn-group">
Thomas Park's avatar
Thomas Park committed
496
						  <a class="btn btn-large btn-danger" target="_blank" href="mailto:thomas@thomaspark.me"><i class="icon-envelope icon-white"></i> thomas@thomaspark.me</a>
Thomas Park's avatar
Thomas Park committed
497
498
499
500
						</div>
					</div>
			        </div>
			      </div>
Thomas Park's avatar
Thomas Park committed
501
			    </li>
Thomas Park's avatar
Thomas Park committed
502

Thomas Park's avatar
Thomas Park committed
503
504
505
  
			 </ul>
		</div>
Thomas Park's avatar
Thomas Park committed
506
507
508
509
510
511
512
513
514
515
	  </div> <!-- end row-->


	  
	  <div class="row" style="padding-top: 30px;">
		  <div class="span12">
		  	  <h1 id="gallery">Support</h1>
			  <ul class="thumbnails">
			  	  <div id="ref" class="span3">
					  <h3>Swatches will always be free.</h3>
Thomas Park's avatar
Thomas Park committed
516
					  <p>But if you find them useful, you can show your support by buying one of these fantastic products.</p>
Thomas Park's avatar
Thomas Park committed
517
518
519
520
			 	  </div>
				
			    <li class="span3">
  			      <div class="thumbnail">
Thomas Park's avatar
Thomas Park committed
521
  			        <a href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Ftransmit%2Fid403388562%3Fmt%3D12" target="new"><img src="img/refs/transmit.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
522
523
524
525
  			        <div class="caption">
  			          <h3>Transmit</h3>
  			          <p>The ultimate (S)FTP + Amazon S3 client.</p>
  			          <div class="btn-toolbar">
Thomas Park's avatar
Thomas Park committed
526
						<img alt="icon" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=wyucSOE7tvo&bids=146261.1&type=10">
Thomas Park's avatar
Thomas Park committed
527
  						<div class="btn-group"><a class="btn btn-large btn-info" href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Ftransmit%2Fid403388562%3Fmt%3D12" target="new">Mac App Store <i class="icon-share-alt icon-white"></i></a></div>
Thomas Park's avatar
Thomas Park committed
528
529
530
531
532
533
534
535
536
537
538
539
540
  					</div>
  			        </div>
  			      </div>
			    </li>
				
			  
			    <li class="span3">
  			      <div class="thumbnail">
  			        <a href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fpixelmator%2Fid407963104%3Fmt%3D12" target="new"><img src="img/refs/pixelmator.png" alt=""></a>
  			        <div class="caption">
  			          <h3>Pixelmator</h3>
  			          <p>A beautifully designed image editor.</p>
  			          <div class="btn-toolbar">
Thomas Park's avatar
Thomas Park committed
541
						<img alt="icon" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=wyucSOE7tvo&bids=146261.1&type=10">
Thomas Park's avatar
Thomas Park committed
542
543
544
545
546
547
548
549
550
551
552
553
554
555
  						<div class="btn-group"><a class="btn btn-large btn-info" href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fpixelmator%2Fid407963104%3Fmt%3D12" target="new">Mac App Store <i class="icon-share-alt icon-white"></i></a></div>
  					</div>
  			        </div>
  			      </div>
			    </li>
				

			    <li class="span3">
  			      <div class="thumbnail">
  			        <a href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fxscope%2Fid447661441%3Fmt%3D12" target="new"><img src="img/refs/xscope.png" alt=""></a>
  			        <div class="caption">
  			          <h3>xScope</h3>
  			          <p>Measure and inspect on-screen layouts.</p>
  			          <div class="btn-toolbar">
Thomas Park's avatar
Thomas Park committed
556
						<img alt="icon" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=wyucSOE7tvo&bids=146261.1&type=10">
Thomas Park's avatar
Thomas Park committed
557
558
559
560
561
562
563
564
  						<div class="btn-group"><a class="btn btn-large btn-info" href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fxscope%2Fid447661441%3Fmt%3D12" target="new">Mac App Store <i class="icon-share-alt icon-white"></i></a></div>
  					</div>
  			        </div>
  			      </div>
			    </li>
				
			    <li class="span3">
  			      <div class="thumbnail">
Thomas Park's avatar
Thomas Park committed
565
  			        <a href="http://www.amazon.com/gp/product/1118008189/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1118008189" target="new"><img src="img/refs/htmlandcss.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
566
567
568
569
  			        <div class="caption">
  			          <h3>HTML &amp; CSS</h3>
  			          <p>Jon Duckett</p>
  			          <div class="btn-toolbar">
Thomas Park's avatar
Thomas Park committed
570
571
						<img src="http://www.assoc-amazon.com/e/ir?t=bootswatch-20&l=as2&o=1&a=1118008189" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
  						<div class="btn-group"><a class="btn btn-large btn-info" href="http://www.amazon.com/gp/product/1118008189/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1118008189" target="new">Amazon <i class="icon-share-alt icon-white"></i></a></div>
Thomas Park's avatar
Thomas Park committed
572
573
574
575
576
577
578
579
  					</div>
  			        </div>
  			      </div>
			    </li>
				

			    <li class="span3">
  			      <div class="thumbnail">
Thomas Park's avatar
Thomas Park committed
580
  			        <a href="http://www.amazon.com/gp/product/0596802447/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0596802447" target="new"><img src="img/refs/cssmissingmanual.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
581
582
583
584
  			        <div class="caption">
  			          <h3>CSS: The Missing Manual</h3>
  			          <p>David Sawyer McFarland</p>
  			          <div class="btn-toolbar">
Thomas Park's avatar
Thomas Park committed
585
586
						<img src="http://www.assoc-amazon.com/e/ir?t=bootswatch-20&l=as2&o=1&a=0596802447" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
  						<div class="btn-group"><a class="btn btn-large btn-info" href="http://www.amazon.com/gp/product/0596802447/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0596802447" target="new">Amazon <i class="icon-share-alt icon-white"></i></a></div>
Thomas Park's avatar
Thomas Park committed
587
588
589
590
591
592
593
594
  					</div>
  			        </div>
  			      </div>
			    </li>


			    <li class="span3">
  			      <div class="thumbnail">
Thomas Park's avatar
Thomas Park committed
595
  			        <a href="http://www.amazon.com/gp/product/1449399029/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1449399029" target="new"><img src="img/refs/javascriptandjquery.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
596
597
598
599
  			        <div class="caption">
  			          <h3>JavaScript &amp; jQuery</h3>
  			          <p>David Sawyer McFarland</p>
  			          <div class="btn-toolbar">
Thomas Park's avatar
Thomas Park committed
600
601
						<img src="http://www.assoc-amazon.com/e/ir?t=bootswatch-20&l=as2&o=1&a=1449399029" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
  						<div class="btn-group"><a class="btn btn-large btn-info" href="http://www.amazon.com/gp/product/1449399029/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1449399029" target="new">Amazon <i class="icon-share-alt icon-white"></i></a></div>
Thomas Park's avatar
Thomas Park committed
602
603
604
605
606
607
608
609
  					</div>
  			        </div>
  			      </div>
			    </li>


			    <li class="span3">
  			      <div class="thumbnail">
Thomas Park's avatar
Thomas Park committed
610
  			        <a href="http://www.amazon.com/gp/product/0321344758/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0321344758" target="new"><img src="img/refs/dontmakemethink.png" alt=""></a>
Thomas Park's avatar
Thomas Park committed
611
612
613
614
  			        <div class="caption">
  			          <h3>Don't Make Me Think</h3>
  			          <p>Steve Krug</p>
  			          <div class="btn-toolbar">
Thomas Park's avatar
Thomas Park committed
615
616
						<img src="http://www.assoc-amazon.com/e/ir?t=bootswatch-20&l=as2&o=1&a=0321344758" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
  						<div class="btn-group"><a class="btn btn-large btn-info" href="http://www.amazon.com/gp/product/0321344758/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0321344758" target="new">Amazon <i class="icon-share-alt icon-white"></i></a></div>
Thomas Park's avatar
Thomas Park committed
617
618
619
620
621
622
623
624
625
626
  					</div>
  			        </div>
  			      </div>
			    </li>


			</ul>
		  </div>
	  </div> <!-- end row-->
				
Thomas Park's avatar
Thomas Park committed
627
628
629
630
631

      <hr>

      <footer>
		<p class="pull-right"><a href="#">Back to top</a></p>
632
633
634
		Made by <a target="_blank" href="http://thomaspark.me" onclick="pageTracker._link(this.href); return false;">Thomas Park</a>. Submissions and feedback welcome at <a href="mailto:thomas@thomaspark.me">thomas@thomaspark.me</a>.<br/>
		Code licensed under the <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.<br/>
		Based on <a target="_blank" href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Hosted on <a target="_blank" href="http://pages.github.com/">GitHub</a>. Icons from <a target="_blank" href="http://glyphicons.com/">Glyphicons</a>. Web fonts from <a target="_blank" href="http://www.google.com/webfonts">Google</a>.</p>
Thomas Park's avatar
Thomas Park committed
635
636
637
638
639
640
641
642
643
      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
Thomas Park's avatar
Thomas Park committed
644
	<script src="js/bootstrap-tooltip.js"></script>
645
    <script src="js/bootstrap-collapse.js"></script>
Thomas Park's avatar
Thomas Park committed
646
    <script src="js/bootswatch.js"></script>
Thomas Park's avatar
Thomas Park committed
647
648
649
650
	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>


  </body>
651
</html>