bootstrap-bookingsync-sass 0.0.19 → 1.0.0.beta1

data/docs/content/components/modal.html

@@ -0,0 +1,108 @@
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="modal">Modal</h3>
+  </div>
+
+  <p>A rendered modal with header, body, and set of actions in the footer.</p>
+
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
+    Launch demo modal
+  </button>
+
+  <div class="modal" id="myModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="btn btn-sm btn-secondary-inverse btn-round btn-modal-close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+          <h3 class="modal-title">Modal title</h3>
+        </div>
+        <div class="modal-body">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec luctus felis. Nulla a lacus libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam mollis tortor sodales libero euismod, eget suscipit arcu mollis. Nam nibh libero, tempus eu urna convallis, tempor efficitur ex. Donec molestie nibh ac luctus imperdiet. Nulla vitae vulputate ipsum. Phasellus porta gravida odio, in iaculis quam cursus et. Ut ac vehicula erat. Nulla sapien turpis, dapibus vel pellentesque sed, suscipit sit amet nibh. Pellentesque rhoncus nibh porttitor, posuere nulla quis, auctor nunc. Pellentesque fermentum tempor justo, a interdum nulla. Nullam lacus odio, posuere ut posuere hendrerit, semper non velit.</p>
+          <p>Cras sed consequat nunc. Phasellus sed sagittis nibh. Aliquam a vulputate risus. Vestibulum molestie bibendum dolor, vel blandit ipsum malesuada et. Praesent enim nibh, finibus vel luctus id, bibendum vitae eros. Aliquam vel semper diam. Cras elementum molestie eros, ac venenatis quam. Proin fermentum ante eros, mollis vestibulum eros consequat eu. Cras quis lorem vel metus hendrerit porttitor. Nunc hendrerit vitae nunc ut pellentesque. Etiam quis urna ac lorem eleifend ornare. Donec nibh ante, bibendum id pellentesque non, dignissim ut urna. Phasellus congue ultricies ipsum, ut luctus augue pulvinar nec.</p>
+        </div>
+        <div class="modal-footer">
+          <div class="row">
+            <div class="col-xs-6">
+              <button type="button" class="btn btn-default btn-block" data-dismiss="modal">
+                Close
+              </button>
+            </div>
+            <div class="col-xs-6">
+              <button type="button" class="btn btn-primary btn-block">Save changes</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="bs-callout bs-callout-warning">
+    <h4>Caution</h4>
+    <p>
+      The close button need to replace the <code>close</code> class with <code>btn-modal-close</code>.
+    </p>
+  </div>
+
+  <div class="bs-example bs-example-modal bs-sheet" data-example-id="modal">
+    <div class="modal" tabindex="-1" role="dialog">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="btn btn-sm btn-secondary-inverse btn-round btn-modal-close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+            <h3 class="modal-title">Modal title</h3>
+          </div>
+          <div class="modal-body">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec luctus felis. Nulla a lacus libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam mollis tortor sodales libero euismod, eget suscipit arcu mollis. Nam nibh libero, tempus eu urna convallis, tempor efficitur ex. Donec molestie nibh ac luctus imperdiet. Nulla vitae vulputate ipsum. Phasellus porta gravida odio, in iaculis quam cursus et. Ut ac vehicula erat. Nulla sapien turpis, dapibus vel pellentesque sed, suscipit sit amet nibh. Pellentesque rhoncus nibh porttitor, posuere nulla quis, auctor nunc. Pellentesque fermentum tempor justo, a interdum nulla. Nullam lacus odio, posuere ut posuere hendrerit, semper non velit.</p>
+            <p>Cras sed consequat nunc. Phasellus sed sagittis nibh. Aliquam a vulputate risus. Vestibulum molestie bibendum dolor, vel blandit ipsum malesuada et. Praesent enim nibh, finibus vel luctus id, bibendum vitae eros. Aliquam vel semper diam. Cras elementum molestie eros, ac venenatis quam. Proin fermentum ante eros, mollis vestibulum eros consequat eu. Cras quis lorem vel metus hendrerit porttitor. Nunc hendrerit vitae nunc ut pellentesque. Etiam quis urna ac lorem eleifend ornare. Donec nibh ante, bibendum id pellentesque non, dignissim ut urna. Phasellus congue ultricies ipsum, ut luctus augue pulvinar nec.</p>
+          </div>
+          <div class="modal-footer">
+            <div class="row">
+              <div class="col-xs-6">
+                <button type="button" class="btn btn-default btn-block" data-dismiss="modal">
+                  Close
+                </button>
+              </div>
+              <div class="col-xs-6">
+                <button type="button" class="btn btn-primary btn-block">Save changes</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+~~~ html
+<div class="modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="btn btn-sm btn-secondary-inverse btn-round btn-modal-close"
+                data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3 class="modal-title">Modal title</h3>
+      </div>
+      <div class="modal-body">
+        <p>...</p>
+      </div>
+      <div class="modal-footer">
+        <div class="row">
+          <div class="col-xs-6">
+            <button type="button" class="btn btn-default btn-block" data-dismiss="modal">
+              Close
+            </button>
+          </div>
+          <div class="col-xs-6">
+            <button type="button" class="btn btn-primary btn-block">Save changes</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+~~~

