bootstrap-bookingsync-sass 0.0.19 → 1.0.0.beta1

data/docs/content/assets/stylesheets/_code.scss

@@ -7,6 +7,12 @@
   border-radius: 3px 3px 0 0;
   padding: 15px;
   margin-top: 15px;
+
+  .menu {
+    position: relative;
+    height: auto;
+    z-index: 1;
+  }
 }
 
 pre {

data/docs/content/assets/stylesheets/_icons.scss

@@ -0,0 +1,54 @@
+@import "variables";
+
+@font-face {
+  font-family: 'styleguide-icon';
+  src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="styleguide-icon-"], [class*=" styleguide-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'styleguide-icon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.styleguide-icon-ember {
+  &:before {
+    content: $styleguide-icon-ember;
+  }
+}
+.styleguide-icon-forms {
+  &:before {
+    content: $styleguide-icon-forms;
+  }
+}
+.styleguide-icon-utilities {
+  &:before {
+    content: $styleguide-icon-utilities;
+  }
+}
+.styleguide-icon-compositions {
+  &:before {
+    content: $styleguide-icon-compositions;
+  }
+}
+.styleguide-icon-buttons {
+  &:before {
+    content: $styleguide-icon-buttons;
+  }
+}
+.styleguide-icon-components {
+  &:before {
+    content: $styleguide-icon-components;
+  }
+}

data/docs/content/assets/stylesheets/_override.scss

@@ -0,0 +1,67 @@
+.bs-example {
+  .navbar-fixed-top {
+    position: inherit;
+  }
+
+  #content {
+    min-height: inherit;
+
+    &.with-navbar {
+      padding-top: 0;
+    }
+  }
+
+  &.bs-example-composition-body {
+    background-color: $body-bg;
+    border: 1px solid $gray-lightest;
+  }
+}
+
+.bs-example-colors {
+  .row {
+    margin-top: 30px;
+    margin-bottom: 30px;
+  }
+}
+
+.bs-example-modal {
+  .modal {
+    position: relative;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    z-index: 1;
+    display: block;
+  }
+}
+
+.bs-example-icons {
+  li {
+    width: 49%;
+    padding: 20px;
+    text-align: center;
+    display: inline-block;
+
+    @media (min-width: $screen-sm-min) {
+      width: 19%;
+    }
+  }
+
+  i {
+    font-size: 3em;
+    margin-bottom: 10px;
+    display: block;
+    color: $gray-light;
+  }
+}
+
+.bs-example-iframe-container-desktop {
+  width: 100%;
+  height: 500px;
+}
+
+.bs-example-iframe {
+  width: 100%;
+  height: 100%;
+}

data/docs/content/assets/stylesheets/_variables.scss

@@ -12,3 +12,10 @@ $list-group-link-hover-color:   darken($brand-primary, 10%);
 
 
 $pre-bg:                        #f4f4f4;
+
+$styleguide-icon-ember:         "\e100";
+$styleguide-icon-forms:         "\e101";
+$styleguide-icon-utilities:     "\e102";
+$styleguide-icon-compositions:  "\e103";
+$styleguide-icon-buttons:       "\e104";
+$styleguide-icon-components:    "\e105";

data/docs/content/assets/stylesheets/application.scss

@@ -1,6 +1,5 @@
 @import "chosen";
 
-@import "bootstrap-bookingsync-sprockets";
 @import "bootstrap-bookingsync";
 
 @import "variables";
@@ -9,3 +8,5 @@
 @import "callout";
 @import "code";
 @import "panels";
+@import "override";
+@import "icons";

data/docs/content/brand.html

@@ -0,0 +1,9 @@
+---
+section_name: "Brand"
+---
+<div class="reference-body">
+  <%= items['/brand/colors.*'].compiled_content %>
+  <%= items['/brand/smiles.*'].compiled_content %>
+  <%= items['/brand/iconography.*'].compiled_content %>
+  <%= items['/brand/typography.*'].compiled_content %>
+</div>

data/docs/content/brand/_navbar.html

