zurb-foundation 4.0.3 → 4.0.4

data/docs/components/top-bar.html.erb

@@ -8,6 +8,68 @@
       <div class="large-12 columns">
         <h1><%= @page_title %></h1>
         <h4 class="subheader">The Foundation Top Bar gives you a great way to display a complex navigation bar on small or large screens.</h4>
+
+        <nav class="top-bar">
+          <ul class="title-area">
+            <!-- Title Area -->
+            <li class="name">
+              <h1><a href="/">Top Bar</a></h1>
+            </li>
+            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
+            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
+          </ul>
+
+          <section class="top-bar-section">
+            <ul class="left">
+              <li class="divider"></li>
+              <li class="has-dropdown"><a href="<%= features_path %>">Item 1</a>
+
+                <ul class="dropdown">
+                  <li><label>Level One</label></li>
+                  <li><a href="#">Sub-item 1</a></li>
+                  <li><a href="#">Sub-item 2</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">Sub-item 3</a></li>
+                  <li class="has-dropdown"><a href="#">Sub-item 4</a>
+
+                    <ul class="dropdown">
+                      <li><label>Level Two</label></li>
+                      <li class="has-dropdown"><a href="#">Sub-item 1</a>
+
+                        <ul class="dropdown">
+                          <li><label>Level Three</label></li>
+                          <li class="has-dropdown"><a href="#">Sub-item 1</a>
+
+                            <ul class="dropdown">
+                              <li><label>Level Four</label></li>
+                              <li><a href="#">Sub-item 1</a></li>
+                            </ul>
+                          </li>
+                          <li><a href="#">Sub-item 2</a></li>
+                          <li><a href="#">Sub-item 3</a></li>
+                          <li class="divider"></li>
+                          <li><a href="#">Sub-item 4</a></li>
+                        </ul>
+                      </li>
+                      <li><a href="#">Sub-item 2</a></li>
+                      <li><a href="#">Sub-item 3</a></li>
+                      <li><a href="#">Sub-item 4</a>
+                    </ul>
+                  </li>
+                  <li><a href="#">Sub-item 5</a></li>
+                </ul>
+              </li>
+              <li class="divider"></li>
+            </ul>
+            <!-- Right Nav Section -->
+            <ul class="right">
+              <li class="divider"></li>
+              <li><a href="#">Item 2</a></li>
+            </ul>
+          </section>
+        </nav>
+
+        <hr>
       </div>
     </div>
 
@@ -30,7 +92,7 @@
         <p>When building your bar it is good to be aware of how many links your're going to need in it so you can customize your responsive breakpoint accordingly. Build your navigation with <code>ul.left</code> and/or <code>ul.right</code> depending where you want links. To add items, simply include <code>li</code> elements with and anchor inside them for your top-level. To build a dropdown menu, you'll need to add <code>has-dropdown</code> to the <code>li</code> and include <code>ul.dropdown</code> after that anchor. Add a class of <code>active</code> to mark the current page.</p>
 
         <h5>Other Elements</h5>
-        <p>To make this navigation nice and flexible, we've included patterns for elements like buttons, inputs and dividers. To create dividers between your navigation, just add an empty <code>li.divider</code> and you'll get some separation. You can use a small Foundation button in the nav, just include <code>has-button</code> as a class for its parent li. You can include two different input types: search and text. To use these, add a class of search to the parent li.</p>
+        <p>To make this navigation nice and flexible, we've included patterns for elements like buttons, inputs and dividers. To create dividers between your navigation, just add an empty <code>li.divider</code> and you'll get some separation. You can use a small Foundation button in the nav, just include <code>has-form</code> as a class for its parent li. You can include two different input types: search and text. To use these, add a class of search to the parent li.</p>
 
         <h5>Sticky Top Bar</h5>
         <p>You may also wrap your top bar in <code>div class="contain-to-grid sticky"</code> and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll.</p>
@@ -177,6 +239,7 @@ $topbar-dropdown-link-color: #fff;
 $topbar-dropdown-toggle-size: 5px;
 $topbar-dropdown-toggle-color: #fff;
 $topbar-dropdown-toggle-alpha: 0.5;
+$dropdown-label-color: #555;
 
 /* Top menu icon styles */
 $topbar-menu-link-transform: uppercase;
@@ -196,7 +259,7 @@ $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout'
         <hr>
 
         <h3>Using the JavaScript</h3>
-        <p>You don't need ths 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>
+        <p>You'll need to include <code>foundation.topbar.js</code> to get the topbar to play nice. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the topbar 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/type.html.erb

