zurb-foundation 4.3.0 → 4.3.1

data/docs/components/labels.html.erb

@@ -46,7 +46,9 @@
         <p>We've included SCSS mixins used to style labels. To use the mixin, 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/_labels.scss">_labels.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/labels";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/labels";
 ', :css %>
 
         <h5>Quick Mixin</h5>

data/docs/components/pagination.html.erb

@@ -91,7 +91,9 @@
         <p>We've included SCSS mixins used to style pagination. To use the mixin, 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/_pagination.scss">_pagination.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/pagination";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/pagination";
 ', :css %>
 
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like to the unordered list. The interior classes come with the mixin, just make sure you follow our markup structure:</p>

data/docs/components/panels.html.erb

@@ -55,7 +55,9 @@
         <p>We've included SCSS mixins used to style panels so that you can code smarter. To use the mixin, 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/_panels.scss">_panels.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/panels";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/panels";
 ', :css %>
 
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like to the <code>&lt;div&gt;</code>.</p>

data/docs/components/pricing-tables.html.erb

@@ -61,7 +61,9 @@
         <p>We've included SCSS mixins used to style pricing tables so that you can code how you want to. To use the mixin, 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/_pricing-tables.scss">_pricing-tables.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/pricing-tables";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/pricing-tables";
 ', :css %>
 
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like with the <code>&lt;ul&gt;</code> and the list items inside it.</p>

data/docs/components/progress-bars.html.erb

@@ -49,7 +49,9 @@
         <p>We've included SCSS mixins used to style progress bars. To use the mixin, 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/_progress-bars.scss">_progress-bars.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/progress-bars";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/progress-bars";
 ', :css %>
 
         <h5>Container Mixin</h5>

data/docs/components/reveal.html.erb

@@ -42,6 +42,12 @@
 
         <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected reveal from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
 
+        <p>The background element is appended to the end of the <code>body</code> element. If you would like to override this functionality you can add your own Reveal background anywhere on the page; this will allow you to style if if your scope is smaller than the body of the page.</p>
+
+<%= code_example '
+<div class="reveal-modal-bg" style="display: none"></div>
+', :html %>
+
         <h5>Firing a Reveal Modal</h5>
         <p>To launch a modal, just add a <code>data-reveal-id</code> to the object which you want to fire the modal when clicked. The <code>data-reveal-id</code> needs to match the <code>id</code> of your reveal.</p>
 
@@ -106,7 +112,9 @@ $('#myModal').foundation('reveal', 'open', {
         <p>We've included SCSS mixins used to style reveal. 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/_breadcrumbs.scss">_reveal.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/reveal";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/reveal";
 ', :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>

data/docs/components/section.html.erb

@@ -660,7 +660,7 @@ $section-border-color: $section-border-color', :css %>
     @include section-container(false,$section-type:tabs);
     & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
   }
-}', :css %>
+}', :sass %>
 
         <div class="section-auto-sample" data-section="auto">
           <section>
@@ -701,7 +701,7 @@ $section-border-color: $section-border-color', :css %>
 .section-auto-sample-accordion {
   @include section-container($section-type:accordion);
   & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
-}', :css %>
+}', :sass %>
 
         <div class="section-auto-sample-accordion" data-section="accordion">
           <section>
@@ -742,7 +742,7 @@ $section-border-color: $section-border-color', :css %>
 .section-auto-sample-tabs {
   @include section-container($section-type:tabs);
   & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
-}', :css %>
+}', :sass %>
 
         <div class="section-auto-sample-tabs" data-section="tabs">
           <section>
@@ -789,7 +789,7 @@ $section-border-color: $section-border-color', :css %>
     @include section-container($section-type:vertical-tabs);
     & > section { @include section($section-type:vertical-tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
   }
-}', :css %>
+}', :sass %>
 
         <div class="section-auto-sample-vtabs" data-section="vertical-tabs">
           <section>
@@ -847,7 +847,7 @@ $section-border-color: $section-border-color', :css %>
     @include section-container($section-type:vertical-nav);
     & > section { @include section($section-type:vertical-nav, $title-selector:".title-sample", $content-selector:".content-sample"); }
   }
-}', :css %>
+}', :sass %>
 
         <div class="nav-container">
           <nav>