@@ -0,0 +1,17 @@
+<ul class="list-group list-unstyled">
+  <li><%= link_to("Colors", "#colors", class: "list-group-item") %></li>
+  <li><%= link_to("Smiles", "#smiles", class: "list-group-item") %></li>
+  <li><%= link_to("Iconography", "#iconography", class: "list-group-item") %></li>
+  <li><%= link_to("Headings", "#headings", class: "list-group-item") %></li>
+  <li><%= link_to("Customizing headings", "#customizing-headings", class: "list-group-item") %></li>
+  <li><%= link_to("Lead", "#lead", class: "list-group-item") %></li>
+  <li><%= link_to("Blockquotes", "#blockquotes", class: "list-group-item") %></li>
+  <li><%= link_to("Blockquotes with source", "#blockquotes-with-source",
+    class: "list-group-item") %></li>
+  <li><%= link_to("Unordered list", "#unordered-list", class: "list-group-item") %></li>
+  <li><%= link_to("Ordered list", "#ordered-list", class: "list-group-item") %></li>
+  <li><%= link_to("List unstyled", "#list-unstyled", class: "list-group-item") %></li>
+  <li><%= link_to("Description", "#description", class: "list-group-item") %></li>
+  <li><%= link_to("Horizontal description", "#horizontal-description",
+    class: "list-group-item") %></li>
+</ul>

data/docs/content/brand/colors.md

@@ -0,0 +1,101 @@
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="colors">Colors</h3>
+  </div>
+  <div class="bs-example bs-sheet bs-example-colors" data-example-id="colors">
+    <div class="row">
+      <div class="text-center col-sm-4">
+        <div class="color color-primary color-lightblue"></div>
+        <h4>Light Blue</h4>
+        <p>
+          <code>#129ad6</code><br>
+          <code>$bs-lightblue</code>
+        </p>
+      </div>
+      <div class="text-center col-sm-4">
+        <div class="color color-primary color-darkblue"></div>
+        <h4>Dark Blue</h4>
+        <p>
+          <code>#1f3263</code><br>
+          <code>$bs-darkblue</code>
+        </p>
+      </div>
+      <div class="text-center col-sm-4">
+        <div class="color color-primary color-darkgray"></div>
+        <h4>Dark Gray</h4>
+        <p>
+          <code>#4d4d59</code><br>
+          <code>$bs-darkgray</code>
+        </p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="text-center col-sm-3">
+        <div class="color color-green"></div>
+        <h4>Green</h4>
+        <p>
+          <code>#3db559</code><br>
+          <code>$bs-green</code>
+        </p>
+      </div>
+      <div class="text-center col-sm-3">
+        <div class="color color-yellow"></div>
+        <h4>Yellow</h4>
+        <p>
+          <code>#f7c332</code><br>
+          <code>$bs-yellow</code>
+        </p>
+      </div>
+      <div class="text-center col-sm-3">
+        <div class="color color-red"></div>
+        <h4>Red</h4>
+        <p>
+          <code>#e74c3c</code><br>
+          <code>$bs-red</code>
+        </p>
+      </div>
+      <div class="text-center col-sm-3">
+        <div class="color color-headings"></div>
+        <h4>Headings</h4>
+        <p>
+          <code>#292c33</code><br>
+          <code>$headings-color</code>
+        </p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="text-center col-sm-3">
+        <div class="color color-gray-dark"></div>
+        <h4>Gray Dark</h4>
+        <p>
+          <code>#57668b</code><br>
+          <code>$gray-dark</code>
+        </p>
+      </div>
+      <div class="text-center col-sm-3">
+        <div class="color color-gray-light"></div>
+        <h4>Gray Light</h4>
+        <p>
+          <code>#8f98b2</code><br>
+          <code>$gray-light</code>
+        </p>
+      </div>
+      <div class="text-center col-sm-3">
+        <div class="color color-gray-lighter"></div>
+        <h4>Gray Lighter</h4>
+        <p>
+          <code>#c7ccd8</code><br>
+          <code>$gray-lighter</code>
+        </p>
+      </div>
+      <div class="text-center col-sm-3">
+        <div class="color color-gray-lightest"></div>
+        <h4>Gray Lightest</h4>
+        <p>
+          <code>#dde0e8</code><br>
+          <code>$gray-lightest</code>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

