RubyGems - zurb-foundation - Versions diffs - 4.3.1 → 4.3.2 - Mend

zurb-foundation 4.3.1 → 4.3.2

Files changed (117) hide show

checksums.yaml +7 -0
data/.gitignore +4 -0
data/Gemfile.lock +31 -2
data/Gruntfile.js +54 -10
data/LICENSE +2 -2
data/README.md +11 -2
data/Rakefile +9 -0
data/docs/CHANGELOG.md +9 -0
data/docs/Procfile +2 -2
data/docs/components/abide.html.erb +30 -6
data/docs/components/alert-boxes.html.erb +35 -10
data/docs/components/block-grid.html.erb +1 -1
data/docs/components/breadcrumbs.html.erb +4 -4
data/docs/components/button-groups.html.erb +2 -2
data/docs/components/buttons.html.erb +10 -10
data/docs/components/clearing.html.erb +28 -2
data/docs/components/custom-forms.html.erb +9 -1
data/docs/components/dropdown-buttons.html.erb +36 -11
data/docs/components/dropdown.html.erb +44 -13
data/docs/components/flex-video.html.erb +3 -3
data/docs/components/forms.html.erb +10 -10
data/docs/components/global.html.erb +15 -20
data/docs/components/grid.html.erb +24 -23
data/docs/components/inline-lists.html.erb +3 -3
data/docs/components/interchange.html.erb +28 -2
data/docs/components/joyride.html.erb +34 -10
data/docs/components/keystrokes.html.erb +3 -3
data/docs/components/kitchen-sink.html.erb +1 -1
data/docs/components/labels.html.erb +3 -3
data/docs/components/magellan.html.erb +25 -2
data/docs/components/orbit.html.erb +39 -9
data/docs/components/pagination.html.erb +7 -7
data/docs/components/panels.html.erb +3 -3
data/docs/components/pricing-tables.html.erb +11 -11
data/docs/components/progress-bars.html.erb +5 -5
data/docs/components/reveal.html.erb +31 -8
data/docs/components/section.html.erb +61 -37
data/docs/components/side-nav.html.erb +4 -4
data/docs/components/split-buttons.html.erb +37 -15
data/docs/components/sub-nav.html.erb +10 -6
data/docs/components/switch.html.erb +2 -2
data/docs/components/tables.html.erb +7 -7
data/docs/components/tooltips.html.erb +30 -6
data/docs/components/top-bar.html.erb +101 -13
data/docs/components/type.html.erb +16 -16
data/docs/config.ru +18 -1
data/docs/controller.rb +1 -1
data/docs/css/_coderay.scss +2 -2
data/docs/css/_footer.scss +7 -7
data/docs/css/_offcanvas.scss +16 -16
data/docs/css/docs.scss +1 -3
data/docs/index.html.erb +29 -29
data/docs/layout.html.erb +5 -5
data/docs/media-queries.html.erb +3 -3
data/docs/rails.html.erb +2 -1
data/docs/sass.html.erb +188 -146
data/docs/support.html.erb +2 -2
data/foundation.gemspec +1 -0
data/js/foundation/foundation.abide.js +5 -5
data/js/foundation/foundation.alerts.js +9 -4
data/js/foundation/foundation.clearing.js +2 -2
data/js/foundation/foundation.dropdown.js +11 -5
data/js/foundation/foundation.forms.js +51 -28
data/js/foundation/foundation.joyride.js +7 -5
data/js/foundation/foundation.js +25 -1
data/js/foundation/foundation.magellan.js +3 -2
data/js/foundation/foundation.orbit.js +78 -58
data/js/foundation/foundation.placeholder.js +424 -177
data/js/foundation/foundation.reveal.js +39 -16
data/js/foundation/foundation.section.js +62 -32
data/js/foundation/foundation.tooltips.js +3 -2
data/js/foundation/foundation.topbar.js +139 -69
data/lib/foundation/generators/templates/application.html.erb +2 -1
data/lib/foundation/version.rb +1 -1
data/lib/zurb-foundation.rb +12 -0
data/package.json +4 -3
data/scss/foundation/_variables.scss +183 -159
data/scss/foundation/components/_alert-boxes.scss +8 -8
data/scss/foundation/components/_block-grid.scss +1 -1
data/scss/foundation/components/_breadcrumbs.scss +3 -3
data/scss/foundation/components/_button-groups.scss +2 -2
data/scss/foundation/components/_buttons.scss +20 -20
data/scss/foundation/components/_custom-forms.scss +19 -14
data/scss/foundation/components/_dropdown-buttons.scss +8 -8
data/scss/foundation/components/_dropdown.scss +4 -4
data/scss/foundation/components/_flex-video.scss +2 -2
data/scss/foundation/components/_forms.scss +28 -18
data/scss/foundation/components/_global.scss +43 -18
data/scss/foundation/components/_grid-5.scss +4 -4
data/scss/foundation/components/_grid.scss +6 -4
data/scss/foundation/components/_inline-lists.scss +3 -3
data/scss/foundation/components/_joyride.scss +10 -10
data/scss/foundation/components/_keystrokes.scss +2 -2
data/scss/foundation/components/_labels.scss +2 -2
data/scss/foundation/components/_orbit.scss +58 -44
data/scss/foundation/components/_pagination.scss +6 -6
data/scss/foundation/components/_panels.scss +7 -4
data/scss/foundation/components/_pricing-tables.scss +10 -10
data/scss/foundation/components/_progress-bars.scss +3 -3
data/scss/foundation/components/_reveal.scss +5 -5
data/scss/foundation/components/_section.scss +21 -21
data/scss/foundation/components/_side-nav.scss +3 -3
data/scss/foundation/components/_split-buttons.scss +7 -7
data/scss/foundation/components/_sub-nav.scss +26 -10
data/scss/foundation/components/_switch.scss +15 -11
data/scss/foundation/components/_tables.scss +6 -6
data/scss/foundation/components/_thumbs.scss +2 -4
data/scss/foundation/components/_tooltips.scss +4 -4
data/scss/foundation/components/_top-bar.scss +77 -39
data/scss/foundation/components/_type.scss +25 -23
data/scss/foundation/components/_visibility.scss +28 -28
data/scss/normalize.scss +22 -14
data/spec/js/SectionSpec.js +39 -0
data/spec/js/helpers/SectionSpecHelper.js +22 -0
data/spec/js/helpers/SpecHelper.js +19 -0
metadata +32 -25
data/.rbenv-version +0 -1

