zurb-foundation 4.1.2 → 4.1.5

data/CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 This is the Foundation project.  We love making super awesome stuff, but even more we like to empower people to make changes on their own.  Feel free to fork and improve Foundation.
 
-### JavaScript
+<!-- ### JavaScript
 
 The Foundation JS libraries are tested with qUnit. You can run the tests in your browser by opening up the respective `.html` files in `test/javascripts/tests/`.
 
@@ -16,7 +16,7 @@ For more convenient testing using the command line and watcher functionality, yo
 4. From the root of the project, `npm install`. This will install the grunt tasks locally.
 5. Install the grunt command line interface with `npm install -g grunt-cli`.
 
-Now you should have two new commands available. `grunt qunit` will execute all of the qUnit tests. `grunt watch` will watch for changes to the JS files and test files, and execute the tests when something changes.
+Now you should have two new commands available. `grunt qunit` will execute all of the qUnit tests. `grunt watch` will watch for changes to the JS files and test files, and execute the tests when something changes. -->
 
 ## Compass Project
 

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    zurb-foundation (4.1.2)
+    zurb-foundation (4.1.5)
       sass (>= 3.2.0)
 
 GEM

data/README.md

@@ -28,14 +28,14 @@ Community
 
 Many thanks to all the people working on Foundation either to improve the base code or to support specific frameworks. If you want to get on this readme send an email to foundation@zurb.com, and if you have questions you can join the Unofficial Foundation Google Group here: http://groups.google.com/group/foundation-framework-
 
-WordPress
+WordPress (Versions marked 3/20/13)
 
