zurb-foundation 4.2.3 → 4.3.0

data/docs/components/alert-boxes.html.erb

@@ -56,7 +56,7 @@
         <p>We've included SCSS mixins used to style alert boxes. To use these mixins, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_variables.scss">_variables.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_alert-boxes.scss">_alert-boxes.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/variables", "foundation/components/global", "foundation/components/alerts";
+@import "foundation/variables", "foundation/components/global", "foundation/components/alert-boxes";
 ', :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>
@@ -144,15 +144,17 @@
 
         <h5>Default SCSS Variables</h5>
 <%= code_example '
+$include-html-alert-classes: $include-html-classes;
+
 /* We use this to control alert padding. */
-$alert-padding-top: emCalc(11px);
-$alert-padding-left: $alert-padding-top;
-$alert-padding-right: $alert-padding-top + emCalc(10px);
-$alert-padding-bottom: $alert-padding-top + emCalc(1px);
+$alert-padding-top: emCalc(11);
+$alert-padding-default-float: $alert-padding-top;
+$alert-padding-opposite-direction: $alert-padding-top + emCalc(10);
+$alert-padding-bottom: $alert-padding-top + emCalc(1);
 
 /* We use these to control text style. */
 $alert-font-weight: bold;
-$alert-font-size: emCalc(14px);
+$alert-font-size: emCalc(14);
 $alert-font-color: #fff;
 $alert-font-color-alt: darken($secondary-color, 60%);
 
@@ -163,18 +165,19 @@ $alert-function-factor: 10%;
 $alert-border-style: solid;
 $alert-border-width: 1px;
 $alert-border-color: darken($primary-color, $alert-function-factor);
-$alert-bottom-margin: emCalc(20px);
+$alert-bottom-margin: emCalc(20);
 
 /* We use these to style the close buttons */
 $alert-close-color: #333;
-$alert-close-position: emCalc(5px);
-$alert-close-font-size: emCalc(22px);
+$alert-close-position: emCalc(5);
+$alert-close-font-size: emCalc(22);
 $alert-close-opacity: 0.3;
 $alert-close-opacity-hover: 0.5;
 $alert-close-padding: 5px 4px 4px;
 
 /* We use this to control border radius */
 $alert-radius: $global-radius;
+
 ', :css %>
 
         <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>.</p>

data/docs/components/block-grid.html.erb

@@ -111,7 +111,7 @@ $base-style: true
 <%= code_example '
 /* We use this to control the maximum blocks and spacing */
 $block-grid-elements: 12;
-$block-grid-default-spacing: emCalc(20px);
+$block-grid-default-spacing: emCalc(20);
 
 /* Enables media queries for block-grid classes. Set to false if writing semantic HTML. */
 $block-grid-media-queries: true

data/docs/components/breadcrumbs.html.erb

@@ -116,12 +116,14 @@
 
         <h5>Default SCSS Variables</h5>
 <%= code_example '
-/* We use this to set the background color for the breadcrumb container */
-$crumb-bg: lighten($secondaryColor, 5%);
+$include-html-nav-classes: $include-html-classes;
+
+/* We use this to set the background color for the breadcrumb container. */
+$crumb-bg: lighten($secondary-color, 5%);
 
 /* We use these to set the padding around the breadcrumbs. */
-$crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px);
-$crumb-side-padding: emCalc(12px);
+$crumb-padding: emCalc(9, 14, 9);
+$crumb-side-padding: emCalc(12);
 
 /* We use these to control border styles. */
 $crumb-function-factor: 10%;
@@ -131,7 +133,7 @@ $crumb-border-color: darken($crumb-bg, $crumb-function-factor);
 $crumb-radius: $global-radius;
 
 /* We use these to set various text styles for breadcrumbs. */
-$crumb-font-size: emCalc(11px);
+$crumb-font-size: emCalc(11);
 $crumb-font-color: $primary-color;
 $crumb-font-color-current: #333;
 $crumb-font-color-unavailable: #999;

data/docs/components/button-groups.html.erb

