Bootstrap/docs/templates/pages/index.mustache

<!-- Masthead
================================================== -->
<header class="jumbotron masthead">
  <div class="inner">
    <h1>{{_i}}Twitter Bootstrap{{/i}}</h1>
    <p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</p>
    <p class="download-info">
      <a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'GitHub Project', 'View project on GitHub']);"{{/production}}>{{_i}}View project on GitHub{{/i}}</a>
      <a href="assets/bootstrap.zip" class="btn btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.0']);"{{/production}}>{{_i}}Download Bootstrap <small>(v2.1.0)</small>{{/i}}</a>
    </p>
  </div>

  <div class="bs-links">
    <ul class="quick-links">
      <li><a href="./upgrading.html">{{_i}}Upgrading from 1.4{{/i}}</a></li>
      <li><a href="https://github.com/twitter/bootstrap/zipball/master">{{_i}}Download with docs{{/i}}</a></li>
      <li><a href="http://blog.getbootstrap.com">{{_i}}Read the blog{{/i}}</a></li>
      <li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Submit issues{{/i}}</a></li>
      <li><a href="https://github.com/twitter/bootstrap/wiki">{{_i}}Roadmap and changelog{{/i}}</a></li>
    </ul>
    <ul class="quick-links">
      <li>
        <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
      </li>
      <li>
        <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
      </li>
      <li class="follow-btn">
        <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">{{_i}}Follow @twbootstrap{{/i}}</a>
      </li>
      <li class="tweet-btn">
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
      </li>
    </ul>
  </div>
</header>

<hr class="bs-docs-separator">

<div class="marketing">
  <h1>{{_i}}Designed for everyone, everywhere.{{/i}}</h1>
  <p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}</p>
  <div class="row">
    <div class="span5">
      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_042_group.png">
      <h2>{{_i}}Built for and by nerds{{/i}}</h2>
      <p>{{_i}}We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.{{/i}}</p>

      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
      <h2>{{_i}}Cross-everything{{/i}}</h2>
      <p>{{_i}}Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.{{/i}}</p>

      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
      <h2>{{_i}}12-column grid{{/i}}</h2>
      <p>{{_i}}Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.{{/i}}</p>

      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png">
      <h2>{{_i}}Responsive design{{/i}}</h2>
      <p>{{_i}}As of Bootstrap 2, our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}</p>
    </div>
    <div class="span5">
      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
      <h2>{{_i}}Styleguide docs{{/i}}</h2>
      <p>{{_i}}Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.{{/i}}</p>

      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_082_roundabout.png">
      <h2>{{_i}}Growing library{{/i}}</h2>
      <p>{{_i}}Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.{{/i}}</p>

      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_009_magic.png">
      <h2>{{_i}}Custom jQuery plugins{{/i}}</h2>
      <p>{{_i}}Easy-to-use, proper, and extensible interactions for many common components with custom-built jQuery plugins to bring your projects to life.{{/i}}</p>

      <img class="bs-icon" src="assets/img/less-small.png">
      <h2>{{_i}}Built on LESS{{/i}}</h2>
      <p>{{_i}}Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.{{/i}}</p>
    </div>
  </div><!--/row-->

  <hr class="bs-docs-separator">

  <h1>{{_i}}Built with Bootstrap.{{/i}}</h1>
  <p class="marketing-byline">{{_i}}For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.{{/i}}</p>
  <ul class="thumbnails example-sites">
    <li class="span3">
      <a class="thumbnail" href="http://soundready.fm/" target="_blank">
        <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
      </a>
    </li>
    <li class="span3">
      <a class="thumbnail" href="http://kippt.com/" target="_blank">
        <img src="assets/img/example-sites/kippt.png" alt="Kippt">
      </a>
    </li>
    <li class="span3">
      <a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
        <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
      </a>
    </li>
<!--     <li class="span2">
      <a class="thumbnail" href="http://www.jshint.com/" target="_blank">
        <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
      </a>
    </li>
 -->  </ul>

</div><!-- /.marketing -->