zurb-foundation 4.0.0 → 4.0.1

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    zurb-foundation (4.0.0)
+    zurb-foundation (4.0.1)
       rake
       sass (>= 3.2.0)
 

data/docs/_sidebar-components.html.erb

@@ -1,13 +1,13 @@
 <div class="section-container accordion" data-section data-options="deep_linking: false">
-  <section class="section">
+  <section class="section <%= @side_nav == 'using' ? 'active': '' %>">
     <p class="title"><a href="#">Using Foundation</a></p>
     <div class="content">
       <ul class="side-nav">
-        <li><a href="../docs/">Get Started</a></li>
+        <li><a href="http://foundation.zurb.com/docs/">Get Started</a></li>
         <li><a href="../javascript.html">Javascript</a></li>
         <li><a href="../sass.html">Sass</a></li>
         <li><a href="../rails.html">Rails</a></li>
-        <li><a href="../visibility.html">Visibility Classes</a></li>
+        <li><a href="visibility.html">Visibility Classes</a></li>
       </ul>
     </div>
   </section>
@@ -68,6 +68,7 @@
     <p class="title"><a href="#">CSS Components</a></p>
     <div class="content">
       <ul class="side-nav">
+        <li><a href="alert-boxes.html">Alert Boxes</a></li>
         <li><a href="panels.html">Panels</a></li>
         <li><a href="pricing-tables.html">Pricing Tables</a></li>
         <li><a href="progress-bars.html">Progress Bars</a></li>

data/docs/_sidebar.html.erb

@@ -1,9 +1,9 @@
 <div class="section-container accordion" data-section data-options="deep_linking: false">
-  <section class="section active">
+  <section class="section <%= @side_nav == 'using' ? 'active': '' %>">
     <p class="title"><a href="#">Using Foundation</a></p>
     <div class="content">
       <ul class="side-nav">
-        <li><a href="docs/">Get Started</a></li>
+        <li><a href="http://foundation.zurb.com/docs/">Get Started</a></li>
         <li><a href="javascript.html">Javascript</a></li>
         <li><a href="sass.html">Sass</a></li>
         <li><a href="rails.html">Rails</a></li>
@@ -100,7 +100,7 @@
   </section>
 </div>
 
-<p><a href="http://foundation.zurb.com/migration.php" class="button expand" style="margin-bottom: 0;">Download Foundation 4</a></p>
+<p><a href="http://foundation.zurb.com/download.php" class="button expand" style="margin-bottom: 0;">Download Foundation 4</a></p>
 
 <div class="jobs hide-for-small">
   <h5>Awesome product jobs:</h5>

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

@@ -1,3 +1,5 @@
+<% @side_nav = "css" %>
+
 <div class="row">
   <div class="large-9 push-3 columns">
     <div class="row">

data/docs/components/custom-forms.html.erb

@@ -185,7 +185,7 @@
         <hr>
 
         <h3>Using the Pre/postfix Concept With Custom Forms</h3>
-        <p>We showed you how to use the prefix and postfix elements on our <a href="#">forms documentation page</a>. You can employ that same technique here and make custom forms act as your slave to create some very complex forms.</p>
+        <p>We showed you how to use the prefix and postfix elements on our <a href="forms.html">forms documentation page</a>. You can employ that same technique here and make custom forms act as your slave to create some very complex forms.</p>
 
 <%= code_example '
 <form class="custom">
@@ -280,7 +280,7 @@
 
         <hr>
 
-        <h3>Using the JavaScript</h3>
+        <h3><a name="js"></a>Using the JavaScript</h3>
         <p>In order to get the custom forms to function, you'll need to include <code>foundation.forms.js</code>. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the forms 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>

data/docs/components/dropdown.html.erb

@@ -7,7 +7,7 @@
     <div class="row">
       <div class="large-12 columns">
         <h2><%= @page_title %></h2>