@@ -212,8 +212,10 @@ $float: left
 
         <h5>Default SCSS Variables</h5>
 <%= code_example '
-/* We use this to set the margin below button groups. */
-$button-bar-margin-right: emCalc(10px);
+$include-html-button-classes: $include-html-classes;
+
+/* Sets the margin for the right side by default, and the left margin if right-to-left direction is used *.
+$button-bar-margin-opposite: emCalc(10);
 ', :css %>
 
         <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>.</p>

data/docs/components/buttons.html.erb

@@ -173,23 +173,26 @@ $active: true
 
         <h5>Default SCSS Variables</h5>
 <%= code_example '
+$include-html-button-classes: $include-html-classes;
+
 /* We use these to build padding for buttons. */
-$button-med: emCalc(12px);
-$button-tny: emCalc(7px);
-$button-sml: emCalc(9px);
-$button-lrg: emCalc(16px);
+$button-med: emCalc(12);
+$button-tny: emCalc(7);
+$button-sml: emCalc(9);
+$button-lrg: emCalc(16);
 
 /* We use this to control the display property. */
 $button-display: inline-block;
-$button-margin-bottom: emCalc(20px);
+$button-margin-bottom: emCalc(20);
 
 /* We use these to control button text styles. */
+$button-font-family: inherit;
 $button-font-color: #fff;
 $button-font-color-alt: #333;
-$button-font-med: emCalc(16px);
-$button-font-tny: emCalc(11px);
-$button-font-sml: emCalc(13px);
-$button-font-lrg: emCalc(20px);
+$button-font-med: emCalc(16);
+$button-font-tny: emCalc(11);
+$button-font-sml: emCalc(13);
+$button-font-lrg: emCalc(20);
 $button-font-weight: bold;
 $button-font-align: center;
 
@@ -203,6 +206,7 @@ $button-border-color: darken($primary-color, $button-function-factor);
 
 /* We use this to set the default radius used throughout the core. */
 $button-radius: $global-radius;
+$button-round: $global-rounded;
 
 /* We use this to set default opacity for disabled buttons. */
 $button-disabled-opacity: 0.6;

data/docs/components/clearing.html.erb

@@ -99,6 +99,8 @@
         <h3>Available SCSS Variables</h3>
         <p>We opted not to create mixins for this plugin because it relies on classes in the JS to work. These variables should give you the control you need to change styles as you see fit:</p>
 <%= code_example '
+$include-html-clearing-classes: $include-html-classes;
+
 /* We use these to set the background colors for parts of Clearing. */
 $clearing-bg: #111;
 $clearing-caption-bg: $clearing-bg;

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

@@ -15,10 +15,39 @@
       <div class="large-12 columns">
 
         <a href="#" data-dropdown="drop" class="tiny button dropdown">Dropdown Button</a><br>
+        <ul id="drop" data-dropdown-content 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>
+
         <a href="#" data-dropdown="drop2" class="small secondary radius button dropdown">Dropdown Button</a><br>
+        <ul id="drop2" data-dropdown-content 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>
+
         <a href="#" data-dropdown="drop3" class="button alert round dropdown">Dropdown Button</a><br>
+        <ul id="drop3" data-dropdown-content 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>
+
         <a href="#" data-dropdown="drop4" class="large success button dropdown">Dropdown Button</a><br>
+        <ul id="drop4" data-dropdown-content 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>
+
         <a href="#" data-dropdown="drop5" class="large button dropdown expand">Dropdown Button</a><br>
+        <ul id="drop5" data-dropdown-content 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>
 
         <hr>
 
@@ -78,6 +107,11 @@
 ', :css %>
 
         <a href="" data-dropdown="drop7 "class="dropdown button">Default Dropdown Button</a>
+        <ul id="drop7" data-dropdown-content 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>
 
         <p>There are also <strong>three options</strong> you can customize on the fly when writing this mixin. These control things like: background color, pip color and base styles. Setting any of these options to <strong>false</strong> will not include the styles.</p>
 
@@ -113,9 +147,16 @@ $base-style: true
 ', :css %>
 
     <a href="#" data-dropdown="drop6" class="customized-dropdown-docs">Button Base, Size, Style &amp; Shine</a>
