modularis 0.0.1

data/docs/components/section.html.erb

@@ -0,0 +1,496 @@
+<% @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 Modularis 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 Modularis 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 %>
+        <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 Modularis 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 %>
+
+        <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 %>
+
+        <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>
+</div>', :html %>
+
+        <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 Modularis 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 %>
+
+        <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 Modularis 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 %>
+
+
+        <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 Modularis 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>
+  <div data-section-region>
+    <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>
+    </div>
+  </div>
+</div>', :html %>
+
+        <hr> -->
+
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+/* We use these to set padding and hover factor */
+$section-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;
+
+/* Want to control border size, here ya go! */
+$section-border-size:            1px;
+$section-border-style:           solid;
+$section-border-color:           #ccc;
+
+/* Control the color of the background and some size options */
+$section-content-bg:             #fff;
+$section-vertical-nav-min-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>modularis.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 Modularis JavaScript">Read how to install Modularis JavaScript</a></p>
+
+        <p>Required Modularis Library: <code>modularis.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 Modularis is initialized, you will need to reflow the sections to get tabs to display properly:</p>
+
+<%= code_example "
+$('#myModal').on('opened', function () {
+  $(this).modularis('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>

data/docs/components/side-nav.html.erb

@@ -0,0 +1,124 @@
+<% @side_nav = "nav" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Side Nav" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h1><%= @page_title %></h1>
+        <h4 class="subheader">Side nav, like you'll see on Modularis's main site, is useful for sections of either a site or a page.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <div class="row">
+          <div class="large-4 columns end">
+            <ul class="side-nav">
+              <li class="active"><a href="#">Link 1</a></li>
+              <li><a href="#">Link 2</a></li>
+              <li class="divider"></li>
+              <li><a href="#">Link 3</a></li>
+              <li><a href="#">Link 4</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build a side nav in Modularis 4: either with our predefined HTML classes or our mixins. Building side nav using our predefined classes is simple, you'll just need to write a <code>&lt;ul class="side-nav"&gt;</code> and fill it full of list items. The width of the side nav is controlled by the columns you put it inside.</p>
+
+        <p>The list item options:</p>
+        <ul class="disc">
+          <li><code>active</code> Will add style to denote the active link.</li>
+          <li><code>divider</code> Creates a divider between list items.</li>
+        </ul>
+
+<%= code_example '
+<ul class="side-nav">
+  <li class="active"><a href="#">Link 1</a></li>
+  <li><a href="#">Link 2</a></li>
+  <li class="divider"></li>
+  <li><a href="#">Link 3</a></li>
+  <li><a href="#">Link 4</a></li>
+</ul>', :html %>
+
+
+
+        <p>For these styles to come across, make sure you have the default Modularis CSS package or that you've selected side nav 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 side nav. 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/modularis/blob/master/scss/modularis/_modularis-global.scss">_modularis-global.scss</a>, <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_side-nav.scss">_side-nav.scss</a> from Github and throw them into a Modularis 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 "modularis/modularis-global", "modularis/components/global", "modularis/components/side-nav";
+', :css %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your side nav using our global mixin by including it on a custom class or ID in your own stylesheet. The mixin contains options for changing the background color, which also controls the border and text color. You'll also have the ability to change the font-size and padding. The rest of the defaults can be modified using the available variables. The global mixin looks like this:</p>
+
+<%= code_example '
+/* Using the default styles */
+.your-class-name { @include side-nav; }', :css %>
+
+    <p>There are also three options you can customize on the fly when writing this mixin. These controls things like: divider color, text size and font color.</p>
+
+<%= code_example '
+/* Using the available options */
+.your-class-name { @include side-nav($divider-color, $font-size, $link-color); }
+
+/* Control the color of the divider between links */
+$divider-color: $side-nav-divider-color
+
+/* Control your font-size per label */
+$font-size: $side-nav-font-size
+
+/* Change the background color for your labels */
+$link-color: $side-nav-link-color
+', :css %>
+
+        <ul class="side-nav-custom large-3">
+          <li class="active"><a href="#">Link 1</a></li>
+          <li><a href="#">Link 2</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Link 3</a></li>
+          <li><a href="#">Link 4</a></li>
+        </ul>
+
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use this to control padding. */
+$side-nav-padding:           emCalc(14px) 0;
+
+/* We use these to control list styles. */
+$side-nav-list-type:         none;
+$side-nav-list-position:     inside;
+$side-nav-list-margin:       0 0 emCalc(7px) 0;
+
+/* We use these to control link styles. */
+$side-nav-link-color: $primary-color;
+$side-nav-link-color-active: lighten(#000, 30%);
+$side-nav-font-size:         emCalc(14px);
+$side-nav-font-weight:       bold;
+
+/* We use these to control border styles */
+$side-nav-divider-size:      1px;
+$side-nav-divider-style:     solid;
+$side-nav-divider-color:     darken(#fff, 10%);', :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>_modularis-global.scss</strong>.</p>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>