data/docs/content/brand/iconography.md

@@ -0,0 +1,87 @@
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="iconography">Iconography</h3>
+  </div>
+  <div class="bs-example bs-sheet bs-example-icons" data-example-id="iconography">
+    <ul class="list-unstyled">
+      <li><i class="icon-invoice"></i> invoice</li>
+      <li><i class="icon-rental"></i> rental</li>
+      <li><i class="icon-photo"></i> photo</li>
+      <li><i class="icon-video"></i> video</li>
+      <li><i class="icon-description"></i> description</li>
+      <li><i class="icon-contract"></i> contract</li>
+      <li><i class="icon-reservation"></i> reservation</li>
+      <li><i class="icon-rates"></i> rates</li>
+      <li><i class="icon-payments"></i> payments</li>
+      <li><i class="icon-help"></i> help</li>
+      <li><i class="icon-map"></i> map</li>
+      <li><i class="icon-calendar"></i> calendar</li>
+      <li><i class="icon-inbox"></i> inbox</li>
+      <li><i class="icon-clients"></i> clients</li>
+      <li><i class="icon-owner"></i> owner</li>
+      <li><i class="icon-search"></i> search</li>
+      <li><i class="icon-checkin"></i> checkin</li>
+      <li><i class="icon-settings"></i> settings</li>
+      <li><i class="icon-maintenance"></i> maintenance</li>
+      <li><i class="icon-reports"></i> reports</li>
+      <li><i class="icon-cleaning"></i> cleaning</li>
+      <li><i class="icon-notifications"></i> notifications</li>
+      <li><i class="icon-instant"></i> instant</li>
+      <li><i class="icon-applications"></i> applications</li>
+      <li><i class="icon-website"></i> website</li>
+      <li><i class="icon-reviews"></i> reviews</li>
+      <li><i class="icon-widget"></i> widget</li>
+    </ul>
+  </div>
+</div>
+~~~ html
+<ul class="list-unstyled">
+  <li><i class="icon-invoice"></i> invoice</li>
+  <li><i class="icon-rental"></i> rental</li>
+  <li><i class="icon-photo"></i> photo</li>
+  <li><i class="icon-video"></i> video</li>
+  <li><i class="icon-description"></i> description</li>
+  <li><i class="icon-contract"></i> contract</li>
+  <li><i class="icon-reservation"></i> reservation</li>
+  <li><i class="icon-rates"></i> rates</li>
+  <li><i class="icon-payments"></i> payments</li>
+  <li><i class="icon-help"></i> help</li>
+  <li><i class="icon-map"></i> map</li>
+  <li><i class="icon-calendar"></i> calendar</li>
+  <li><i class="icon-inbox"></i> inbox</li>
+  <li><i class="icon-clients"></i> clients</li>
+  <li><i class="icon-owner"></i> owner</li>
+  <li><i class="icon-search"></i> search</li>
+  <li><i class="icon-checkin"></i> check-in</li>
+  <li><i class="icon-settings"></i> settings</li>
+  <li><i class="icon-maintenance"></i> maintenance</li>
+  <li><i class="icon-reports"></i> reports</li>
+  <li><i class="icon-cleaning"></i> cleaning</li>
+  <li><i class="icon-notifications"></i> notifications</li>
+  <li><i class="icon-instant"></i> instant</li>
+  <li><i class="icon-applications"></i> applications</li>
+  <li><i class="icon-website"></i> website</li>
+  <li><i class="icon-reviews"></i> reviews</li>
+  <li><i class="icon-widget"></i> widget</li>
+</ul>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="icons-fixed-width-example">Fixed width icons</h3>
+  </div>
+  <div class="bs-example bs-sheet" data-example-id="icons-fixed-width-example">
+    <ul class="list-unstyled">
+      <li><i class="icon-rental icon-fw"></i> &nbsp; rental</li>
+      <li><i class="icon-clients icon-fw"></i> &nbsp; photo</li>
+      <li><i class="icon-applications icon-fw"></i> &nbsp; applications</li>
+    </ul>
+  </div>
+</div>
+~~~ html
+<ul class="list-unstyled">
+  <li><i class="icon-rental icon-fw"></i> &nbsp; rental</li>
+  <li><i class="icon-clients icon-fw"></i> &nbsp; photo</li>
+  <li><i class="icon-applications icon-fw"></i> &nbsp; applications</li>
+</ul>
+~~~

