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

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <title>Bootswatch: Free themes for 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.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     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  11     <!--[if lt IE 9]>
  12       <script src="./bower_components/html5shiv/dist/html5shiv.js"></script>
  13       <script src="./bower_components/respond/dest/respond.min.js"></script>
  14     <![endif]-->
  15     <script type="text/javascript">
  16
  17      var _gaq = _gaq || [];
  18       _gaq.push(['_setAccount', 'UA-23019901-1']);
  19       _gaq.push(['_setDomainName', "bootswatch.com"]);
  20         _gaq.push(['_setAllowLinker', true]);
  21       _gaq.push(['_trackPageview']);
  22
  23      (function() {
  24        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  25        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  26        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  27      })();
  28
  29     </script>
  30   </head>
  31   <body>
  32     <script src="./assets/js/bsa.js"></script>
  33
  34     <div class="navbar navbar-default navbar-fixed-top">
  35       <div class="container">
  36         <div class="navbar-header">
  37           <a href="./" class="navbar-brand">Bootswatch</a>
  38           <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
  39             <span class="icon-bar"></span>
  40             <span class="icon-bar"></span>
  41             <span class="icon-bar"></span>
  42           </button>
  43         </div>
  44         <div class="navbar-collapse collapse" id="navbar-main">
  45           <ul class="nav navbar-nav">
  46             <li class="dropdown">
  47               <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
  48               <ul class="dropdown-menu" aria-labelledby="themes">
  49                 <li><a tabindex="-1" href="./default/">Default</a></li>
  50                 <li class="divider"></li>
  51                 <li><a tabindex="-1" href="./amelia/">Amelia</a></li>
  52                 <li><a tabindex="-1" href="./cerulean/">Cerulean</a></li>
  53                 <li><a tabindex="-1" href="./cosmo/">Cosmo</a></li>
  54                 <li><a tabindex="-1" href="./cyborg/">Cyborg</a></li>
  55                 <li><a tabindex="-1" href="./flatly/">Flatly</a></li>
  56                 <li><a tabindex="-1" href="./journal/">Journal</a></li>
  57                 <li><a tabindex="-1" href="./readable/">Readable</a></li>
  58                 <li><a tabindex="-1" href="./simplex/">Simplex</a></li>
  59                 <li><a tabindex="-1" href="./slate/">Slate</a></li>
  60                 <li><a tabindex="-1" href="./spacelab/">Spacelab</a></li>
  61                 <li><a tabindex="-1" href="./united/">United</a></li>
  62                 <li><a tabindex="-1" href="./yeti/">Yeti</a></li>
  63               </ul>
  64             </li>
  65             <li>
  66               <a href="./help/">Help</a>
  67             </li>
  68             <li>
  69               <a href="http://news.bootswatch.com">Blog</a>
  70             </li>
  71           </ul>
  72
  73           <ul class="nav navbar-nav navbar-right">
  74             <li><a href="http://builtwithbootstrap.com/" target="_blank">Built With Bootstrap</a></li>
  75             <li><a href="https://wrapbootstrap.com/?ref=bsw" target="_blank">WrapBootstrap</a></li>
  76           </ul>
  77
  78         </div>
  79       </div>
  80     </div>
  81
  82     <div class="splash">
  83       <div class="container">
  84
  85         <div class="row">
  86           <div class="col-lg-12">
  87             <h1>Free themes for Bootstrap</h1>
  88             <div class="alert alert-info">Check out <a href="./yeti">Yeti</a>, the newest member of the Bootswatch family. <a href="http://news.bootswatch.com/post/67753136761/yeti-a-bootstrap-theme-inspired-by-foundation">More info...</a></div>
  89             <div id="social">
  90               <span>
  91                 <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>
  92                 <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>
  93               </span>
  94               <span>
  95                 <a href="https://twitter.com/thomashpark" class="twitter-follow-button" data-show-count="false" data-show-screen-name="true">Follow @thomashpark</a>
  96                 <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootswatch.com" data-via="thomashpark">Tweet</a>
  97               </span>
  98             </div>
  99           </div>
 100         </div>
 101
 102       </div>
 103     </div>
 104
 105     <div class="section-tout">
 106       <div class="container">
 107
 108         <div class="row">
 109           <div class="col-lg-4 col-sm-6">
 110             <h3><i class="fa fa-file-o"></i> Easy to Install</h3>
 111             <p>Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values.</p>
 112           </div>
 113           <div class="col-lg-4 col-sm-6">
 114             <h3><i class="fa fa-github"></i> Open Source</h3>
 115             <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>
 116           </div>
 117           <div class="col-lg-4 col-sm-6">
 118             <h3><i class="fa fa-wrench"></i> Tuned for 3.0.3</h3>
 119             <p>Themes are built for the latest version of Bootstrap. <a href="http://bootswatch.com/2/">Version 2.3.2</a> and <a target="_blank" href="https://github.com/thomaspark/bootswatch/tags">others</a> are also available to download.</p>
 120           </div>
 121           <div class="col-lg-4 col-sm-6">
 122             <h3><i class="fa fa-cogs"></i> Modular</h3>
 123              <p>Changes are contained in just two LESS files, enabling modification and ensuring forward compatibility.</p>
 124           </div>
 125           <div class="col-lg-4 col-sm-6">
 126             <h3><i class="fa fa-cloud"></i> Get Plugged In</h3>
 127             <p>An <a href="./help/#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>
 128           </div>
 129           <div class="col-lg-4 col-sm-6">
 130             <h3><i class="fa fa-bullhorn"></i> Stay Updated</h3>
 131             <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>
 132           </div>
 133         </div>
 134
 135       </div>
 136     </div>
 137
 138     <div class="section-preview">
 139       <div class="container">
 140         <div class="row">
 141
 142           <div class="col-lg-4 col-sm-6">
 143             <div class="preview">
 144               <div class="image">
 145                 <a href="amelia/"><img src="amelia/thumbnail.png" class="img-responsive" alt="Amelia"></a>
 146               </div>
 147               <div class="options">
 148                 <h3>Amelia</h3>
 149                 <p>Sweet and cheery</p>
 150                 <div class="btn-group"><a class="btn btn-info" href="amelia/">Preview</a></div>
 151                 <div class="btn-group">
 152                   <a class="btn btn-info" target="_blank" href="amelia/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">Download</a>
 153                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 154                     <span class="caret"></span>
 155                   </a>
 156                   <ul class="dropdown-menu">
 157                     <li><a target="_blank" href="amelia/bootstrap.min.css"
 158                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 159                     <li><a target="_blank" href="amelia/bootstrap.css"
 160                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.css']);">bootstrap.css</a></li>
 161                     <li class="divider"></li>
 162                     <li><a target="_blank" href="amelia/variables.less"
 163                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'variables.less']);">variables.less</a></li>
 164                     <li><a target="_blank" href="amelia/bootswatch.less"
 165                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootswatch.less']);">bootswatch.less</a></li>
 166                   </ul>
 167                 </div>
 168               </div>
 169             </div>
 170           </div>
 171
 172           <div class="col-lg-4 col-sm-6">
 173             <div class="preview">
 174               <div class="image">
 175                 <a href="cerulean/"><img src="cerulean/thumbnail.png" class="img-responsive" alt="Cerulean"></a>
 176               </div>
 177               <div class="options">
 178                 <h3>Cerulean</h3>
 179                 <p>A calm, blue sky</p>
 180                 <div class="btn-group"><a class="btn btn-info" href="cerulean/">Preview</a></div>
 181                 <div class="btn-group">
 182                   <a class="btn btn-info" target="_blank" href="cerulean/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">Download</a>
 183                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 184                     <span class="caret"></span>
 185                   </a>
 186                   <ul class="dropdown-menu">
 187                     <li><a target="_blank" href="cerulean/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 188                     <li><a target="_blank" href="cerulean/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.css']);">bootstrap.css</a></li>
 189                     <li class="divider"></li>
 190                     <li><a target="_blank" href="cerulean/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'variables.less']);">variables.less</a></li>
 191                     <li><a target="_blank" href="cerulean/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootswatch.less']);">bootswatch.less</a></li>
 192                   </ul>
 193                 </div>
 194               </div>
 195             </div>
 196           </div>
 197
 198           <div class="col-lg-4 col-sm-6">
 199             <div class="preview">
 200               <div class="image">
 201                 <a href="cosmo/"><img class="img-responsive" src="cosmo/thumbnail.png" alt="Cosmo"></a>
 202               </div>
 203               <div class="options">
 204                 <h3>Cosmo</h3>
 205                 <p>An ode to Metro</p>
 206                 <div class="btn-group"><a class="btn btn-info" href="cosmo/">Preview</a></div>
 207                 <div class="btn-group">
 208                   <a class="btn btn-info" target="_blank" href="cosmo/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.min.css']);">Download</a>
 209                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 210                     <span class="caret"></span>
 211                   </a>
 212                   <ul class="dropdown-menu">
 213                     <li><a target="_blank" href="cosmo/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 214                     <li><a target="_blank" href="cosmo/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.css']);">bootstrap.css</a></li>
 215                     <li class="divider"></li>
 216                     <li><a target="_blank" href="cosmo/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'variables.less']);">variables.less</a></li>
 217                     <li><a target="_blank" href="cosmo/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootswatch.less']);">bootswatch.less</a></li>
 218                   </ul>
 219                 </div>
 220               </div>
 221             </div>
 222           </div>
 223
 224           <div class="col-lg-4 col-sm-6">
 225             <div class="preview">
 226               <div class="image">
 227                 <a href="cyborg/"><img class="img-responsive" src="cyborg/thumbnail.png" alt="Cyborg"></a>
 228               </div>
 229               <div class="options">
 230                 <h3>Cyborg</h3>
 231                 <p>Jet black and electric blue</p>
 232                 <div class="btn-group"><a class="btn btn-info" href="cyborg/">Preview</a></div>
 233                 <div class="btn-group">
 234                   <a class="btn btn-info" target="_blank" href="cyborg/bootstrap.min.css"
 235                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">Download</a>
 236                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 237                     <span class="caret"></span>
 238                   </a>
 239                   <ul class="dropdown-menu">
 240                     <li><a target="_blank" href="cyborg/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 241                     <li><a target="_blank" href="cyborg/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.css']);">bootstrap.css</a></li>
 242                     <li class="divider"></li>
 243                     <li><a target="_blank" href="cyborg/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'variables.less']);">variables.less</a></li>
 244                     <li><a target="_blank" href="cyborg/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootswatch.less']);">bootswatch.less</a></li>
 245                   </ul>
 246                 </div>
 247               </div>
 248             </div>
 249           </div>
 250
 251           <div class="col-lg-4 col-sm-6">
 252             <div class="preview">
 253               <div class="image">
 254                 <a href="flatly/"><img class="img-responsive" src="flatly/thumbnail.png" alt="Flatly"></a>
 255               </div>
 256               <div class="options">
 257                 <h3>Flatly</h3>
 258                 <p>Flat and modern</p>
 259                 <div class="btn-group"><a class="btn btn-info" href="flatly/">Preview</a></div>
 260                 <div class="btn-group">
 261                   <a class="btn btn-info" target="_blank" href="flatly/bootstrap.min.css"
 262                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.min.css']);">Download</a>
 263                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 264                     <span class="caret"></span>
 265                   </a>
 266                   <ul class="dropdown-menu">
 267                     <li><a target="_blank" href="flatly/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 268                     <li><a target="_blank" href="flatly/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.css']);">bootstrap.css</a></li>
 269                     <li class="divider"></li>
 270                     <li><a target="_blank" href="flatly/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'variables.less']);">variables.less</a></li>
 271                     <li><a target="_blank" href="flatly/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootswatch.less']);">bootswatch.less</a></li>
 272                   </ul>
 273                 </div>
 274               </div>
 275             </div>
 276           </div>
 277
 278           <div class="col-lg-4 col-sm-6">
 279             <div class="preview">
 280               <div class="image">
 281                 <a href="journal/"><img class="img-responsive" src="journal/thumbnail.png" alt="Journal"></a>
 282               </div>
 283               <div class="options">
 284                 <h3>Journal</h3>
 285                 <p>Crisp like a new sheet of paper</p>
 286                 <div class="btn-group"><a class="btn btn-info" href="journal/">Preview</a></div>
 287                 <div class="btn-group">
 288                   <a class="btn btn-info" target="_blank" href="journal/bootstrap.min.css"
 289                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">Download</a>
 290                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 291                     <span class="caret"></span>
 292                   </a>
 293                   <ul class="dropdown-menu">
 294                     <li><a target="_blank" href="journal/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 295                     <li><a target="_blank" href="journal/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.css']);">bootstrap.css</a></li>
 296                     <li class="divider"></li>
 297                     <li><a target="_blank" href="journal/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'variables.less']);">variables.less</a></li>
 298                     <li><a target="_blank" href="journal/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootswatch.less']);">bootswatch.less</a></li>
 299                   </ul>
 300                 </div>
 301               </div>
 302             </div>
 303           </div>
 304
 305           <div class="col-lg-4 col-sm-6">
 306             <div class="preview">
 307               <div class="image">
 308                 <a href="readable/"><img class="img-responsive" src="readable/thumbnail.png" alt="Readable"></a>
 309               </div>
 310               <div class="options">
 311                 <h3>Readable</h3>
 312                 <p>Optimized for legibility</p>
 313                 <div class="btn-group"><a class="btn btn-info" href="readable/">Preview</a></div>
 314                 <div class="btn-group">
 315                   <a class="btn btn-info" target="_blank" href="readable/bootstrap.min.css"
 316                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">Download</a>
 317                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 318                     <span class="caret"></span>
 319                   </a>
 320                   <ul class="dropdown-menu">
 321                     <li><a target="_blank" href="readable/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 322                     <li><a target="_blank" href="readable/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.css']);">bootstrap.css</a></li>
 323                     <li class="divider"></li>
 324                     <li><a target="_blank" href="readable/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'variables.less']);">variables.less</a></li>
 325                     <li><a target="_blank" href="readable/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootswatch.less']);">bootswatch.less</a></li>
 326                   </ul>
 327                 </div>
 328               </div>
 329             </div>
 330           </div>
 331
 332           <div class="col-lg-4 col-sm-6">
 333
 334             <div class="preview">
 335               <div class="image">
 336                 <a href="simplex/"><img class="img-responsive" src="simplex/thumbnail.png" alt="Simplex"></a>
 337               </div>
 338               <div class="options">
 339
 340                 <h3>Simplex</h3>
 341                 <p>Mini and minimalist</p>
 342                 <div class="btn-group"><a class="btn btn-info" href="simplex/">Preview</a></div>
 343                 <div class="btn-group">
 344                   <a class="btn btn-info" target="_blank" href="simplex/bootstrap.min.css"
 345                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.min.css']);">Download</a>
 346                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 347                     <span class="caret"></span>
 348                   </a>
 349                   <ul class="dropdown-menu">
 350                     <li><a target="_blank" href="simplex/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 351                     <li><a target="_blank" href="simplex/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.css']);">bootstrap.css</a></li>
 352                     <li class="divider"></li>
 353                     <li><a target="_blank" href="simplex/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'variables.less']);">variables.less</a></li>
 354                     <li><a target="_blank" href="simplex/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootswatch.less']);">bootswatch.less</a></li>
 355                   </ul>
 356                 </div>
 357
 358               </div>
 359             </div>
 360
 361           </div>
 362           <div class="col-lg-4 col-sm-6">
 363
 364             <div class="preview">
 365               <div class="image">
 366                 <a href="slate/"><img class="img-responsive" src="slate/thumbnail.png" alt="Slate"></a>
 367               </div>
 368               <div class="options">
 369
 370                 <h3>Slate</h3>
 371                 <p>Shades of gunmetal gray</p>
 372                 <div class="btn-group"><a class="btn btn-info" href="slate/">Preview</a></div>
 373                 <div class="btn-group">
 374                   <a class="btn btn-info" target="_blank" href="slate/bootstrap.min.css"
 375                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">Download</a>
 376                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 377                     <span class="caret"></span>
 378                   </a>
 379                   <ul class="dropdown-menu">
 380                     <li><a target="_blank" href="slate/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 381                     <li><a target="_blank" href="slate/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.css']);">bootstrap.css</a></li>
 382                     <li class="divider"></li>
 383                     <li><a target="_blank" href="slate/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'variables.less']);">variables.less</a></li>
 384                     <li><a target="_blank" href="slate/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootswatch.less']);">bootswatch.less</a></li>
 385                   </ul>
 386                 </div>
 387
 388               </div>
 389             </div>
 390
 391           </div>
 392           <div class="col-lg-4 col-sm-6">
 393
 394             <div class="preview">
 395               <div class="image">
 396                 <a href="spacelab/"><img class="img-responsive" src="spacelab/thumbnail.png" alt="Spacelab"></a>
 397               </div>
 398               <div class="options">
 399
 400                 <h3>Spacelab</h3>
 401                 <p>Silvery and sleek</p>
 402                 <div class="btn-group"><a class="btn btn-info" href="spacelab/">Preview</a></div>
 403                 <div class="btn-group">
 404                   <a class="btn btn-info" target="_blank" href="spacelab/bootstrap.min.css"
 405                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.min.css']);">Download</a>
 406                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 407                     <span class="caret"></span>
 408                   </a>
 409                   <ul class="dropdown-menu">
 410                     <li><a target="_blank" href="spacelab/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 411                     <li><a target="_blank" href="spacelab/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.css']);">bootstrap.css</a></li>
 412                     <li class="divider"></li>
 413                     <li><a target="_blank" href="spacelab/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'variables.less']);">variables.less</a></li>
 414                     <li><a target="_blank" href="spacelab/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootswatch.less']);">bootswatch.less</a></li>
 415                   </ul>
 416                 </div>
 417
 418               </div>
 419             </div>
 420
 421           </div>
 422           <div class="col-lg-4 col-sm-6">
 423
 424             <div class="preview">
 425               <div class="image">
 426                 <a href="united/"><img class="img-responsive" src="united/thumbnail.png" alt="United"></a>
 427               </div>
 428               <div class="options">
 429
 430                 <h3>United</h3>
 431                 <p>Ubuntu orange and unique font</p>
 432                 <div class="btn-group"><a class="btn btn-info" href="united/">Preview</a></div>
 433                 <div class="btn-group">
 434                   <a class="btn btn-info" target="_blank" href="united/bootstrap.min.css"
 435                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.min.css']);">Download</a>
 436                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 437                     <span class="caret"></span>
 438                   </a>
 439                   <ul class="dropdown-menu">
 440                     <li><a target="_blank" href="united/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 441                     <li><a target="_blank" href="united/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.css']);">bootstrap.css</a></li>
 442                     <li class="divider"></li>
 443                     <li><a target="_blank" href="united/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'variables.less']);">variables.less</a></li>
 444                     <li><a target="_blank" href="united/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootswatch.less']);">bootswatch.less</a></li>
 445                   </ul>
 446                 </div>
 447
 448               </div>
 449             </div>
 450
 451           </div>
 452           <div class="col-lg-4 col-sm-6">
 453
 454             <div class="preview">
 455               <div class="image">
 456                 <a href="yeti/"><img class="img-responsive" src="yeti/thumbnail.png" alt="Yeti"></a>
 457               </div>
 458               <div class="options">
 459
 460                 <h3>Yeti</h3>
 461                 <p>A friendly foundation</p>
 462                 <div class="btn-group"><a class="btn btn-info" href="yeti/">Preview</a></div>
 463                 <div class="btn-group">
 464                   <a class="btn btn-info" target="_blank" href="yeti/bootstrap.min.css"
 465                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'yeti', 'bootstrap.min.css']);">Download</a>
 466                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 467                     <span class="caret"></span>
 468                   </a>
 469                   <ul class="dropdown-menu">
 470                     <li><a target="_blank" href="yeti/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'yeti', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 471                     <li><a target="_blank" href="yeti/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'yeti', 'bootstrap.css']);">bootstrap.css</a></li>
 472                     <li class="divider"></li>
 473                     <li><a target="_blank" href="yeti/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'yeti', 'variables.less']);">variables.less</a></li>
 474                     <li><a target="_blank" href="yeti/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'yeti', 'bootswatch.less']);">bootswatch.less</a></li>
 475                   </ul>
 476                 </div>
 477
 478               </div>
 479             </div>
 480
 481           </div>
 482
 483
 484
 485         </div>
 486       </div>
 487
 488
 489       <div class="container">
 490         <div class="row">
 491
 492           <div class="col-lg-12">
 493             <h1>Want more?</h1>
 494             <p class="lead">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>
 495           </div>
 496
 497           <div class="col-lg-4 col-sm-4">
 498             <div class="preview">
 499               <div class="image">
 500                 <a target="_blank" href="http://wrapbootstrap.com/preview/WB0412697?ref=bsw"><img class="img-responsive" src="https://s3.amazonaws.com/wrapbootstrap/live/products/icons/WB0412697.jpg" alt="Front Row"></a>
 501               </div>
 502               <div class="options">
 503                 <h3>Unify</h3>
 504                 <p>A fresh, fully-responsive design</p>
 505                 <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB0412697?ref=bsw">Preview</a></div>
 506                 <div class="btn-group">
 507                   <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/unify-responsive-website-template-WB0412697?ref=bsw"
 508                   onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-unify']);">Info</a>
 509                 </div>
 510               </div>
 511             </div>
 512           </div>
 513
 514           <div class="col-lg-4 col-sm-4">
 515             <div class="preview">
 516               <div class="image">
 517                 <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>
 518               </div>
 519               <div class="options">
 520                 <h3>Clean Canvas</h3>
 521                 <p>A beautiful showcase for your works</p>
 522                 <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB02634G3?ref=bsw">Preview</a></div>
 523                 <div class="btn-group">
 524                   <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/clean-canvas-business-theme-WB02634G3?ref=bsw"
 525                   onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-cleancanvas']);">Info</a>
 526                 </div>
 527               </div>
 528             </div>
 529           </div>
 530
 531           <div class="col-lg-4 col-sm-4">
 532             <div class="preview">
 533               <div class="image">
 534                 <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>
 535               </div>
 536               <div class="options">
 537                 <h3>Base Admin</h3>
 538                 <p>A polished template for an admin dashboard</p>
 539                 <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB00U99JJ?ref=bsw">Preview</a></div>
 540                 <div class="btn-group">
 541                   <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/base-admin-WB00U99JJ?ref=bsw"
 542                   onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-baseadmin']);">Info</a>
 543                 </div>
 544               </div>
 545             </div>
 546           </div>
 547
 548         </div>
 549
 550         <div class="row">
 551           <div class="col-lg-12">
 552             <h1>Still looking?</h1>
 553             <p class="lead">Learn to code your own themes with these books from <a target="_blank" href="http://www.amazon.com/?tag=bootswatch-20">Amazon</a>.</p>
 554           </div>
 555           <div class="col-lg-4 col-sm-4">
 556             <div class="preview">
 557               <div class="image">
 558                 <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>
 559
 560               </div>
 561               <div class="options">
 562                 <h3>HTML &amp; CSS</h3>
 563                 <p>Jon Duckett</p>
 564                 <div>
 565                   <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;" />
 566                   <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>
 567                 </div>
 568               </div>
 569             </div>
 570           </div>
 571           <div class="col-lg-4 col-sm-4">
 572             <div class="preview">
 573               <div class="image">
 574
 575                 <a onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'lesscss']);" href="http://www.amazon.com/gp/product/178216376X/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=178216376X" target="_blank"><img class="img-responsive" src="assets/img/refs/lesscss.jpg" alt="Instant LESS CSS Preprocessor How-to, by Alex Libby"></a>
 576
 577               </div>
 578               <div class="options">
 579
 580                 <h3>Instant LESS</h3>
 581                 <p>Alex Libby</p>
 582                 <div>
 583                   <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;" />
 584                   <div class="btn-group"><a class="btn btn-info" onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'lesscss']);" href="http://www.amazon.com/gp/product/178216376X/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=178216376X" target="_blank">Amazon</a></div>
 585                 </div>
 586               </div>
 587             </div>
 588           </div>
 589           <div class="col-lg-4 col-sm-4">
 590             <div class="preview">
 591               <div class="image">
 592
 593                 <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>
 594
 595               </div>
 596               <div class="options">
 597
 598                 <h3>Beautiful Web Design</h3>
 599                 <p>Jason Beaird</p>
 600                 <div>
 601                   <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;" />
 602                   <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>
 603                 </div>
 604               </div>
 605             </div>
 606           </div>
 607         </div>
 608
 609
 610
 611       </div>
 612     </div>
 613
 614     <div class="container">
 615       <footer>
 616         <div class="row">
 617           <div class="col-lg-12">
 618
 619             <ul class="list-unstyled">
 620               <li class="pull-right"><a href="#top">Back to top</a></li>
 621               <li><a href="http://news.bootswatch.com" onclick="pageTracker._link(this.href); return false;">Blog</a></li>
 622               <li><a href="http://feeds.feedburner.com/bootswatch">RSS</a></li>
 623               <li><a href="https://twitter.com/thomashpark">Twitter</a></li>
 624               <li><a href="https://github.com/thomaspark/bootswatch/">GitHub</a></li>
 625               <li><a href="./help/#api">API</a></li>
 626               <li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=F22JEM3Q78JC2">Donate</a></li>
 627             </ul>
 628             <p>Made by <a href="http://thomaspark.me" rel="nofollow">Thomas Park</a>. Contact him at <a href="mailto:hello@thomaspark.me">hello@thomaspark.me</a>.</p>
 629             <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="nofollow">Apache License v2.0</a>.</p>
 630             <p>Based on <a href="http://getbootstrap.com" rel="nofollow">Bootstrap</a>. Icons from <a href="http://fortawesome.github.io/Font-Awesome/" rel="nofollow">Font Awesome</a>. Web fonts from <a href="http://www.google.com/webfonts" rel="nofollow">Google</a>. Favicon by <a href="https://twitter.com/geraldhiller" rel="nofollow">Gerald Hiller</a>.</p>
 631
 632           </div>
 633         </div>
 634
 635       </footer>
 636
 637
 638     </div>
 639
 640
 641     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
 642     <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
 643     <script src="./assets/js/bootswatch.js"></script>
 644     <script type="text/javascript">
 645       !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");
 646     </script>
 647   </body>
 648 </html>