zurb-foundation 3.2.5 → 4.0.0.rc1

data/docs/components/split-buttons.html.erb

@@ -0,0 +1,218 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Split Buttons" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">We've simplified our split buttons by getting rid of the dedicated dropdown associated with them. Instead, you'll use our <a href="#">new dropdown plugin</a> to attach a dropdown to the button style of your choice.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <a href="#" class="tiny button split">Split Button <span data-dropdown="drop"></span></a><br>
+        <a href="#" class="small secondary radius button split">Split Button <span data-dropdown="drop2"></span></a><br>
+        <a href="#" class="button alert round split">Split Button <span data-dropdown="drop3"></span></a><br>
+        <a href="#" class="large success button split">Split Button <span data-dropdown="drop4"></span></a><br>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build buttons in Foundation 4: with our predefined HTML classes or our structure and mixins. Building buttons using our predefined classes is simple, you'll need an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code> or <code>&lt;input&gt;</code> with a class of <code>.button.split</code>. This will create a default medium button. You can also use size, color and radius classes to control more of the style.</p>
+
+        <p>The classes options:</p>
+        <ul class="disc">
+          <li>The size classes include: <code>.tiny, .small, .medium</code> or <code>.large</code></li>
+          <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>
+        </ul>
+
+<%= code_example '
+<!-- Size Classes -->
+<a href="#" class="button split">Default Button</a>
+<a href="#" class="tiny button split">Tiny Button</a>
+<a href="#" class="small button split">Small Button</a>
+<a href="#" class="large button split">Large Button</a>
+
+<!-- Color Classes -->
+<a href="#" class="button split secondary">Secondary Button</a>
+<a href="#" class="button split success">Success Button</a>
+<a href="#" class="button split alert">Alert Button</a>
+
+<!-- Radius Classes -->
+<a href="#" class="button split radius">Radius Button</a>
+<a href="#" class="button split round">Round Button</a>
+', :html %>
+
+        <p>You may chain one class from each group to build up desired default styles. For these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>split buttons from a custom package</strong>. These should be linked up following our default <a href="#getting-started">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Build with Mixins</h3>
+        <p>We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the <a href="#extention-install">extension installed</a> or grab <a href="#">_foundation-global.scss</a>, <a href="#">_buttons.scss</a> and <a href="#">_split-buttons.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/buttons", "foundation/split-buttons";
+', :css %>
+
+        <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:</p>
+
+<%= code_example '
+<a href="#" class="your-class-name">Split Button Text</a>
+', :html %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can quickly build an entire split buttons using our global mixin by including it on your custom class or ID in your stylesheet. The global mixin will create the necessary style for the button. The global mixin looks like this:</p>
+
+<%= code_example '
+/* Using the default styles */
+.your-class-name {
+  @include button;
+  @include split-button;
+}
+', :css %>
+
+        <a href="" class="split button">Default Split Button<span data-dropdown="drop5"></span></a>
+
+        <p>There are also <strong>four options</strong> you can customize on the fly when writing this mixin. These control things like: padding size, pip color, border color and base styles. Setting any of these options to <strong>false</strong> will not include the styles.</p>
+
+<%= code_example '
+/* Using the available options */
+.your-class-name {
+  @include button;
+  @include split-button($padding, $pip-color, $span-border, $base-style);
+}
+
+/* This controls padding around the dropdown buttons. Use tiny, small, medium, or large */
+$padding: $button-med
+
+/* This controls the dropdown pip color. Set to one of our variables or a custom hex value */
+$pip-color: $split-button-pip-color
+
+/* This controls the border color of the triangle span area. This can be a variable or color value. */
+$span-border: $primary-color
+
+/* This controls whether or not base styles come through. Set to false to negate */
+/* Handy when you want to have many different styles */
+$base-style: true
+', :css %>
+
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+/* We use these to control different shared styles for Split Buttons */
+$split-button-function-factor: 15%;
+$split-button-pip-color:       #fff;
+$split-button-pip-color-alt:   #333;
+$split-button-active-bg-tint:  rgba(0,0,0,0.1);
+
+/* We use these to control tiny split buttons */
+$split-button-padding-tny:     $button-tny * 9;
+$split-button-span-width-tny:  $button-tny * 6.5;
+$split-button-pip-size-tny:    $button-tny;
+$split-button-pip-top-tny:     $button-tny * 2;
+$split-button-pip-left-tny:    emCalc(-5px);
+
+/* We use these to control small split buttons */
+$split-button-padding-sml:     $button-sml * 7;
+$split-button-span-width-sml:  $button-sml * 5;
+$split-button-pip-size-sml:    $button-sml;
+$split-button-pip-top-sml:     $button-sml * 1.5;
+$split-button-pip-left-sml:    emCalc(-9px);
+
+/* We use these to control medium split buttons */
+$split-button-padding-med:     $button-med * 6.4;
+$split-button-span-width-med:  $button-med * 4;
+$split-button-pip-size-med:    $button-med - emCalc(3px);
+$split-button-pip-top-med:     $button-med * 1.5;
+$split-button-pip-left-med:    emCalc(-9px);
+
+/* We use these to control large split buttons */
+$split-button-padding-lrg:     $button-lrg * 6;
+$split-button-span-width-lrg:  $button-lrg * 3.75;
+$split-button-pip-size-lrg:    $button-lrg - emCalc(6px);
+$split-button-pip-top-lrg:     $button-lrg + emCalc(5px);
+$split-button-pip-left-lrg:    emCalc(-9px);
+', :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>
+
+        <hr>
+
+        <h3>Using the JavaScript</h3>
+        <p>You don't need ths JS to create dropdown button styles with Foundation. The only reason you'll need to include <code>foundation.dropdown.js</code> is if you want to add one of our dropdowns to the button. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the dropdown plugin.</p>
+        <p>Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS file 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.dropdown.js</code></p>
+
+        <h5>Creating the Dropdown</h5>
+        <p>To create a dropdown, you'll need to attach a data-attribute to whatever element you want the dropdown attached to (in this case a button). From there, you'll create a list that holds the links or content and add another data-attribute that associates with the element it belongs to. Here's an example of that markup:</p>
+
+<%= code_example '
+<a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button</a><br>
+
+<ul id="drop1" class="f-dropdown">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+', :html %>
+
+        <a href="#" class="button split">Dropdown Button <span data-dropdown="drop1"></span></a><br>
+
+        <p>You'll notice that <code>data-dropdown="drop1"</code> and <code>id="drop1"</code> have similar values. This is what tells the dropdown plugin where to look to find the position to attach the dropdown element to.</p>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>Dropdwon button options can only be passed in during initialization at this time.</p>
+
+<%= code_example "
+{
+  // specify the class used for active sections
+  activeClass: 'open'
+}", :json %>
+
+      </div>
+    </div>
+
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>
+
+    <ul id="drop" class="f-dropdown" data-dropdown-content>
+      <li><a href="#">This is a link</a></li>
+      <li><a href="#">This is another</a></li>
+      <li><a href="#">Yet another</a></li>
+    </ul>
+    <ul id="drop1" class="f-dropdown" data-dropdown-content>
+      <li><a href="#">This is a link</a></li>
+      <li><a href="#">This is another</a></li>
+      <li><a href="#">Yet another</a></li>
+    </ul>
+    <ul id="drop2" class="f-dropdown" data-dropdown-content>
+      <li><a href="#">This is a link</a></li>
+      <li><a href="#">This is another</a></li>
+      <li><a href="#">Yet another</a></li>
+    </ul>
+    <ul id="drop3" class="f-dropdown" data-dropdown-content>
+      <li><a href="#">This is a link</a></li>
+      <li><a href="#">This is another</a></li>
+      <li><a href="#">Yet another</a></li>
+    </ul>
+    <ul id="drop4" class="f-dropdown" data-dropdown-content>
+      <li><a href="#">This is a link</a></li>
+      <li><a href="#">This is another</a></li>
+      <li><a href="#">Yet another</a></li>
+    </ul>
+    <ul id="drop5" class="f-dropdown" data-dropdown-content>
+      <li><a href="#">This is a link</a></li>
+      <li><a href="#">This is another</a></li>
+      <li><a href="#">Yet another</a></li>
+    </ul>
+
+

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

