Bootstrap/docs/templates/pages/scaffolding.mustache

<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <div class="container">
    <h1>{{_i}}Scaffolding{{/i}}</h1>
    <p class="lead">{{_i}}Bootstrap is built on responsive 12-column grids, layouts, and components.{{/i}}</p>
  </div>
</header>

  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#global"><i class="icon-chevron-right"></i> {{_i}}Global styles{{/i}}</a></li>
          <li><a href="#gridSystem"><i class="icon-chevron-right"></i> {{_i}}Grid system{{/i}}</a></li>
          <li><a href="#layouts"><i class="icon-chevron-right"></i> {{_i}}Layouts{{/i}}</a></li>
          <li><a href="#responsive"><i class="icon-chevron-right"></i> {{_i}}Responsive design{{/i}}</a></li>
        </ul>
      </div>
      <div class="span9">



        <!-- Global Bootstrap settings
        ================================================== -->
        <section id="global">
          <div class="page-header">
            <h1>{{_i}}Global settings{{/i}}</h1>
          </div>

          <h3>{{_i}}Requires HTML5 doctype{{/i}}</h3>
          <p>{{_i}}Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  ...
&lt;/html&gt;
</pre>

          <h3>{{_i}}Typography and links{{/i}}</h3>
          <p>{{_i}}Bootstrap sets basic global display, typography, and link styles. Specifically, we:{{/i}}</p>
          <ul>
            <li>{{_i}}Remove <code>margin</code> on the body{{/i}}</li>
            <li>{{_i}}Set <code>background-color: white;</code> on the <code>body</code>{{/i}}</li>
            <li>{{_i}}Use the <code>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</code> attributes as our typographic base{{/i}}</li>
            <li>{{_i}}Set the global link color via <code>@linkColor</code> and apply link underlines only on <code>:hover</code>{{/i}}</li>
          </ul>
          <p>{{_i}}These styles can be found within <strong>scaffolding.less</strong>.{{/i}}</p>

          <h3>{{_i}}Reset via Normalize{{/i}}</h3>
          <p>{{_i}}With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.{{/i}}</p>

        </section>




        <!-- Grid system
        ================================================== -->
        <section id="gridSystem">
          <div class="page-header">
            <h1>{{_i}}Default grid system{{/i}}</h1>
          </div>

          <h2>{{_i}}Live grid example{{/i}}</h2>
          <p>{{_i}}The default Bootstrap grid system utilizes <strong>12 columns</strong>, making for a 940px wide container without <a href="./scaffolding.html#responsive">responsive features</a> enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.{{/i}}</p>
          <div class="bs-docs-grid">
            <div class="row show-grid">
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
            </div>
            <div class="row show-grid">
              <div class="span4">4</div>
              <div class="span4">4</div>
              <div class="span4">4</div>
            </div>
            <div class="row show-grid">
              <div class="span6">6</div>
              <div class="span6">6</div>
            </div>
            <div class="row show-grid">
              <div class="span12">12</div>
            </div>
          </div>

          <h3>{{_i}}Basic grid HTML{{/i}}</h3>
          <p>{{_i}}For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
  &lt;div class="span4"&gt;...&lt;/div&gt;
  &lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
          <p>{{_i}}Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.{{/i}}</p>

          <h2>{{_i}}Offsetting columns{{/i}}</h2>
          <p>{{_i}}Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.{{/i}}</p>
          <div class="bs-docs-grid">
            <div class="row show-grid">
              <div class="span4">4</div>
              <div class="span4 offset4">4 offset 4</div>
            </div><!-- /row -->
            <div class="row show-grid">
              <div class="span3 offset3">3 offset 3</div>
              <div class="span3 offset3">3 offset 3</div>
            </div><!-- /row -->
            <div class="row show-grid">
              <div class="span6 offset6">6 offset 6</div>
            </div><!-- /row -->
          </div>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
  &lt;div class="span4"&gt;...&lt;/div&gt;
  &lt;div class="span4 offset4"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>


          <h2>{{_i}}Nesting columns{{/i}}</h2>
          <p>{{_i}}To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}</p>
          <div class="row show-grid">
            <div class="span9">
              {{_i}}Level 1 column{{/i}}
              <div class="row show-grid">
                <div class="span6">
                  {{_i}}Level 2{{/i}}
                </div>
                <div class="span6">
                  {{_i}}Level 2{{/i}}
                </div>
              </div>
            </div>
          </div>
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
  &lt;div class="span9"&gt;
    {{_i}}Level 1 column{{/i}}
    &lt;div class="row"&gt;
      &lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
      &lt;div class="span3"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
        </section>




        <!-- Layouts (Default and fluid)
        ================================================== -->
        <section id="layouts">
          <div class="page-header">
            <h1>{{_i}}Layouts{{/i}}</h1>
          </div>

          <h2>{{_i}}Fixed layout{{/i}}</h2>
          <p>{{_i}}Provides a common fixed-width (and optionally responsive) layout with only <code>&lt;div class="container"&gt;</code> required.{{/i}}</p>
          <div class="mini-layout">
            <div class="mini-layout-body"></div>
          </div>