data/docs/content/components/sheet.md

@@ -1,11 +1,9 @@
-# Sheet
-
 <div class="example">
   <div class="sheet-header">
-    <h3 id="sheet-example">Basic example</h3>
+    <h3 id="sheet">Sheet</h3>
   </div>
   <p>Highly inspired from the <code>panel</code> component, the sheet will auto scale and have a relative position to ease children positioning.</p>
-  <div class="bs-example bs-sheet" data-example-id="sheet-example">
+  <div class="bs-example bs-sheet" data-example-id="sheet">
     <div class="sheet">
       <p>Text...</p>
     </div>
@@ -19,10 +17,10 @@
 
 <div class="example">
   <div class="sheet-header">
-    <h3 id="sheet-example-with-header">Example with header</h3>
+    <h3 id="sheet-with-header">Sheet with header</h3>
   </div>
   <div class="bs-example bs-sheet-with-header"
-       data-example-id="sheet-example-with-header">
+       data-example-id="sheet-with-header">
     <div class="sheet">
       <div class="sheet-header">
         <h2>Header</h2>
@@ -42,9 +40,9 @@
 
 <div class="example">
   <div class="sheet-header">
-    <h3 id="sheet-example-with-tabs">Example with tabs</h3>
+    <h3 id="sheet-with-tabs">Sheet with tabs</h3>
   </div>
-  <div class="bs-example bs-sheet" data-example-id="sheet-example-with-tabs">
+  <div class="bs-example bs-sheet" data-example-id="sheet-with-tabs">
     <div class="sheet">
       <ul class="nav nav-tabs">
         <li class="active"><a href="#">Tab 1</a></li>
@@ -72,10 +70,10 @@
 
 <div class="example">
   <div class="sheet-header">
-    <h3 id="sheet-example-with-stacked-tabs">Example with stacked tabs</h3>
+    <h3 id="sheet-with-stacked-tabs">Sheet with stacked tabs</h3>
   </div>
   <div class="bs-example bs-sheet"
-       data-example-id="sheet-example-with-stacked-tabs">
+       data-example-id="sheet-with-stacked-tabs">
     <div class="sheet">
       <ul class="nav nav-tabs">
         <li><a href="#">Tab 1</a></li>
@@ -121,8 +119,8 @@
 
 <div class="example">
   <div class="sheet-header">
-    <h3 id="sheet-example-with-auto-stackable-tabs">
-      Example with auto-stackable tabs
+    <h3 id="sheet-with-auto-stackable-tabs">
+      Sheet with auto-stackable tabs
     </h3>
   </div>
 
@@ -134,7 +132,7 @@
   </div>
 
   <div class="bs-example bs-sheet"
-       data-example-id="sheet-example-with-auto-stackable-tabs">
+       data-example-id="sheet-with-auto-stackable-tabs">
     <div class="sheet">
       <ul class="nav nav-tabs" data-toggle="stackable"
           data-target=".stackable-dropdown">