@@ -0,0 +1,120 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Sub Nav" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h1><%= @page_title %></h1>
+        <h4 class="subheader">This simple sub nav is great for moving between different states of a page. We use these frequently to show iterations of something, typically by date, but they're also handy for filters like these.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <dl class="sub-nav">
+          <dt>Filter:</dt>
+          <dd class="active"><a href="#">All</a></dd>
+          <dd><a href="#">Active</a></dd>
+          <dd><a href="#">Pending</a></dd>
+          <dd><a href="#">Suspended</a></dd>
+        </dl>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build sub nav in Foundation 4: you can use our predefined HTML classes or our mixins. Building sub nav using our predefined classes is simple, you'll just need to write a <code>&lt;dl class="sub-nav"&gt;</code> and fill it full of definitions. You can use the definition title as a label at the beginning (useful for building filters on a page).</p>
+
+        <p>The list options:</p>
+        <ul class="disc">
+          <li><code>&lt;dt&gt;</code> Creates a title at the beginning of the list.</li>
+          <li><code>&lt;dd class="active"&gt;</code> Will add style to denote the active link.</li>
+        </ul>
+
+<%= code_example '
+<dl class="sub-nav">
+  <dt>Filter:</dt>
+  <dd class="active"><a href="#">All</a></dd>
+  <dd><a href="#">Active</a></dd>
+  <dd><a href="#">Pending</a></dd>
+  <dd><a href="#">Suspended</a></dd>
+</dl>', :html %>
+
+        <p>To use these styles, make sure you have the default Foundation CSS package or that you've selected sub-nav from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Build with our Mixins</h3>
+        <p>We've included SCSS mixins used to style sub-nav. 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="#">_sub-nav.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/sub-nav";
+', :css %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your sub-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 font color, font size and active background color. 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 sub-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 sub-nav($font-color, $font-size, $active-bg); }
+
+/* Control the color of the divider between links */
+$font-color: $sub-nav-font-color
+
+/* Control your font-size per label */
+$font-size: $sub-nav-font-size
+
+/* Change the background color for your labels */
+$active-bg: $sub-nav-active-bg
+', :css %>
+
+<%= code_example '
+/* Using customized options */
+.your-class-name { @include sub-nav(orange, 11px, orange); }
+', :css %>
+
+        <dl class="sub-nav-custom">
+          <dt>Filter:</dt>
+          <dd class="active"><a href="#">All</a></dd>
+          <dd><a href="#">Active</a></dd>
+          <dd><a href="#">Pending</a></dd>
+          <dd><a href="#">Suspended</a></dd>
+        </dl>
+
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use these to control margin and padding */
+$sub-nav-list-margin:        emCalc(-4px) 0 emCalc(18px);
+$sub-nav-list-padding-top:   emCalc(4px);
+
+/* We use this to control the definition */
+$sub-nav-font-size:          emCalc(14px);
+$sub-nav-font-color:         #999;
+$sub-nav-font-weight:        normal;
+$sub-nav-text-decoration:    none;
+$sub-nav-border-radius:      1000px;
+
+/* We use these to control the active item styles */
+$sub-nav-active-font-weight: bold;
+$sub-nav-active-bg:          $primary-color;
+$sub-nav-active-color:       #fff;
+$sub-nav-active-padding:     emCalc(3px) emCalc(9px);
+$sub-nav-active-cursor:      default;', :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/switch.html.erb