@@ -246,7 +246,7 @@
           <li>Page cleanup and window minimization</li>
         </ul>
 
-        <p>On top of that, Foundation includes a couple of simple classes you can use to control elements printing, or not printing. Simply attached <code>.print-only</code> on an element to only show when printing, and <code>.hide-on-print</code> to hide something when printing.</p>
+        <p>On top of that, Foundation includes a couple of simple classes you can use to control elements printing, or not printing. Simply attach <code>.print-only</code> to an element to only show when printing, and <code>.hide-on-print</code> to hide something when printing.</p>
 
         <hr>
 

data/docs/css/docs.scss

@@ -50,6 +50,8 @@ footer.row.full-width {
   float: left;
 }
 
+.docs.section-container a.active { font-weight: bold; }
+
 
 /* Alert Docs */
 .alert-base {

data/docs/faq.html.erb

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

data/docs/index.html.erb

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

data/docs/javascript.html.erb

@@ -16,7 +16,7 @@
         <p>In the <code>head</code> section of your page add Modernizr. Modernizr acts as a shim for HTML5 elements for older browsers as well as detection for mobile devices.</p>
 
 <%= code_example '
-<script src="/js/custom.modernizr.js></script>
+<script src="/js/custom.modernizr.js"></script>
 ', :html %>
 
         <p>Before the closing <code>body</code> tag, insert the following JavaScript.</p>
@@ -30,7 +30,7 @@
 </script>
 ", :html %>
 
-        <p>Then include either <code>foundation.min.js</code>, which includes Foundation Core and all JavaScript plugins or you can load them invidually.</p>
+        <p>Then include either <code>foundation.min.js</code>, which includes Foundation Core and all JavaScript plugins or you can load them invidually. The minified version is not available in the Compass version.</p>
 
 <%= code_example '
 <script src="/js/foundation.min.js"></script>

data/docs/layout.html.erb

@@ -77,8 +77,8 @@
           <ul class="inline-list right">
             <li><a href="http://foundation.zurb.com">Home</a></li>
             <li><a href="http://foundation.zurb.com/download.php">Download</a></li>
-            <li><a href="index.html">Docs</a></li>
-            <li><a href="changelog.html">Changelog</a></li>
+            <li><a href="http://foundation.zurb.com/docs">Docs</a></li>
+            <li><a href="http://foundation.zurb.com/docs/changelog.html">Changelog</a></li>
             <li><a href="http://foundation.zurb.com/about.php">About</a></li>
             <li><a href="http://feeds.feedburner.com/zurb/blog">Subscribe to the ZURBlog</a></li>
           </ul>
@@ -87,6 +87,22 @@
     </div>
 
     <script>
+
+      // Google Analytics
+      var _gaq = _gaq || [];
+      _gaq.push(
+        ['_setAccount', 'UA-2195009-2'],
+        ['_trackPageview'],
+        ['b._setAccount', 'UA-2195009-27'],
+        ['b._trackPageview']
+      );
+
+      (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+      })();
+
       document.write('<script src="<%= asset_path %>/vendor/'
         + ('__proto__' in {} ? 'zepto' : 'jquery')
         + '.js"><\/script>');

data/docs/rails.html.erb

@@ -2,7 +2,7 @@
 
 <div class="row">
   <div class="large-9 push-3 columns"
-    <% @page_title = "Installing with Rails" %>
+    <% @page_title = "Rails" %>
     <div class="row">
       <div class="large-12 columns">
         <h2><%= @page_title %></h2>
@@ -46,12 +46,20 @@ end
 ', :css %>
 
       <h5 class="subheader">Add Foundation to your JS</h5>
-      <p>Append the following line to your <code>app/assets/javascripts/application.js</code> file:</p>
+      <p>Append the following lines to your <code>app/assets/javascripts/application.js</code> file:</p>
 
 <%= code_example '
 //= require foundation
+$(document).foundation();
 ', :js %>
 
+      <h5 class="subheader">Add Modernizr</h5>
+      <p>Make sure that <a href="http://modernizr.com/" rel="nofollow">Modernizr</a> is included in the <code>&lt;head&gt;</code> of your page:</p>
+
+<%= code_example '
+javascript_include_tag "vendor/custom.modernizr"
+', :ruby %>
+
       <h5 class="subheader">Set Viewport Width</h5>
       <p>Add the following line to the <kbd>&lt;head&gt;</kbd> of your page layout:</p>
 

data/docs/sass.html.erb

@@ -1,5 +1,5 @@
 <% @side_nav = "using" %>