data/docs/content/brand/smiles.md

@@ -0,0 +1,51 @@
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="smiles">Smiles</h3>
+  </div>
+  <div class="bs-example bs-sheet bs-example-icons" data-example-id="smiles">
+    <ul class="list-unstyled">
+      <li><i class="bs-icon-bookingsync"></i> bookingsync</li>
+      <li><i class="bs-icon-bigboss"></i> bigboss</li>
+      <li><i class="bs-icon-boss"></i> boss</li>
+      <li><i class="bs-icon-laughing"></i> laughing</li>
+      <li><i class="bs-icon-lemonface"></i> lemonface</li>
+      <li><i class="bs-icon-sadface"></i> sadface</li>
+      <li><i class="bs-icon-tongue"></i> tongue</li>
+      <li><i class="bs-icon-winkface"></i> winkface</li>
+      <li><i class="bs-icon-winktongue"></i> winktongue</li>
+    </ul>
+  </div>
+</div>
+~~~ html
+<ul class="list-unstyled">
+  <li><i class="bs-icon-bookingsync"></i> bookingsync</li>
+  <li><i class="bs-icon-bigboss"></i> bigboss</li>
+  <li><i class="bs-icon-boss"></i> boss</li>
+  <li><i class="bs-icon-laughing"></i> laughing</li>
+  <li><i class="bs-icon-lemonface"></i> lemonface</li>
+  <li><i class="bs-icon-sadface"></i> sadface</li>
+  <li><i class="bs-icon-tongue"></i> tongue</li>
+  <li><i class="bs-icon-winkface"></i> winkface</li>
+  <li><i class="bs-icon-winktongue"></i> winktongue</li>
+</ul>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="smiles-fixed-width-example">Fixed width smiles</h3>
+  </div>
+  <div class="bs-example bs-sheet" data-example-id="smiles-fixed-width-example">
+    <ul class="list-unstyled">
+      <li><i class="bs-icon-bookingsync bs-icon-fw"></i> &nbsp; bookingsync</li>
+      <li><i class="bs-icon-bigboss bs-icon-fw"></i> &nbsp; bigboss</li>
+      <li><i class="bs-icon-winktongue bs-icon-fw"></i> &nbsp; winktongue</li>
+    </ul>
+  </div>
+</div>
+~~~ html
+<ul class="list-unstyled">
+  <li><i class="bs-icon-bookingsync bs-icon-fw"></i> &nbsp; bookingsync</li>
+  <li><i class="bs-icon-bigboss bs-icon-fw"></i> &nbsp; bigboss</li>
+  <li><i class="bs-icon-winktongue bs-icon-fw"></i> &nbsp; winktongue</li>
+</ul>
+~~~

data/docs/content/brand/typography.md