-        <h4 class="subheader">In Foundation 4, we wanted to rid our codebase of many different dropdowns within various UI elements. So we created a univeral dropdown plugin that will attach dropdowns or popovers next to anything!</h4>
+        <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>
         <a href="#" class="button" data-dropdown="contentDrop">Content Dropdown &raquo;</a>
@@ -52,12 +52,12 @@
           <li><code>content</code>: Add padding inside the dropdown for better looking content.</li>
         </ul>
 
-        <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>dropdowns from a custom package</strong>. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+        <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>dropdowns from a custom package</strong>. These should be linked up following our default <a href="../index.html#basicHTMLMarkup">HTML page structure</a>.</p>
 
         <hr>
 
         <h3>Build With Our Mixins</h3>
-        <p>We've included SCSS mixins used to style dropdowns. 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="#">_dropdown.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>
+        <p>We've included SCSS mixins used to style dropdowns. 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/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_dropdown.scss">_dropdown.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/dropdown";

data/docs/components/flex-video.html.erb

@@ -47,12 +47,12 @@
   <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>
 </div>', :html %>
 
-        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected flex-video from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected flex-video from a custom package. These should be linked up following our default <a href="../index.html#basicHTMLMarkup">HTML page structure</a>.</p>
 
         <hr>
 
         <h3>Build with our Mixins</h3>
-        <p>We've included SCSS mixins used to style labels. 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="#">_flex-video.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>
+        <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/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_flex-video.scss">_flex-video.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/flex-video";

data/docs/components/forms.html.erb

@@ -329,7 +329,7 @@
         <hr>
 
         <h3>Build with Mixins</h3>
-        <p>A lot of elements in Foundation can be created using SCSS mixins so that you can include your own classes and just enough style as needed for the job at hand. To use these mixins, you'll need to have the extension installed or grab <a href="#">_foundation-global.scss</a> and <a href="#">_forms.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>
+        <p>A lot of elements in Foundation can be created using SCSS mixins so that you can include your own classes and just enough style as needed for the job at hand. To use these mixins, you'll need to have the extension installed or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_forms.scss">_forms.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/forms";', :css %>

data/docs/components/grid.html.erb

@@ -345,6 +345,15 @@ $float: false
 
         <hr>
 
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+$row-width:     62.5em !default;
+$column-gutter: 1.875em !default;
+$total-columns: 12 !default;
+', :css %>
+
+        <hr>
+
         <h4>Get Advanced With Media Query Changes</h4>
         <p>We kept media queries out of the code for our grid mixins. This will enable you to include the mixins inside of whatever breakpoint you'd like, putting you in complete control. If you want to create 10 breakpoints and shift the layout around between each one, by all means. If you want to use only the default breakpoints, <a href="../sass.html">we've got variables for that</a>.</p>
 

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

@@ -41,7 +41,7 @@
         <hr>
 
         <h3>Build with a Mixin</h3>
-        <p>We've included SCSS mixins used to style inline lists. To use the mixin, you'll need to have the <a href="#extention-install">extension installed</a> or grab <a href="#">_foundation-global.scss</a> and <a href="#">_inline-lists.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style inline lists. 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/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_inline-lists.scss">_inline-lists.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
 @import "foundation/foundation-global", "foundation/inline-lists";

data/docs/components/keystrokes.html.erb

@@ -23,12 +23,12 @@
 <%= code_example '
 <p>For example, to close your browser hit <kbd>Cmd</kbd> + <kbd>Q</kbd>', :html %>
 
-        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected keystrokes from a custom package. These should be linked up following our default HTML page structure.</p>
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected keystrokes from a custom package. These should be linked up following our <a href="../index.html">default HTML page structure.</a></p>
 
         <hr>
 
         <h3>Build with a Mixin</h3>
-        <p>We've included SCSS mixins used to style keystrokes. 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="#">_keystrokes.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>
+        <p>We've included SCSS mixins used to style keystrokes. 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/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_keystrokes.scss">_keystrokes.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/keystrokes";

data/docs/components/labels.html.erb

@@ -38,12 +38,12 @@
           <li>The radius classes include: <code>.radius</code> or <code>.round</code>.</li>
         </ul>
 