@@ -900,7 +900,7 @@ $section-border-color: $section-border-color', :css %>
     @include section-container($section-type:horizontal-nav);
     & > section { @include section($section-type:horizontal-nav, $title-selector:".title-sample", $content-selector:".content-sample"); }
   }
-}', :css %>
+}', :sass %>
 
         <div class="section-auto-sample-hnav" data-section="horizontal-nav">
           <section>
@@ -941,7 +941,7 @@ $section-border-color: $section-border-color', :css %>
 .section-auto-sample-custom {
   @include section-container($section-type:tabs);
   & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample", $title-padding: 10px 50px, $title-color:#000, $title-bg:pink, $title-bg-hover:darken(pink,5%), $title-bg-active: #fff, $title-color-active: darken(pink,10%)); }
-}', :css %>
+}', :sass %>
 
         <div class="section-auto-sample-custom" data-section="tabs">
           <section>

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

@@ -56,7 +56,9 @@
         <p>We've included SCSS mixins used to style side nav. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/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/_side-nav.scss">_side-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/variables", "foundation/components/global", "foundation/components/side-nav";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/side-nav";
 ', :css %>
 
         <h5>Quick Mixin</h5>

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

@@ -79,7 +79,10 @@
         <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="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/_buttons.scss">_buttons.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/_split-buttons.scss">_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/variables", "foundation/components/global", "foundation/components/buttons", "foundation/components/split-buttons";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/buttons";
+@import "foundation/components/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>

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

@@ -50,7 +50,9 @@
         <p>We've included SCSS mixins used to style sub-nav. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/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/_sub-nav.scss">_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/variables", "foundation/components/global", "foundation/components/sub-nav";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/sub-nav";
 ', :css %>
 
         <h5>Quick Mixin</h5>

data/docs/components/thumbnails.html.erb

@@ -34,7 +34,9 @@
         <p>We've included SCSS mixins used to style labels. To use the mixin, 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/_thumbs.scss">_thumbs.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/thumbs";
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/thumbs";
 ', :css %>
 
         <h5>Quick Mixin</h5>

data/docs/controller.rb

@@ -1,4 +1,5 @@
 require 'socket'
+require 'rouge'
 layout 'layout.html.erb'
 
 ignore /css\//
@@ -19,8 +20,22 @@ helpers do
     end
   end
 
-  def code_example(code, lang=:ruby)
-    "<div class='#{lang}'>" + CodeRay.scan(code, lang).div(:css => :class) + "</div>"
+  def code_example(code, lang=:ruby)    
+    l = case lang
+    when :ruby then "Ruby"
+    when :bash then "Shell"
+    when :html then "HTML"
+    when :sass then "Sass"
+    when :scss then "Sass"
+    when :css then "Sass"
+    when :js then "Javascript"
+    when :json then "JSON"
+    else
+      "Shell"
+    end
+    formatter = Rouge::Formatters::HTML.new(:css_class => "")
+    lexer = Kernel.eval("Rouge::Lexers::#{l}")
+    "<div class='#{lang}'><div class='highlight'>" + formatter.format(lexer.lex(code)) + "</div></div>"
   end
 
   def foundation_home_path

data/docs/css/docs.scss

@@ -1,19 +1,42 @@
 @import "settings";
 @import "foundation";
-@import "coderay";
+//@import "coderay";
 @import "footer";
 @import "offcanvas";
 
-/* Documentation Overrides */
+ol, li {list-style:none;}
+
+#changelog {
+  ol, li {list-style: disc; margin-left: 30px;}
+}
+
+/* Pygments */
+
+.highlight {
+  background-color: #eee;
+  border: 1px solid #CCC;
+  font-family: 'Consolas', 'Liberation Mono', Courier, monospace;
+  color: #000;
+  padding: .8em 0 .8em .8em;
+  margin-bottom: 1.3em;
+  overflow: auto;
+}
+
+.highlight pre {
+  margin: 0px;
+  font-size: .7em;
+  line-height: 1.4em;
+  white-space: pre-wrap;
+  @media only screen and (min-width: 768px) { font-size: .9em; white-space: pre; }
+}
 
-/* Coderay styles */
 .html, .css, .scss, .js { position: relative; }
 