-* [Starter Theme](https://github.com/drewsymo/Foundation) by Drew Morris
-* [Reverie](http://themefortress.com/reverie/) by Zhen
-* [WP-Foundation](http://320press.com/wp-foundation/features/) by 320press
-* [Yeti](https://github.com/modlearning/Yeti) by Modular Learning
-* [Foundation](https://github.com/drewsymo/Foundation) by Drewsymo
-* [required+ Themes](http://themes.required.ch/) by required+
+* [Reverie](http://themefortress.com/reverie/) by Zhen using Foundation version 4
+* [Corner Stone](https://github.com/thewirelessguy/cornerstone) by [Stephen Mullen](https://twitter.com/wirelessguyuk) using Foundation version v4.09
+* [required+ Themes](http://themes.required.ch/) by required+ using Foundation version 3.25
+* [Yeti](https://github.com/modlearning/Yeti) by Modular Learning using Foundation version 3.2
+* [Starter Theme](https://github.com/drewsymo/Foundation) by Drew Morris using Foundation version 3
+* [WP-Foundation](http://320press.com/wp-foundation/features/) by 320press using Foundation version 3
 
 Joomla
 
@@ -68,6 +68,9 @@ Middleman
 
 * [Middleman Skeleton](https://github.com/axyz/middleman-zurb-foundation) by [Andrea Moretti](https://twitter.com/axyz)
 
+Magento
+* [Magento & Foundation](https://github.com/nandroid/MagentoFoundation) by Nandroid
+
 Python
 * [Pyramid Scaffold](https://github.com/ppinette/pyramid_foundation) by Parker Pinette
 
@@ -110,6 +113,7 @@ Ruby on Rails Sass Gems
 
 Yeoman Generator
 
+* [Yeoman 1.0-Foundation 4](https://github.com/lkbgift/foundation4-yeoman) by [Leonard Bogdonoff](http://twitter.com/lkbcc)
 * [Yeoman-Foundation](https://npmjs.org/package/yeoman-foundation) by Vincent Mac
 
 

data/docs/CHANGELOG.md

@@ -1,3 +1,23 @@
+### 4.1.5- April 26, 2013
+* Add support for `indexOf` in legacy browsers
+
+### 4.1.4- April 26, 2013
+* Fixes invalid Rails generator path
+
+### 4.1.3- April 25, 2013
+
+* Added _variables.scss, which holds default variables and creates the settings file for the gem
+* Rearranged a few mixins in order to remove the confusing _foundation-globals.scss file
+  * If you are getting errors after upgrade, just remove any reference to this file...
+* Added reference to $base-line-height variables for those using Compass vertical rhythm
+* Fixed issue with invalid css coming through into buttons
+* Various bug fixes
+* Adds support for infinite section nesting
+* Updated top bar styles
+* Support for data-options in Reveal
+
+You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.1.2...v4.1.3).
+
 ### 4.1.2- April 10, 2013
 
 * Added Joyride expose functionality
@@ -9,7 +29,6 @@
 * Fixed Rails generator bug when using CoffeeScript files
 * Added `reflow` to Section js plugin to support dynamic content
 
-
 You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.1.1...v4.1.2).
 
 ### 4.1.1- April 2, 2013
@@ -33,8 +52,8 @@ You can compare the commits [here](https://github.com/zurb/foundation/compare/v4
 * Changed blockgrid to use clearfix instead of overflow.
 * Fixed nested row margin inside forms.
 * Fixed data_options function that caused booleans to be interpreted as numbers.
-* Tabs no longer automatically convert to accordion on desktop. 
-* Sections with accordion class always remain accordions and sections with tab class always remain tabs. 
+* Tabs no longer automatically convert to accordion on desktop.
+* Sections with accordion class always remain accordions and sections with tab class always remain tabs.
 * Vertical and horizontal navigation elements still become accordions on mobile
 
 You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.0.7...v4.0.8).

data/docs/_sidebar-components.html.erb

@@ -1,4 +1,4 @@
-<div class="docs section-container accordion" data-section data-options="deep_linking: false">
+<div class="docs section-container accordion" data-section data-options="one_up: false">
   <section class="section <%= @side_nav == 'using' ? 'active': '' %>">
     <p class="title"><a href="#">Using Foundation</a></p>
     <div class="content">
@@ -78,6 +78,8 @@
         <li><a class="<%= @page_title == 'Tables' ? 'active': '' %>" href="tables.html">Tables</a></li>
         <li><a class="<%= @page_title == 'Thumbnails' ? 'active': '' %>" href="thumbnails.html">Thumbnails</a></li>
         <li><a class="<%= @page_title == 'Flex Video' ? 'active': '' %>" href="flex-video.html">Flex Video</a></li>
+        <li class="divider"></li>
+        <li><a target="_blank" style="font-style: italic" class="<%= @page_title == 'Kitchen Sink' ? 'active': '' %>" href="kitchen-sink.html">Kitchen Sink</a></li>
       </ul>
     </div>
   </section>

data/docs/_sidebar.html.erb

@@ -1,4 +1,4 @@
-<div class="docs section-container accordion" data-section data-options="deep_linking: false">
+<div class="docs section-container accordion" data-section data-options="one_up: false">
   <section class="section <%= @side_nav == 'using' ? 'active': '' %>">
     <p class="title"><a href="#">Using Foundation</a></p>
     <div class="content">
@@ -78,6 +78,8 @@
         <li><a href="components/tables.html">Tables</a></li>
         <li><a href="components/thumbnails.html">Thumbnails</a></li>
         <li><a href="components/flex-video.html">Flex Video</a></li>
+        <li class="divider"></li>
+        <li><a target="_blank" style="font-style: italic" href="components/kitchen-sink.html">Kitchen Sink</a></li>
       </ul>
     </div>
   </section>

data/docs/components/breadcrumbs.html.erb

@@ -31,7 +31,15 @@
   <li><a href="#">Features</a></li>
   <li class="unavailable"><a href="#">Gene Splicing</a></li>
   <li class="current"><a href="#">Cloning</a></li>
-</ul>', :html %>
+</ul>
+
+<!-- You can also use this markup -->
+<nav class="breadcrumbs">
+  <a href="#">Home</a>
+  <a href="#">Features</a>
+  <a class="unavailable" href="#">Gene Splicing</a>
+  <a class="current" href="#">Cloning</a>
+</nav>', :html %>
 
         <p>For these styles to come across, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>breadcrumbs from a custom package</strong>. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
 

data/docs/components/forms.html.erb

@@ -415,11 +415,11 @@ $is-button: false
 $form-spacing:                       emCalc(16px);
 
 /* We use these to style the labels in different ways */
-$label-pointer:                      pointer;
-$label-font-size:                    emCalc(14px);
-$label-font-weight:                  500;
-$label-font-color:                   lighten(#000, 30%);
-$label-bottom-margin:                emCalc(3px);
+$form-label-pointer:                 pointer;
+$form-label-font-size:               emCalc(14px);
+$form-label-font-weight:             500;
+$form-label-font-color:              lighten(#000, 30%);
+$form-label-bottom-margin:           emCalc(3px);
 $input-font-color:                   rgba(0,0,0,0.75);
 $input-font-size:                    emCalc(14px);
 $input-bg-color:                     #fff;
@@ -430,6 +430,7 @@ $input-border-style:                 solid;
 $input-border-width:                 1px;
 $input-disabled-bg:                  #ddd;
 $input-box-shadow:                   inset 0 1px 2px rgba(0,0,0,0.1);
+$input-include-glowing-effect:       true;
 
 /* We use these to style the fieldset border and spacing. */
 $fieldset-border-style:              solid;
@@ -459,6 +460,11 @@ $input-error-message-font-size:      emCalc(12px);
 $input-error-message-font-weight:    bold;
 $input-error-message-font-color:     #fff;
 $input-error-message-font-color-alt: #333;
+
++/* We use this to style the glowing effect of inputs when focused */
++$glowing-effect-fade-time:           0.45s !default;
++$glowing-effect-color:               $input-focus-border-color !default; 
+
 ', :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>_foundation-global.scss</strong>.</p>
@@ -468,4 +474,4 @@ $input-error-message-font-color-alt: #333;
   <div class="large-3 pull-9 columns">
     <%= render "_sidebar-components.html.erb" %>
   </div>
-</div>
+</div>

data/docs/components/grid.html.erb

@@ -273,7 +273,7 @@
         <hr>
 
         <h3>Building With Mixins</h3>
-        <p>If you are keen on SCSS and use it for your Foundation projects, you have access to a grid mixins that will let you layout the page without using presentational classes that you don't want. You can create your own set of classes or even create your own grid. Setting any of the options to 'false' will leave off those styles, giving you lots of control over your CSS output. Here's an example structure you might use with the grid mixin:</p>
+        <p>If you are keen on SCSS and use it for your Foundation projects, you have access to grid mixins that will let you layout the page without using presentational classes that you don't want. You can create your own set of classes or even create your own grid. Setting any of the options to 'false' will leave off those styles, giving you lots of control over your CSS output. Here's an example structure you might use with the grid mixin:</p>
 
         <h5>Basic Mixin Usage</h5>
 <%= code_example '
@@ -347,8 +347,8 @@ $float: left
 
         <h5>Default SCSS Variables</h5>
 <%= code_example '
-$row-width:     62.5em !default;
-$column-gutter: 1.875em !default;
+$row-width:     emCalc(1000px) !default;
+$column-gutter: emCalc(30px) !default;
 $total-columns: 12 !default;
 ', :css %>
 

data/docs/components/kitchen-sink.html.erb

@@ -841,7 +841,7 @@
     <p>Get the details right by styling Joyride with a custom stylesheet!</p>
   </li>
   <li data-button="Next">
-    <h4>Stop #4</h4>
+    <h4>Stop #3</h4>
     <p>It works as a modal too!</p>
   </li>
 </ol>
@@ -854,6 +854,12 @@
   <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal…</a></p>
   <a class="close-reveal-modal">&#215;</a>
 </div>
+<div id="secondModal" class="reveal-modal">
+  <h2>This is a second modal.</h2>
+  <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
+  <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
+  <a class="close-reveal-modal">&#215;</a>
+</div>
 <div id="videoModal" class="reveal-modal large">
   <h2>This modal has video</h2>
   <div class="flex-video">

data/docs/components/labels.html.erb

@@ -86,7 +86,9 @@ $label-radius:      $global-radius;
 
 /* We use these to style the label text */
 $label-font-sizing: emCalc(14px);
-$label-font-weight: bold;', :css %>
+$label-font-weight: bold;
+$label-font-color: #333;
+$label-font-color-alt: #fff;', :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>_foundation-global.scss</strong>.</p>
 

data/docs/components/section.html.erb

@@ -11,8 +11,8 @@
 
         <div class="row">
           <div class="large-3 columns">
-            <div class="section-container vertical-nav" data-section="vertical-nav">
-              <section class="section">
+            <div class="section-container vertical-nav" data-section="vertical-nav" data-options="one_up: false;">
+              <section>
                 <p class="title"><a href="#">Section 1</a></p>
                 <div class="content">
                   <ul class="side-nav">
@@ -24,7 +24,7 @@
                   </ul>
                 </div>
               </section>
-              <section class="section">
+              <section>
                 <p class="title"><a href="#">Section 2</a></p>
                 <div class="content">
                   <ul class="side-nav">
@@ -39,8 +39,8 @@
             </div>
           </div>
           <div class="large-9 columns">
-            <div class="section-container horizontal-nav" data-section="horizontal-nav" >
-              <section class="section">
+            <div class="section-container horizontal-nav" data-section="horizontal-nav" data-options="one_up: false;">
+              <section>
                 <p class="title"><a href="#">Section 1</a></p>
                 <div class="content">
                   <ul class="side-nav">
@@ -52,7 +52,7 @@
                   </ul>
                 </div>
               </section>
-              <section class="section">
+              <section>
                 <p class="title"><a href="#">Section 2</a></p>
                 <div class="content">
                   <ul class="side-nav">
@@ -65,7 +65,7 @@
                 </div>
               </section>
             </div>
-            <div class="section-container auto" data-section>
+            <div class="section-container auto" data-section data-options="deep_linking: true; one_up: false">
               <section>
                 <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
                 <div class="content" data-slug="panel1" data-section-content>
@@ -193,6 +193,25 @@
   </section>
 </div>', :html %>
 
+        <h6>Vertical Tabs</h6>
+        <p>Adding a <code>vertical-tabs</code> class to the section container and setting <code>data-section="vertical-tabs"</code> will enable tabs on both small and large screens.</p>
+
+<%= code_example '
+<div class="section-container vertical-tabs" data-section="vertical-tabs">
+  <section>
+    <p class="title" data-section-title><a href="#">Section 1</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section>
+    <p class="title" data-section-title><a href="#">Section 2</a></p>
+    <div class="content" data-section-content>
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
         <h6>Vertical Nav/Accordion</h6>
         <p>Adding a <code>vertical-nav</code> class to the section container will enable vertical navigation elements on large screens and show an accordion on small screens.</p>
 
@@ -203,7 +222,7 @@
 <%= code_example '
 <div class="row">
   <div class="large-3 columns">
-    <div class="section-container vertical-nav" data-section="vertical-nav">
+    <div class="section-container vertical-nav" data-section="vertical-nav" data-options="one_up: false;">
       <section>
         <p class="title" data-section-title><a href="#">Section 1</a></p>
         <div class="content" data-section-content>
@@ -243,7 +262,7 @@
         <p>Use the <code>side-nav</code> class on the list to apply the Foundation navigation styles</p>
 
 <%= code_example '
-<div class="section-container horizontal-nav" data-section="horizontal-nav">
+<div class="section-container horizontal-nav" data-section="horizontal-nav" data-options="one_up: false;">
   <section>
     <p class="title" data-section-title><a href="#">Section 1</a></p>
     <div class="content" data-section-content>
@@ -291,7 +310,69 @@
   </section>
 </div>', :html %>
 
-        <p class="panel"><strong>Note:</strong> The <code>section</code> element can be replaced with a <code>div.section</code> element if you do not want to use HTML5 elements.</p>
+        <h6>Nested Sections</h6>
+        <p>You can infinitely nest Section elements to create more complicated Section layouts.</p>
+
+        <div class="section-container auto" data-section>
+          <section>
+            <p class="title"><a href="#section1">ROOT: Section 1</a></p>
+            <div class="content" data-slug="section1">
+              <p>Content 1 Summary Paragraphs</p>
+              <div class="section-container auto" data-section>
+                <section>
+                  <p class="title"><a href="#section1-1">DETAIL: #1</a></p>
+                  <div class="content">
+                    <p>Detail awesome stuff!</p>
+                  </div>
+                </section>
+                <section>
+                  <p class="title"><a href="#section1-2">DETAIL: #2</a></p>
+                  <div class="content">
+                    <p>Detail awesome stuff numeroe duo.</p>
+                  </div>
+                </section>
+              </div>
+            </div>
+          </section>
+          <section>
+            <p class="title"><a href="#section2">ROOT: Section 2</a></p>
+            <div class="content" data-slug="section2">
+              <p>Content 2</p>
+            </div>
+          </section>
+        </div>
+<%= code_example '
+<div class="section-container auto" data-section>
+  <section>
+    <p class="title"><a href="#section1">ROOT: Section 1</a></p>
+    <div class="content" data-slug="section1">
+      <p>Content 1 Summary Paragraphs</p>
+      <div class="section-container auto" data-section>
+        <section>
+          <p class="title"><a href="#section1-1">DETAIL: #1</a></p>
+          <div class="content">
+            <p>Detail awesome stuff!</p>
+          </div>
+        </section>
+        <section>
+          <p class="title"><a href="#section1-2">DETAIL: #2</a></p>
+          <div class="content">
+            <p>Detail awesome stuff numeroe duo.</p>
+          </div>
+        </section>
+      </div>
+    </div>
+  </section>
+  <section>
+    <p class="title"><a href="#section2">ROOT: Section 2</a></p>
+    <div class="content" data-slug="section2">
+      <p>Content 2</p>
+    </div>
+  </section>
+</div>
+', :html %>
+
+        <p><strong>Note:</strong> The <code>section</code> element can be replaced with a <code>div.section</code> element if you do not want to use HTML5 elements.</p>
 
         <hr>
 
@@ -385,6 +466,14 @@ $section-bottom-margin:          emCalc(20px);
   </section>
 </div>
 ', :html %>
+        
+        <p><strong>Note:</strong> If you are using Sections in a Modal, or they are being loaded via AJAX, or they are hidden when Foundation is initialized, you will need to reflow the sections to get tabs to display properly:</p>
+
+<%= code_example "
+$('#myModal').on('opened', function () {
+  $(this).foundation('section', 'reflow');
+});
+", :json %>
 
         <h5>Optional JavaScript Configuration</h5>
 

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

@@ -16,7 +16,7 @@
               <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>
+            <li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a></li>
           </ul>
 
           <section class="top-bar-section">
@@ -80,7 +80,7 @@
         <p>The top bar is a pretty complex piece of magical UI goodness, which makes it really difficult to create a mixin from it. We rely on many presentational classes to accomplish the styles and there's a lot happening in the JS.</p>
 
         <h5>Basic Needs</h5>
-        <p>The top bar has four main elements, three of which are needed for proper functionality: <code>ul.title-area</code>, one of the section <code>ul class="right/left</code> elements and the <code>li.toggle-topbar</code> element that will expand the menu in the mobile layout. You can leave out the li class="name" as long as you include the .toggle-topbar element.</p>
+        <p>The top bar has four main elements, three of which are needed for proper functionality: <code>ul.title-area</code>, a <code>ul class="right/left</code> element enclosed in a <code>section class="top-bar-section"</code>, and the <code>li.toggle-topbar</code> element that will expand the menu in the mobile layout. You can leave out the li class="name" as long as you include the .toggle-topbar element.</p>
 
         <h5>Positioning the Bar</h5>
         <p>The top bar is built with a single <code>nav</code> element with a class of <code>top-bar</code>. It will take on full-browser width by default. To make the top bar stay fixed as you scroll, wrap it in <code>div class="fixed"</code>. If you want your navigation to be set to your grid width, wrap it in <code>div class="contain-to-grid"</code>. You may use <code>fixed</code> and <code>contain-to-grid</code> together.</p>

data/docs/components/type.html.erb

@@ -151,6 +151,21 @@
         </div>
 
         <div class="row">
+          <div class="large-4 columns">
+            <h6>ul.no-bullet</h6>
+            <ul class="no-bullet">
+              <li>List item with a much longer description or more content.</li>
+              <li>List item</li>
+              <li>List item
+                <ul>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                </ul>
+              </li>
+              <li>List item</li>
+            </ul>
+          </div>
           <div class="large-4 columns">
             <h6>Ordered Lists</h6>
             <ol>
@@ -165,8 +180,8 @@
               <li>List Item 3</li>
             </ol>
           </div>
-          <div class="large-8 columns">
-            <h6>Definition Lists</h6>
+          <div class="large-4 columns">
+            <h6>Defition Lists</h6>
             <dl>
               <dt>Definition Title</dt>
               <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
@@ -191,6 +206,20 @@
   <li>List item</li>
 </ul>
 
+<!-- Sometimes you don\'t want bullets at all -->
+<ul class="no-bullet">
+  <li>List item with a much longer description or more content.</li>
+  <li>List item</li>
+  <li>List item
+    <ul>
+      <li>Nested List Item</li>
+      <li>Nested List Item</li>
+      <li>Nested List Item</li>
+    </ul>
+  </li>
+  <li>List item</li>
+</ul>
+
 <!-- Ordered lists are great for lists that need order, duh -->
 <ol>
   <li>List Item 1</li>