themepile-abstractio 1.0.4 → 4.1.7

data/docs/components/progress-bars.html.erb

@@ -0,0 +1,123 @@
+
+<% @side_nav = "css" %>
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Progress Bars" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader"><p>A simple way to add a progress bars to your layouts. You only need two HTML elements to make them and they're easy to customize.</h4>
+
+        <div class="progress large-6"><span class="meter" style="width: 40%"></span></div>
+        <div class="radius progress success large-8"><span class="meter" style="width: 80%"></span></div>
+        <div class="nice round progress alert large-10"><span class="meter" style="width: 30%"></span></div>
+        <div class="nice secondary progress"><span class="meter" style="width: 50%"></span></div>
+
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to add progress bars labels in Abstractio 4: with our predefined HTML classes or with our mixins. Building progress bars using our predefined classes is simple, you'll just need to write a <code>&lt;div class="progress"&gt;</code> and inside of that a <code>&lt;span class="meter"&gt;</code>. The meter is the element that you can set a width to, either inline or programmatically on your own accord. The simplest way to do this is to change the <code>style="width:%"</code> property on the meter, itself.</p>
+
+<%= code_example '
+<div class="progress"><span class="meter"></span></div>', :html %>
+
+        <div class="progress"><span class="meter"></span></div>
+
+        <p>The class options:</p>
+        <ul class="disc">
+          <li>The color classes include: <code>.secondary, .alert</code> or <code>.success</code></li>
+          <li>The radius classes include: <code>.radius</code> or <code>.round</code>.</li>
+          <li>You may also you the grid width classes: <code>.small-#</code> or <code>.large-#</code></li>
+        </ul>
+
+<%= code_example '
+<div class="progress large-6 success round"><span class="meter" style="width: 40%"></span></div>', :html %>
+
+        <div class="progress large-6 success round"><span class="meter" style="width: 40%"></span></div>
+
+        <p>For these styles to come across, make sure you have the default Abstractio CSS package or that you've selected labels from a custom package. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Build with our Mixins</h3>
+        <p>We've included SCSS mixins used to style progress bars. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/_abstractio-global.scss">_abstractio-global.scss</a>, <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_progress-bars.scss">_progress-bars.scss</a> from Github and throw them into a Abstractio folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+
+<%= code_example '
+@import "abstractio/abstractio-global", "abstractio/components/global", "abstractio/components/progress-bars";
+', :css %>
+
+        <h5>Container Mixin</h5>
+        <p>Progress bars are made from a container and a meter. The container element holds most of the styles that come across and holds the meter, itself. You can create progress bars by creating a <code>&lt;div&gt;</code> and giving it a unique class or ID, then applying the mixin styles to it.</p>
+
+<%= code_example '
+.your-class-name { @include progress-container; }', :css %>
+
+        <div class="progress"></div>
+
+        <h5>Meter Mixin</h5>
+        <p>The next step is to include an element inside of your container that will be styled as the meter.
+
+<%= code_example '
+.your-class-name { @include progress-container;
+  & > span { @include progress-meter($bg); }
+}
+
+/* We can set the background color of the meter to a variable or any color value */
+$bg: $primary-color
+', :css %>
+
+        <div class="progress"><span class="meter"></span></div>
+
+        <h5>Adding Border Radius</h5>
+        <p>Like we mentioned on a few of the other component pages, you have access to some global mixins that can add even more style to elements like this. Here's an example of using border radius:</p>
+
+<%= code_example '
+.your-class-name {
+  @include progress-container;
+  @include radius(6px);
+  & > span {
+    @include progress-meter(pink);
+    @include radius(5px);
+  }
+}', :css %>
+
+        <div class="progress-custom"><span style="width:33%"></span></div>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use this to se the prog bar height */
+$progress-bar-height: emCalc(25px);
+
+/* We use these to control the border styles */
+$progress-bar-border-color: darken(#fff, 20%);
+$progress-bar-border-size: 1px;
+$progress-bar-border-style: solid;
+$progress-bar-border-radius: $global-radius;
+
+/* We use these to control the margin & padding */
+$progress-bar-pad: emCalc(2px);
+$progress-bar-margin-bottom: emCalc(10px);
+
+/* We use these to set the meter colors */
+$progress-bar-color: transparent;
+$progress-meter-color: $primary-color;
+$progress-meter-secondary-color: $secondary-color;
+$progress-meter-success-color: $success-color;
+$progress-meter-alert-color: $alert-color;', :css %>
+
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_abstractio-global.scss</strong>.</p>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/reveal.html.erb

@@ -0,0 +1,162 @@
+<% @side_nav = "js" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Reveal" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Modal dialogs, or pop-up windows, are handy for prototyping and production. Abstractio includes Reveal our jQuery modal plugin, to make this easy for you.</h4>
+
+        <a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>
+        <a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>
+
+        <hr>
+
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Build With HTML Classes</h3>
+        <p>Reveal modals are easy to build, just make sure they live right above your closing <code>body</code> tag or they won't work properly. Follow the markup below to get started:</p>
+
+<%= code_example '
+<div id="myModal" class="reveal-modal">
+  <h2>Awesome. I have it.</h2>
+  <p class="lead">Your couch.  It is mine.</p>
+  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
+  <a class="close-reveal-modal">&#215;</a>
+</div>', :html %>
+
+        <p>The class options:</p>
+        <ul class="disc">
+          <li><code>tiny</code>: Set the width to 30%.</li>
+          <li><code>small</code>: Set the width to 40%.</li>
+          <li><code>medium</code>: Set the width to 60%.</li>
+          <li><code>large</code>: Set the width to 70%.</li>
+          <li><code>xlarge</code>: Set the width to 95%.</li>
+        </ul>
+
+        <p>For these styles to come across, make sure you have the default Abstractio CSS package or that you've selected reveal from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+
+        <h5>Firing a Reveal Modal</h5>
+        <p>To launch a modal, just add a <code>data-reveal-id</code> to the object which you want to fire the modal when clicked. The <code>data-reveal-id</code> needs to match the <code>id</code> of your reveal.</p>
+
+    <%= code_example '
+<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>', :html %>
+
+        <p>You can also open and close Reveal via JavaScript:</p>
+
+<%= code_example "
+// trigger by event
+$('a.reveal-link').trigger('click');
+$('a.close-reveal-modal').trigger('click');
+
+// or directly on the modal
+$('#myModal').abstractio('reveal', 'open');
+$('#myModal').abstractio('reveal', 'close');
+", :js %>
+
+        <hr>
+
+        <h5>Default SCSS Variables</h5>
+
+    <%= code_example '
+/* We use these to control the style of the reveal overlay. */
+$reveal-overlay-bg:      rgba(#000, .45);
+$reveal-overlay-bg-old:  #000;
+
+/* We use these to control the style of the modal itself. */
+$reveal-modal-bg:        #fff;
+$reveal-position-top:    emCalc(15px);
+$reveal-default-width:   80%;
+$reveal-modal-padding:   emCalc(20px);
+$reveal-box-shadow:      0 0 10px rgba(#000,.4);
+
+/* We use these to style the reveal close button */
+$reveal-close-font-size: emCalc(22px);
+$reveal-close-top:       emCalc(8px);
+$reveal-close-side:      emCalc(11px);
+$reveal-close-color:     #aaa;
+$reveal-close-weight:    bold;
+
+/* We use these to control the modal border */
+$reveal-border-style:    solid;
+$reveal-border-width:    1px;
+$reveal-border-color:    #666;', :css %>
+
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_abstractio-global.scss</strong>.</p>
+
+        <hr>
+
+        <h3>Using the JavaScript</h3>
+        <p>You don't need this JS to create reveal modals with Abstractio. The only reason you'll need to include <code>abstractio.reveal.js</code> is if you want to add the ability to close an alert. You'll also need to make sure to include <code>zepto.js</code> and <code>abstractio.js</code> above the alert plugin. Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS in your directory.</p>
+
+        <p><a href="../javascript.html" title="How to install Abstractio JavaScript">Read how to install Abstractio JavaScript</a></p>
+
+        <p>Required Abstractio Library: <code>abstractio.reveal.js</code></p>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>Reveal options can only be passed in during initialization at this time. However, you can bind to the <i>open</i>, <i>opened</i>, <i>close</i>, and <i>closed</i> events.</p>
+
+    <%= code_example "
+{
+  animation: 'fadeAndPop',
+  animationSpeed: 250,
+  closeOnBackgroundClick: true,
+  dismissModalClass: 'close-reveal-modal',
+  bgClass: 'reveal-modal-bg',
+  open: function(){},
+  opened: function(){},
+  close: function(){},
+  closed: function(){},
+  bg : $('.reveal-modal-bg'),
+  css : {
+    open : {
+      'opacity': 0,
+      'visibility': 'visible',
+      'display' : 'block'
+    },
+    close : {
+      'opacity': 1,
+      'visibility': 'hidden',
+      'display': 'none'
+    }
+  }
+}", :js %>
+
+      </div>
+    </div>
+</div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>
+
+<div id="firstModal" class="reveal-modal">
+  <h2>This is a modal.</h2>
+  <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
+  <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
+  <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal…</a></p>
+  <a class="close-reveal-modal">&#215;</a>
+</div>
+
+<div id="secondModal" class="reveal-modal">
+  <h2>This is a second modal.</h2>
+  <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
+  <a class="close-reveal-modal">&#215;</a>
+</div>
+
+<div id="videoModal" class="reveal-modal large">
+  <h2>This modal has video</h2>
+  <div class="flex-video">
+    <iframe width="800" height="315" src="http://www.youtube.com/embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
+  </div>
+
+  <a class="close-reveal-modal">&#215;</a>
+</div>
+

data/docs/components/section.html.erb

@@ -0,0 +1,1023 @@
+<% @side_nav = "js" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Sections" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Sections are similar to tabs as a way to selectively show a single panel of content at a time.</h4>
+        <div class="row">
+          <div class="large-3 columns">
+            <div class="section-container vertical-nav" data-section="vertical-nav" data-options="one_up: false;">
+              <section>
+                <p class="title"><a href="#">Section 1</a></p>
+                <div class="content">
+                  <ul class="side-nav">
+                    <li><a href="#">Link 1</a></li>
+                    <li><a href="#">Link 2</a></li>
+                    <li><a href="#">Link 3</a></li>
+                    <li class="divider"></li>
+                    <li><a href="#">Link 1</a></li>
+                  </ul>
+                </div>
+              </section>
+              <section>
+                <p class="title"><a href="#">Section 2</a></p>
+                <div class="content">
+                  <ul class="side-nav">
+                    <li><a href="#">Link 1</a></li>
+                    <li><a href="#">Link 2</a></li>
+                    <li><a href="#">Link 3</a></li>
+                    <li class="divider"></li>
+                    <li><a href="#">Link 1</a></li>
+                  </ul>
+                </div>
+              </section>
+            </div>
+          </div>
+          <div class="large-9 columns">
+            <div class="section-container horizontal-nav" data-section="horizontal-nav" data-options="one_up: false;">
+              <section>
+                <p class="title"><a href="#">Section 1</a></p>
+                <div class="content">
+                  <ul class="side-nav">
+                    <li><a href="#">Link 1</a></li>
+                    <li><a href="#">Link 2</a></li>
+                    <li><a href="#">Link 3</a></li>
+                    <li class="divider"></li>
+                    <li><a href="#">Link 1</a></li>
+                  </ul>
+                </div>
+              </section>
+              <section>
+                <p class="title"><a href="#">Section 2</a></p>
+                <div class="content">
+                  <ul class="side-nav">
+                    <li><a href="#">Link 1</a></li>
+                    <li><a href="#">Link 2</a></li>
+                    <li><a href="#">Link 3</a></li>
+                    <li class="divider"></li>
+                    <li><a href="#">Link 1</a></li>
+                  </ul>
+                </div>
+              </section>
+            </div>
+            <div class="section-container auto" data-section data-options="deep_linking: true; one_up: false">
+              <section>
+                <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
+                <div class="content" data-slug="panel1" data-section-content>
+                  <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                </div>
+              </section>
+              <section>
+                <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
+                <div class="content" data-slug="panel2" data-section-content>
+                  <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                </div>
+              </section>
+              <div data-section-region class="section">
+                <p class="title" data-section-title><a href="#panel3">Section 3</a></p>
+                <div class="content" data-slug="panel3" data-section-content>
+                  <form>
+                    <div class="row collapse">
+                      <div class="large-2 columns">
+                        <label class="inline">Your Name</label>
+                      </div>
+                      <div class="large-10 columns">
+                        <input type="text" id="yourName" placeholder="Jane Smith">
+                      </div>
+                    </div>
+                    <div class="row collapse">
+                      <div class="large-2 columns">
+                        <label class="inline"> Your Email</label>
+                      </div>
+                      <div class="large-10 columns">
+                        <input type="text" id="yourEmail" placeholder="jane@smithco.com">
+                      </div>
+                    </div>
+                    <label>What's up?</label>
+                    <textarea rows="4"></textarea>
+                    <button type="submit" class="radius button">Submit</button>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <hr>
+
+        <h3>Sections Replace Accordion, Tabs, Vertical Nav &amp; Nav Bar</h3>
+        <p>Sections replace a few things that you are used to from Abstractio 3. We've taken the accordion, the tabs and the vertical nav and combined them into this really flexible plugin that can handle all of those. The single JS file handles all the interactions, but the classes you add to the element control how it gets rendered and styled across our breakpoint.</p>
+
+        <hr>
+
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build sections in Abstractio 4, with our predefined HTML classes or with our structure and mixins. Building a sections using our predefined classes is super-easy, you just need to create a <code>&lt;div class="section-container" data-section&gt;</code> as a wrapper for the sections themselves. Inside of this wrapper, you'll create either a <code>&lt;section class="section"&gt;</code> or <code>&lt;div class="section"&gt;</code>. Within that you'll include some sort of <code>.title</code> (this can be headers or a paragraph) and a <code>&lt;div class="content"&gt;</code>. Here is the markup you'll need:</p>
+
+        <p>If you want to use ZURB's default styles for section elements you can apply the <code>auto</code>, <code>tabs</code>, <code>accordion</code>, <code>vertical-nav</code>, or <code>horizontal-nav</code> classes. By default, section elements will be an accordion on mobile and tabs on desktops and tablets. If you want to adjust this behavior and force a particular format for your section, you will need to set <code>data-section</code> equal to the format you want to force as shown in the variations below.</p>
+
+<%= code_example '
+<div class="section-container auto" data-section>
+  <section>
+    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+<div class="section-container auto" data-section>
+  <section>
+    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>
+        <p>This example will automatically switch between tabs and accordion based on the resolution of the device.</p>
+
+        <p>The class options:</p>
+        <ul class="disc">
+          <li>auto</li>
+          <li>tabs</li>
+          <li>accordion</li>
+          <li>vertical-nav</li>
+          <li>horizontal-nav</li>
+        </ul>
+
+        <p>For these styles to come across, make sure you have the <strong>default Abstractio CSS package</strong> or that you've selected <strong>section from a custom package</strong>. These should be linked up following our default <a href="#getting-started">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Variations</h3>
+        <h6>Accordion</h6>
+        <p>Adding an <code>accordion</code> class to the section container will show an accordion on both small and large screens.</p>
+<%= code_example '
+<div class="section-container accordion" data-section="accordion">
+  <section>
+    <p class="title" data-section-title><a href="#">Section 1</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title" data-section-title><a href="#">Section 2</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+        <div class="section-container accordion" data-section="accordion">
+          <section>
+            <p class="title" data-section-title><a href="#">Section 1</a></p>
+            <div class="content" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title" data-section-title><a href="#">Section 2</a></p>
+            <div class="content" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
+        <h6>Tabs</h6>
+        <p>Adding a <code>tabs</code> class to the section container will enable tabs on both small and large screens.</p>
+<%= code_example '
+<div class="section-container tabs" data-section="tabs">
+  <section>
+    <p class="title" data-section-title><a href="#">Section 1</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title" data-section-title><a href="#">Section 2</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+        <div class="section-container tabs" data-section="tabs">
+          <section>
+            <p class="title" data-section-title><a href="#">Section 1</a></p>
+            <div class="content" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title" data-section-title><a href="#">Section 2</a></p>
+            <div class="content" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
+        <h6>Vertical Tabs</h6>
+        <p>Adding a <code>vertical-tabs</code> class to the section container and setting <code>data-section="vertical-tabs"</code> will enable tabs on both small and large screens.</p>
+
+<%= code_example '
+<div class="section-container vertical-tabs" data-section="vertical-tabs">
+  <section>
+    <p class="title" data-section-title><a href="#">Section 1</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title" data-section-title><a href="#">Section 2</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title" data-section-title><a href="#">Section 3</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 3.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+        <div class="section-container vertical-tabs" data-section="vertical-tabs">
+          <section>
+            <p class="title" data-section-title><a href="#">Section 1</a></p>
+            <div class="content" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title" data-section-title><a href="#">Section 2</a></p>
+            <div class="content" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title" data-section-title><a href="#">Section 3</a></p>
+            <div class="content" data-section-content>
+              <p>Content of section 3.</p>
+            </div>
+          </section>
+        </div>
+
+        <h6>Vertical Nav/Accordion</h6>
+        <p>Adding a <code>vertical-nav</code> class to the section container will enable vertical navigation elements on large screens and show an accordion on small screens.</p>
+
+        <p>Vertical navigation elements usually appear within the grid so the width can be controlled on desktop.</p>
+
+        <p>Use the <code>side-nav</code> class on the list to apply the Abstractio navigation styles</p>
+
+<%= code_example '
+<div class="row">
+  <div class="large-3 columns">
+    <div class="section-container vertical-nav" data-section="vertical-nav" data-options="one_up: false;">
+      <section>
+        <p class="title" data-section-title><a href="#">Section 1</a></p>
+        <div class="content" data-section-content>
+          <ul class="side-nav">
+            <li><a href="#">Link 1</a></li>
+            <li><a href="#">Link 2</a></li>
+            <li><a href="#">Link 3</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Link 1</a></li>
+          </ul>
+        </div>
+      </section>
+      <section>
+        <p class="title" data-section-title><a href="#">Section 2</a></p>
+        <div class="content" data-section-content>
+          <ul class="side-nav">
+            <li><a href="#">Link 1</a></li>
+            <li><a href="#">Link 2</a></li>
+            <li><a href="#">Link 3</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Link 1</a></li>
+          </ul>
+        </div>
+      </section>
+    </div>
+  </div>
+  <div class="large-9 columns">
+    <p>Content to the right of the navigation.</p>
+  </div>
+</div>', :html %>
+
+        <div class="row">
+          <div class="large-3 columns">
+            <div class="section-container vertical-nav" data-section="vertical-nav" data-options="one_up: false;">
+              <section>
+                <p class="title" data-section-title><a href="#">Section 1</a></p>
+                <div class="content" data-section-content>
+                  <ul class="side-nav">
+                    <li><a href="#">Link 1</a></li>
+                    <li><a href="#">Link 2</a></li>
+                    <li><a href="#">Link 3</a></li>
+                    <li class="divider"></li>
+                    <li><a href="#">Link 1</a></li>
+                  </ul>
+                </div>
+              </section>
+              <section>
+                <p class="title" data-section-title><a href="#">Section 2</a></p>
+                <div class="content" data-section-content>
+                  <ul class="side-nav">
+                    <li><a href="#">Link 1</a></li>
+                    <li><a href="#">Link 2</a></li>
+                    <li><a href="#">Link 3</a></li>
+                    <li class="divider"></li>
+                    <li><a href="#">Link 1</a></li>
+                  </ul>
+                </div>
+              </section>
+            </div>
+          </div>
+          <div class="large-9 columns">
+            <p>Content to the right of the navigation.</p>
+          </div>
+        </div>
+
+        <h6>Horizontal Nav/Nav Bar</h6>
+        <p>Adding a <code>horizontal-nav</code> class to the section container will enable horizontal navigation elements on large screens and show an accordion on small screens.</p>
+
+        <p>Horizontal navigation is a combination of the tab setting with vertical navigation drop downs.</p>
+
+        <p>Use the <code>side-nav</code> class on the list to apply the Abstractio navigation styles</p>
+
+<%= code_example '
+<div class="section-container horizontal-nav" data-section="horizontal-nav" data-options="one_up: false;">
+  <section>
+    <p class="title" data-section-title><a href="#">Section 1</a></p>
+    <div class="content" data-section-content>
+      <ul class="side-nav">
+        <li><a href="#">Link 1</a></li>
+        <li><a href="#">Link 2</a></li>
+        <li><a href="#">Link 3</a></li>
+        <li class="divider"></li>
+        <li><a href="#">Link 1</a></li>
+      </ul>
+    </div>
+  </section>
+  <section>
+    <p class="title" data-section-title><a href="#">Section 2</a></p>
+    <div class="content" data-section-content>
+      <ul class="side-nav">
+        <li><a href="#">Link 1</a></li>
+        <li><a href="#">Link 2</a></li>
+        <li><a href="#">Link 3</a></li>
+        <li class="divider"></li>
+        <li><a href="#">Link 1</a></li>
+      </ul>
+    </div>
+  </section>
+</div>
+', :html %>
+
+        <div class="section-container horizontal-nav" data-section="horizontal-nav" data-options="one_up: false;">
+          <section>
+            <p class="title" data-section-title><a href="#">Section 1</a></p>
+            <div class="content" data-section-content>
+              <ul class="side-nav">
+                <li><a href="#">Link 1</a></li>
+                <li><a href="#">Link 2</a></li>
+                <li><a href="#">Link 3</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Link 1</a></li>
+              </ul>
+            </div>
+          </section>
+          <section>
+            <p class="title" data-section-title><a href="#">Section 2</a></p>
+            <div class="content" data-section-content>
+              <ul class="side-nav">
+                <li><a href="#">Link 1</a></li>
+                <li><a href="#">Link 2</a></li>
+                <li><a href="#">Link 3</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Link 1</a></li>
+              </ul>
+            </div>
+          </section>
+        </div>
+
+        <h6>Deep Linking</h6>
+        <p>Set <code>deep-linking</code> to true to enable deep linking to sections of content. Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. Deep linking also requires a matching <code>data-slug</code> on the content section that the hash should point to, without the pound (&#35;) sign.</p>
+
+<%= code_example '
+<div class="section-container auto" data-section data-options="deep_linking: true">
+  <section>
+    <p class="title" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="content" data-slug="section1" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title" data-section-title><a href="#section2">Section 2</a></p>
+    <div class="content" data-slug="section2" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+        <h6>Nested Sections</h6>
+        <p>You can infinitely nest Section elements to create more complicated Section layouts.</p>
+
+        <div class="section-container auto" data-section>
+          <section>
+            <p class="title"><a href="#section1">ROOT: Section 1</a></p>
+            <div class="content" data-slug="section1">
+              <p>Content 1 Summary Paragraphs</p>
+              <div class="section-container auto" data-section>
+                <section>
+                  <p class="title"><a href="#section1-1">DETAIL: #1</a></p>
+                  <div class="content">
+                    <p>Detail awesome stuff!</p>
+                  </div>
+                </section>
+                <section>
+                  <p class="title"><a href="#section1-2">DETAIL: #2</a></p>
+                  <div class="content">
+                    <p>Detail awesome stuff numeroe duo.</p>
+                  </div>
+                </section>
+              </div>
+            </div>
+          </section>
+          <section>
+            <p class="title"><a href="#section2">ROOT: Section 2</a></p>
+            <div class="content" data-slug="section2">
+              <p>Content 2</p>
+            </div>
+          </section>
+        </div>
+<%= code_example '
+<div class="section-container auto" data-section>
+  <section>
+    <p class="title"><a href="#section1">ROOT: Section 1</a></p>
+    <div class="content" data-slug="section1">
+      <p>Content 1 Summary Paragraphs</p>
+      <div class="section-container auto" data-section>
+        <section>
+          <p class="title"><a href="#section1-1">DETAIL: #1</a></p>
+          <div class="content">
+            <p>Detail awesome stuff!</p>
+          </div>
+        </section>
+        <section>
+          <p class="title"><a href="#section1-2">DETAIL: #2</a></p>
+          <div class="content">
+            <p>Detail awesome stuff numeroe duo.</p>
+          </div>
+        </section>
+      </div>
+    </div>
+  </section>
+  <section>
+    <p class="title"><a href="#section2">ROOT: Section 2</a></p>
+    <div class="content" data-slug="section2">
+      <p>Content 2</p>
+    </div>
+  </section>
+</div>
+', :html %>
+
+        <p><strong>Note:</strong> The <code>section</code> element can be replaced with a <code>div.section</code> element if you do not want to use HTML5 elements.</p>
+
+        <hr>
+
+        <h3>Building with Mixins</h3>
+        <p>If you are keen on SCSS and use it for your Abstractio projects, you have access to mixins that will let you create any type of section you want and change it within a media query too! Building a section with our mixins requires a bit of predefined structure, but you can choose the classes or ID's to style them with. Start with some sort of block-level container, we use a <code>&lt;div&gt;</code>. This container needs to have <code>data-section="type-of-section"</code>. The section types are explained above. Inside this you create "sections", which can be an HTML5 <code>section</code> element or a <code>&lt;div class="section"&gt;</code>, that will hold content.<p>
+
+        <h5>Title and Content Elements</h5>
+        <p>Inside of these "sections" you created you'll need to add a title and content. To create the title element, use something like a <code>&lt;p&gt;</code>, <code>&lt;h5&gt;</code>, etc and give it an attribute of <code>data-section-title</code>. After this, you add <code>&lt;div data-section-content&gt;</code> and fill it with your content.</p>
+
+        <p>Here's an example structure you might use with the section mixin:</p>
+
+<%= code_example '
+<div class="your-class-name" data-section="auto"> <!-- Can use "auto", "accordion", "tabs", "vertical-nav", or "horizontal-nav" -->
+  <section class="your-section-class">
+    <p class="your-title-class" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="your-content-class" data-slug="section1" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section class="your-section-class">
+    <p class="your-title-class" data-section-title><a href="#section2">Section 2</a></p>
+    <div class="your-content-class" data-slug="section2" data-section-content>
+      <p>Content of section 2.</p>
+    </section>
+  </div>
+</div>', :html %>
+
+        <p>Here's a look at the available options for the mixins you need to create sections:</p>
+
+<%= code_example '
+@include section-container($base-style, $section-type) { ... }
+
+/* Container Options */
+
+/* This controls whether or not you include default styles when chaining classes, set to true or false */
+$base-style: true
+
+/* This controls the style for the section you are using: accordion, tabs, vertical-tabs, vertical-nav, horizontal-nav */
+$section-type: accordion
+
+@include section($section-type, $title-selector, $content-selector, $title-padding, $title-color, $title-font-size, $title-bg, $title-bg-hover, $title-bg-active, $title-color-active, $content-bg, $content-padding, $section-border-size, $section-border-style, $section-border-color) { ... }
+
+/* Section Options */
+
+/* Control which section type styles come across: accordion, tabs, vertical-tabs, vertical-nav, horizontal-nav */
+$section-type: accordion
+
+/* You can set the class that is used for the title elements */
+$title-selector: ".title"
+
+/* You can set the class that is used for the content elements */
+$content-selector: ".content"
+
+/* Give the titles some padding, can be any px or emCalc() value */
+$title-padding: $section-padding
+
+/* give the titles a color, any color value */
+$title-color: $section-title-color
+
+/* Set the font size for titles */
+$title-font-size: $section-font-size
+
+/* Set the background color for titles */
+$title-bg: $section-title-bg
+
+/* Change title background for hover */
+$title-bg-hover: $section-title-bg-hover
+
+/* Change title background for .active */
+$title-bg-active: $section-title-bg-active
+
+/* Change title color for .active */
+$title-color-active: $section-title-color
+
+/* Content area background color */
+$content-bg: $section-content-bg
+
+/* Content area padding */
+$content-padding: $section-content-padding
+
+/* Border size in pixels */
+$section-border-size: $section-border-size
+
+/* Border style */
+$section-border-style: $section-border-style
+
+/* Border color */
+$section-border-color: $section-border-color', :css %>
+
+
+        <hr>
+
+        <h5>Auto Configuration</h5>
+        <p>The default use case for our section plugin is to create accordions on small screens and tabs on large screens.</p>
+<%= code_example '
+<div class="section-auto-sample" data-section="auto">
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="content-sample" data-slug="section1" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+    <div class="content-sample" data-slug="section2" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+<%= code_example '
+.section-auto-sample {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+
+  @media #{$small} {
+    @include section-container(false,$section-type:tabs);
+    & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+}', :css %>
+
+        <div class="section-auto-sample" data-section="auto">
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+            <div class="content-sample" data-slug="section1" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+            <div class="content-sample" data-slug="section2" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
+        <hr>
+
+        <h5>Accordion Configuration</h5>
+        <p>You can have your section act like an accordion the entire time, like so:</p>
+<%= code_example '
+<div class="section-auto-sample-accordion" data-section="accordion">
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="content-sample" data-slug="section1" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+    <div class="content-sample" data-slug="section2" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+<%= code_example '
+.section-auto-sample-accordion {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}', :css %>
+
+        <div class="section-auto-sample-accordion" data-section="accordion">
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+            <div class="content-sample" data-slug="section1" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+            <div class="content-sample" data-slug="section2" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
+        <hr>
+
+        <h5>Tabs Configuration</h5>
+        <p>You can have your section act like tabs the entire time, like so:</p>
+<%= code_example '
+<div class="section-auto-sample-tabs" data-section="tabs">
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="content-sample" data-slug="section1" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+    <div class="content-sample" data-slug="section2" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+<%= code_example '
+.section-auto-sample-tabs {
+  @include section-container($section-type:tabs);
+  & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}', :css %>
+
+        <div class="section-auto-sample-tabs" data-section="tabs">
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+            <div class="content-sample" data-slug="section1" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+            <div class="content-sample" data-slug="section2" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
+        <hr>
+
+        <h5>Vertical Tabs Configuration</h5>
+        <p>You can have your section act like vertical tabs on large screen and go back to accordion on small screens, like so:</p>
+<%= code_example '
+<div class="section-auto-sample-vtabs" data-section="vertical-tabs">
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="content-sample" data-slug="section1" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+    <div class="content-sample" data-slug="section2" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+<%= code_example '
+.section-auto-sample-vtabs {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}
+@media #{$small} {
+  .section-auto-sample-vtabs {
+    @include section-container($section-type:vertical-tabs);
+    & > section { @include section($section-type:vertical-tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+}', :css %>
+
+        <div class="section-auto-sample-vtabs" data-section="vertical-tabs">
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+            <div class="content-sample" data-slug="section1" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+            <div class="content-sample" data-slug="section2" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
+        <hr>
+
+        <h5>Vertical Nav Configuration</h5>
+        <p>You can have your section act like vertical navigation the entire time, like so:</p>
+<%= code_example '
+<div class="nav-container">
+  <nav>
+    <div class="section-auto-sample-vnav" data-section="vertical-nav">
+      <section>
+        <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+        <div class="content-sample" data-slug="section1" data-section-content>
+          <p>Content of section 1.</p>
+        </div>
+      </section>
+      <section>
+        <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+        <div class="content-sample" data-slug="section2" data-section-content>
+          <p>Content of section 2.</p>
+        </div>
+      </section>
+    </div>
+  </nav>
+  <section class="page-content">
+    <p>Content...</p>
+  </section>
+</div>', :html %>
+
+<%= code_example '
+.nav-container { @include grid-row($behavior:nest);
+  > nav { @include grid-column($columns:4); }
+}
+
+.section-auto-sample-vnav {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}
+@media #{$small} {
+  .section-auto-sample-vnav {
+    @include section-container($section-type:vertical-nav);
+    & > section { @include section($section-type:vertical-nav, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+}', :css %>
+
+        <div class="nav-container">
+          <nav>
+            <div class="section-auto-sample-vnav" data-section="vertical-nav">
+              <section>
+                <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+                <div class="content-sample" data-slug="section1" data-section-content>
+                  <p>Content of section 1.</p>
+                </div>
+              </section>
+              <section>
+                <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+                <div class="content-sample" data-slug="section2" data-section-content>
+                  <p>Content of section 2.</p>
+                </div>
+              </section>
+            </div>
+          </nav>
+          <section class="page-content">
+            <p>Content...</p>
+          </section>
+        </div>
+        <hr>
+
+        <h5>Horizontal Nav Configuration</h5>
+        <p>You can have your section act like horizontal navigation the entire time, like so:</p>
+<%= code_example '
+<div class="section-auto-sample-hnav" data-section="horizontal-nav">
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="content-sample" data-slug="section1" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+    <div class="content-sample" data-slug="section2" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+<%= code_example '
+.section-auto-sample-hnav {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}
+@media #{$small} {
+  .section-auto-sample-hnav {
+    @include section-container($section-type:horizontal-nav);
+    & > section { @include section($section-type:horizontal-nav, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+}', :css %>
+
+        <div class="section-auto-sample-hnav" data-section="horizontal-nav">
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+            <div class="content-sample" data-slug="section1" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+            <div class="content-sample" data-slug="section2" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
+        <hr>
+
+        <h5>Custom Styles Using the Mixin</h5>
+        <p>You have access to a few options that will make styling the sections really easy and you can add onto it as you want. You'll still need the data-section attribute to match the style you give the mixin.</p>
+<%= code_example '
+<div class="section-auto-sample-custom" data-section="tabs">
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="content-sample" data-slug="section1" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+    <div class="content-sample" data-slug="section2" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+<%= code_example '
+.section-auto-sample-custom {
+  @include section-container($section-type:tabs);
+  & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample", $title-padding: 10px 50px, $title-color:#000, $title-bg:pink, $title-bg-hover:darken(pink,5%), $title-bg-active: #fff, $title-color-active: darken(pink,10%)); }
+}', :css %>
+
+        <div class="section-auto-sample-custom" data-section="tabs">
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 1</a></p>
+            <div class="content-sample" data-slug="section1" data-section-content>
+              <p>Content of section 1.</p>
+            </div>
+          </section>
+          <section>
+            <p class="title-sample" data-section-title><a href="#section1">Section 2</a></p>
+            <div class="content-sample" data-slug="section2" data-section-content>
+              <p>Content of section 2.</p>
+            </div>
+          </section>
+        </div>
+
+        <hr>
+
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+$include-html-section-classes: $include-html-classes !default;
+
+/* We use these to set padding and hover factor */
+$section-title-padding:             emCalc(15px);
+$section-content-padding:           emCalc(15px);
+$section-function-factor:           10%;
+
+/* These style the titles */
+$section-title-color:               #333;
+$section-title-bg:                  #efefef;
+$section-title-bg-active:           darken($section-title-bg, $section-function-factor);
+$section-title-bg-active-tabs:      #fff;
+$section-title-bg-hover:            darken($section-title-bg, $section-function-factor/2);
+
+/* Want to control border size, here ya go! */
+$section-border-size:               1px;
+$section-border-style:              solid;
+$section-border-color:              #ccc;
+
+/* Font controls */
+$section-font-size:                 emCalc(14px);
+
+/* Control the color of the background and some size options */
+$section-content-bg:                #fff;
+$section-vertical-nav-min-width:    emCalc(200px);
+$section-vertical-tabs-title-width: emCalc(200px);
+$section-bottom-margin:             emCalc(20px);
+', :css %>
+
+    <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>.</p>
+
+        <hr>
+
+        <h3>Using the JavaScript</h3>
+        <p>You'll need to include <code>zepto.js</code> and <code>abstractio.js</code> above the sections plugin. Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS in your directory.</p>
+
+        <p><a href="../javascript.html" title="How to install Abstractio JavaScript">Read how to install Abstractio JavaScript</a></p>
+
+        <p>Required Abstractio Library: <code>abstractio.section.js</code></p>
+
+        <p>Then, you'll need to add a data-attribute to make the JS work properly on that element. That looks like:</p>
+
+<%= code_example '
+<div class="section-container auto" data-section>
+  <section>
+    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
+    <div class="content" data-section-content>
+      <ul class="side-nav">
+        <li><a href="#">Link 1</a></li>
+        <li><a href="#">Link 2</a></li>
+        <li><a href="#">Link 3</a></li>
+        <li class="divider"></li>
+        <li><a href="#">Link 1</a></li>
+      </ul>
+    </div>
+  </section>
+  <section>
+    <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
+    <div class="content" data-section-content>
+      <ul class="side-nav">
+        <li><a href="#">Link 1</a></li>
+        <li><a href="#">Link 2</a></li>
+        <li><a href="#">Link 3</a></li>
+        <li class="divider"></li>
+        <li><a href="#">Link 1</a></li>
+      </ul>
+    </div>
+  </section>
+</div>
+', :html %>
+
+        <p><strong>Note:</strong> If you are using Sections in a Modal, or they are being loaded via AJAX, or they are hidden when Abstractio is initialized, you will need to reflow the sections to get tabs to display properly:</p>
+
+<%= code_example "
+$('#myModal').on('opened', function () {
+  $(this).abstractio('section', 'reflow');
+});
+", :json %>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>You can either set these options in a <code>data-options</code> attribute in the markup, <code>data-options="option: value; option2: value syntax"</code>, or pass in on initialization.</p>
+
+    <%= code_example "
+{
+  deep_linking: false,
+  one_up: true,
+  rtl: false,
+  callback: function (){}
+}", :js %>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>