-.CodeRay {
+.highlight {
   ul, ol, dl { list-style-position: inside; }
 }
 
-.CodeRay:before {
+.highlight:before {
   position: absolute;
   top: 6px;
   right: 6px;
@@ -21,9 +44,79 @@
   color: #ccc;
   font-size: .75em;
 }
-.html > .CodeRay:before { content: "HTML"; }
-.css > .CodeRay:before { content: "SCSS"; }
-.js > .CodeRay:before { content: "JS"; }
+
+.html > .highlight:before {content:"HTML";}
+.scss > .highlight:before {content:"SCSS";}
+.css > .highlight:before {content:"SCSS";}
+.sass > .highlight:before {content:"SCSS";}
+.js > .highlight:before {content:"JS";}
+.json > .highlight:before {content:"JSON";}
+
+.highlight {
+.hll { background-color: #ffffcc }
+.c { color: #999988; font-style: italic } /* Comment */
+.err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.k { color: #000000; font-weight: bold } /* Keyword */
+.o { color: #000000; font-weight: bold } /* Operator */
+.cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
+.c1 { color: #999988; font-style: italic } /* Comment.Single */
+.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.ge { color: #000000; font-style: italic } /* Generic.Emph */
+.gr { color: #aa0000 } /* Generic.Error */
+.gh { color: #999999 } /* Generic.Heading */
+.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.go { color: #888888 } /* Generic.Output */
+.gp { color: #555555 } /* Generic.Prompt */
+.gs { font-weight: bold } /* Generic.Strong */
+.gu { color: #aaaaaa } /* Generic.Subheading */
+.gt { color: #aa0000 } /* Generic.Traceback */
+.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+.kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.m { color: #009999 } /* Literal.Number */
+.s { color: #d01040 } /* Literal.String */
+.na { color: #008080 } /* Name.Attribute */
+.nb { color: #0086B3 } /* Name.Builtin */
+.nc { color: #445588; font-weight: bold } /* Name.Class */
+.no { color: #008080 } /* Name.Constant */
+.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+.ni { color: #800080 } /* Name.Entity */
+.ne { color: #990000; font-weight: bold } /* Name.Exception */
+.nf { color: #990000; font-weight: bold } /* Name.Function */
+.nl { color: #990000; font-weight: bold } /* Name.Label */
+.nn { color: #555555 } /* Name.Namespace */
+.nt { color: #000080 } /* Name.Tag */
+.nv { color: #008080 } /* Name.Variable */
+.ow { color: #000000; font-weight: bold } /* Operator.Word */
+.w { color: #bbbbbb } /* Text.Whitespace */
+.mf { color: #009999 } /* Literal.Number.Float */
+.mh { color: #009999 } /* Literal.Number.Hex */
+.mi { color: #009999 } /* Literal.Number.Integer */
+.mo { color: #009999 } /* Literal.Number.Oct */
+.sb { color: #d01040 } /* Literal.String.Backtick */
+.sc { color: #d01040 } /* Literal.String.Char */
+.sd { color: #d01040 } /* Literal.String.Doc */
+.s2 { color: #d01040 } /* Literal.String.Double */
+.se { color: #d01040 } /* Literal.String.Escape */
+.sh { color: #d01040 } /* Literal.String.Heredoc */
+.si { color: #d01040 } /* Literal.String.Interpol */
+.sx { color: #d01040 } /* Literal.String.Other */
+.sr { color: #009926 } /* Literal.String.Regex */
+.s1 { color: #d01040 } /* Literal.String.Single */
+.ss { color: #990073 } /* Literal.String.Symbol */
+.bp { color: #999999 } /* Name.Builtin.Pseudo */
+.vc { color: #008080 } /* Name.Variable.Class */
+.vg { color: #008080 } /* Name.Variable.Global */
+.vi { color: #008080 } /* Name.Variable.Instance */
+.il { color: #009999 } /* Literal.Number.Integer.Long */
+}
+
+
 
 /* Docs Footer Styles */
 .row.full-width {
@@ -35,6 +128,8 @@ footer.row.full-width {
   font-size: 14px;
 }
 
+#kitchen-sink .f-dropdown.content {padding:0 !important;}
+
 #copyright {
   background: #3f3f3f;
   color: #fff;

data/docs/index.html.erb

@@ -134,6 +134,15 @@
       </div>
     </div>
 
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/abide.html">Abide</a></h5></dt>
+          <dd>Abide is an HTML5 form validation library that supports the native API by using patterns and required attributes.</dd>
+        </dl>
+      </div>
+    </div>
+
     <hr>
 
     <h3>How is a project structured?</h3>

data/docs/layout.html.erb

@@ -179,7 +179,7 @@
     		<nav id="sideMenu" role="navigation">
     			<ul id="sideMainNav" class="nav-bar">
     			  <li class="show-for-small">
-            <a href="index.php">Home</a>
+            <a href="index.html">Home</a>
           </li>
     			<li>
     			  <a href="http://foundation.zurb.com/grid.php">Features</a>
@@ -334,6 +334,7 @@
       $('#start-jr').on('click', function() {
         $(document).foundation('joyride','start');
       });
+      
     </script>
   </body>
 </html>

data/js/foundation/foundation.clearing.js

@@ -6,7 +6,7 @@
   Foundation.libs.clearing = {
     name : 'clearing',
 
-    version : '4.2.2',
+    version: '4.3.1',
 
     settings : {
       templates : {

data/js/foundation/foundation.forms.js

@@ -530,4 +530,4 @@
     }
     return $();
   };
-}(Foundation.zj, this, this.document));
+}(Foundation.zj, this, this.document));

data/js/foundation/foundation.js

@@ -166,7 +166,7 @@ if (typeof jQuery === "undefined" &&
   window.Foundation = {
     name : 'Foundation',
 
-    version : '4.3.0',
+    version : '4.3.1',
 
     cache : {},
 
@@ -401,7 +401,7 @@ if (typeof jQuery === "undefined" &&
         return el.outerHeight();
       };
 
-      lib.outerWidth = function (el) {
+      lib.outerWidth = function (el, bool) {
         if (typeof Zepto === 'function') {
           return el.width();
         }
@@ -425,13 +425,7 @@ if (typeof jQuery === "undefined" &&
       return true;
     },
 
-    zj : function () {
-      if (typeof Zepto !== 'undefined') {
-        return Zepto;
-      } else {
-        return jQuery;
-      }
-    }()
+    zj : $
   };
 
   $.fn.foundation = function () {

data/js/foundation/foundation.orbit.js

@@ -4,6 +4,11 @@
   var noop = function() {};
 
   var Orbit = function(el, settings) {
+    // Don't reinitialize plugin
+    if (el.hasClass(settings.slides_container_class)) {
+      return this;
+    }
+
     var self = this,
         container,
         slides_container = el,
@@ -195,6 +200,7 @@
         animate = new SlideAnimation(slides_container);        
       container.on('click', '.'+settings.next_class, self.next);
       container.on('click', '.'+settings.prev_class, self.prev);
+      container.on('click', '[data-orbit-slide]', self.link_bullet);
       container.on('click', self.toggle_timer);
       container.on('touchstart.fndtn.orbit', function(e) {
         if (!e.touches) {e = e.originalEvent;}
@@ -245,7 +251,6 @@
       });
       
       $(document).on('click', '[data-orbit-link]', self.link_custom);
-      $(document).on('click', '[data-orbit-slide]', self.link_bullet)
       $(window).on('resize', self.compute_dimensions);
       $(window).on('load', self.compute_dimensions);
       slides_container.trigger('orbit:ready');
@@ -304,18 +309,20 @@
   
   var SlideAnimation = function(container) {
     var duration = 400;
+    var is_rtl = ($('html[dir=rtl]').length === 1);
+    var margin = is_rtl ? 'marginRight' : 'marginLeft';
 
     this.next = function(current, next, callback) {
-      next.animate({'marginLeft': '0%'}, duration, 'linear', function() {
-        current.css('marginLeft', '100%');
+      next.animate({margin: '0%'}, duration, 'linear', function() {
+        current.css(margin, '100%');
         callback();
       });
     };
 
     this.prev = function(current, prev, callback) {
-      prev.css('marginLeft', '-100%');
-      prev.animate({'marginLeft':'0%'}, duration, 'linear', function() {
-        current.css('marginLeft', '100%');
+      prev.css(margin, '-100%');
+      prev.animate({margin:'0%'}, duration, 'linear', function() {
+        current.css(margin, '100%');
         callback();
       });
     };
@@ -347,7 +354,7 @@
   Foundation.libs.orbit = {
     name: 'orbit',
 
-    version: '4.3.0',
+    version: '4.3.1',
 
     settings: {
       animation: 'slide',
@@ -402,4 +409,4 @@
   };
 
     
-}(Foundation.zj, this, this.document));
+}(Foundation.zj, this, this.document));