data/docs/components/reveal.html.erb CHANGED

@@ -21,7 +21,7 @@
       <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>
+        <p>Reveal modals are easy to build.  They should live right above your closing <code>body</code> tag, but if they are nested within the document, Reveal will temporarily relocate them while open to ensure proper positioning. Follow the markup below to get started:</p>
 <%= code_example '
 <div id="myModal" class="reveal-modal">
@@ -199,13 +199,13 @@ $reveal-overlay-bg-old: #000;
 $reveal-modal-bg: #fff;
 $reveal-position-top: 50px;
 $reveal-default-width: 80%;
-$reveal-modal-padding: emCalc(20);
+$reveal-modal-padding: em-calc(20);
 $reveal-box-shadow: 0 0 10px rgba(#000,.4);
 /* We use these to style the reveal close button */
-$reveal-close-font-size: emCalc(22);
-$reveal-close-top: emCalc(8);
-$reveal-close-side: emCalc(11);
+$reveal-close-font-size: em-calc(22);
+$reveal-close-top: em-calc(8);
+$reveal-close-side: em-calc(11);
 $reveal-close-color: #aaa;
 $reveal-close-weight: bold;
@@ -217,15 +217,38 @@ $reveal-border-color: #666;
 $reveal-modal-class: "reveal-modal";
 $close-reveal-modal-class: "close-reveal-modal";', :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>_variables.scss</strong>.</p>
+        <p><strong>Note:</strong> <code>em-calc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
         <hr>
         <h3>Using the JavaScript</h3>
-        <p>You don't need this JS to create reveal modals with Foundation. The only reason you'll need to include <code>foundation.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>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>
+        <div class="panel">
+          Before you can use Reveal you'll want to verify that both jQuery (or Zepto) and <code>foundation.js</code> are available on your page. You can refer to the <a href="../javascript.html">javascript documentation</a> on setting that up.
+        </div>
-        <p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
+        <p>Just add <code>foundation.reveal.js</code> AFTER the <code>foundation.js</code> file. Your markup should look something like this:</p>
+        <%= code_example '
+<body>
+  ...
+  <script>
+      document.write(\'<script src=/js/vendor/\'
+        + (\'__proto__\' in {} ? \'zepto\' : \'jquery\')
+        + \'.js><\/script>\');
+    </script>
+  <script src="js/foundation/foundation.js"></script>
+  <script src="js/foundation/foundation.reveal.js"></script>
+  <!-- Other JS plugins can be included here -->
+  <script>
+    $(document).foundation();
+  </script>
+</body>
+        ', :html %>
         <p>Required Foundation Library: <code>foundation.reveal.js</code></p>
         <h5>Optional JavaScript Configuration</h5>

data/docs/components/section.html.erb CHANGED

@@ -75,7 +75,7 @@
                 <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
                 <div class="content" data-slug="panel2" data-section-content>
                   <div class="section-container auto" data-section data-options="deep_linking: true;">
-                    <section data-section-region>
+                    <section class="active" data-section-region>
                       <p class="title" data-section-title><a href="#panel2nested1">Section 1</a></p>
                       <div class="content" data-slug="nested1" 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>
@@ -166,7 +166,7 @@
 <%= code_example '
 <div class="section-container auto" data-section>
-  <section>
+  <section class="active">
     <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>
@@ -180,7 +180,7 @@
   </section>
 </div>', :html %>
 <div class="section-container auto" data-section>
-  <section>
+  <section class="active">
     <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>
@@ -213,7 +213,7 @@
         <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>
+  <section class="active">
     <p class="title" data-section-title><a href="#">Section 1</a></p>
     <div class="content" data-section-content>
       <p>Content of section 1.</p>
@@ -227,7 +227,7 @@
   </section>
 </div>', :html %>
         <div class="section-container accordion" data-section="accordion">
-          <section>
+          <section class="active">
             <p class="title" data-section-title><a href="#">Section 1</a></p>
             <div class="content" data-section-content>
               <p>Content of section 1.</p>
@@ -245,7 +245,7 @@
         <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>
+  <section class="active">
     <p class="title" data-section-title><a href="#">Section 1</a></p>
     <div class="content" data-section-content>
       <p>Content of section 1.</p>
@@ -260,7 +260,7 @@
 </div>', :html %>
         <div class="section-container tabs" data-section="tabs">
-          <section>
+          <section class="active">
             <p class="title" data-section-title><a href="#">Section 1</a></p>
             <div class="content" data-section-content>
               <p>Content of section 1.</p>
@@ -279,7 +279,7 @@
 <%= code_example '
 <div class="section-container vertical-tabs" data-section="vertical-tabs">
-  <section>
+  <section class="active">
     <p class="title" data-section-title><a href="#">Section 1</a></p>
     <div class="content" data-section-content>
       <p>Content of section 1.</p>
@@ -300,7 +300,7 @@
 </div>', :html %>
         <div class="section-container vertical-tabs" data-section="vertical-tabs">
-          <section>
+          <section class="active">
             <p class="title" data-section-title><a href="#">Section 1</a></p>
             <div class="content" data-section-content>
               <p>Content of section 1.</p>
@@ -464,7 +464,7 @@
 <%= code_example '
 <div class="section-container auto" data-section data-options="deep_linking: true">
-  <section>
+  <section class="active">
     <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>
@@ -482,7 +482,7 @@
         <p>You can infinitely nest Section elements to create more complicated Section layouts.</p>
         <div class="section-container auto" data-section>
-          <section>
+          <section class="active">
             <p class="title"><a href="#section1">ROOT: Section 1</a></p>
             <div class="content" data-slug="section1">
               <p>Content 1 Summary Paragraphs</p>
@@ -511,7 +511,7 @@
         </div>
 <%= code_example '
 <div class="section-container auto" data-section>
-  <section>
+  <section class="active">
     <p class="title"><a href="#section1">ROOT: Section 1</a></p>
     <div class="content" data-slug="section1">
       <p>Content 1 Summary Paragraphs</p>
@@ -594,7 +594,7 @@ $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 */
+/* Give the titles some padding, can be any px or em-calc() value */
 $title-padding: $section-padding
 /* give the titles a color, any color value */
@@ -637,7 +637,7 @@ $section-border-color: $section-border-color', :css %>
         <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>
+  <section class="active">
     <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>
@@ -663,7 +663,7 @@ $section-border-color: $section-border-color', :css %>
 }', :sass %>
         <div class="section-auto-sample" data-section="auto">
-          <section>
+          <section class="active">
             <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>
@@ -683,7 +683,7 @@ $section-border-color: $section-border-color', :css %>
         <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>
+  <section class="active">
     <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>
@@ -704,7 +704,7 @@ $section-border-color: $section-border-color', :css %>
 }', :sass %>
         <div class="section-auto-sample-accordion" data-section="accordion">
-          <section>
+          <section class="active">
             <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>
@@ -724,7 +724,7 @@ $section-border-color: $section-border-color', :css %>
         <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>
+  <section class="active">
     <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>
@@ -745,7 +745,7 @@ $section-border-color: $section-border-color', :css %>
 }', :sass %>
         <div class="section-auto-sample-tabs" data-section="tabs">