-        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected labels from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected labels from a custom package. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
 
         <hr>
 
         <h3>Build With Our Mixins</h3>
-        <p>We've included SCSS mixins used to style labels. 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="#">_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>
+        <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/_foundation-global.scss">_foundation-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/foundation-global", "foundation/labels";

data/docs/components/magellan.html.erb

@@ -43,7 +43,7 @@
 </div>
 ', :html %>
 
-        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected <strong>magellan from a custom package</strong>. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected <strong>magellan from a custom package</strong>. These should be linked up following our default <a href="../index.html#basicHTMLMarkup">HTML page structure</a>.</p>
 
         <hr>
 

data/docs/components/panels.html.erb

@@ -47,12 +47,12 @@
 
         <div class="panel">Basic panel with content.</div>
 
-        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected panels from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected panels from a custom package. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
 
         <hr>
 
         <h3>Build with a Mixin</h3>
-        <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="#extention-install">extension installed</a> or grab <a href="#">_foundation-global.scss</a> and <a href="#">_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>
+        <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/_foundation-global.scss">_foundation-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/foundation-global", "foundation/panels";

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

@@ -53,12 +53,12 @@
   <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
 </ul>', :html %>
 
-        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected pricing-tables from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected pricing-tables from a custom package. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
 
         <hr>
 
         <h3>Build with a Mixin</h3>
-        <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="#extention-install">extension installed</a> or grab <a href="#">_foundation-global.scss</a> and <a href="#">_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>
+        <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/_foundation-global.scss">_foundation-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/foundation-global", "foundation/pricing-tables";

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

@@ -41,12 +41,12 @@
 
         <div class="progress large-6 success round"><span class="meter" style="width: 40%"></span></div>
 
-        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected labels from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected labels from a custom package. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
 
         <hr>
 
         <h3>Build with our Mixins</h3>
-        <p>We've included SCSS mixins used to style progress bars. 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="#">_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>
+        <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/_foundation-global.scss">_foundation-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/foundation-global", "foundation/labels";

data/docs/components/switch.html.erb

@@ -92,12 +92,12 @@
           <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>
+        <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="../index.html">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>
+        <p>We've included SCSS mixins used to style switches. 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/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_switch.scss">_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";

data/docs/components/thumbnails.html.erb

@@ -31,7 +31,7 @@
         <hr>
 
         <h3>Build with our Mixins</h3>
-        <p>We've included SCSS mixins used to style labels. 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="#">_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>
+        <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/_foundation-global.scss">_foundation-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/foundation-global", "foundation/labels";

data/docs/components/type.html.erb

@@ -8,7 +8,7 @@
         <h2><%= @page_title %></h2>
         <h4 class="subheader">Foundation 4 typography is built with ems, making it easier to fine-tune your type across different breakpoints. By default, we include a single breakpoint in typography sizes and styles, but you can add more if you'd like.</h4>
 
-        <p>We're no longer depending on modular scale in the core of Foundation. We made an effort with this release to be dependancy free other than Sass. This way people can use whatever framework and gems they want on top of Foundation. We'll still use <a href="#">Compass</a>.</p>
+        <p>We're no longer depending on modular scale in the core of Foundation. We made an effort with this release to be dependancy free other than Sass. This way people can use whatever framework and gems they want on top of Foundation. We'll still use <a href="http://compass-style.org">Compass</a>.</p>
 
         <hr>
 

data/docs/components/visibility.html.erb

@@ -1,3 +1,5 @@
+<% @side_nav = "using" %>
+
 <div class="row">
   <div class="large-9 push-3 columns">
 

data/docs/config/deploy.rb

@@ -8,12 +8,15 @@ set :user, application
 set :deploy_to, "/var/www/foundation-docs"
 set :deploy_via, :remote_cache
 set :use_sudo, false
-set :branch, "4.0-wip"
+set :branch, "master"
 set :bundle_gemfile, "docs/Gemfile"
 
 set :scm, :git
 