<pre class="prettyprint linenums">
&lt;body&gt;
  &lt;div class="container"&gt;
    ...
  &lt;/div&gt;
&lt;/body&gt;
</pre>

          <h2>{{_i}}Fluid layout{{/i}}</h2>
          <p>{{_i}}Create a fluid, two-column page with <code>&lt;div class="container-fluid"&gt;</code>&mdash;great for applications and docs.{{/i}}</p>
          <div class="mini-layout fluid">
            <div class="mini-layout-sidebar"></div>
            <div class="mini-layout-body"></div>
          </div>
<pre class="prettyprint linenums">
&lt;div class="container-fluid"&gt;
  &lt;div class="row"&gt;
    &lt;div class="span2"&gt;
      &lt;!--{{_i}}Sidebar content{{/i}}--&gt;
    &lt;/div&gt;
    &lt;div class="span10"&gt;
      &lt;!--{{_i}}Body content{{/i}}--&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
        </section>




        <!-- Responsive design
        ================================================== -->
        <section id="responsive">
          <div class="page-header">
            <h1>{{_i}}Responsive design{{/i}}</h1>
          </div>

          {{! Enabling }}
          <h2>{{_i}}Enabling responsive features{{/i}}</h2>
          <p>{{_i}}Responsive CSS requires the following meta tag in the <code>&lt;head&gt;</code> of your pages.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
</pre>

          {{! About }}
          <h2>{{_i}}About responsive Bootstrap{{/i}}</h2>
          <img src="assets/img/responsive-illustrations.png" alt="Responsive devices" style="float: right; margin: 0 0 20px 20px;">
          <p>{{_i}}Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.{{/i}}</p>
          <ul>
            <li>{{_i}}Modify the width of column in our grid{{/i}}</li>
            <li>{{_i}}Stack elements instead of float wherever necessary{{/i}}</li>
            <li>{{_i}}Resize headings and text to be more appropriate for devices{{/i}}</li>
          </ul>
          <p>{{_i}}Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.{{/i}}</p>

          {{! Supported }}
          <h2>{{_i}}Supported devices{{/i}}</h2>
          <p>{{_i}}Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}</p>
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>{{_i}}Label{{/i}}</th>
                <th>{{_i}}Layout width{{/i}}</th>
                <th>{{_i}}Column width{{/i}}</th>
                <th>{{_i}}Gutter width{{/i}}</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{_i}}Large display{{/i}}</td>
                <td>1200px and up</td>
                <td>70px</td>
                <td>30px</td>
              </tr>
              <tr>
                <td>{{_i}}Default{{/i}}</td>
                <td>980px and up</td>
                <td>60px</td>
                <td>20px</td>
              </tr>
              <tr>
                <td>{{_i}}Portrait tablets{{/i}}</td>
                <td>768px and above</td>
                <td>42px</td>
                <td>20px</td>
              </tr>
              <tr>
                <td>{{_i}}Phones to tablets{{/i}}</td>
                <td>767px and below</td>
                <td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
              </tr>
              <tr>
                <td>{{_i}}Phones{{/i}}</td>
                <td>480px and below</td>
                <td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
              </tr>
            </tbody>
          </table>