+    <ul id="drop6" data-dropdown-content 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>
 
         <h5>Default SCSS Variables</h5>
 <%= code_example '
+$include-html-button-classes: $include-html-classes;
+
 /* We use these to set the color of the pip in dropdown buttons */
 $dropdown-button-pip-color: #fff;
 $dropdown-button-pip-color-alt: #333;
@@ -123,26 +164,26 @@ $dropdown-button-pip-color-alt: #333;
 /* We use these to style tiny dropdown buttons */
 $dropdown-button-padding-tny: $button-tny * 5;
 $dropdown-button-pip-size-tny: $button-tny;
-$dropdown-button-pip-right-tny: $button-tny * 2;
-$dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px);
+$dropdown-button-pip-opposite-tny: $button-tny * 2;
+$dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1);
 
 /* We use these to style small dropdown buttons */
 $dropdown-button-padding-sml: $button-sml * 5;
 $dropdown-button-pip-size-sml: $button-sml;
-$dropdown-button-pip-right-sml: $button-sml * 2;
-$dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(2px);
+$dropdown-button-pip-opposite-sml: $button-sml * 2;
+$dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1);
 
 /* We use these to style medium dropdown buttons */
-$dropdown-button-padding-med: $button-med * 4 + emCalc(3px);
-$dropdown-button-pip-size-med $button-med - emCalc(3px);
-$dropdown-button-pip-right-med: $button-med * 2;
-$dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px);
+$dropdown-button-padding-med: $button-med * 4 + emCalc(3);
+$dropdown-button-pip-size-med: $button-med - emCalc(3);
+$dropdown-button-pip-opposite-med: $button-med * 2;
+$dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2);
 
 /* We use these to style large dropdown buttons */
 $dropdown-button-padding-lrg: $button-lrg * 4;
-$dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px);
-$dropdown-button-pip-right-lrg: $button-lrg + emCalc(12px);
-$dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px);
+$dropdown-button-pip-size-lrg: $button-lrg - emCalc(6);
+$dropdown-button-pip-opposite-lrg: $button-lrg + emCalc(12);
+$dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3);
 ', :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>
@@ -170,6 +211,11 @@ $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px);
 ', :html %>
 
         <a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button</a><br>
+        <ul id="drop1" data-dropdown-content 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>
 
         <p>Required Foundation Library: <code>foundation.dropdown.js</code></p>
 
@@ -182,7 +228,7 @@ $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px);
 <%= code_example "
 {
   activeClass: 'open'
-}", :json %>
+}", :js %>
       </div>
     </div>
 
@@ -190,46 +236,4 @@ $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px);
   <div class="large-3 pull-9 columns">
     <%= render "_sidebar-components.html.erb" %>
   </div>
-</div>
-
-
-<ul id="drop" data-dropdown-content 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>
-<ul id="drop1" data-dropdown-content 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>
-<ul id="drop2" data-dropdown-content 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>
-<ul id="drop3" data-dropdown-content 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>
-<ul id="drop4" data-dropdown-content 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>
-<ul id="drop5" data-dropdown-content 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>
-<ul id="drop6" data-dropdown-content 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>
-<ul id="drop7" data-dropdown-content 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>
+</div>

data/docs/components/dropdown.html.erb

@@ -10,7 +10,20 @@
         <h4 class="subheader">In Foundation 4, we wanted to rid our codebase of many different dropdowns within various UI elements. So we created a universal dropdown plugin that will attach dropdowns or popovers next to anything!</h4>
 
         <a href="#" class="button" data-dropdown="tinyDrop">Link Dropdown &raquo;</a>
+        <ul id="tinyDrop" 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>
+
         <a href="#" class="button" data-dropdown="contentDrop">Content Dropdown &raquo;</a>
+        <div id="contentDrop" class="f-dropdown content medium" data-dropdown-content>
+          <h4>Title</h4>
+          <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
+          <img src="../img/demos/demo1.jpg">
+          <p>More test.</p>
+          <a href="#" class="button">Button</a>
+        </div>
 
         <hr>
       </div>