-          <section>
+          <section class="active">
             <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>
@@ -765,7 +765,7 @@ $section-border-color: $section-border-color', :css %>
         <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>
+  <section class="active">
     <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>
@@ -792,7 +792,7 @@ $section-border-color: $section-border-color', :css %>
 }', :sass %>
         <div class="section-auto-sample-vtabs" data-section="vertical-tabs">
-          <section>
+          <section class="active">
             <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>
@@ -923,7 +923,7 @@ $section-border-color: $section-border-color', :css %>
         <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>
+  <section class="active">
     <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>
@@ -944,7 +944,7 @@ $section-border-color: $section-border-color', :css %>
 }', :sass %>
         <div class="section-auto-sample-custom" data-section="tabs">
-          <section>
+          <section class="active">
             <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>
@@ -965,8 +965,8 @@ $section-border-color: $section-border-color', :css %>
 $include-html-section-classes: $include-html-classes;
 /* We use these to set padding and hover factor */
-$section-title-padding: emCalc(15);
-$section-content-padding: emCalc(15);
+$section-title-padding: em-calc(15);
+$section-content-padding: em-calc(15);
 $section-function-factor: 10%;
 /* These style the titles */
@@ -983,35 +983,58 @@ $section-border-style: solid;
 $section-border-color: #ccc;
 /* Font controls */