@@ -0,0 +1,288 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Switch" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Switches can be used instead of regular radio buttons to switch between two options. They are customizable and use styles that won't show on phones that don't support media queries. On these devices, they will appear as regular radio buttons.</h4>
+
+        <div class="small-2 switch tiny">
+          <input id="a" name="switch-a" type="radio" checked>
+          <label for="a" onclick="">Off</label>
+
+          <input id="a1" name="switch-a" type="radio">
+          <label for="a1" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <div class="small-3 switch small">
+          <input id="b" name="switch-b" type="radio" checked>
+          <label for="b" onclick="">Off</label>
+
+          <input id="b1" name="switch-b" type="radio">
+          <label for="b1" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <div class="small-4 switch radius">
+          <input id="c" name="switch-c" type="radio" checked>
+          <label for="c" onclick="">Off</label>
+
+          <input id="c1" name="switch-c" type="radio">
+          <label for="c1" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <div class="small-6 switch large round">
+          <input id="d" name="switch-d" type="radio" checked>
+          <label for="d" onclick="">Off</label>
+
+          <input id="d1" name="switch-d" type="radio">
+          <label for="d1" onclick="">On</label>
+
+          <span></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 build switches in Foundation 4: with our predefined HTML classes or with our mixins. Building switches using our predefined classes is simple, you'll just need a <code>div.switch</code> wrapped around a specific input/label markup. From there, you can update the styles as you need to. The switches width is 100% of the container you put it in or you can use our grid classes, <code>.small-#</code> or <code>.large-#</code>, directly on the switch.</p>
+
+<%= code_example '
+<!-- Default switch -->
+<div class="switch">
+  <input id="x" name="switch-x" type="radio" checked>
+  <label for="x" onclick="">Off</label>
+
+  <input id="x1" name="switch-x" type="radio">
+  <label for="x1" onclick="">On</label>
+
+  <span></span>
+</div>
+
+<!-- Using class options -->
+<div class="switch large round">
+  <input id="z" name="switch-z" type="radio" checked>
+  <label for="z" onclick="">Off</label>
+
+  <input id="z1" name="switch-z" type="radio">
+  <label for="z1" onclick="">On</label>
+
+  <span></span>
+</div>', :html %>
+
+        <p>The class options:</p>
+        <ul class="disc">
+          <li><code>radius</code>: Add this to the the switch container to get a 3px radius paddle and edges</li>
+          <li><code>round</code>: Add this to the the switch container to get a round paddle and edges</li>
+          <li><code>tiny</code>: Set the height and text of the switch to tiny</li>
+          <li><code>small</code>: Set the height and text of the switch to small</li>
+          <li><code>large</code>: Set the height and text of the switch to large</li>
+        </ul>
+
+        <p>To use these styles, make sure you have the default Foundation CSS package or that you've selected switches from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Build with our Mixins</h3>
+        <p>We've included SCSS mixins used to style switches. 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="#">_switch.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/switch";
+', :css %>
+
+        <p>The markup is pretty simple, you'll only need a single class or ID on the container to apply the mixin.</p>
+
+<%= code_example '
+<div class="your-class-name">
+  <input id="z" name="switch-z" type="radio" checked>
+  <label for="z" onclick="">Off</label>
+
+  <input id="z1" name="switch-z" type="radio">
+  <label for="z1" onclick="">On</label>
+
+  <span></span>
+</div>
+', :html %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your labels using our global mixin by including it on your custom class or ID in your own stylesheet. The mixin contains options for changing the key styles, 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 switch; }', :css %>
+
+        <div class="switch">
+          <input id="y" name="switch-y" type="radio" checked>
+          <label for="y" onclick="">Off</label>
+
+          <input id="y1" name="switch-y" type="radio">
+          <label for="y1" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <p>There are <strong>ten options</strong> you can customize on the fly when writing this mixin. These controls things like: padding, text size, color and radius. Setting any of these options to false will negate those styles.</p>
+
+<%= code_example '
+/* Using the available options */
+.your-class-name {
+  @include switch($transition-speed, $transition-ease, $height, $font-size, $line-height, $paddle-bg, $positive-color, $negative-color, $radius, $base-style);
+}
+
+/* This sets the speed at which the switch toggles */
+$transition-speed: $switch-paddle-transition-speed
+
+/* This sets the ease of the switch transition */
+$transition-ease: $switch-paddle-transition-ease
+
+/* This controls the overall height of the switch */
+$height: $switch-height-med
+
+/* You can set a different font-size for you switch */
+$font-size: $switch-font-size-med
+
+/* You can set a different line-height too */
+$line-height: 2.3em
+
+/* This controls the background of the paddle */
+$paddle-bg: $switch-paddle-bg
+
+/* Set the box-shadow color for the right side of the switch */
+$positive-color: $switch-positive-color
+
+/* Set the box-shadow color for the left side of the switch */
+$negative-color: $switch-negative-color
+
+/* Set this to true for default radius or any number for complete control */
+$radius: false
+
+/* If you set this to false, base styles are left out */
+$base-style: true
+', :css %>
+
+        <div class="switch-custom">
+          <input id="w" name="switch-w" type="radio" checked>
+          <label for="w" onclick="">Off</label>
+
+          <input id="w1" name="switch-w" type="radio">
+          <label for="w1" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <h5>Base Mixin</h5>
+        <p>You also have access to a few internal mixins that can create parts of the button as needed. The base mixin will create a switch base that only include structural styles.</p>
+
+<%= code_example '
+.your-class-name { @include switch-base($transition-speed, $transition-ease); }
+', :css %>
+
+        <div class="switch-custom-base">
+          <input id="o" name="switch-o" type="radio" checked>
+          <label for="o" onclick="">Off</label>
+
+          <input id="o1" name="switch-o" type="radio">
+          <label for="o1" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <h5>Size Mixin</h5>
+        <p>The size mixin will let you control the size of the switch, font-size and line-height.</p>
+
+<%= code_example '
+.your-class-name {
+  @include switch-base($transition-speed, $transition-ease);
+  @include switch-size($height, $font-size, $line-height);
+}
+', :css %>
+
+        <div class="switch-custom-base size">
+          <input id="o2" name="switch-o2" type="radio" checked>
+          <label for="o2" onclick="">Off</label>
+
+          <input id="o3" name="switch-o2" type="radio">
+          <label for="o3" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <h5>Style Mixin</h5>
+        <p>The last internal mixin you have access to for buttons is the style mixin. This will help you style background color, text color, positive/negative color, etc.</p>
+
+<%= code_example '
+.your-class-name {
+  @include switch-base($transition-speed, $transition-ease);
+  @include switch-size($height, $font-size, $line-height);
+  @include switch-style($paddle-bg, $positive-color, $negative-color, $radius, $base-style);
+}
+', :css %>
+
+        <div class="switch-custom-base size style">
+          <input id="o4" name="switch-o3" type="radio" checked>
+          <label for="o4" onclick="">Off</label>
+
+          <input id="o5" name="switch-o3" type="radio">
+          <label for="o5" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* Controlling border styles and background colors for the switch container */
+$switch-border-color:             darken(#fff, 20%);
+$switch-border-style:             solid;
+$switch-border-width:             1px;
+$switch-bg:                       #fff;
+
+/* We use these to control the switch heights for our default classes */
+$switch-height-tny:               22px;
+$switch-height-sml:               28px;
+$switch-height-med:               36px;
+$switch-height-lrg:               44px;
+$switch-bottom-margin:            emCalc(20px);
+
+/* We use these to control default font sizes for our classes. */
+$switch-font-size-tny:            11px;
+$switch-font-size-sml:            12px;
+$switch-font-size-med:            14px;
+$switch-font-size-lrg:            17px;
+$switch-label-side-padding:       6px;
+
+/* We use these to style the switch-paddle */
+$switch-paddle-bg:                #fff;
+$switch-paddle-fade-to-color:     darken($switch-paddle-bg, 10%);
+$switch-paddle-border-color:      darken($switch-paddle-bg, 35%);
+$switch-paddle-border-width:      1px;
+$switch-paddle-border-style:      solid;
+$switch-paddle-transition-speed:  .1s;
+$switch-paddle-transition-ease:   ease-out;
+$switch-positive-color:           lighten($success-color, 50%);
+$switch-negative-color:           #f5f5f5;
+
+/* Outline Style for tabbing through switches */
+$switch-label-outline:            1px dotted #888;', :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>