-
+<% @page_title = "Sass" %>
 <div class="row">
     <div class="large-9 push-3 columns">
 
@@ -27,16 +27,6 @@
       </div>
     </div>
 
-    <br>
-
-    <div class="row">
-      <div class="large-12 columns">
-        <h5>Compiling Your Scss</h5>
-        <p>To compile your Scss into CSS you run a simple command that will watch for saves and compile each time you save an Scss file. The command is:</p>
-        <p class="btm-marg keystroke">compass watch</p>
-      </div>
-    </div>
-
     <br>
     <hr>
 
@@ -49,6 +39,19 @@
       <li>run <span class="keystroke">compass create &lt;project-name&gt; -r zurb-foundation --using foundation</span></li>
     </ol>
 
+    <br>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <h5>Compiling Your Scss</h5>
+        <p>To compile your Scss into CSS you run a simple command that will watch for saves and compile each time you save an Scss file. From the directory of your <kbd>config.rb</kbd> file, the command is:</p>
+        <p class="btm-marg keystroke">compass watch</p>
+        <p>If you are in a different directory you can use the same command, but navigate to where your <kbd>config.rb</kbd> file is. The command looks like:</p>
+        <p class="btm-marg keystroke">compass watch path/to/project</p>
+      </div>
+    </div>
+
+
     <hr>
 
     <a name="compass-existing"></a>
@@ -86,15 +89,42 @@
 
     <p>There are a few different ways to do this, but here's what we recommend:</p>
     <ol style="margin-left: 20px;">
-      <li>Setup a Foundation project folder: <kbd>mkdir ~/awesomeapp</kbd></li>
-      <li>Create a Gemfile with this content: <br>
-          <kbd style="margin-left: 15px;">source :rubygems</kbd> <br>
-          <kbd style="margin-left: 15px;">gem "zurb-foundation", :git => "git@github.com:zurb/foundation.git"</kbd> <br>
-          <kbd style="margin-left: 15px;">gem "compass"</kbd>
+      <li>Setup a folder for your project (i.e. <kbd>mkdir ~/awesomeapp</kbd>)
+      <li>Create a file called <code>Gemfile</code> in the folder you just created with this content: <br>
+<%= code_example '
+source "https://rubygems.org"
+gem "zurb-foundation", :git => "git@github.com:zurb/foundation.git"
+gem "compass"
+', :ruby %>
+      </li>
+      <li>Change into your application directory (<kbd>cd ~/awesomeapp</kbd>) then create a new compass project using the following command:</li>
+<%= code_example '
+bundle exec compass create . -r zurb-foundation --using foundation
+', :bash %>
+      <li>When you're working on your project, run: <kbd>bundle exec compass watch</kbd></li>
+    </ol>
+
+    <hr>
+
+    <a name="multiple-versions"></a>
+    <h3>Running multiple versions</h3>
+    <h5 class="subheader">If you're planning on running multiple, potentially incompatible versions of Foundation you can isolate them using Bundler as well.</h5>
+
+    <p>There are a few different ways to do this, but here's what we recommend:</p>
+    <ol style="margin-left: 20px;">
+      <li>Setup a folder for your project (i.e. <kbd>mkdir ~/awesomeapp</kbd>)
+      <li>Create a file called <code>Gemfile</code> in the folder you just created with this content: <br>
+<%= code_example '
+source "https://rubygems.org"
+# Replace 4.0.3 with the version of Foundation you want to use
+gem "zurb-foundation", "4.0.3"
+gem "compass"
+', :ruby %>
       </li>
-      <li>Then run: <kbd>touch ~/awesomeapp/Gemfile</kbd></li>
-      <li>Change into your application directory: <kbd>cd ~/awesomeapp</kbd></li>
-      <li>Create a project using Bundler: <kbd>bundle exec compass create . -r zurb-foundation --using foundation</kbd></li>
+      <li>Change into your application directory (<kbd>cd ~/awesomeapp</kbd>) then create a new compass project using the following command:</li>
+<%= code_example '
+bundle exec compass create . -r zurb-foundation --using foundation
+', :bash %>
       <li>When you're working on your project, run: <kbd>bundle exec compass watch</kbd></li>
     </ol>
 

data/docs/support.html.erb

@@ -68,7 +68,7 @@
 		<div class="row support">
 		  <div class="small-3 columns">IE7</div>
 		  <div class="small-3 columns"><span class="fail">&#x2717;</span></div>