<pre class="prettyprint linenums">
/* {{_i}}Large desktop{{/i}} */
@media (min-width: 1200px) { ... }

/* {{_i}}Portrait tablet to landscape and desktop{{/i}} */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* {{_i}}Landscape phone to portrait tablet{{/i}} */
@media (max-width: 767px) { ... }

/* {{_i}}Landscape phones and down{{/i}} */
@media (max-width: 480px) { ... }
</pre>


          {{! Responsive utility classes }}
          <h2>{{_i}}Responsive utility classes{{/i}}</h2>
          <p>{{_i}}For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in <code>responsive.less</code>.{{/i}}</p>
          <table class="table table-bordered table-striped responsive-utilities">
            <thead>
              <tr>
                <th>{{_i}}Class{{/i}}</th>
                <th>{{_i}}Phones <small>767px and below</small>{{/i}}</th>
                <th>{{_i}}Tablets <small>979px to 768px</small>{{/i}}</th>
                <th>{{_i}}Desktops <small>Default</small>{{/i}}</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th><code>.visible-phone</code></th>
                <td class="is-visible">{{_i}}Visible{{/i}}</td>
                <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
                <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
              </tr>
              <tr>
                <th><code>.visible-tablet</code></th>
                <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
                <td class="is-visible">{{_i}}Visible{{/i}}</td>
                <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
              </tr>
              <tr>
                <th><code>.visible-desktop</code></th>
                <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
                <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
                <td class="is-visible">{{_i}}Visible{{/i}}</td>
              </tr>
              <tr>
                <th><code>.hidden-phone</code></th>
                <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
                <td class="is-visible">{{_i}}Visible{{/i}}</td>
                <td class="is-visible">{{_i}}Visible{{/i}}</td>
              </tr>
              <tr>
                <th><code>.hidden-tablet</code></th>
                <td class="is-visible">{{_i}}Visible{{/i}}</td>
                <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
                <td class="is-visible">{{_i}}Visible{{/i}}</td>
              </tr>
              <tr>
                <th><code>.hidden-desktop</code></th>
                <td class="is-visible">{{_i}}Visible{{/i}}</td>
                <td class="is-visible">{{_i}}Visible{{/i}}</td>
                <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
              </tr>
            </tbody>
          </table>

          <h3>{{_i}}When to use{{/i}}</h3>
          <p>{{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.{{/i}}</p>

          <h3>{{_i}}Responsive utilities test case{{/i}}</h3>
          <p>{{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}</p>
          <h4>{{_i}}Visible on...{{/i}}</h4>
          <p>{{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}</p>
          <ul class="responsive-utilities-test">
            <li>{{_i}}Phone{{/i}}<span class="visible-phone">&#10004; {{_i}}Phone{{/i}}</span></li>
            <li>{{_i}}Tablet{{/i}}<span class="visible-tablet">&#10004; {{_i}}Tablet{{/i}}</span></li>
            <li>{{_i}}Desktop{{/i}}<span class="visible-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
          </ul>
          <h4>{{_i}}Hidden on...{{/i}}</h4>
          <p>{{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}</p>
          <ul class="responsive-utilities-test hidden-on">
            <li>{{_i}}Phone{{/i}}<span class="hidden-phone">&#10004; {{_i}}Phone{{/i}}</span></li>
            <li>{{_i}}Tablet{{/i}}<span class="hidden-tablet">&#10004; {{_i}}Tablet{{/i}}</span></li>
            <li>{{_i}}Desktop{{/i}}<span class="hidden-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
          </ul>

        </section>



      </div>{{! /span9 }}
    </div>{{! row}}

  </div>{{! /.container }}