@@ -0,0 +1,301 @@
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="headings">Headings</h3>
+  </div>
+
+  <div class="bs-example bs-sheet" data-example-id="headings">
+    <h1>h1. Bootstrap heading</h1>
+    <h2>h2. Bootstrap heading</h2>
+    <h3>h3. Bootstrap heading</h3>
+    <h4>h4. Bootstrap heading</h4>
+    <h5>h5. Bootstrap heading</h5>
+    <h6>h6. Bootstrap heading</h6>
+  </div>
+</div>
+~~~ html
+<h1>h1. Bootstrap heading</h1>
+<h2>h2. Bootstrap heading</h2>
+<h3>h3. Bootstrap heading</h3>
+<h4>h4. Bootstrap heading</h4>
+<h5>h5. Bootstrap heading</h5>
+<h6>h6. Bootstrap heading</h6>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="customizing-headings">Customizing headings</h3>
+  </div>
+
+  <div class="bs-example bs-sheet" data-example-id="customizing-headings">
+    <h3>
+      Fancy display heading
+      <small class="text-muted">With faded secondary text</small>
+    </h3>
+  </div>
+</div>
+~~~ html
+<h3>
+  Fancy display heading
+  <small class="text-muted">With faded secondary text</small>
+</h3>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="lead">Lead</h3>
+  </div>
+
+  <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
+
+  <div class="bs-example bs-sheet" data-example-id="lead">
+    <p class="lead">
+      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
+    </p>
+  </div>
+</div>
+~~~ html
+<p class="lead">
+  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
+</p>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="blockquotes">Blockquotes</h3>
+  </div>
+
+  <p>For quoting blocks of content from another source within your document. Wrap <code>&lt;blockquote class="blockquote"&gt;</code> around any HTML as the quote..</p>
+
+  <div class="bs-example bs-sheet" data-example-id="blockquotes">
+    <blockquote class="blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+    </blockquote>
+  </div>
+</div>
+~~~ html
+<blockquote class="blockquote">
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+</blockquote>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="blockquotes-with-source">Blockquotes with source</h3>
+  </div>
+
+  <p>For quoting blocks of content from another source within your document. Wrap <code>&lt;blockquote class="blockquote"&gt;</code> around any HTML as the quote.</p>
+
+  <div class="bs-example bs-sheet" data-example-id="blockquotes-with-source">
+    <blockquote class="blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
+</div>
+~~~ html
+<blockquote class="blockquote">
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+</blockquote>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="unordered-list">Unordered list</h3>
+  </div>
+
+  <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
+
+  <div class="bs-example bs-sheet" data-example-id="unordered-list">
+    <ul>
+      <li>Lorem ipsum dolor sit amet</li>
+      <li>Consectetur adipiscing elit</li>
+      <li>Integer molestie lorem at massa</li>
+      <li>Facilisis in pretium nisl aliquet</li>
+      <li>Nulla volutpat aliquam velit
+        <ul>
+          <li>Phasellus iaculis neque</li>
+          <li>Purus sodales ultricies</li>
+          <li>Vestibulum laoreet porttitor sem</li>
+          <li>Ac tristique libero volutpat at</li>
+        </ul>
+      </li>
+      <li>Faucibus porta lacus fringilla vel</li>
+      <li>Aenean sit amet erat nunc</li>
+      <li>Eget porttitor lorem</li>
+    </ul>
+  </div>
+</div>
+~~~ html
+<ul>
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Consectetur adipiscing elit</li>
+  <li>Integer molestie lorem at massa</li>
+  <li>Facilisis in pretium nisl aliquet</li>
+  <li>Nulla volutpat aliquam velit
+    <ul>
+      <li>Phasellus iaculis neque</li>
+      <li>Purus sodales ultricies</li>
+      <li>Vestibulum laoreet porttitor sem</li>
+      <li>Ac tristique libero volutpat at</li>
+    </ul>
+  </li>
+  <li>Faucibus porta lacus fringilla vel</li>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ul>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="ordered-list">Ordered list</h3>
+  </div>
+
+  <p>A list of items in which the order <em>does</em> explicitly matter.</p>
+
+  <div class="bs-example bs-sheet" data-example-id="ordered-list">
+    <ol>
+      <li>Lorem ipsum dolor sit amet</li>
+      <li>Consectetur adipiscing elit</li>
+      <li>Integer molestie lorem at massa</li>
+      <li>Facilisis in pretium nisl aliquet</li>
+      <li>Nulla volutpat aliquam velit</li>
+      <li>Faucibus porta lacus fringilla vel</li>
+      <li>Aenean sit amet erat nunc</li>
+      <li>Eget porttitor lorem</li>
+    </ol>
+  </div>
+</div>
+~~~ html
+<ol>
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Consectetur adipiscing elit</li>
+  <li>Integer molestie lorem at massa</li>
+  <li>Facilisis in pretium nisl aliquet</li>
+  <li>Nulla volutpat aliquam velit</li>
+  <li>Faucibus porta lacus fringilla vel</li>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ol>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="list-unstyled">List unstyled</h3>
+  </div>
+
+  <p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
+
+  <div class="bs-example bs-sheet" data-example-id="list-unstyled">
+    <ul class="list-unstyled">
+      <li>Lorem ipsum dolor sit amet</li>
+      <li>Consectetur adipiscing elit</li>
+      <li>Integer molestie lorem at massa</li>
+      <li>Facilisis in pretium nisl aliquet</li>
+      <li>Nulla volutpat aliquam velit
+        <ul>
+          <li>Phasellus iaculis neque</li>
+          <li>Purus sodales ultricies</li>
+          <li>Vestibulum laoreet porttitor sem</li>
+          <li>Ac tristique libero volutpat at</li>
+        </ul>
+      </li>
+      <li>Faucibus porta lacus fringilla vel</li>
+      <li>Aenean sit amet erat nunc</li>
+      <li>Eget porttitor lorem</li>
+    </ul>
+  </div>
+</div>
+~~~ html
+<ul class="list-unstyled">
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Consectetur adipiscing elit</li>
+  <li>Integer molestie lorem at massa</li>
+  <li>Facilisis in pretium nisl aliquet</li>
+  <li>Nulla volutpat aliquam velit
+    <ul>
+      <li>Phasellus iaculis neque</li>
+      <li>Purus sodales ultricies</li>
+      <li>Vestibulum laoreet porttitor sem</li>
+      <li>Ac tristique libero volutpat at</li>
+    </ul>
+  </li>
+  <li>Faucibus porta lacus fringilla vel</li>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ul>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="description">Description</h3>
+  </div>
+
+  <p>A list of terms with their associated descriptions.</p>
+
+  <div class="bs-example bs-sheet"
+       data-example-id="description">
+    <dl>
+      <dt>Description lists</dt>
+      <dd>A description list is perfect for defining terms.</dd>
+      <dt>Euismod</dt>
+      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+      <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+      <dt>Malesuada porta</dt>
+      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+    </dl>
+  </div>
+</div>
+~~~ html
+<dl>
+  <dt>Description lists</dt>
+  <dd>A description list is perfect for defining terms.</dd>
+  <dt>Euismod</dt>
+  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+  <dt>Malesuada porta</dt>
+  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+</dl>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="horizontal-description">Horizontal description</h3>
+  </div>
+
+  <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side. Starts off stacked like default <code>&lt;dl&gt;</code>s, but when the navbar expands, so do these. For longer terms, you can optionally add a <code>.text-truncate</code> class to truncate the text with an ellipsis.</p>
+
+  <div class="bs-example bs-sheet"
+       data-example-id="horizontal-description">
+    <dl class="dl-horizontal">
+      <dt class="text-truncate">Description lists</dt>
+      <dd>A description list is perfect for defining terms.</dd>
+
+      <dt class="text-truncate">Euismod</dt>
+      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+      <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+
+      <dt class="text-truncate">Malesuada porta</dt>
+      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+
+      <dt class="text-truncate">Very long term can be truncated</dt>
+      <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
+    </dl>
+  </div>
+</div>
+~~~ html
+<dl class="dl-horizontal">
+  <dt class="text-truncate">Description lists</dt>
+  <dd>A description list is perfect for defining terms.</dd>
+
+  <dt class="text-truncate">Euismod</dt>
+  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+
+  <dt class="text-truncate">Malesuada porta</dt>
+  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+
+  <dt class="text-truncate">Very long term can be truncated</dt>
+  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
+</dl>
+~~~