@@ -238,50 +236,3 @@
   </div>
 </div>
 ~~~
-
-<div class="example">
-  <div class="sheet-header">
-    <h3 id="sheet-example-with-nested-tabs">Example with nested tabs</h3>
-  </div>
-  <div class="bs-example bs-sheet"
-       data-example-id="sheet-example-with-nested-tab">
-    <div class="sheet">
-      <ul class="nav nav-tabs">
-        <li class="active"><a href="#">Tab 1</a></li>
-        <li><a href="#">Tab 2</a></li>
-        <li><a href="#">Tab 3</a></li>
-      </ul>
-      <div>
-        <p>Text...</p>
-        <ul class="nav nav-tabs">
-          <li class="active"><a href="#">Tab 1</a></li>
-          <li><a href="#">Tab 2</a></li>
-          <li><a href="#">Tab 3</a></li>
-        </ul>
-        <div>
-          <p>Text...</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-~~~ html
-<div class="sheet">
-  <ul class="nav nav-tabs">
-    <li class="active"><a href="#">Tab 1</a></li>
-    <li><a href="#">Tab 2</a></li>
-    <li><a href="#">Tab 3</a></li>
-  </ul>
-  <div>
-    <p>Text...</p>
-    <ul class="nav nav-tabs">
-      <li class="active"><a href="#">Tab 1</a></li>
-      <li><a href="#">Tab 2</a></li>
-      <li><a href="#">Tab 3</a></li>
-    </ul>
-    <div>
-      <p>Text...</p>
-    </div>
-  </div>
-</div>
-~~~

data/docs/content/components/switch.md

@@ -1,29 +1,28 @@
-# Switch
-
-Turns checkboxes and radio buttons in toggle switches
-
-<div class="bs-callout bs-callout-danger">
-  <h4>Plugin dependency</h4>
-  <p>
-    This component requires customized bootstrapSwitch JS plugin provided by the
-    bootstrap-bookingsync-sass gem.
-  </p>
-</div>
-
-<div class="bs-callout bs-callout-danger">
-  <h4>Sizes</h4>
-  <p>
-    BootstrapSwitch plugin provides various size variants. The only variant
-    currently supported by bootstrap-bookingsync-sass is the
-    <code>switch-small</code>.
-  </p>
-</div>
-
 <div class="example">
   <div class="sheet-header">
-    <h3 id="switch-example">Basic example</h3>
+    <h3 id="switch">Switch</h3>
   </div>
-  <div class="bs-example bs-sheet" data-example-id="switch-example">
+
+  Turns checkboxes and radio buttons in toggle switches
+
+  <div class="bs-callout bs-callout-danger">
+    <h4>Plugin dependency</h4>
+    <p>
+      This component requires customized bootstrapSwitch JS plugin provided by  the
+      bootstrap-bookingsync-sass gem.
+    </p>
+  </div>
+  
+  <div class="bs-callout bs-callout-danger">
+    <h4>Sizes</h4>
+    <p>
+      BootstrapSwitch plugin provides various size variants. The only variant
+      currently supported by <code>bootstrap-bookingsync-sass</code> is the
+      <code>switch-small</code>.
+    </p>
+  </div>
+
+  <div class="bs-example bs-sheet" data-example-id="switch">
     <div class="make-switch switch-small">
       <input type="checkbox" checked>
     </div>
@@ -37,9 +36,27 @@ Turns checkboxes and radio buttons in toggle switches
 
 <div class="example">
   <div class="sheet-header">
-    <h3 id="switch-example-disabled">Disabled state</h3>
+    <h3 id="disabled-switch">Disabled Switch</h3>
   </div>
