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.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/bootstrap/assets/js/html5shiv.js"></script>
  13       <script src="./bower_components/bootstrap/assets/js/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               </ul>
  63             </li>
  64             <li>
  65               <a href="./help/">Help</a>
  66             </li>
  67             <li>
  68               <a href="http://news.bootswatch.com">Blog</a>
  69             </li>
  70           </ul>
  71
  72           <ul class="nav navbar-nav navbar-right">
  73             <li><a href="http://builtwithbootstrap.com/" target="_blank">Built With Bootstrap</a></li>
  74             <li><a href="https://wrapbootstrap.com/?ref=bsw" target="_blank">WrapBootstrap</a></li>
  75           </ul>
  76
  77         </div>
  78       </div>
  79     </div>
  80
  81     <div class="splash">
  82       <div class="container">
  83
  84         <div class="row">
  85           <div class="col-lg-12">
  86             <h1>Free themes for Twitter Bootstrap</h1>
  87
  88             <div class="alert alert-info">
  89               <button type="button" class="close" data-dismiss="alert">&times;</button>
  90               <p>You're viewing themes for the newly released Bootstrap 3.0.0. If you want 2.3.2, visit <a class="alert-link" href="http://bootswatch.com/2/">bootswatch.com/2/</a>.
  91             </div>
  92             <div id="social">
  93               <span>
  94                 <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>
  95                 <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>
  96               </span>
  97               <span>
  98                 <a href="https://twitter.com/thomashpark" class="twitter-follow-button" data-show-count="false" data-show-screen-name="true">Follow @thomashpark</a>
  99                 <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootswatch.com" data-via="thomashpark">Tweet</a>
 100               </span>
 101             </div>
 102           </div>
 103         </div>
 104
 105       </div>
 106     </div>
 107
 108     <div class="section-tout">
 109       <div class="container">
 110
 111         <div class="row">
 112           <div class="col-lg-4 col-sm-6">
 113             <h3><i class="icon-file-alt"></i> Easy to Install</h3>
 114             <p>Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values.</p>
 115           </div>
 116           <div class="col-lg-4 col-sm-6">
 117             <h3><i class="icon-github"></i> Open Source</h3>
 118             <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>
 119           </div>
 120           <div class="col-lg-4 col-sm-6">
 121             <h3><i class="icon-wrench"></i> Tuned for 3.0.0</h3>
 122             <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">older</a> are also available to download.</p>
 123           </div>
 124           <div class="col-lg-4 col-sm-6">
 125             <h3><i class="icon-cogs"></i> Modular</h3>
 126              <p>Changes are contained in just two LESS files, enabling modification and ensuring forward compatibility.</p>
 127           </div>
 128           <div class="col-lg-4 col-sm-6">
 129             <h3><i class="icon-cloud"></i> Get Plugged In</h3>
 130             <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>
 131           </div>
 132           <div class="col-lg-4 col-sm-6">
 133             <h3><i class="icon-bullhorn"></i> Stay Updated</h3>
 134             <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>
 135           </div>
 136         </div>
 137
 138       </div>
 139     </div>
 140
 141     <div class="section-preview">
 142       <div class="container">
 143         <div class="row">
 144
 145           <div class="col-lg-4 col-sm-6">
 146             <div class="preview">
 147               <div class="image">
 148                 <a href="amelia/"><img src="amelia/thumbnail.png" class="img-responsive" alt="Amelia"></a>
 149               </div>
 150               <div class="options">
 151                 <h3>Amelia</h3>
 152                 <p>Sweet and cheery</p>
 153                 <div class="btn-group"><a class="btn btn-info" href="amelia/">Preview</a></div>
 154                 <div class="btn-group">
 155                   <a class="btn btn-info" target="_blank" href="amelia/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">Download</a>
 156                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 157                     <span class="caret"></span>
 158                   </a>
 159                   <ul class="dropdown-menu">
 160                     <li><a target="_blank" href="amelia/bootstrap.min.css"
 161                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 162                     <li><a target="_blank" href="amelia/bootstrap.css"
 163                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.css']);">bootstrap.css</a></li>
 164                     <li class="divider"></li>
 165                     <li><a target="_blank" href="amelia/variables.less"
 166                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'variables.less']);">variables.less</a></li>
 167                     <li><a target="_blank" href="amelia/bootswatch.less"
 168                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootswatch.less']);">bootswatch.less</a></li>
 169                   </ul>
 170                 </div>
 171               </div>
 172             </div>
 173           </div>
 174
 175           <div class="col-lg-4 col-sm-6">
 176             <div class="preview">
 177               <div class="image">
 178                 <a href="cerulean/"><img src="cerulean/thumbnail.png" class="img-responsive" alt="Cerulean"></a>
 179               </div>
 180               <div class="options">
 181                 <h3>Cerulean</h3>
 182                 <p>A calm, blue sky</p>
 183                 <div class="btn-group"><a class="btn btn-info" href="cerulean/">Preview</a></div>
 184                 <div class="btn-group">
 185                   <a class="btn btn-info" target="_blank" href="cerulean/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">Download</a>
 186                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 187                     <span class="caret"></span>
 188                   </a>
 189                   <ul class="dropdown-menu">
 190                     <li><a target="_blank" href="cerulean/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 191                     <li><a target="_blank" href="cerulean/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.css']);">bootstrap.css</a></li>
 192                     <li class="divider"></li>
 193                     <li><a target="_blank" href="cerulean/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'variables.less']);">variables.less</a></li>
 194                     <li><a target="_blank" href="cerulean/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootswatch.less']);">bootswatch.less</a></li>
 195                   </ul>
 196                 </div>
 197               </div>
 198             </div>
 199           </div>
 200
 201           <div class="col-lg-4 col-sm-6">
 202             <div class="preview">
 203               <div class="image">
 204                 <a href="cosmo/"><img class="img-responsive" src="cosmo/thumbnail.png" alt="Cosmo"></a>
 205               </div>
 206               <div class="options">
 207                 <h3>Cosmo</h3>
 208                 <p>An ode to Metro</p>
 209                 <div class="btn-group"><a class="btn btn-info" href="cosmo/">Preview</a></div>
 210                 <div class="btn-group">
 211                   <a class="btn btn-info" target="_blank" href="cosmo/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.min.css']);">Download</a>
 212                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 213                     <span class="caret"></span>
 214                   </a>
 215                   <ul class="dropdown-menu">
 216                     <li><a target="_blank" href="cosmo/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 217                     <li><a target="_blank" href="cosmo/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.css']);">bootstrap.css</a></li>
 218                     <li class="divider"></li>
 219                     <li><a target="_blank" href="cosmo/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'variables.less']);">variables.less</a></li>
 220                     <li><a target="_blank" href="cosmo/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootswatch.less']);">bootswatch.less</a></li>
 221                   </ul>
 222                 </div>
 223               </div>
 224             </div>
 225           </div>
 226
 227           <div class="col-lg-4 col-sm-6">
 228             <div class="preview">
 229               <div class="image">
 230                 <a href="cyborg/"><img class="img-responsive" src="cyborg/thumbnail.png" alt="Cyborg"></a>
 231               </div>
 232               <div class="options">
 233                 <h3>Cyborg</h3>
 234                 <p>Jet black and electric blue</p>
 235                 <div class="btn-group"><a class="btn btn-info" href="cyborg/">Preview</a></div>
 236                 <div class="btn-group">
 237                   <a class="btn btn-info" target="_blank" href="cyborg/bootstrap.min.css"
 238                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">Download</a>
 239                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 240                     <span class="caret"></span>
 241                   </a>
 242                   <ul class="dropdown-menu">
 243                     <li><a target="_blank" href="cyborg/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 244                     <li><a target="_blank" href="cyborg/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.css']);">bootstrap.css</a></li>
 245                     <li class="divider"></li>
 246                     <li><a target="_blank" href="cyborg/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'variables.less']);">variables.less</a></li>
 247                     <li><a target="_blank" href="cyborg/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootswatch.less']);">bootswatch.less</a></li>
 248                   </ul>
 249                 </div>
 250               </div>
 251             </div>
 252           </div>
 253
 254           <div class="col-lg-4 col-sm-6">
 255             <div class="preview">
 256               <div class="image">
 257                 <a href="flatly/"><img class="img-responsive" src="flatly/thumbnail.png" alt="Flatly"></a>
 258               </div>
 259               <div class="options">
 260                 <h3>Flatly</h3>
 261                 <p>Flat and modern</p>
 262                 <div class="btn-group"><a class="btn btn-info" href="flatly/">Preview</a></div>
 263                 <div class="btn-group">
 264                   <a class="btn btn-info" target="_blank" href="flatly/bootstrap.min.css"
 265                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.min.css']);">Download</a>
 266                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 267                     <span class="caret"></span>
 268                   </a>
 269                   <ul class="dropdown-menu">
 270                     <li><a target="_blank" href="flatly/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 271                     <li><a target="_blank" href="flatly/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.css']);">bootstrap.css</a></li>
 272                     <li class="divider"></li>
 273                     <li><a target="_blank" href="flatly/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'variables.less']);">variables.less</a></li>
 274                     <li><a target="_blank" href="flatly/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootswatch.less']);">bootswatch.less</a></li>
 275                   </ul>
 276                 </div>
 277               </div>
 278             </div>
 279           </div>
 280
 281           <div class="col-lg-4 col-sm-6">
 282             <div class="preview">
 283               <div class="image">
 284                 <a href="journal/"><img class="img-responsive" src="journal/thumbnail.png" alt="Journal"></a>
 285               </div>
 286               <div class="options">
 287                 <h3>Journal</h3>
 288                 <p>Crisp like a new sheet of paper</p>
 289                 <div class="btn-group"><a class="btn btn-info" href="journal/">Preview</a></div>
 290                 <div class="btn-group">
 291                   <a class="btn btn-info" target="_blank" href="journal/bootstrap.min.css"
 292                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">Download</a>
 293                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 294                     <span class="caret"></span>
 295                   </a>
 296                   <ul class="dropdown-menu">
 297                     <li><a target="_blank" href="journal/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 298                     <li><a target="_blank" href="journal/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.css']);">bootstrap.css</a></li>
 299                     <li class="divider"></li>
 300                     <li><a target="_blank" href="journal/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'variables.less']);">variables.less</a></li>
 301                     <li><a target="_blank" href="journal/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootswatch.less']);">bootswatch.less</a></li>
 302                   </ul>
 303                 </div>
 304               </div>
 305             </div>
 306           </div>
 307
 308           <div class="col-lg-4 col-sm-6">
 309             <div class="preview">
 310               <div class="image">
 311                 <a href="readable/"><img class="img-responsive" src="readable/thumbnail.png" alt="Readable"></a>
 312               </div>
 313               <div class="options">
 314                 <h3>Readable</h3>
 315                 <p>Optimized for legibility</p>
 316                 <div class="btn-group"><a class="btn btn-info" href="readable/">Preview</a></div>
 317                 <div class="btn-group">
 318                   <a class="btn btn-info" target="_blank" href="readable/bootstrap.min.css"
 319                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">Download</a>
 320                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 321                     <span class="caret"></span>
 322                   </a>
 323                   <ul class="dropdown-menu">
 324                     <li><a target="_blank" href="readable/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 325                     <li><a target="_blank" href="readable/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.css']);">bootstrap.css</a></li>
 326                     <li class="divider"></li>
 327                     <li><a target="_blank" href="readable/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'variables.less']);">variables.less</a></li>
 328                     <li><a target="_blank" href="readable/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootswatch.less']);">bootswatch.less</a></li>
 329                   </ul>
 330                 </div>
 331               </div>
 332             </div>
 333           </div>
 334
 335           <div class="col-lg-4 col-sm-6">
 336
 337             <div class="preview">
 338               <div class="image">
 339                 <a href="simplex/"><img class="img-responsive" src="simplex/thumbnail.png" alt="Simplex"></a>
 340               </div>
 341               <div class="options">
 342
 343                 <h3>Simplex</h3>
 344                 <p>Mini and minimalist</p>
 345                 <div class="btn-group"><a class="btn btn-info" href="simplex/">Preview</a></div>
 346                 <div class="btn-group">
 347                   <a class="btn btn-info" target="_blank" href="simplex/bootstrap.min.css"
 348                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.min.css']);">Download</a>
 349                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 350                     <span class="caret"></span>
 351                   </a>
 352                   <ul class="dropdown-menu">
 353                     <li><a target="_blank" href="simplex/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 354                     <li><a target="_blank" href="simplex/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.css']);">bootstrap.css</a></li>
 355                     <li class="divider"></li>
 356                     <li><a target="_blank" href="simplex/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'variables.less']);">variables.less</a></li>
 357                     <li><a target="_blank" href="simplex/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootswatch.less']);">bootswatch.less</a></li>
 358                   </ul>
 359                 </div>
 360
 361               </div>
 362             </div>
 363
 364           </div>
 365           <div class="col-lg-4 col-sm-6">
 366
 367             <div class="preview">
 368               <div class="image">
 369                 <a href="slate/"><img class="img-responsive" src="slate/thumbnail.png" alt="Slate"></a>
 370               </div>
 371               <div class="options">
 372
 373                 <h3>Slate</h3>
 374                 <p>Shades of gunmetal gray</p>
 375                 <div class="btn-group"><a class="btn btn-info" href="slate/">Preview</a></div>
 376                 <div class="btn-group">
 377                   <a class="btn btn-info" target="_blank" href="slate/bootstrap.min.css"
 378                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">Download</a>
 379                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 380                     <span class="caret"></span>
 381                   </a>
 382                   <ul class="dropdown-menu">
 383                     <li><a target="_blank" href="slate/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 384                     <li><a target="_blank" href="slate/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.css']);">bootstrap.css</a></li>
 385                     <li class="divider"></li>
 386                     <li><a target="_blank" href="slate/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'variables.less']);">variables.less</a></li>
 387                     <li><a target="_blank" href="slate/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootswatch.less']);">bootswatch.less</a></li>
 388                   </ul>
 389                 </div>
 390
 391               </div>
 392             </div>
 393
 394           </div>
 395           <div class="col-lg-4 col-sm-6">
 396
 397             <div class="preview">
 398               <div class="image">
 399                 <a href="spacelab/"><img class="img-responsive" src="spacelab/thumbnail.png" alt="Spacelab"></a>
 400               </div>
 401               <div class="options">
 402
 403                 <h3>Spacelab</h3>
 404                 <p>Silvery and sleek</p>
 405                 <div class="btn-group"><a class="btn btn-info" href="spacelab/">Preview</a></div>
 406                 <div class="btn-group">
 407                   <a class="btn btn-info" target="_blank" href="spacelab/bootstrap.min.css"
 408                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.min.css']);">Download</a>
 409                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 410                     <span class="caret"></span>
 411                   </a>
 412                   <ul class="dropdown-menu">
 413                     <li><a target="_blank" href="spacelab/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 414                     <li><a target="_blank" href="spacelab/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.css']);">bootstrap.css</a></li>
 415                     <li class="divider"></li>
 416                     <li><a target="_blank" href="spacelab/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'variables.less']);">variables.less</a></li>
 417                     <li><a target="_blank" href="spacelab/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootswatch.less']);">bootswatch.less</a></li>
 418                   </ul>
 419                 </div>
 420
 421               </div>
 422             </div>
 423
 424           </div>
 425          <!--  <div class="col-lg-4 col-sm-6">
 426
 427             <div class="preview">
 428               <div class="image">
 429                 <a href="superhero/"><img class="img-responsive" src="superhero/thumbnail.png" alt="Superhero"></a>
 430               </div>
 431               <div class="options">
 432
 433                 <h3>Superhero</h3>
 434                 <p>Batman meets... Aquaman?</p>
 435                 <div class="btn-group"><a class="btn btn-info" href="superhero/">Preview</a></div>
 436                 <div class="btn-group">
 437                   <a class="btn btn-info" target="_blank" href="superhero/bootstrap.min.css"
 438                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.min.css']);">Download</a>
 439                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 440                     <span class="caret"></span>
 441                   </a>
 442                   <ul class="dropdown-menu">
 443                     <li><a target="_blank" href="superhero/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 444                     <li><a target="_blank" href="superhero/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.css']);">bootstrap.css</a></li>
 445                     <li class="divider"></li>
 446                     <li><a target="_blank" href="superhero/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'variables.less']);">variables.less</a></li>
 447                     <li><a target="_blank" href="superhero/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootswatch.less']);">bootswatch.less</a></li>
 448                   </ul>
 449                 </div>
 450
 451               </div>
 452             </div>
 453
 454           </div> -->
 455           <div class="col-lg-4 col-sm-6">
 456
 457             <div class="preview">
 458               <div class="image">
 459                 <a href="united/"><img class="img-responsive" src="united/thumbnail.png" alt="United"></a>
 460               </div>
 461               <div class="options">
 462
 463                 <h3>United</h3>
 464                 <p>Ubuntu orange and unique font</p>
 465                 <div class="btn-group"><a class="btn btn-info" href="united/">Preview</a></div>
 466                 <div class="btn-group">
 467                   <a class="btn btn-info" target="_blank" href="united/bootstrap.min.css"
 468                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.min.css']);">Download</a>
 469                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 470                     <span class="caret"></span>
 471                   </a>
 472                   <ul class="dropdown-menu">
 473                     <li><a target="_blank" href="united/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 474                     <li><a target="_blank" href="united/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.css']);">bootstrap.css</a></li>
 475                     <li class="divider"></li>
 476                     <li><a target="_blank" href="united/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'variables.less']);">variables.less</a></li>
 477                     <li><a target="_blank" href="united/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootswatch.less']);">bootswatch.less</a></li>
 478                   </ul>
 479                 </div>
 480
 481               </div>
 482             </div>
 483
 484           </div>
 485
 486
 487
 488         </div>
 489       </div>
 490
 491
 492       <div class="container">
 493         <div class="row">
 494
 495           <div class="col-lg-12">
 496             <h1>Want more?</h1>
 497             <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>
 498           </div>
 499           <div class="col-lg-4 col-sm-4">
 500             <div class="preview">
 501               <div class="image">
 502                 <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>
 503               </div>
 504               <div class="options">
 505                 <h3>Clean Canvas</h3>
 506                 <p>A beautiful showcase for your works</p>
 507                 <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB02634G3?ref=bsw">Preview</a></div>
 508                 <div class="btn-group">
 509                   <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/clean-canvas-business-theme-WB02634G3?ref=bsw"
 510                   onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-cleancanvas']);">Info</a>
 511                 </div>
 512               </div>
 513             </div>
 514           </div>
 515
 516           <div class="col-lg-4 col-sm-4">
 517             <div class="preview">
 518               <div class="image">
 519                 <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>
 520               </div>
 521               <div class="options">
 522                 <h3>Front Row</h3>
 523                 <p>An elegant single-page template</p>
 524                 <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB0L500N4?ref=bsw">Preview</a></div>
 525                 <div class="btn-group">
 526                   <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/front-row-one-page-theme-WB0L500N4?ref=bsw"
 527                   onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-frontrow']);">Info</a>
 528                 </div>
 529               </div>
 530             </div>
 531           </div>
 532
 533           <div class="col-lg-4 col-sm-4">
 534             <div class="preview">
 535               <div class="image">
 536                 <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>
 537               </div>
 538               <div class="options">
 539                 <h3>Base Admin</h3>
 540                 <p>A polished template for an admin dashboard</p>
 541                 <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB00U99JJ?ref=bsw">Preview</a></div>
 542                 <div class="btn-group">
 543                   <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/base-admin-WB00U99JJ?ref=bsw"
 544                   onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-baseadmin']);">Info</a>
 545                 </div>
 546               </div>
 547             </div>
 548           </div>
 549
 550         </div>
 551
 552         <div class="row">
 553           <div class="col-lg-12">
 554             <h1>Still looking?</h1>
 555             <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>
 556           </div>
 557           <div class="col-lg-4 col-sm-4">
 558             <div class="preview">
 559               <div class="image">
 560                 <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>
 561
 562               </div>
 563               <div class="options">
 564                 <h3>HTML &amp; CSS</h3>
 565                 <p>Jon Duckett</p>
 566                 <div>
 567                   <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;" />
 568                   <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>
 569                 </div>
 570               </div>
 571             </div>
 572           </div>
 573           <div class="col-lg-4 col-sm-4">
 574             <div class="preview">
 575               <div class="image">
 576
 577                 <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>
 578
 579               </div>
 580               <div class="options">
 581
 582                 <h3>Instant LESS</h3>
 583                 <p>Alex Libby</p>
 584                 <div>
 585                   <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;" />
 586                   <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>
 587                 </div>
 588               </div>
 589             </div>
 590           </div>
 591           <div class="col-lg-4 col-sm-4">
 592             <div class="preview">
 593               <div class="image">
 594
 595                 <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>
 596
 597               </div>
 598               <div class="options">
 599
 600                 <h3>Beautiful Web Design</h3>
 601                 <p>Jason Beaird</p>
 602                 <div>
 603                   <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;" />
 604                   <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>
 605                 </div>
 606               </div>
 607             </div>
 608           </div>
 609         </div>
 610
 611
 612
 613       </div>
 614     </div>
 615
 616     <div class="container">
 617       <footer>
 618         <div class="row">
 619           <div class="col-lg-12">
 620
 621             <ul class="list-unstyled">
 622               <li class="pull-right"><a href="#top">Back to top</a></li>
 623               <li><a href="http://news.bootswatch.com" onclick="pageTracker._link(this.href); return false;">Blog</a></li>
 624               <li><a href="http://feeds.feedburner.com/bootswatch">RSS</a></li>
 625               <li><a href="https://twitter.com/thomashpark">Twitter</a></li>
 626               <li><a href="https://github.com/thomaspark/bootswatch/">GitHub</a></li>
 627               <li><a href="./help/#api">API</a></li>
 628               <li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=F22JEM3Q78JC2">Donate</a></li>
 629             </ul>
 630             <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>
 631             <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.</p>
 632             <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>
 633
 634           </div>
 635         </div>
 636
 637       </footer>
 638
 639
 640     </div>
 641
 642
 643     <script src="./bower_components/jquery/jquery.min.js"></script>
 644     <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
 645     <script src="./assets/js/bootswatch.js"></script>
 646     <script type="text/javascript">
 647       !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");
 648     </script>
 649   </body>
 650 </html>