zurb-foundation 3.2.5 → 4.0.0.rc1

data/docs/components/grid.html.erb

@@ -0,0 +1,355 @@
+    <style>
+      .row.display { background: #eee; font-size: 11px; margin-bottom: 10px; }
+      .row.display .columns, .row.display .column { background: #e7e7e7; border: 1px solid #ddd; font-size: 13px; font-weight: bold; text-indent: 3px; padding-top: 8px; color: #444; padding-bottom: 8px; }
+    </style>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Grid" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Create powerful multi-device layouts quickly and easily with the 12-column, nestable Foundation grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.</h4>
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Using our Predefined HTML Classes</h3>
+        <p>These are examples of different ways to use the Foundation Grid. Foundation uses <code>box-sizing: border-box</code> so that borders and padding do not affect the overall width of the columns, making the math dead-simple. Since Foundation is mobile-first, we'll stack content by default. You do have access to an entirely separate small grid to use up to the 768px breakpoint. This means you can create some pretty complex layouts and even drop columns if you want.</p>
+
+<%= code_example '
+<div class="row">
+  <div class="small-2 large-4 columns">...</div>
+  <div class="small-4 large-4 columns">...</div>
+  <div class="small-6 large-4 columns">...</div>
+</div>
+<div class="row">
+  <div class="large-3 columns">...</div>
+  <div class="large-6 columns">...</div>
+  <div class="large-3 columns">...</div>
+</div>
+<div class="row">
+  <div class="small-6 large-2 columns">...</div>
+  <div class="small-6 large-8 columns">...</div>
+  <div class="small-12 large-2 columns">...</div>
+</div>
+<div class="row">
+  <div class="small-3 columns">...</div>
+  <div class="small-9 columns">...</div>
+</div>
+<div class="row">
+  <div class="large-4 columns">...</div>
+  <div class="large-8 columns">...</div>
+</div>
+<div class="row">
+  <div class="small-6 large-5 columns">...</div>
+  <div class="small-6 large-7 columns">...</div>
+</div>
+<div class="row">
+  <div class="large-6 columns">...</div>
+  <div class="large-6 columns">...</div>
+</div>', :html %>
+
+        <div class="row display">
+          <div class="small-2 large-4 columns"><span class="show-for-small">2</span><span class="hide-for-small">4</span></div>
+          <div class="small-4 large-4 columns">4</div>
+          <div class="small-6 large-4 columns"><span class="show-for-small">6</span><span class="hide-for-small">4</span></div>
+        </div>
+        <div class="row display">
+          <div class="large-3 columns"><span class="show-for-small">full</span><span class="hide-for-small">3</span></div>
+          <div class="large-6 columns"><span class="show-for-small">full</span><span class="hide-for-small">6</span></div>
+          <div class="large-3 columns"><span class="show-for-small">full</span><span class="hide-for-small">3</span></div>
+        </div>
+        <div class="row display">
+          <div class="small-6 large-2 columns"><span class="show-for-small">6</span><span class="hide-for-small">2</span></div>
+          <div class="small-6 large-8 columns"><span class="show-for-small">6</span><span class="hide-for-small">8</span></div>
+          <div class="small-12 large-2 columns"><span class="show-for-small">full</span><span class="hide-for-small">2</span></div>
+        </div>
+        <div class="row display">
+          <div class="small-3 columns">3</div>
+          <div class="small-9 columns">9</div>
+        </div>
+        <div class="row display">
+          <div class="large-4 columns"><span class="show-for-small">full</span><span class="hide-for-small">4</span></div>
+          <div class="large-8 columns"><span class="show-for-small">full</span><span class="hide-for-small">8</span></div>
+        </div>
+        <div class="row display">
+          <div class="small-6 large-5 columns"><span class="show-for-small">6</span><span class="hide-for-small">5</span></div>
+          <div class="small-6 large-7 columns"><span class="show-for-small">6</span><span class="hide-for-small">7</span></div>
+        </div>
+        <div class="row display">
+          <div class="large-6 columns"><span class="show-for-small">full</span><span class="hide-for-small">6</span></div>
+          <div class="large-6 columns"><span class="show-for-small">full</span><span class="hide-for-small">6</span></div>
+        </div>
+
+        <hr>
+
+        <h4>Infinitely Nest Your Grid</h4>
+        <p>The grid allows for nesting down as far as you'd like, though at a certain point it will get absurd. You can use this nesting to create quite complex layouts, as well as some other tricks like form layouts or visual elements.</p>
+
+<%= code_example '
+<div class="row">
+  <div class="small-8 columns">8
+    <div class="row">
+      <div class="small-8 columns">8 Nested
+        <div class="row">
+          <div class="small-8 columns">8 Nested Again</div>
+          <div class="small-4 columns">4</div>
+        </div>
+      </div>
+      <div class="small-4 columns">4</div>
+    </div>
+  </div>
+  <div class="small-4 columns">4</div>
+</div>', :html %>
+
+        <div class="row display">
+          <div class="small-8 columns">8
+            <div class="row">
+              <div class="small-8 columns">8 Nested
+                <div class="row">
+                  <div class="small-8 columns">8 Nested Again</div>
+                  <div class="small-4 columns">4</div>
+                </div>
+              </div>
+              <div class="small-4 columns">4</div>
+            </div>
+          </div>
+          <div class="small-4 columns">4</div>
+        </div>
+
+        <hr>
+
+        <h4>Offsets</h4>
+        <p>Offsets allow you to create additional space between columns in a row. Like the rest of the grid, they're nestable. You can use classes like <code>.large-offset-1</code> and <code>.small-offset-3</code> to manipulate your column positions in different ways. You can offset up to 11 since you wouldn't even offset a full-width column.</p>
+
+<%= code_example '
+<div class="row">
+  <div class="large-1 columns">1</div>
+  <div class="large-11 columns">11</div>
+</div>
+<div class="row">
+  <div class="large-1 columns">1</div>
+  <div class="large-10 large-offset-1 columns">10, offset 1</div>
+</div>
+<div class="row">
+  <div class="large-1 columns">1</div>
+  <div class="large-9 large-offset-2 columns">9, offset 2</div>
+</div>
+<div class="row">
+  <div class="large-1 columns">1</div>
+  <div class="large-8 large-offset-3 columns">8, offset 3</div>
+</div>', :html %>
+
+        <div class="row display">
+          <div class="large-1 columns">1</div>
+          <div class="large-11 columns">11</div>
+        </div>
+        <div class="row display">
+          <div class="large-1 columns">1</div>
+          <div class="large-10 large-offset-1 columns">10, offset 1</div>
+        </div>
+        <div class="row display">
+          <div class="large-1 columns">1</div>
+          <div class="large-9 large-offset-2 columns">9, offset 2</div>
+        </div>
+        <div class="row display">
+          <div class="large-1 columns">1</div>
+          <div class="large-8 large-offset-3 columns">8, offset 3</div>
+        </div>
+
+        <hr>
+
+        <h4>Centered Columns</h4>
+        <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself. This is accomplished by adding a class of <code>large-center</code> or <code>small-center</code> depending on which breakpoint you want the columns to center on. Small versions will carry through all breakpoints if not overridden by a large version. You can center any number of columns you have.</p>
+
+<%= code_example '
+<div class="row">
+  <div class="small-3 small-centered columns">3 centered</div>
+</div>
+<div class="row">
+  <div class="small-6 small-centered columns">6 centered</div>
+</div>
+<div class="row">
+  <div class="small-9 small-centered columns">9 centered</div>
+</div>
+<div class="row">
+  <div class="small-11 small-centered columns">11 centered</div>
+</div>', :html %>
+
+        <div class="row display">
+          <div class="small-3 small-centered columns">3 centered</div>
+        </div>
+        <div class="row display">
+          <div class="small-6 small-centered columns">6 centered</div>
+        </div>
+        <div class="row display">
+          <div class="small-9 small-centered columns">9 centered</div>
+        </div>
+        <div class="row display">
+          <div class="small-11 small-centered columns">11 centered</div>
+        </div>
+
+        <hr>
+
+        <h4>Source Ordering</h4>
+
+        <p>Using these source ordering classes, you can shift columns around between our breakpoints. This means you can have a sub-nav on the left on large displays, but go below on small ones. <code>.push-#</code> is the syntax you'll use.</p>
+
+
+<%= code_example '
+<div class="row">
+  <div class="small-2 push-10 columns">2</div>
+  <div class="small-10 pull-2 columns">10, last</div>
+</div>
+<div class="row">
+  <div class="small-3 push-9 columns">3</div>
+  <div class="small-9 pull-3 columns">9, last</div>
+</div>
+<div class="row">
+  <div class="small-4 push-8 columns">4</div>
+  <div class="small-8 pull-4 columns">8, last</div>
+</div>
+<div class="row">
+  <div class="small-5 push-7 columns">5</div>
+  <div class="small-7 pull-5 columns">5, last</div>
+</div>
+<div class="row">
+  <div class="small-6 push-6 columns">6</div>
+  <div class="small-6 pull-6 columns">6, last</div>
+</div>', :html %>
+
+        <div class="row display">
+          <div class="small-2 push-10 columns">2</div>
+          <div class="small-10 pull-2 columns">10, last</div>
+        </div>
+        <div class="row display">
+          <div class="small-3 push-9 columns">3</div>
+          <div class="small-9 pull-3 columns">9, last</div>
+        </div>
+        <div class="row display">
+          <div class="small-4 push-8 columns">4</div>
+          <div class="small-8 pull-4 columns">8, last</div>
+        </div>
+        <div class="row display">
+          <div class="small-5 push-7 columns">5</div>
+          <div class="small-7 pull-5 columns">5, last</div>
+        </div>
+        <div class="row display">
+          <div class="small-6 push-6 columns">6</div>
+          <div class="small-6 pull-6 columns">6, last</div>
+        </div>
+
+        <hr>
+
+        <h4>Small Grid</h4>
+        <p>As you've probably noticed in the examples above, you have access to a small and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding large grid classes to it. To use the mixin, you'll need to have the <a href="#extention-install">extension installed</a> or grab <a href="#">_foundation-global.scss</a> and <a href="#">_grid.scss</a> from Github and throw them into a Foundation folder in your project directory.</p>
+
+<%= code_example '
+<div class="row">
+  <div class="small-2 columns">2</div>
+  <div class="small-10 columns">10, last</div>
+</div>
+<div class="row">
+  <div class="small-3 columns">3</div>
+  <div class="small-9 columns">9, last</div>
+</div>', :html %>
+
+        <div class="row display">
+          <div class="small-2 columns">2</div>
+          <div class="small-10 columns">10, last</div>
+        </div>
+        <div class="row display">
+          <div class="small-3 columns">3</div>
+          <div class="small-9 columns">9, last</div>
+        </div>
+
+        <hr>
+
+        <h3>Building With Mixins</h3>
+        <p>If you are keen on SCSS and use it for your Foundation projects, you have access to a grid mixins that will let you layout the page without using presentational classes that you don't want. You can create your own set of classes or even create your own grid. Setting any of the options to 'false' will leave off those styles, giving you lots of control over your CSS output. Here's an example structure you might use with the grid mixin:</p>
+
+        <h5>Basic Mixin Usage</h5>
+<%= code_example '
+/* Mixin options creating rows */
+@include grid-row($behavior);
+
+/* The default value is false, which will bring in the default row styles */
+$behavior: false
+
+/* If the element you are creating as a row is nested within another element */
+/* that is also a row, you need to add the proper nesting styles */
+$behavior: nest
+
+/* You can use this option to collapse the container row margins */
+/* This comes in handy when working with forms inside the grid */
+$behavior: collapse
+
+/* If you have a nested row and want it to be collapsed, you need to add this option */
+$behavior: nest-collapse
+', :css %>
+
+<%= code_example '
+/* Mixin options creating columns, these must be nested inside or a row */
+@include grid-column($columns, $last-column, $center, $offset, $push, $pull, $collapse, $float);
+
+/* The most commonly used option with a column */
+/* This sets the width properties for the column, use a number to represent columns */
+$columns: #
+
+/* Use this option if your columns do not add up to 12. */
+/* We make the last column default to float:right to keep things aligned */
+/* If you do not want this, set $last-column to true */
+$last-column: false
+
+/* If you have a single column inside a row and want it centered, set this to true */
+$center: false
+
+/* Control how many columns you offset by switching this into a number. */
+$offset: false
+
+/* You can use source ordering with this mixin too, just set this to a number. */
+$push: false
+
+/* You can use source ordering with this mixin too, just set this to a number. */
+$pull: false
+
+/* If you have a collapsed row, you need to set the columns to collapse as well. */
+$collapse: false
+
+/* By default, we do not include floats in the styles because it will be duplicated a lot. */
+/* To help control this, we made it an option. Set this to true to get columns to float. */
+$float: false
+', :css %>
+
+<%= code_example '
+#masthead { @include grid-row; @include panel;
+  & > hgroup { @include grid-column(4, $float:left); }
+  & > section { @include grid-column(8, $float:left); }
+}', :css %>
+
+        <header id="masthead">
+          <hgroup>
+            <h2>Title</h2>
+          </hgroup>
+          <section>
+            <p>Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          </section>
+        </header>
+
+        <hr>
+
+        <h4>Get Advanced With Media Query Changes</h4>
+        <p>We kept media queries out of the code for our grid mixins. This will enable you to include the mixins inside of whatever breakpoint you'd like, putting you in complete control. If you want to create 10 breakpoints and shift the layout around between each one, by all means. If you want to use only the default breakpoints, <a href="#mediaqueries">we've got variables for that</a>.</p>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/inline-lists.html.erb

@@ -0,0 +1,89 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Inline Lists" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">You can use this simple construct when you just need a horizontal list of links, like in a footer, and want more control than just spaces between them.</h4>
+
+        <ul class="inline-list">
+          <li><a href="#">Link 1</a></li>
+          <li><a href="#">Link 2</a></li>
+          <li><a href="#">Link 3</a></li>
+          <li><a href="#">Link 4</a></li>
+          <li><a href="#">Link 5</a></li>
+        </ul>
+
+        <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 inline lists in Foundation 4: with our predefined HTML or with our mixins. Building inline lists using our predefined classes is easy. You'll start with an unordered list and add a class of <code>.inline-list</code> to it. From there, you just need to add list items with links in them.</p>
+
+<%= code_example '
+<ul class="inline-list">
+  <li><a href="#">Link 1</a></li>
+  <li><a href="#">Link 2</a></li>
+  <li><a href="#">Link 3</a></li>
+  <li><a href="#">Link 4</a></li>
+  <li><a href="#">Link 5</a></li>
+</ul>', :html %>
+
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected inline-lists from a custom package. These should be linked up following our default HTML page structure.</p>
+
+        <hr>
+
+        <h3>Build with a Mixin</h3>
+        <p>We've included SCSS mixins used to style inline lists. To use the mixin, you'll need to have the <a href="#extention-install">extension installed</a> or grab <a href="#">_foundation-global.scss</a> and <a href="#">_inline-lists.scss</a> from Github and throw them into a Foundation 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 "foundation/foundation-global", "foundation/inline-lists";
+', :css %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your inline lists using our global mixin by including it on your own custom class. The mixin contains all the necessary styles for positioning and styling the unordered list full of list items, the code looks like this:</p>
+
+<%= code_example '
+.your-class-name { @include inline-list; }', :css %>
+
+        <ul class="inline-list">
+          <li><a href="#">Link 1</a></li>
+          <li><a href="#">Link 2</a></li>
+          <li><a href="#">Link 3</a></li>
+          <li><a href="#">Link 4</a></li>
+          <li><a href="#">Link 5</a></li>
+        </ul>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use this to control the margins and padding of the inline list. */
+$inline-list-margin-bottom:    emCalc(17px) emCalc(-22px );
+$inline-list-margin:           0 0;
+$inline-list-padding:          0;
+
+/* We use this to control the overflow of the inline list. */
+$inline-list-overflow:         hidden;
+
+/* We use this to control the list items */
+$inline-list-display:          block;
+
+/* We use this to control any elments within list items */
+$inline-list-children-display: block;', :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>_foundation-global.scss</strong>.</p>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+
+</div>

data/docs/components/joyride.html.erb

@@ -0,0 +1,178 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Joyride" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Joyride is an extremely flexible plugin that gives users a tour of your site or app when they visit.</h4>
+
+        <div id="firstStop" class="panel">Some awesome part of your site!</div>
+
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <h2 id="numero1" class="so-awesome">Build Joyride with HTML</h2>
+        <p>At the bottom of your page but inside of the body, place either an <code>ol</code> or <code>ul</code> with the <code>data-joyride</code> attribute. This list will contain all of the stops on your tour. To associate the tour stops with an item on your page, make sure the ID and data-id match between the two. If you do not associate an if, the tour stop will take on a modal style, positioning itself in the middle of the screen.</p>
+
+<%= code_example '
+<!-- At the bottom of your page but inside of the body tag -->
+<ol class="joyride-list" data-joyride>
+  <li data-id="firstStop" data-text="Next">
+    <p>Hello and welcome to the Joyride documentation page.</p>
+  </li>
+  <li data-id="numero1" data-class="custom so-awesome" data-text="Next">
+    <h4>Stop #1</h4>
+    <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
+  </li>
+  <li data-id="numero2" data-button="Next" data-options="tipLocation:top;tipAnimation:fade">
+    <h4>Stop #2</h4>
+    <p>Get the details right by styling Joyride with a custom stylesheet!</p>
+  </li>
+  <li data-button="Next">
+    <h4>Stop #4</h4>
+    <p>It works as a modal too!</p>
+  </li>
+</ol>
+', :html %>
+
+        <h5>We Add Some HTML with JS</h5>
+        <p>To make Joyride really easy to use, we built its container and tour element inside the JS. This can make it hard to know what to target for styling purposes in some cases. To help this process go smoothly, here's what the output looks like with the appropriate classes to target for styling:</p>
+
+<%= code_example '
+<!-- Here is the markup our JS creates for you -->
+<div class="joyride-tip-guide">
+  <span class="joyride-nub top"></span>
+  <div class="joyride-content-wrapper">
+    <p>Hello and welcome to the Joyride documentation page.</p>
+    <a href="#" class="small button joyride-next-tip">Next</a>
+    <a href="#close" class="joyride-close-tip">×</a>
+  </div>
+</div>
+', :html %>
+
+        <hr>
+
+        <h3 id="numero2">Available SCSS Variables</h3>
+        <p>We've included a bunch of variables that you'll be able to use if you're into getting SASSy with things.</p>
+
+<%= code_example '
+/* Controlling default Joyride styles */
+$joyride-tip-bg:              rgb(0,0,0);
+$joyride-tip-default-width:   300px;
+$joyride-tip-padding:         emCalc(18px) emCalc(20px) emCalc(24px);
+$joyride-tip-border:          solid 1px #555;
+$joyride-tip-radius:          4px;
+$joyride-tip-position-offset: 22px;
+
+/* Here, we are setting the tip dont styles */
+$joyride-tip-font-color:      #fff;
+$joyride-tip-font-size:       emCalc(14px);
+$joyride-tip-header-weight:   bold;
+
+/* This changes the nub size */
+$joyride-tip-nub-size:        14px;
+
+/* This adjusts the styles for the timer when its enabled */
+$joyride-tip-timer-width:     50px;
+$joyride-tip-timer-height:    3px;
+$joyride-tip-timer-color:     #666;
+
+/* This changes up the styles for the close button */
+$joyride-tip-close-color:     #777;
+$joyride-tip-close-size:      30px;
+$joyride-tip-close-weight:    normal;
+
+/* When Joyride is filling the screen, we use this style for the bg */
+$joyride-screenfill:          rgba(0,0,0,0.5);
+', :css %>
+
+        <hr>
+
+        <h3>Using the JavaScript</h3>
+        <p>You'll need to include <code>foundation.joyride.js</code> to get plugin to work. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.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 Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
+
+        <p>Required Foundation Library: <code>foundation.joyride.js</code>, Optional JS Library: <code>foundation.cookie.js</code></p>
+
+        <p>Joyride does not initialize on page load like the rest of the plugins. You need to call <code>start</code> to get it to load.</p>
+
+<%= code_example '
+<script type="text/javascript">
+  $(document).foundation(\'joyride\', \'start\');
+</script>
+', :html %>
+
+        <p>Then, you'll need to add a data-joyride to make the JS work properly on that element. It looks something like this:</p>
+
+<%= code_example '
+<ol data-joyride>
+  ...
+</ol>
+', :html %>
+
+        <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. Configurations that are <i>objects</i>, <i>functions</i>, or <i>arrays</i> can only be passed in during intitialization.</p>
+
+    <%= code_example "
+{
+  tipLocation          : 'bottom',  // 'top' or 'bottom' in relation to parent
+  nubPosition          : 'auto',    // override on a per tooltip bases
+  scrollSpeed          : 300,       // Page scrolling speed in milliseconds
+  timer                : 0,         // 0 = no timer , all other numbers = timer in milliseconds
+  startTimerOnClick    : true,      // true or false - true requires clicking the first button start the timer
+  startOffset          : 0,         // the index of the tooltip you want to start on (index of the li)
+  nextButton           : true,      // true or false to control whether a next button is used
+  tipAnimation         : 'fade',    // 'pop' or 'fade' in each tip
+  pauseAfter           : [],        // array of indexes where to pause the tour after
+  tipAnimationFadeSpeed: 300,       // when tipAnimation = 'fade' this is speed in milliseconds for the transition
+  cookieMonster        : false,     // true or false to control whether cookies are used
+  cookieName           : 'joyride', // Name the cookie you'll use
+  cookieDomain         : false,     // Will this cookie be attached to a domain, ie. '.notableapp.com'
+  cookieExpires        : 365,       // set when you would like the cookie to expire.
+  tipContainer         : 'body',    // Where will the tip be attached
+  postRideCallback     : function (){},    // A method to call once the tour closes (canceled or complete)
+  postStepCallback     : function (){},    // A method to call after each step
+  template : { // HTML segments for tip layout
+    link    : '<a href=\"#close\" class=\"joyride-close-tip\">&times;</a>',
+    timer   : '<div class=\"joyride-timer-indicator-wrap\"><span class=\"joyride-timer-indicator\"></span></div>',
+    tip     : '<div class=\"joyride-tip-guide\"><span class=\"joyride-nub\"></span></div>',
+    wrapper : '<div class=\"joyride-content-wrapper\"></div>',
+    button  : '<a href=\"#\" class=\"small button joyride-next-tip\"></a>'
+  }
+}", :json %>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+
+</div>
+
+<!-- TOUR STOPS -->
+<ol class="joyride-list" data-joyride>
+  <li data-id="firstStop" data-text="Next">
+    <p>Hello and welcome to the Joyride documentation page.</p>
+  </li>
+  <li data-id="numero1" data-class="custom so-awesome" data-text="Next">
+    <h4>Stop #1</h4>
+    <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
+  </li>
+  <li data-id="numero2" data-button="Next" data-options="tipLocation:top;tipAnimation:fade">
+    <h4>Stop #2</h4>
+    <p>Get the details right by styling Joyride with a custom stylesheet!</p>
+  </li>
+  <li data-button="Next">
+    <h4>Stop #4</h4>
+    <p>It works as a modal too!</p>
+  </li>
+</ol>