-  <div class="bs-example bs-sheet" data-example-id="switch-example-disabled">
+
+  <div class="bs-callout bs-callout-danger">
+    <h4>Plugin dependency</h4>
+    <p>
+      This component requires customized bootstrapSwitch JS plugin provided by  the
+      bootstrap-bookingsync-sass gem.
+    </p>
+  </div>
+  
+  <div class="bs-callout bs-callout-danger">
+    <h4>Sizes</h4>
+    <p>
+      BootstrapSwitch plugin provides various size variants. The only variant
+      currently supported by <code>bootstrap-bookingsync-sass</code> is the
+      <code>switch-small</code>.
+    </p>
+  </div>
+
+  <div class="bs-example bs-sheet" data-example-id="disabled-switch">
     <div class="make-switch switch-small">
       <input type="checkbox" checked disabled>
     </div>

data/docs/content/compositions.html

@@ -0,0 +1,6 @@
+---
+section_name: "Compositions"
+---
+<div class="reference-body">
+  <%= items['/compositions/compositions.*'].compiled_content %>
+</div>

data/docs/content/compositions/_navbar.html

@@ -0,0 +1,12 @@
+<ul class="list-group list-unstyled">
+  <li><%= link_to("Section", "#section",
+                  class: "list-group-item") %></li>
+  <li><%= link_to("Nested section", "#nested-section",
+                  class: "list-group-item") %></li>
+  <li><%= link_to("Annotated section", "#annotated-section",
+                  class: "list-group-item") %></li>
+  <li><%= link_to("Tabulated content", "#tabulated-content",
+                  class: "list-group-item") %></li>
+  <li><%= link_to("Fullscreen modal", "#fullscreen-modal",
+                  class: "list-group-item") %></li>
+</ul>

data/docs/content/compositions/compositions.md