@@ -24,14 +37,13 @@
 
 <%= code_example '
 <a href="#" data-dropdown="drop1">Has Dropdown</a>
-<a href="#" data-dropdown="drop2">Has Content Dropdown</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>
   <li><a href="#">Yet another</a></li>
 </ul>
 
+<a href="#" data-dropdown="drop2">Has Content Dropdown</a>
 <ul id="drop2" class="f-dropdown content" data-dropdown-content>
   <li><a href="#">This is a link</a></li>
   <li><a href="#">This is another</a></li>
@@ -39,9 +51,19 @@
 </ul>
 ', :html %>
 
-        <p><a href="#" data-dropdown="drop1">Has Dropdown</a> | <a href="#" data-dropdown="drop2">Has Content Dropdown</a></p>
+        <p>
+          <a href="#" data-dropdown="drop1">Has Dropdown</a> | <a href="#" data-dropdown="drop2">Has Content Dropdown</a>
+          <ul id="drop1" data-dropdown-content 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>
+          <div id="drop2" data-dropdown-content class="f-dropdown content">
+            <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
+          </div>
+        </p>
 
-        <p>You'll notice that <code>data-dropdown="drop1"</code> and <code>id="drop1"</code> have the same value. This is what tells the dropdown plugin where to look to find the position to attach the dropdown.</p>
+        <p>You'll notice that <code>data-dropdown="drop1"</code> and <code>id="drop1"</code> have the same value. This is what tells the dropdown plugin where to look to find the position to attach the dropdown. It is best to place your dropdown and target element <strong>within the same offset parent</strong>.</p>
 
         <p>Available class options:</p>
         <ul class="disc">
@@ -120,6 +142,8 @@ $max-width: $f-dropdown-max-width
         <h5>Default SCSS Variables</h5>
 
 <%= code_example '
+$include-html-button-classes: $include-html-classes;
+
 /* We use these to controls height and width styles. */
 $f-dropdown-max-width: 200px;
 $f-dropdown-height: auto;
@@ -142,21 +166,21 @@ $f-dropdown-triangle-side-offset: 10px;
 /* We use these to control styles for the list elements. */
 $f-dropdown-list-style: none;
 $f-dropdown-font-color: #555;
-$f-dropdown-font-size: emCalc(14px);
-$f-dropdown-list-padding: emCalc(5px) emCalc(10px);
-$f-dropdown-line-height: emCalc(18px);
+$f-dropdown-font-size: emCalc(14);
+$f-dropdown-list-padding: emCalc(5, 10);
+$f-dropdown-line-height: emCalc(18);
 $f-dropdown-list-hover-bg: #eeeeee;
 $dropdown-mobile-default-float: 0;
 
 /* We use this to control the styles for when the dropdown has custom content. */
-$f-dropdown-content-padding: emCalc(20px);', :css %>
+$f-dropdown-content-padding: emCalc(20);', :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>
 
       <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>You'll need to include <code>foundation.dropdown.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>
 
@@ -166,8 +190,7 @@ $f-dropdown-content-padding: emCalc(20px);', :css %>
 
       <p>Dropdown options can only be passed in during initialization at this time.</p>
 
-    <%= code_example "
-{
+    <%= code_example "{
   // specify the class used for active dropdowns
   activeClass: 'open'
 }", :js %>
@@ -180,25 +203,4 @@ $f-dropdown-content-padding: emCalc(20px);', :css %>
   <div class="large-3 pull-9 columns">
     <%= render "_sidebar-components.html.erb" %>
   </div>
-</div>
-
-<ul id="tinyDrop" 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>
-<div id="contentDrop" class="f-dropdown content medium" data-dropdown-content>
-  <h4>Title</h4>
-  <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
-  <img src="../img/demos/demo1.jpg">
-  <p>More test.</p>
-  <a href="#" class="button">Button</a>
-</div>
-<ul id="drop1" data-dropdown-content 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>
-<div id="drop2" data-dropdown-content class="f-dropdown content">
-  <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
 </div>