-server 'foundation.zurb.com', :web
+foundation1_ip = '166.78.3.108'
+foundation2_ip = '166.78.18.29'
+
+role :web, foundation1_ip, foundation2_ip
 
 after "deploy:update_code", "deploy:generate_static_site"
 set :keep_releases, 3

data/docs/faq.html.erb

@@ -7,12 +7,12 @@
 
     <% @page_title = "FAQ" %>
     <h2><%= @page_title %></h2>
-    
+
     <h4 class="subheader">We hear a lot of questions from people using Foundation and realized that a lot of the same ones were being asked. We put together this list of FAQs to help you find answers to common questions.</h4>
-    
+
     <h4>Why doesn't Foundation 3 support IE7 or IE8?</h4>
     <p>Foundation 4 is mobile-first, meaning it relies on media queries to layer in more complex layouts and components. Browsers or devices that don't support media queries will be restricted to a simple, single-column layout. In some ways, Foundation 4 better supports IE6-7 inasmuch as it provides a mobile but not broken experience. In IE8 Foundation 4 will provide less than Foundation 3, but with IE8's market share in such steep decline we thought this was the right time.</p>
-    
+
     <p>If IE8 support is important for your users / customers, you can use <a href="../files/foundation-download-2.2.1.zip">Foundation 3.2</a>, which supports IE8. It's not mobile first but it's pretty good stuff.</p>
 
     <h4>Can I use Foundation for something I'm going to sell?</h4>
@@ -22,7 +22,7 @@
     <p>We try and be comprehensive in our testing, but there are thousands of devices so it's often just not feasible. We'd love to hear about Foundation's behaviour on other devices, but the list above is what we test each release on. If your browser or device is not listed your results may vary.</p>
 
     <h4>Where can I find the Foundation 3 docs?</h4>
-    <p>For those of you still working on Foundation 3 sites, or who need to continue supporting IE8 with Foundation, we keep the Foundation 3 docs available. <a href="old-docs/f3">View the Foundation 3 Docs &rarr;</a></p>
+    <p>For those of you still working on Foundation 3 sites, or who need to continue supporting IE8 with Foundation, we keep the Foundation 3 docs available. <a href="../old-docs/f3">View the Foundation 3 Docs &rarr;</a></p>
 
     <hr>
 

data/docs/index.html.erb

@@ -1,3 +1,5 @@
+<% @side_nav = "using" %>
+
 <div class="row">
   <div class="large-3 columns">
     <%= render "_sidebar.html.erb" %>
@@ -176,7 +178,7 @@
 
     <hr>
 
-    <h3>HTML Page Markup</h3>
+    <h3 id="basicHTMLMarkup">HTML Page Markup</h3>
     <h5 class="subheader">Our markup structure is straight forward and gives you the flexibility you need to create to your hearts desires. Here's an example page that includes the basics:</h5>
 
 <%= code_example '

data/docs/javascript.html.erb

@@ -1,3 +1,5 @@
+<% @side_nav = "using" %>
+
 <div class="row">
   <div class="large-9 push-3 columns">
     <% @page_title = "Javascript" %>

data/docs/layout.html.erb

@@ -34,7 +34,7 @@
           <li><a href="<%= docs_path %>">Docs</a></li>
           <li class="divider"></li>
           <li class="has-form">
-            <a href="<%= docs_path %>" class="button">Get Started</a>
+            <a href="http://foundation.zurb.com/docs" class="button">Get Started</a>
           </li>
         </ul>
       </section>
@@ -43,7 +43,7 @@
     <% @page_title = "4 Documentation" %>
     <div class="row">
       <div class="large-12 columns">
-        <h1><a href="../index.html">Foundation <%= @page_title %></a></h1>
+        <h1><a href="http://foundation.zurb.com/docs/">Foundation <%= @page_title %></a></h1>
         <hr>
       </div>
     </div>

data/docs/rails.html.erb

@@ -1,3 +1,5 @@
+<% @side_nav = "using" %>
+
 <div class="row">
   <div class="large-9 push-3 columns"
     <% @page_title = "Installing with Rails" %>