@@ -0,0 +1,348 @@
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="section">Section</h3>
+  </div>
+
+  <div class="bs-example bs-sheet bs-example-composition-body" data-example-id="section">
+    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle navbar-toggle-context"
+                  data-toggle="collapse" data-target=".navbar-top-collapse">
+            <span class="sr-only">Toggle Navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <div class="navbar-brand-container">
+            <span class="navbar-brand">
+              <h1><i class="icon-rental"></i> Rentals</h1>
+            </span>
+          </div>
+        </div>
+        <div class="collapse navbar-collapse navbar-top-collapse">
+          <div class="navbar-right">
+            <button class="btn btn-secondary navbar-btn" type="button">Button</button>
+            <button class="btn btn-primary navbar-btn" type="button">Call to action</button>
+          </div>
+        </div>
+      </div>
+    </nav>
+    <section class="main-content">
+      <div class="sheet">
+        <p>Body</p>
+      </div>
+    </section>
+  </div>
+</div>
+~~~ html
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle navbar-toggle-context"
+              data-toggle="collapse" data-target=".navbar-top-collapse">
+        <span class="sr-only">Toggle Navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <div class="navbar-brand-container">
+        <span class="navbar-brand">
+          <h1><i class="icon-rental"></i> Rentals</h1>
+        </span>
+      </div>
+    </div>
+    <div class="collapse navbar-collapse navbar-top-collapse">
+      <div class="navbar-right">
+        <button class="btn btn-secondary navbar-btn" type="button">Button</button>
+        <button class="btn btn-primary navbar-btn" type="button">Call to action</button>
+      </div>
+    </div>
+  </div>
+</nav>
+<section class="main-content">
+  <div class="sheet">
+    <p>Body</p>
+  </div>
+</section>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="nested-section">Nested Section</h3>
+  </div>
+
+  <div class="bs-example bs-sheet bs-example-composition-body" data-example-id="nested-section">
+    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle navbar-toggle-context"
+                  data-toggle="collapse" data-target=".navbar-top-collapse">
+            <span class="sr-only">Toggle Navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <div class="navbar-brand-container">
+            <span class="navbar-brand">
+              <h1>
+                <span class="navbar-breadcrumb">
+                  <i class="icon-calendar"></i>  <a href="#">Bookings</a>
+                  /
+                </span>
+                Planning
+              </h1>
+            </span>
+          </div>
+        </div>
+        <div class="collapse navbar-collapse navbar-top-collapse">
+          <div class="navbar-right">
+            <button class="btn btn-secondary navbar-btn" type="button">Button</button>
+            <button class="btn btn-primary navbar-btn" type="button">Call to action</button>
+          </div>
+        </div>
+      </div>
+    </nav>
+    <section class="main-content">
+      <div class="sheet">
+        <p>Body</p>
+      </div>
+    </section>
+  </div>
+</div>
+~~~ html
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle navbar-toggle-context"
+              data-toggle="collapse" data-target=".navbar-top-collapse">
+        <span class="sr-only">Toggle Navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <div class="navbar-brand-container">
+        <span class="navbar-brand">
+          <h1>
+            <span class="navbar-breadcrumb">
+              <i class="icon-calendar"></i>  <a href="#">Bookings</a>
+              /
+            </span>
+            Planning
+          </h1>
+        </span>
+      </div>
+    </div>
+    <div class="collapse navbar-collapse navbar-top-collapse">
+      <div class="navbar-right">
+        <button class="btn btn-secondary navbar-btn" type="button">Button</button>
+        <button class="btn btn-primary navbar-btn" type="button">Call to action</button>
+      </div>
+    </div>
+  </div>
+</nav>
+<section class="main-content">
+  <div class="sheet">
+    <p>Body</p>
+  </div>
+</section>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="annotated-section">Annotated Section</h3>
+  </div>
+
+  <div class="bs-example bs-sheet bs-example-composition-body" data-example-id="section-with-help">
+    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle navbar-toggle-context"
+                  data-toggle="collapse" data-target=".navbar-top-collapse">
+            <span class="sr-only">Toggle Navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <div class="navbar-brand-container">
+            <span class="navbar-brand">
+              <h1><i class="icon-reviews"></i> Section Name</h1>
+            </span>
+          </div>
+        </div>
+        <div class="collapse navbar-collapse navbar-top-collapse">
+          <div class="navbar-right">
+            <button class="btn btn-secondary navbar-btn" type="button">Button</button>
+            <button class="btn btn-primary navbar-btn" type="button">Call to action</button>
+          </div>
+        </div>
+      </div>
+    </nav>
+    <section class="main-content">
+      <section class="annotated-section">
+        <header class="annotated-section-annotation">
+          <h2 class="annotated-section-title">Section Name</h2>
+          <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+          <p><a href="#">More Information</a></p>
+        </header>
+        <div class="annotated-section-content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit et tellus eget elementum. Praesent in cursus massa, nec laoreet elit. Nullam eleifend consectetur ligula et dictum. Praesent dignissim sodales nulla laoreet vehicula. Quisque at convallis lacus, at ornare lectus. Cras dapibus placerat sem, iaculis tincidunt ligula sodales non. Suspendisse dolor augue, ultricies condimentum pharetra sed, suscipit sit amet magna. In quis convallis sem. Sed cursus placerat tellus vitae tincidunt. Fusce molestie nisi et nisl pulvinar pulvinar. Nam id mauris lectus. Vivamus nisl neque, tempor nec efficitur quis, tincidunt quis justo. Curabitur pharetra auctor augue a consectetur. Integer lorem elit, fermentum non nulla quis, lobortis tincidunt ex.</p>
+          <p>Aenean consectetur in metus sit amet suscipit. Phasellus faucibus ornare tortor sit amet vestibulum. Nulla felis nisl, vestibulum vitae interdum vel, venenatis vitae lacus. Nullam tempus ante ut nibh pharetra, in consequat justo iaculis. Curabitur viverra, orci eu hendrerit malesuada, sapien ex varius sapien, id laoreet diam magna et mi. Fusce finibus justo quis egestas fermentum. Aliquam rhoncus orci libero, ut faucibus felis egestas et. Proin vitae eros lacus. Nulla facilisi. Maecenas ut lacinia justo. Nulla at erat non orci gravida convallis. Aliquam congue leo odio, eu sagittis mauris hendrerit sed. Duis eros augue, viverra ac justo ut, pulvinar venenatis urna. Cras auctor fermentum massa, mattis fringilla neque vehicula et. Ut vitae est a velit accumsan tempus. Duis vel congue risus.</p>
+        </div>
+      </section>
+    </section>
+    <section class="main-content">
+      <section class="annotated-section">
+        <header class="annotated-section-annotation">
+          <h2 class="annotated-section-title">Section Name</h2>
+          <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+          <p><a href="#">More Information</a></p>
+        </header>
+        <div class="annotated-section-content">
+          <p>Body</p>
+        </div>
+      </section>
+    </section>
+  </div>
+</div>
+~~~ html
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+  ...
+</nav>
+<section class="main-content">
+  <section class="annotated-section">
+    <header class="annotated-section-annotation">
+      <h2 class="annotated-section-title">Section Name</h2>
+      <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+      <p><a href="#">More Information</a></p>
+    </header>
+    <div class="annotated-section-content">
+      <p>Lorem ipsum dolor sit amet,...</p>
+    </div>
+  </section>
+  <section class="annotated-section">
+    <header class="annotated-section-annotation">
+      <h2 class="annotated-section-title">Section Name</h2>
+      <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+      <p><a href="#">More Information</a></p>
+    </header>
+    <div class="annotated-section-content">
+      <p>Body</p>
+    </div>
+  </section>
+</section>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="tabulated-content">Tabulated content</h3>
+  </div>
+
+  <div class="bs-example bs-sheet bs-example-composition-body" data-example-id="tabulated-content">
+    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle navbar-toggle-context"
+                  data-toggle="collapse" data-target=".navbar-top-collapse">
+            <span class="sr-only">Toggle Navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <div class="navbar-brand-container">
+            <span class="navbar-brand">
+              <h1><i class="icon-reviews"></i> Section Name</h1>
+            </span>
+          </div>
+        </div>
+        <div class="collapse navbar-collapse navbar-top-collapse">
+          <div class="navbar-right">
+            <button class="btn btn-secondary navbar-btn" type="button">Button</button>
+            <button class="btn btn-primary navbar-btn" type="button">Call to action</button>
+          </div>
+        </div>
+      </div>
+    </nav>
+    <section class="main-content">
+      <div class="sheet">
+        <ul class="nav nav-tabs" data-toggle="stackable" data-target=".stackable-dropdown">
+          <li class="active"><a href="#">Tab 1</a></li>
+          <li><a href="#">Tab 2</a></li>
+          <li class="dropdown pull-right stackable-dropdown">
+            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+              More <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu">
+            </ul>
+          </li>
+        </ul>
+        <div>
+          <p>Text...</p>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>
+~~~ html
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+  ...
+</nav>
+<section class="main-content">
+  <div class="sheet">
+    <ul class="nav nav-tabs" data-toggle="stackable" data-target=".stackable-dropdown">
+      <li class="active"><a href="#">Tab 1</a></li>
+      <li><a href="#">Tab 2</a></li>
+      <li class="dropdown pull-right stackable-dropdown">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+          More <span class="caret"></span>
+        </a>
+        <ul class="dropdown-menu">
+        </ul>
+      </li>
+    </ul>
+    <div>
+      <p>Text...</p>
+    </div>
+  </div>
+</section>
+~~~
+
+<div class="example">
+  <div class="sheet-header">
+    <h3 id="fullscreen-modal">Fullscreen modal</h3>
+  </div>
+
+  <div class="bs-example bs-sheet bs-example-composition-body" data-example-id="fullscreen-modal">
+    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <div class="navbar-brand-container">
+            <span class="navbar-brand">
+              <h1><i class="icon-reviews"></i> Section Name</h1>
+            </span>
+          </div>
+        </div>
+        <div class="navbar-right">
+          <button class="btn btn-sm btn-secondary-inverse btn-round navbar-btn" type="button">
+            <span>&times;</span>
+          </button>
+        </div>
+      </div>
+    </nav>
+    <section class="main-content">
+      <div class="sheet sheet-fullscreen">
+        <p>Text...</p>
+      </div>
+    </section>
+  </div>
+</div>
+~~~ html
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+  ...
+</nav>
+<section class="main-content">
+  <div class="sheet sheet-fullscreen">
+    <p>Text...</p>
+  </div>
+</section>
+~~~