-		  <div class="small-3 columns"><span data-tooltip title="While we don't officially IE7, but our UI styles should work for the most part" class="meh has-tip tip-top" data-width="200">&#9679;</span></div>
+		  <div class="small-3 columns"><span data-tooltip title="While we don't officially support IE7, but our UI styles should work for the most part" class="meh has-tip tip-top" data-width="200">&#9679;</span></div>
 		  <div class="small-3 columns"><span data-tooltip title="While we don't officially IE7, but our JS works for the most part. Clearing and tooltips have some issues with style and position." class="meh has-tip tip-top" data-width="200">&#9679;</span></div>
 		</div>
 

data/js/foundation/foundation.forms.js

@@ -6,7 +6,7 @@
   Foundation.libs.forms = {
     name : 'forms',
 
-    version : '4.0.0',
+    version : '4.0.4',
 
     settings : {
       disable_class: 'no-custom'

data/js/foundation/foundation.js

@@ -1,5 +1,5 @@
 /*
- * Foundation Responsive Library 4.0.0
+ * Foundation Responsive Library
  * http://foundation.zurb.com
  * Copyright 2013, ZURB
  * Free to use under the MIT license.

data/js/foundation/foundation.reveal.js

@@ -6,7 +6,7 @@
   Foundation.libs.reveal = {
     name: 'reveal',
 
-    version : '4.0.3',
+    version : '4.0.4',
 
     locked : false,
 
@@ -78,8 +78,13 @@
     },
 
     open : function (target) {
-      var modal = $('#' + target.data('reveal-id')),
-          open_modal = $('.reveal-modal.open');
+      if (target) {
+        var modal = $('#' + target.data('reveal-id'));
+      } else {
+        var modal = $(this.scope);
+      }
+
+      var open_modal = $('.reveal-modal.open');
 
       if (!modal.data('css-top')) {
         modal.data('css-top', parseInt(modal.css('top'), 10))
@@ -96,6 +101,7 @@
     },
 
     close : function (modal) {
+      var modal = modal || $(this.scope);
       this.locked = true;
       var open_modal = $('.reveal-modal.open').not(modal);
       modal.trigger('close');

data/js/foundation/foundation.topbar.js

@@ -6,11 +6,12 @@
   Foundation.libs.topbar = {
     name : 'topbar',
 
-    version : '4.0.2',
+    version : '4.0.0',
 
     settings : {
       index : 0,
       stickyClass : 'sticky',
+      back_text: '« Back',
       init : false
     },
 
@@ -39,10 +40,8 @@
 
           self.assemble();
 
-          if (!self.settings.$topbar.data('height')) self.largestUL();
-
           if (self.settings.$topbar.parent().hasClass('fixed')) {
-            $('body').css('padding-top', this.outerHeight(this.settings.$topbar));
+            $('body').css('padding-top', self.outerHeight(self.settings.$topbar));
           }
         });
 
@@ -66,6 +65,8 @@
               section = topbar.find('section, .section'),
               titlebar = topbar.children('ul').first();
 
+          if (!self.settings.$topbar.data('height')) self.largestUL();
+
           e.preventDefault();
 
           if (self.breakpoint()) {
@@ -142,13 +143,14 @@
     },
 
     assemble : function () {
+      var self = this;
       // Pull element out of the DOM for manipulation
       this.settings.$section.detach();
 
       this.settings.$section.find('.has-dropdown>a').each(function () {
         var $link = $(this),
             $dropdown = $link.siblings('.dropdown'),
-            $titleLi = $('<li class="title back js-generated"><h5><a href="#">&laquo; Back</a></h5></li>');
+            $titleLi = $('<li class="title back js-generated"><h5><a href="#">' + self.settings.back_text + '</a></h5></li>');
         // Copy link to subnav
         $dropdown.prepend($titleLi);
       });

data/lib/foundation/engine.rb

@@ -1,12 +1,20 @@
 module Foundation
   class Engine < Rails::Engine
-    # auto wire assets
-    initializer 'foundation.update_asset_paths' do |app|
+    # Save this block, we'll use it in two calls to .initializer
+    add_paths_block = lambda { |app|
       app.config.assets.paths << File.expand_path("../../../scss", __FILE__)
       app.config.assets.paths << File.expand_path("../../../js", __FILE__)
 
       # Ensure Zepto and Modernizr are precompiled in production
       app.config.assets.precompile += %w(vendor/zepto.js vendor/custom.modernizr.js)
-    end
+    }
+
+    # Standard initializer
+    initializer 'foundation.update_asset_paths', &add_paths_block
+
+    # Special initializer lets us precompile assets without fully initializing
+    initializer 'foundation.update_asset_paths', :group => :assets,
+                &add_paths_block
+
   end
-end
+end