base-css.mustache

<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <h1>{{_i}}Base CSS{{/i}}</h1>
  <p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
  <div class="subnav">
    <ul class="nav pills">
      <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
      <li><a href="#tables">{{_i}}Tables{{/i}}</a></li>
      <li><a href="#forms">{{_i}}Forms{{/i}}</a></li>
      <li><a href="#buttons">{{_i}}Buttons{{/i}}</a></li>
      <li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
    </ul>
  </div>
</header>


<!-- Typography
================================================== -->
<section id="typography">
  <div class="page-header">
    <h1>{{_i}}Typography <small>Headings, paragraphs, lists, and other inline type elements</small>{{/i}}</h1>
  </div>

  <h2>{{_i}}Headings &amp; body copy{{/i}}</h2>

  <!-- Headings & Paragraph Copy -->
  <div class="row">
    <div class="span4">
      <h3>{{_i}}Typographic scale{{/i}}</h3>
      <p>{{_i}}The entire typographic grid is based on two Less variables in our preboot.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.{{/i}}</p>
      <p>{{_i}}We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.{{/i}}</p>
    </div>
    <div class="span4">
      <h3>{{_i}}Example body text{{/i}}</h3>
      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
    </div>
    <div class="span4">
      <div class="well">
        <h1>h1. {{_i}}Heading 1{{/i}}</h1>
        <h2>h2. {{_i}}Heading 2{{/i}}</h2>
        <h3>h3. {{_i}}Heading 3{{/i}}</h3>
        <h4>h4. {{_i}}Heading 4{{/i}}</h4>
        <h5>h5. {{_i}}Heading 5{{/i}}</h5>
        <h6>h6. {{_i}}Heading 6{{/i}}</h6>
      </div>
    </div>
  </div>

  <!-- Misc Elements -->
  <h2>{{_i}}Emphasis, address, and abbreviation{{/i}}</h2>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>{{_i}}Element{{/i}}</th>
        <th>{{_i}}Usage{{/i}}</th>
        <th>{{_i}}Optional{{/i}}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <code>&lt;strong&gt;</code>
        </td>
        <td>
          {{_i}}For emphasizing a snippet of text with <strong>important</strong>{{/i}}
        </td>
        <td>
          <span class="muted">{{_i}}None{{/i}}</span>