git.roojs.org Git - bootswatch/blob - index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <title>Bootswatch: Free themes for Twitter Bootstrap</title>
   5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6     <meta charset="utf-8">
   7     <link rel="stylesheet" href="./flatly/bootstrap.min.css" media="screen">
   8     <link rel="stylesheet" href="./bower_components/font-awesome/css/font-awesome.min.css">
   9     <link rel="stylesheet" href="./assets/css/bootswatch.min.css">
  10     <script type="text/javascript">
  11
  12      var _gaq = _gaq || [];
  13       _gaq.push(['_setAccount', 'UA-23019901-1']);
  14       _gaq.push(['_setDomainName', "bootswatch.com"]);
  15         _gaq.push(['_setAllowLinker', true]);
  16       _gaq.push(['_trackPageview']);
  17
  18      (function() {
  19        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  20        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  21        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  22      })();
  23
  24     </script>
  25   </head>
  26   <body>
  27     <script src="./assets/js/bsa.js"></script>
  28
  29     <div class="navbar navbar-fixed-top">
  30       <div class="container">
  31         <a href="../" class="navbar-brand">Bootswatch</a>
  32         <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
  33           <span class="icon-bar"></span>
  34           <span class="icon-bar"></span>
  35           <span class="icon-bar"></span>
  36         </button>
  37         <div class="nav-collapse collapse" id="navbar-main">
  38           <ul class="nav navbar-nav">
  39             <li class="dropdown">
  40               <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
  41               <ul class="dropdown-menu" aria-labelledby="themes">
  42                 <li><a tabindex="-1" href="../default/">Default</a></li>
  43                 <li class="divider"></li>
  44                 <li><a tabindex="-1" href="../amelia/">Amelia</a></li>
  45                 <li><a tabindex="-1" href="../cerulean/">Cerulean</a></li>
  46                 <li><a tabindex="-1" href="../cosmo/">Cosmo</a></li>
  47                 <li><a tabindex="-1" href="../cyborg/">Cyborg</a></li>
  48                 <li><a tabindex="-1" href="../flatly/">Flatly</a></li>
  49                 <li><a tabindex="-1" href="../journal/">Journal</a></li>
  50                 <li><a tabindex="-1" href="../readable/">Readable</a></li>
  51                 <li><a tabindex="-1" href="../simplex/">Simplex</a></li>
  52                 <li><a tabindex="-1" href="../slate/">Slate</a></li>
  53                 <li><a tabindex="-1" href="../spacelab/">Spacelab</a></li>
  54                 <li><a tabindex="-1" href="../superhero/">Superhero</a></li>
  55                 <li><a tabindex="-1" href="../united/">United</a></li>
  56               </ul>
  57             </li>
  58             <li class="dropdown">
  59               <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Download <span class="caret"></span></a>
  60               <ul class="dropdown-menu" aria-labelledby="download">
  61                 <li><a tabindex="-1" href="./bootstrap.min.css">bootstrap.min.css</a></li>
  62                 <li><a tabindex="-1" href="./bootstrap.css">bootstrap.css</a></li>
  63                 <li class="divider"></li>
  64                 <li><a tabindex="-1" href="./variables.less">variables.less</a></li>
  65                 <li><a tabindex="-1" href="./bootswatch.less">bootswatch.less</a></li>
  66               </ul>
  67             </li>
  68 <!--             <li>
  69               <a href="../help/">Help</a>
  70             </li> -->
  71             <li>
  72               <a href="http://news.bootswatch.com">Blog</a>
  73             </li>
  74           </ul>
  75
  76           <ul class="nav navbar-nav pull-right">
  77             <li><a href="http://builtwithbootstrap.com/" target="_blank">Built With Bootstrap</a></li>
  78             <li><a href="https://wrapbootstrap.com/?ref=bsw" target="_blank">WrapBootstrap</a></li>
  79           </ul>
  80
  81         </div>
  82       </div>
  83     </div>
  84
  85     <div class="splash">
  86       <div class="container">
  87
  88
  89         <div class="alert alert-block" style="text-align: left; margin-bottom: 2em;">
  90           <p>You're currently previewing the new themes for Bootstrap 3.0-rc1. These are still under development. If you want to see version 2.3.2, visit <a class="alert-link" href="http://bootswatch.com/2/">bootswatch.com/2/</a>.
  91         </div>
  92
  93         <h1>Bootswatch</h1>
  94         <p>Free themes for <a href="http://getbootstrap.com" target="_blank">Twitter Bootstrap</a></p>
  95
  96         <div id="social">
  97           <span>
  98             <iframe id="gh-fork" src="http://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53px" height="20px"></iframe>
  99             <iframe id="gh-star" src="http://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
 100           </span>
 101           <span>
 102             <a href="https://twitter.com/thomashpark" class="twitter-follow-button" data-show-count="false" data-show-screen-name="true">Follow @thomashpark</a>
 103             <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootswatch.com" data-via="thomashpark">Tweet</a>
 104           </span>
 105         </div>
 106       </div>
 107     </div>
 108
 109     <div class="section-tout">
 110
 111       <div class="container">
 112
 113         <div class="row">
 114           <div class="col-lg-4">
 115             <h3><i class="icon-file-alt"></i> Easy to Install</h3>
 116             <p>Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values.</p>
 117           </div>
 118           <div class="col-lg-4">
 119
 120             <h3><i class="icon-github"></i> Open Source</h3>
 121             <p>Bootstrap themes are licensed under Apache 2.0 and maintained by the community on <a target="_blank" href="https://github.com/thomaspark/bootswatch">GitHub</a>.</p>
 122
 123           </div>
 124           <div class="col-lg-4">
 125             <h3><i class="icon-wrench"></i> Tuned for 3.0.0</h3>
 126             <p>Swatches are built for and tested with the latest version of Bootstrap. <a target="_blank" href="https://github.com/thomaspark/bootswatch/tags">Older versions</a> are also available for download.</p>
 127           </div>
 128           <div class="col-lg-4">
 129
 130             <h3><i class="icon-cogs"></i> Modular</h3>
 131              <p>Changes are contained in just two LESS files, enabling modification and ensuring forward compatibility.</p>
 132
 133           </div>
 134           <div class="col-lg-4">
 135
 136             <h3><i class="icon-cloud"></i> Get Plugged In</h3>
 137             <p>An <a href="http://news.bootswatch.com/post/22193315172/bootswatch-api" onclick="pageTracker._link(this.href); return false;">API</a> is available for integrating with your platform. In use by <a href="http://320press.com/wpbs/" target="_blank">WPBS</a>, <a href="http://www.fusionleaf.com/" target="_blank">FusionLeaf</a>, <a href="http://yabdab.com/stacks/snaps/bootsnap/" target="_blank">BootSnap</a>, and others.</p>
 138
 139           </div>
 140           <div class="col-lg-4">
 141
 142
 143             <h3><i class="icon-bullhorn"></i> Stay Updated</h3>
 144             <p>Be notified about updates 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://news.bootswatch.com" onclick="pageTracker._link(this.href); return false;">Tumblr</a>.</p>
 145           </div>
 146         </div>
 147       </div>
 148
 149     </div>
 150
 151     <div class="section-preview">
 152       <div class="container">
 153         <div class="row">
 154           <div class="col-lg-4">
 155
 156             <div class="preview">
 157               <div class="image">
 158                 <a href="amelia/"><img src="amelia/thumbnail.png" class="img-responsive" alt="Amelia"></a>
 159               </div>
 160               <div class="options">
 161                 <h3>Amelia</h3>
 162                 <p>Sweet and cheery</p>
 163                 <div class="btn-toolbar">
 164                   <div class="btn-group"><a class="btn btn-info" href="amelia/">Preview</a></div>
 165                   <div class="btn-group">
 166                     <a class="btn btn-info" target="_blank" href="amelia/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">Download</a>
 167                     <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 168                       <span class="caret"></span>
 169                     </a>
 170                     <ul class="dropdown-menu">
 171                       <li><a target="_blank" href="amelia/bootstrap.min.css"
 172                         onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 173                       <li><a target="_blank" href="amelia/bootstrap.css"
 174                         onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.css']);">bootstrap.css</a></li>
 175                       <li class="divider"></li>
 176                       <li><a target="_blank" href="amelia/variables.less"
 177                         onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'variables.less']);">variables.less</a></li>
 178                       <li><a target="_blank" href="amelia/bootswatch.less"
 179                         onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootswatch.less']);">bootswatch.less</a></li>
 180                     </ul>
 181                   </div>
 182                 </div>
 183               </div>
 184             </div>
 185
 186           </div>
 187           <div class="col-lg-4">
 188
 189             <div class="preview">
 190               <div class="image">
 191                 <a href="cerulean/"><img src="cerulean/thumbnail.png" class="img-responsive" alt="Cerulean"></a>
 192               </div>
 193               <div class="options">
 194                 <h3>Cerulean</h3>
 195                 <p>A calm, blue sky</p>
 196                 <div class="btn-toolbar">
 197                   <div class="btn-group"><a class="btn btn-info" href="cerulean/">Preview</a></div>
 198                   <div class="btn-group">
 199                     <a class="btn btn-info" target="_blank" href="cerulean/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">Download</a>
 200                     <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 201                       <span class="caret"></span>
 202                     </a>
 203                     <ul class="dropdown-menu">
 204                       <li><a target="_blank" href="cerulean/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 205                       <li><a target="_blank" href="cerulean/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.css']);">bootstrap.css</a></li>
 206                       <li class="divider"></li>
 207                       <li><a target="_blank" href="cerulean/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'variables.less']);">variables.less</a></li>
 208                       <li><a target="_blank" href="cerulean/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootswatch.less']);">bootswatch.less</a></li>
 209                     </ul>
 210                   </div>
 211                 </div>
 212               </div>
 213             </div>
 214
 215           </div>
 216           <div class="col-lg-4">
 217
 218             <div class="preview">
 219               <div class="image">
 220                 <a href="cosmo/"><img class="img-responsive" src="cosmo/thumbnail.png" alt="Cosmo"></a>
 221               </div>
 222               <div class="options">
 223                 <h3>Cosmo</h3>
 224                 <p>An ode to Metro.</p>
 225                 <div class="btn-toolbar">
 226                   <div class="btn-group"><a class="btn btn-info" href="cosmo/">Preview</a></div>
 227                   <div class="btn-group">
 228                     <a class="btn btn-info" target="_blank" href="cosmo/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.min.css']);">Download</a>
 229                     <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 230                       <span class="caret"></span>
 231                     </a>
 232                     <ul class="dropdown-menu">
 233                       <li><a target="_blank" href="cosmo/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 234                       <li><a target="_blank" href="cosmo/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.css']);">bootstrap.css</a></li>
 235                       <li class="divider"></li>
 236                       <li><a target="_blank" href="cosmo/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'variables.less']);">variables.less</a></li>
 237                       <li><a target="_blank" href="cosmo/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootswatch.less']);">bootswatch.less</a></li>
 238                     </ul>
 239                   </div>
 240                 </div>
 241               </div>
 242             </div>
 243
 244           </div>
 245           <div class="col-lg-4">
 246
 247             <div class="preview">
 248               <div class="image">
 249                 <a href="cyborg/"><img class="img-responsive" src="cyborg/thumbnail.png" alt="Cyborg"></a>
 250               </div>
 251               <div class="options">
 252
 253                 <h3>Cyborg</h3>
 254                 <p>Jet black and electric blue.</p>
 255                 <div class="btn-toolbar">
 256                   <div class="btn-group"><a class="btn btn-info" href="cyborg/">Preview</a></div>
 257                   <div class="btn-group">
 258                     <a class="btn btn-info" target="_blank" href="cyborg/bootstrap.min.css"
 259                     onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">Download</a>
 260                     <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 261                       <span class="caret"></span>
 262                     </a>
 263                     <ul class="dropdown-menu">
 264                       <li><a target="_blank" href="cyborg/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 265                       <li><a target="_blank" href="cyborg/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.css']);">bootstrap.css</a></li>
 266                       <li class="divider"></li>
 267                       <li><a target="_blank" href="cyborg/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'variables.less']);">variables.less</a></li>
 268                       <li><a target="_blank" href="cyborg/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootswatch.less']);">bootswatch.less</a></li>
 269                     </ul>
 270                   </div>
 271                 </div>
 272
 273               </div>
 274             </div>
 275
 276           </div>
 277           <div class="col-lg-4">
 278
 279             <div class="preview">
 280               <div class="image">
 281                 <a href="flatly/"><img class="img-responsive" src="flatly/thumbnail.png" alt="Flatly"></a>
 282               </div>
 283               <div class="options">
 284
 285                 <h3>Flatly</h3>
 286                 <p>Flat and clean.</p>
 287                 <div class="btn-toolbar">
 288                   <div class="btn-group"><a class="btn btn-info" href="flatly/">Preview</a></div>
 289                   <div class="btn-group">
 290                     <a class="btn btn-info" target="_blank" href="flatly/bootstrap.min.css"
 291                     onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.min.css']);">Download</a>
 292                     <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 293                       <span class="caret"></span>
 294                     </a>
 295                     <ul class="dropdown-menu">
 296                       <li><a target="_blank" href="flatly/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 297                       <li><a target="_blank" href="flatly/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.css']);">bootstrap.css</a></li>
 298                       <li class="divider"></li>
 299                       <li><a target="_blank" href="flatly/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'variables.less']);">variables.less</a></li>
 300                       <li><a target="_blank" href="flatly/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootswatch.less']);">bootswatch.less</a></li>
 301                     </ul>
 302                   </div>
 303                 </div>
 304
 305               </div>
 306             </div>
 307
 308           </div>
 309           <div class="col-lg-4">
 310
 311             <div class="preview">
 312               <div class="image">
 313                 <a href="journal/"><img class="img-responsive" src="journal/thumbnail.png" alt="Journal"></a>
 314               </div>
 315               <div class="options">
 316                 <h3>Journal</h3>
 317                 <p>Crisp like a new sheet of paper.</p>
 318                 <div class="btn-toolbar">
 319                   <div class="btn-group"><a class="btn btn-info" href="journal/">Preview</a></div>
 320                   <div class="btn-group">
 321                     <a class="btn btn-info" target="_blank" href="journal/bootstrap.min.css"
 322                     onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">Download</a>
 323                     <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 324                       <span class="caret"></span>
 325                     </a>
 326                     <ul class="dropdown-menu">
 327                       <li><a target="_blank" href="journal/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 328                       <li><a target="_blank" href="journal/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.css']);">bootstrap.css</a></li>
 329                       <li class="divider"></li>
 330                       <li><a target="_blank" href="journal/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'variables.less']);">variables.less</a></li>
 331                       <li><a target="_blank" href="journal/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootswatch.less']);">bootswatch.less</a></li>
 332                     </ul>
 333                   </div>
 334                 </div>
 335
 336               </div>
 337             </div>
 338
 339           </div>
 340           <div class="col-lg-4">
 341
 342             <div class="preview">
 343               <div class="image">
 344                 <a href="readable/"><img class="img-responsive" src="readable/thumbnail.png" alt="Readable"></a>
 345               </div>
 346               <div class="options">
 347
 348                 <h3>Readable</h3>
 349                 <p>Optimized for legibility.</p>
 350                 <div class="btn-toolbar">
 351                   <div class="btn-group"><a class="btn btn-info" href="readable/">Preview</a></div>
 352                   <div class="btn-group">
 353                     <a class="btn btn-info" target="_blank" href="readable/bootstrap.min.css"
 354                     onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">Download</a>
 355                     <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 356                       <span class="caret"></span>
 357                     </a>
 358                     <ul class="dropdown-menu">
 359                       <li><a target="_blank" href="readable/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 360                       <li><a target="_blank" href="readable/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.css']);">bootstrap.css</a></li>
 361                       <li class="divider"></li>
 362                       <li><a target="_blank" href="readable/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'variables.less']);">variables.less</a></li>
 363                       <li><a target="_blank" href="readable/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootswatch.less']);">bootswatch.less</a></li>
 364                     </ul>
 365                   </div>
 366                 </div>
 367
 368               </div>
 369             </div>
 370
 371           </div>
 372           <div class="col-lg-4">
 373
 374             <div class="preview">
 375               <div class="image">
 376                 <a href="simplex/"><img class="img-responsive" src="simplex/thumbnail.png" alt="Simplex"></a>
 377               </div>
 378               <div class="options">
 379
 380                 <h3>Simplex</h3>
 381                 <p>Mini and minimalist.</p>
 382                 <div class="btn-toolbar">
 383                   <div class="btn-group"><a class="btn btn-info" href="simplex/">Preview</a></div>
 384                   <div class="btn-group">
 385                     <a class="btn btn-info btn-info" target="_blank" href="simplex/bootstrap.min.css"
 386                     onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.min.css']);">Download</a>
 387                     <a class="btn btn-info btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 388                       <span class="caret"></span>
 389                     </a>
 390                     <ul class="dropdown-menu">
 391                       <li><a target="_blank" href="simplex/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 392                       <li><a target="_blank" href="simplex/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.css']);">bootstrap.css</a></li>
 393                       <li class="divider"></li>
 394                       <li><a target="_blank" href="simplex/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'variables.less']);">variables.less</a></li>
 395                       <li><a target="_blank" href="simplex/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootswatch.less']);">bootswatch.less</a></li>
 396                     </ul>
 397                   </div>
 398                 </div>
 399
 400               </div>
 401             </div>
 402
 403           </div>
 404           <div class="col-lg-4">
 405
 406             <div class="preview">
 407               <div class="image">
 408                 <a href="slate/"><img class="img-responsive" src="slate/thumbnail.png" alt="Slate"></a>
 409               </div>
 410               <div class="options">
 411
 412                 <h3>Slate</h3>
 413                 <p>Shades of gunmetal gray.</p>
 414                 <div class="btn-toolbar">
 415                   <div class="btn-group"><a class="btn btn-info" href="slate/">Preview</a></div>
 416                   <div class="btn-group">
 417                     <a class="btn btn-info" target="_blank" href="slate/bootstrap.min.css"
 418                     onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">Download</a>
 419                     <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 420                       <span class="caret"></span>
 421                     </a>
 422                     <ul class="dropdown-menu">
 423                       <li><a target="_blank" href="slate/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 424                       <li><a target="_blank" href="slate/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.css']);">bootstrap.css</a></li>
 425                       <li class="divider"></li>
 426                       <li><a target="_blank" href="slate/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'variables.less']);">variables.less</a></li>
 427                       <li><a target="_blank" href="slate/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootswatch.less']);">bootswatch.less</a></li>
 428                     </ul>
 429                   </div>
 430                 </div>
 431
 432               </div>
 433             </div>
 434
 435           </div>
 436           <div class="col-lg-4">
 437
 438             <div class="preview">
 439               <div class="image">
 440                 <a href="spacelab/"><img class="img-responsive" src="spacelab/thumbnail.png" alt="Spacelab"></a>
 441               </div>
 442               <div class="options">
 443
 444                 <h3>Spacelab</h3>
 445                 <p>Silvery and sleek.</p>
 446                 <div class="btn-toolbar">
 447                   <div class="btn-group"><a class="btn btn-info" href="spacelab/">Preview</a></div>
 448                   <div class="btn-group">
 449                     <a class="btn btn-info" target="_blank" href="spacelab/bootstrap.min.css"
 450                     onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.min.css']);">Download</a>
 451                     <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 452                       <span class="caret"></span>
 453                     </a>
 454                     <ul class="dropdown-menu">
 455                       <li><a target="_blank" href="spacelab/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 456                       <li><a target="_blank" href="spacelab/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.css']);">bootstrap.css</a></li>
 457                       <li class="divider"></li>
 458                       <li><a target="_blank" href="spacelab/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'variables.less']);">variables.less</a></li>
 459                       <li><a target="_blank" href="spacelab/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootswatch.less']);">bootswatch.less</a></li>
 460                     </ul>
 461                   </div>
 462                 </div>
 463
 464               </div>
 465             </div>
 466
 467           </div>
 468          <!--  <div class="col-lg-4">
 469
 470             <div class="preview">
 471               <div class="image">
 472                 <a href="superhero/"><img class="img-responsive" src="superhero/thumbnail.png" alt="Superhero"></a>
 473               </div>
 474               <div class="options">
 475
 476                 <h3>Superhero</h3>
 477                 <p>Batman meets... Aquaman?</p>
 478                 <div class="btn-toolbar">
 479                   <div class="btn-group"><a class="btn btn-info" href="superhero/">Preview</a></div>
 480                   <div class="btn-group">
 481                     <a class="btn btn-info" target="_blank" href="superhero/bootstrap.min.css"
 482                     onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.min.css']);">Download</a>
 483                     <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 484                       <span class="caret"></span>
 485                     </a>
 486                     <ul class="dropdown-menu">
 487                       <li><a target="_blank" href="superhero/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 488                       <li><a target="_blank" href="superhero/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.css']);">bootstrap.css</a></li>
 489                       <li class="divider"></li>
 490                       <li><a target="_blank" href="superhero/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'variables.less']);">variables.less</a></li>
 491                       <li><a target="_blank" href="superhero/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootswatch.less']);">bootswatch.less</a></li>
 492                     </ul>
 493                   </div>
 494                 </div>
 495
 496               </div>
 497             </div>
 498
 499           </div> -->
 500           <div class="col-lg-4">
 501
 502             <div class="preview">
 503               <div class="image">
 504                 <a href="united/"><img class="img-responsive" src="united/thumbnail.png" alt="United"></a>
 505               </div>
 506               <div class="options">
 507
 508                 <h3>United</h3>
 509                 <p>Ubuntu orange and unique font.</p>
 510                 <div class="btn-toolbar">
 511                   <div class="btn-group"><a class="btn btn-info" href="united/">Preview</a></div>
 512                   <div class="btn-group">
 513                     <a class="btn btn-info" target="_blank" href="united/bootstrap.min.css"
 514                     onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.min.css']);">Download</a>
 515                     <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 516                       <span class="caret"></span>
 517                     </a>
 518                     <ul class="dropdown-menu">
 519                       <li><a target="_blank" href="united/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 520                       <li><a target="_blank" href="united/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.css']);">bootstrap.css</a></li>
 521                       <li class="divider"></li>
 522                       <li><a target="_blank" href="united/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'variables.less']);">variables.less</a></li>
 523                       <li><a target="_blank" href="united/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootswatch.less']);">bootswatch.less</a></li>
 524                     </ul>
 525                   </div>
 526                 </div>
 527
 528               </div>
 529             </div>
 530
 531           </div>
 532
 533
 534
 535         </div>
 536       </div>
 537
 538
 539       <div class="container">
 540         <div class="row">
 541           <div class="col-lg-12">
 542             <h1>Want more?</h1>
 543             <p>Check out my personal faves from the paid templates at <a target="_blank" href="https://wrapbootstrap.com/?ref=bsw" title="Marketplace for premium Bootstrap templates" onclick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap']);">WrapBootstrap</a>.</p>
 544           </div>
 545           <div class="col-lg-4">
 546             <div class="preview">
 547               <div class="image">
 548                 <a target="_blank" href="http://wrapbootstrap.com/preview/WB02634G3?ref=bsw"><img class="img-responsive" src="https://s3.amazonaws.com/wrapbootstrap/live/products/600x375/WB02634G3.png" alt="Clean Canvas"></a>
 549
 550               </div>
 551               <div class="options">
 552                 <h3>Clean Canvas</h3>
 553                 <p>A beautiful template for showcasing your works.</p>
 554                 <div class="btn-toolbar">
 555                   <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB02634G3?ref=bsw">Preview</a></div>
 556                   <div class="btn-group">
 557                     <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/clean-canvas-business-theme-WB02634G3?ref=bsw"
 558                     onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-cleancanvas']);">Info</a>
 559                   </div>
 560                 </div>
 561               </div>
 562             </div>
 563           </div>
 564           <div class="col-lg-4">
 565             <div class="preview">
 566               <div class="image">
 567                 <a target="_blank" href="http://wrapbootstrap.com/preview/WB0L500N4?ref=bsw"><img class="img-responsive" src="https://s3.amazonaws.com/wrapbootstrap/live/products/600x375/WB0L500N4.png" alt="Front Row"></a>
 568
 569               </div>
 570               <div class="options">
 571                 <h3>Front Row</h3>
 572                 <p>An elegant single-page template with video background and responsive support.</p>
 573                 <div class="btn-toolbar">
 574                   <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB0L500N4?ref=bsw">Preview</a></div>
 575                   <div class="btn-group">
 576                     <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/front-row-one-page-theme-WB0L500N4?ref=bsw"
 577                     onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-frontrow']);">Info</a>
 578                   </div>
 579                 </div>
 580               </div>
 581             </div>
 582           </div>
 583           <div class="col-lg-4">
 584             <div class="preview">
 585               <div class="image">
 586                 <a target="_blank" class="img-responsive" href="http://wrapbootstrap.com/preview/WB00U99JJ?ref=bsw"><img class="img-responsive" src="https://s3.amazonaws.com/wrapbootstrap/live/products/600x375/WB00U99JJ.png" alt="Clean Canvas"></a>
 587
 588               </div>
 589               <div class="options">
 590                 <h3>Base Admin</h3>
 591                 <p>A polished template for an admin dashboard.</p>
 592                 <div class="btn-toolbar">
 593                   <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB00U99JJ?ref=bsw">Preview</a></div>
 594                   <div class="btn-group">
 595                     <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/base-admin-WB00U99JJ?ref=bsw"
 596                     onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-baseadmin']);">Info</a>
 597                   </div>
 598                 </div>
 599               </div>
 600             </div>
 601           </div>
 602         </div>
 603
 604
 605
 606         <div class="row">
 607           <div class="col-lg-12">
 608             <h1>Still looking?</h1>
 609             <p>Learn to code your own themes with these books from <a target="_blank" href="http://www.amazon.com/?tag=bootswatch-20">Amazon</a>.</p>
 610           </div>
 611           <div class="col-lg-4">
 612             <div class="preview">
 613               <div class="image">
 614                 <a onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'htmlandcss']);" 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="_blank"><img class="img-responsive" src="assets/img/refs/htmlandcss.png" alt="HTML and CSS: Design and Build Websites, by Jon Duckett"></a>
 615
 616               </div>
 617               <div class="options">
 618                 <h3>HTML &amp; CSS</h3>
 619                 <p>Jon Duckett</p>
 620                 <div class="btn-toolbar">
 621                   <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; height: 1px;" />
 622                   <div class="btn-group"><a class="btn btn-info" onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'htmlandcss']);" 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="_blank">Amazon</a></div>
 623                 </div>
 624               </div>
 625             </div>
 626           </div>
 627           <div class="col-lg-4">
 628             <div class="preview">
 629               <div class="image">
 630
 631                 <a onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'javascriptandjquery']);" 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="_blank"><img class="img-responsive" src="assets/img/refs/javascriptandjquery.png" alt="JavaScript and jQuery: The Missing Manual, by David Sawyer McFarland"></a>
 632
 633               </div>
 634               <div class="options">
 635
 636                 <h3>JavaScript &amp; jQuery</h3>
 637                 <p>David Sawyer McFarland</p>
 638                 <div class="btn-toolbar">
 639                   <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; height: 1px;" />
 640                   <div class="btn-group"><a class="btn btn-info" onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'javascriptandjquery']);" 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="_blank">Amazon</a></div>
 641                 </div>
 642               </div>
 643             </div>
 644           </div>
 645           <div class="col-lg-4">
 646             <div class="preview">
 647               <div class="image">
 648
 649                 <a onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'beautifulwebdesign']);" href="http://www.amazon.com/gp/product/098057689X/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=098057689X" target="_blank"><img class="img-responsive" src="assets/img/refs/beautifulwebdesign.png" alt="The Principles of Beautiful Web Design, by Jason Beaird"></a>
 650
 651               </div>
 652               <div class="options">
 653
 654                 <h3>Beautiful Web Design</h3>
 655                 <p>Jason Beaird</p>
 656                 <div class="btn-toolbar">
 657                   <img src="http://www.assoc-amazon.com/e/ir?t=bootswatch-20&l=as2&o=1&a=098057689X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important; height: 1px;" />
 658                   <div class="btn-group"><a class="btn btn-info" onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'beautifulwebdesign']);" href="http://www.amazon.com/gp/product/098057689X/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=098057689X" target="_blank">Amazon</a></div>
 659                 </div>
 660               </div>
 661             </div>
 662           </div>
 663         </div>
 664
 665
 666
 667       </div>
 668     </div>
 669
 670     <div class="container">
 671       <footer>
 672         <div class="row">
 673           <div class="col-lg-12">
 674
 675             <ul class="list-unstyled">
 676               <li class="pull-right"><a href="#top">Back to top</a></li>
 677               <li><a href="http://news.bootswatch.com" onclick="pageTracker._link(this.href); return false;">Blog</a></li>
 678               <li><a href="http://feeds.feedburner.com/bootswatch">RSS</a></li>
 679               <li><a href="https://twitter.com/thomashpark">Twitter</a></li>
 680               <li><a href="https://github.com/thomaspark/bootswatch/">GitHub</a></li>
 681               <li><a data-toggle="tooltip" title="Drag to your bookmarks bar" href="javascript:(function(e,a,g,h,f,c,b,d)%7Bif(!(f%3De.jQuery)%7C%7Cg%3Ef.fn.jquery%7C%7Ch(f))%7Bc%3Da.createElement(%22script%22)%3Bc.type%3D%22text/javascript%22%3Bc.src%3D%22http://ajax.googleapis.com/ajax/libs/jquery/%22%2Bg%2B%22/jquery.min.js%22%3Bc.onload%3Dc.onreadystatechange%3Dfunction()%7Bif(!b%26%26(!(d%3Dthis.readyState)%7C%7Cd%3D%3D%22loaded%22%7C%7Cd%3D%3D%22complete%22))%7Bh((f%3De.jQuery).noConflict(1),b%3D1)%3Bf(c).remove()%7D%7D%3Ba.documentElement.childNodes%5B0%5D.appendChild(c)%7D%7D)(window,document,%221.3.2%22,function(%24,L)%7Bif(%24(%22.bootswatcher%22)%5B0%5D)%7B%24(%22.bootswatcher%22).remove()%7Delse%7Bvar%20%24e%3D%24(%27%3Cselect%20class%3D%22bootswatcher%22%3E%3Coption%3EAmelia%3C/option%3E%3Coption%3ECerulean%3C/option%3E%3Coption%3ECosmo%3C/option%3E%3Coption%3ECyborg%3C/option%3E%3Coption%3EJournal%3C/option%3E%3Coption%3EReadable%3C/option%3E%3Coption%3ESimplex%3C/option%3E%3Coption%3ESlate%3C/option%3E%3Coption%3ESpacelab%3C/option%3E%3Coption%3ESpruce%3C/option%3E%3Coption%3ESuperhero%3C/option%3E%3Coption%3EUnited%3C/option%3E%3C/select%3E%27)%3Bvar%20l%3D1%2BMath.floor(Math.random()*%24e.children().length)%3B%24e.css(%7B%22z-index%22:%2299999%22,position:%22fixed%22,top:%225px%22,right:%225px%22,opacity:%220.5%22%7D).hover(function()%7B%24(this).css(%22opacity%22,%221%22)%7D,function()%7B%24(this).css(%22opacity%22,%220.5%22)%7D).change(function()%7Bif(!%24(%22link.bootswatcher%22)%5B0%5D)%7B%24(%22head%22).append(%27%3Clink%20rel%3D%22stylesheet%22%20class%3D%22bootswatcher%22%3E%27)%7D%24(%22link.bootswatcher%22).attr(%22href%22,%22http://bootswatch.com/%22%2B%24(this).find(%22:selected%22).text().toLowerCase()%2B%22/bootstrap.min.css%22)%7D).find(%22option:nth-child(%22%2Bl%2B%22)%22).attr(%22selected%22,%22selected%22).end().trigger(%22change%22)%3B%24(%22body%22).append(%24e)%7D%3B%7D)%3B">Bookmarklet</a></li>
 682               <li><a href="http://news.bootswatch.com/post/22193315172/bootswatch-api">API</a></li>
 683               <li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=F22JEM3Q78JC2">Donate</a></li>
 684             </ul>
 685             <p>Made by <a href="http://thomaspark.me">Thomas Park</a>. Contact him at <a href="mailto:hello@thomaspark.me">hello@thomaspark.me</a>.</p>
 686             <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.</p>
 687             <p>Based on <a href="http://getbootstrap.com">Bootstrap</a>. Icons from <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>. Web fonts from <a href="http://www.google.com/webfonts">Google</a>. Favicon by <a href="https://twitter.com/geraldhiller">Gerald Hiller</a>.</p>
 688
 689           </div>
 690         </div>
 691
 692       </footer>
 693
 694
 695     </div>
 696
 697
 698     <script src="./bower_components/jquery/jquery.min.js"></script>
 699     <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
 700     <script src="./assets/js/bootswatch.js"></script>
 701     <script type="text/javascript">
 702       !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");
 703     </script>
 704   </body>
 705 </html>