data/docs/sass.html.erb

@@ -1,3 +1,5 @@
+<% @side_nav = "using" %>
+
 <div class="row">
     <div class="large-9 push-3 columns">
 

data/js/foundation/foundation.topbar.js

@@ -6,7 +6,7 @@
   Foundation.libs.topbar = {
     name : 'topbar',
 
-    version : '4.0.0',
+    version : '4.1.0',
 
     settings : {
       index : 0,
@@ -15,6 +15,7 @@
     },
 
     init : function (scope, method, options) {
+      var self = this;
       this.scope = scope || this.scope;
 
       if (typeof method === 'object') {
@@ -22,24 +23,31 @@
       }
 
       if (typeof method != 'string') {
-        this.settings.$w = $(window);
-        this.settings.$topbar = $('nav.top-bar');
-        this.settings.$section = this.settings.$topbar.find('section');
-        this.settings.$titlebar = this.settings.$topbar.children('ul').first();
 
-        var breakpoint = $("<div class='top-bar-js-breakpoint'/>").appendTo("body");
-        this.settings.breakPoint = breakpoint.width();
-        breakpoint.remove();
+        $('nav.top-bar').each(function () {
+          self.settings.$w = $(window);
+          self.settings.$topbar = $(this);
+          self.settings.$section = self.settings.$topbar.find('section');
+          self.settings.$titlebar = self.settings.$topbar.children('ul').first();
 
-        if (!this.settings.init) {
-          this.events();
-          this.assemble();
-        }
 
-        if (!this.settings.height) this.largestUL();
+          self.settings.$topbar.data('index', 0);
+
+          var breakpoint = $("<div class='top-bar-js-breakpoint'/>").insertAfter(self.settings.$topbar);
+          self.settings.breakPoint = breakpoint.width();
+          breakpoint.remove();
+
+          self.assemble();
 
-        if (this.settings.$topbar.parent().hasClass('fixed')) {
-          $('body').css('padding-top', this.outerHeight(this.settings.$topbar));
+          if (!self.settings.$topbar.data('height')) self.largestUL();
+
+          if (self.settings.$topbar.parent().hasClass('fixed')) {
+            $('body').css('padding-top', this.outerHeight(this.settings.$topbar));
+          }
+        });
+
+        if (!self.settings.init) {
+          this.events();
         }
 
         return this.settings.init;
@@ -50,48 +58,58 @@
     },
 
     events : function () {
+      var self = this;
+
       $(this.scope)
         .on('click.fndtn.topbar', '.top-bar .toggle-topbar', function (e) {
+          var topbar = $(this).closest('.top-bar'),
+              section = topbar.find('section, .section'),
+              titlebar = topbar.children('ul').first();
+
           e.preventDefault();
 
-          if (this.breakpoint()) {
-            this.settings.$topbar.toggleClass('expanded');
-            this.settings.$topbar.css('min-height', '');
+          if (self.breakpoint()) {
+            topbar
+              .toggleClass('expanded')
+              .css('min-height', '');
           }
 
-          if (!this.settings.$topbar.hasClass('expanded')) {
-            this.settings.$section.css({left: '0%'});
-            this.settings.$section.find('>.name').css({left: '100%'});
-            this.settings.$section.find('li.moved').removeClass('moved');
-            this.settings.index = 0;
+          if (!topbar.hasClass('expanded')) {
+            section.css({left: '0%'});
+            section.find('>.name').css({left: '100%'});
+            section.find('li.moved').removeClass('moved');
+            topbar.data('index', 0);
           }
-        }.bind(this))
+        })
 
         .on('click.fndtn.topbar', '.top-bar .has-dropdown>a', function (e) {
-          var self = Foundation.libs.topbar;
+          var topbar = $(this).closest('.top-bar'),
+              section = topbar.find('section, .section'),
+              titlebar = topbar.children('ul').first();
 
-          if (Modernizr.touch || self.breakpoint())
+          if (Modernizr.touch || self.breakpoint()) {
             e.preventDefault();
+          }
 
           if (self.breakpoint()) {
             var $this = $(this),
                 $selectedLi = $this.closest('li');
 
-            self.settings.index += 1;
+            topbar.data('index', topbar.data('index') + 1);
             $selectedLi.addClass('moved');
-            self.settings.$section.css({left: -(100 * self.settings.index) + '%'});
-            self.settings.$section.find('>.name').css({left: 100 * self.settings.index + '%'});
+            section.css({left: -(100 * topbar.data('index')) + '%'});
+            section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
 
             $this.siblings('ul')
-              .height(self.settings.height + self.outerHeight(self.settings.$titlebar, true));
-            self.settings.$topbar
-              .css('min-height', self.settings.height + self.outerHeight(self.settings.$titlebar, true) * 2)
+              .height(topbar.data('height') + self.outerHeight(titlebar, true));
+            topbar
+              .css('min-height', topbar.data('height') + self.outerHeight(titlebar, true) * 2)
           }
       });
 
       $(window).on('resize.fndtn.topbar', function () {
         if (!this.breakpoint()) {
-          this.settings.$topbar.css('min-height', '');
+          $('.top-bar').css('min-height', '');
         }
       }.bind(this));
 
@@ -100,16 +118,17 @@
         e.preventDefault();
 
         var $this = $(this),
-            self = Foundation.libs.topbar,
+            topbar = $this.closest('.top-bar'),
+            section = topbar.find('section, .section'),
             $movedLi = $this.closest('li.moved'),
             $previousLevelUl = $movedLi.parent();
 
-        self.settings.index -= 1;
-        self.settings.$section.css({left: -(100 * self.settings.index) + '%'});
-        self.settings.$section.find('>.name').css({'left': 100 * self.settings.index + '%'});
+        topbar.data('index', topbar.data('index') - 1);
+        section.css({left: -(100 * topbar.data('index')) + '%'});
+        section.find('>.name').css({'left': 100 * topbar.data('index') + '%'});
 
-        if (self.settings.index === 0) {
-          self.settings.$topbar.css('min-height', 0);
+        if (topbar.data('index') === 0) {
+          topbar.css('min-height', 0);
         }
 
         setTimeout(function () {
@@ -119,7 +138,7 @@
     },
 
     breakpoint : function () {
-      return this.settings.$w.width() <= this.settings.breakPoint || $('html').hasClass('lt-ie9');
+      return $(window).width() <= this.settings.breakPoint || $('html').hasClass('lt-ie9');
     },
 
     assemble : function () {
@@ -155,7 +174,7 @@
 
       largest.children('li').each(function () { total += self.outerHeight($(this), true); });
 
-      this.settings.height = total;
+      this.settings.$topbar.data('height', total);
     },
 
     sticky : function () {

data/lib/foundation/version.rb

@@ -1,3 +1,3 @@
 module Foundation
-  VERSION = "4.0.0"
+  VERSION = "4.0.1"
 end

data/scss/foundation/components/_top-bar.scss

@@ -208,7 +208,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
       display: block;
       width: 100%;
       padding: 12px 0 12px $topbar-height / 3;
-      color: #fff;
+      color: $topbar-link-color;
       font-size: emCalc(13px);
       font-weight: bold;
       background: $topbar-dropdown-bg;

data/templates/project/index.html

@@ -105,6 +105,8 @@
 	<% template[:options][:javascripts].each do |f| %>
 	<script src="js/<%= f %>"></script>
 	<% end %>
-  <script src="js/foundation/app.js"></script>
+  <script>
+    $(document).foundation();
+  </script>
 </body>
 </html>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: zurb-foundation
 version: !ruby/object:Gem::Version
-  version: 4.0.0
+  version: 4.0.1
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-02-28 00:00:00.000000000 Z
+date: 2013-03-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -228,7 +228,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 2914621637057799271
+      hash: -1738311888129637075
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -237,7 +237,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 2914621637057799271
+      hash: -1738311888129637075
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23