-$section-font-size: emCalc(14);
+$section-font-size: em-calc(14);
 /* Control the color of the background and some size options */
 $section-content-bg: #fff;
-$section-vertical-nav-min-width: emCalc(200);
-$section-vertical-tabs-title-width: emCalc(200);
-$section-bottom-margin: emCalc(20);
+$section-vertical-nav-min-width: em-calc(200);
+$section-vertical-tabs-title-width: em-calc(200);
+$section-bottom-margin: em-calc(20);
 $title-selector: ".title";
 $content-selector: ".content";
 $active-region-selector: ".active";
 ', :css %>
-    <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>.</p>
+    <p><strong>Note:</strong> <code>em-calc();</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>foundation.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>
+        <div class="panel">
+          Before you can use sections you'll want to verify that both jQuery (or Zepto) and <code>foundation.js</code> are available on your page. You can refer to the <a href="../javascript.html">javascript documentation</a> on setting that up.
+        </div>
+        <p>Just add <code>foundation.section.js</code> AFTER the <code>foundation.js</code> file. Your markup should look something like this:</p>
+        <%= code_example '
+<body>
+  ...
-        <p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
+  <script>
+      document.write(\'<script src=/js/vendor/\'
+        + (\'__proto__\' in {} ? \'zepto\' : \'jquery\')
+        + \'.js><\/script>\');
+    </script>
+  <script src="js/foundation/foundation.js"></script>
+  <script src="js/foundation/foundation.section.js"></script>
+  <!-- Other JS plugins can be included here -->
+  <script>
+    $(document).foundation();
+  </script>
+</body>
+        ', :html %>
         <p>Required Foundation Library: <code>foundation.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>
+  <section class="active">
     <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
     <div class="content" data-section-content>
       <ul class="side-nav">
@@ -1052,10 +1075,11 @@ $('#myModal').on('opened', function () {
     <%= code_example "
 {
-  deep_linking: false,
-  one_up: true,
-  rtl: false,
-  callback: function (){}
+  deep_linking: false, // Allows for querystring hashtag direct linking
+  one_up: true, // Ensures the first section is shown on initial view
+  multi_expand: false, // For accordion, allows more than one section to be expanded at the same time.
+  rtl: false, // Flags for right-to-left behavior
+  callback: function (){} // Called when a section is selected.
 }", :js %>
       </div>

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

@@ -99,17 +99,17 @@ $link-color: $side-nav-link-color
 $include-html-nav-classes: $include-html-classes;
 /* We use this to control padding. */
-$side-nav-padding: emCalc(14, 0);
+$side-nav-padding: em-calc(14 0);
 /* We use these to control list styles. */
 $side-nav-list-type: none;
 $side-nav-list-position: inside;
-$side-nav-list-margin: emCalc(0, 0, 7, 0);
+$side-nav-list-margin: em-calc(0 0 7 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(14);
+$side-nav-font-size: em-calc(14);
 $side-nav-font-weight: bold;
 /* We use these to control border styles */
@@ -117,7 +117,7 @@ $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>_variables.scss</strong>.</p>
+        <p><strong>Note:</strong> <code>em-calc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
       </div>
     </div>

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

@@ -20,7 +20,7 @@
           <li><a href="#">This is another</a></li>
           <li><a href="#">Yet another</a></li>
         </ul>
         <a href="#" class="small secondary radius button split">Split Button <span data-dropdown="drop2"></span></a><br>
         <ul id="drop2" class="f-dropdown" data-dropdown-content>
           <li><a href="#">This is a link</a></li>
@@ -34,7 +34,7 @@
           <li><a href="#">This is another</a></li>
           <li><a href="#">Yet another</a></li>
         </ul>
         <a href="#" class="large success button split">Split Button <span data-dropdown="drop4"></span></a><br>
         <ul id="drop4" class="f-dropdown" data-dropdown-content>
           <li><a href="#">This is a link</a></li>
@@ -147,47 +147,69 @@ $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-default-float-tny: emCalc(-5);
+$split-button-pip-default-float-tny: em-calc(-5);
 /* 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-default-float-sml: emCalc(-9);
+$split-button-pip-default-float-sml: em-calc(-9);
 /* 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(3);
+$split-button-pip-size-med: $button-med - em-calc(3);
 $split-button-pip-top-med: $button-med * 1.5;
-$split-button-pip-default-float-med: emCalc(-9);
+$split-button-pip-default-float-med: em-calc(-9);
 /* 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(6);
-$split-button-pip-top-lrg: $button-lrg + emCalc(5);
-$split-button-pip-default-float-lrg: emCalc(-9);
+$split-button-pip-size-lrg: $button-lrg - em-calc(6);
+$split-button-pip-top-lrg: $button-lrg + em-calc(5);
+$split-button-pip-default-float-lrg: em-calc(-9);
 ', :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>_variables.scss</strong>.</p>
+        <p><strong>Note:</strong> <code>em-calc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
         <hr>
         <h3>Using the JavaScript</h3>
-        <p>You don't need this 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>
+        <div class="panel">
+          Before you can use split buttons you'll want to verify that both jQuery (or Zepto) and <code>foundation.js</code> are available on your page. You can refer to the <a href="../javascript.html">javascript documentation</a> on setting that up.
+        </div>
+        <p>Just add <code>foundation.dropdown.js</code> AFTER the <code>foundation.js</code> file. Your markup should look something like this:</p>
+        <%= code_example '
+<body>
+  ...
+  <script>
+      document.write(\'<script src=/js/vendor/\'
+        + (\'__proto__\' in {} ? \'zepto\' : \'jquery\')
+        + \'.js><\/script>\');
+    </script>
+  <script src="js/foundation/foundation.js"></script>
+  <script src="js/foundation/foundation.dropdown.js"></script>
+  <!-- Other JS plugins can be included here -->
-        <p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
+  <script>
+    $(document).foundation();
+  </script>
+</body>
+        ', :html %>
         <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 <span data-dropdown="drop1"></span></a><br>
+<a href="#" class="button split">Dropdown Button <span data-dropdown="drop1"></span></a>
 <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>
@@ -208,7 +230,7 @@ $split-button-pip-default-float-lrg: emCalc(-9);
         <p>Dropdown button options can only be passed in during initialization at this time.</p>
-<%= code_example "{
+<%= code_example "{
   // specify the class used for active sections
   activeClass: 'open'
 }", :js %>