zurb-foundation 4.0.4 → 4.0.5

data/CHANGELOG.md

@@ -1,7 +1,31 @@
 # Changelog
-We'll keep you up to date with what we've released so you at least have a gist of what goes into each update. For the most part, we'll try to list things out as detailed as we see necessary.
-
 ---
+
+### 4.0.5- March 8, 2013
+We're currently working on patch fixes for various parts of Foundation. We'll add to this list as we go up until release.
+* Custom classes added to custom forms now carry through to JS.
+* Added `.horizontal-nav` to `foundation.section.js`.
+* Fixed variables that weren't being inherited properly.
+* Fixed a joyride mobile background issue.
+* Updated Reveal docs to match 4.0.4 functionality.
+* Updated to Zepto 1.0.
+* Fixed bugs with visibility classes.
+* Updated block-grid nth-of-type clear fix so that it actually works.
+* All size block grids now have the same spacing.
+* Made images `display: inline-block` by default to remove gap and not screw up layouts.
+* Progress bars respect their color variables instead of global.
+* Added variable for progress bar background color.
+* Fixed inconsistency between side margins on unordered and ordered lists.
+* Made it so you can set `custom_back_text` variable in top-bar to control if the back link is generic or specific.
+* Updated visibility classes to work properly with table display properties.
+* Helper classes like `.right, .left` now have `!important` so they don't get overriden on accident.
+* Added a page to the docs that explains our use of [media queries](http://foundation.zurb.com/docs/media-queries.html).
+* Removed default outline on a:focus elements that normalize adds.
+* Fixed bug with custom checkboxes not clickable from the `<span>`.
+* Added docs about using Sass standalone with Foundation.
+
+You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.0.4...master).
+
 ### 4.0.4
 This patch fixes various bugs that have been submitted since release. We'll be more specific with changelog updates going forward.
 

data/CONTRIBUTING.md

@@ -2,14 +2,6 @@
 
 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.
 
-## Testing
-
-### Styles
-
-Go into the test/ directory.  Run `bundle exec compass compile` or `bundle exec compass watch` if you're making changes and want to see them reflected on-the-fly.
-
-Want to add a feature to Foundation?  Either update one of the test/*.html files or copy `test/template.html` to a new file, add your markup to it and check it in.
-
 ### 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/`.

data/Gemfile.lock

@@ -1,8 +1,7 @@
 PATH
   remote: .
   specs:
-    zurb-foundation (4.0.4)
-      rake
+    zurb-foundation (4.0.5)
       sass (>= 3.2.0)
 
 GEM
@@ -16,4 +15,5 @@ PLATFORMS
   x86-mingw32
 
 DEPENDENCIES
+  rake
   zurb-foundation!

data/docs/_sidebar-components.html.erb

@@ -7,6 +7,7 @@
         <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="../media-queries.html">Media Queries</a></li>
         <li><a class="<%= @page_title == 'Visibility Classes' ? 'active': '' %>" href="visibility.html">Visibility Classes</a></li>
       </ul>
     </div>

data/docs/_sidebar.html.erb

@@ -7,6 +7,7 @@
         <li><a class="<%= @page_title == 'Javascript' ? 'active': '' %>" href="javascript.html">Javascript</a></li>
         <li><a class="<%= @page_title == 'Sass' ? 'active': '' %>" href="sass.html">Sass</a></li>
         <li><a class="<%= @page_title == 'Rails' ? 'active': '' %>" href="rails.html">Rails</a></li>
+        <li><a class="<%= @page_title == 'Media Queries' ? 'active': '' %>" href="media-queries.html">Media Queries</a></li>
         <li><a href="components/visibility.html">Visibility Classes</a></li>
       </ul>
     </div>

data/docs/changelog.html.erb

@@ -10,7 +10,35 @@
 
     <h4 class="subheader">We'll keep you up to date with what we've released so you at least have a gist of what goes into each update. For the most part, we'll try to list things out as detailed as we see necessary.</h4>
 
-    <hr />
+    <hr>
+
+    <h5>4.0.5&mdash; March 8, 2013</h5>
+    <p>We're currently working on patch fixes for various parts of Foundation. We'll add to this list as we go up until release.</p>
+    <ul class="disc">
+      <li>Custom classes added to custom forms now carry through to JS.</li>
+      <li>Added <kbd>.horizontal-nav</kbd> to <kbd>foundation.section.js</kbd>.</li>
+      <li>Fixed variables that weren't being inherited properly.</li>
+      <li>Fixed a joyride mobile background issue.</li>
+      <li>Updated Reveal docs to match 4.0.4 functionality.</li>
+      <li>Updated to Zepto 1.0.</li>
+      <li>Fixed bugs with visibility classes.</li>
+      <li>Updated block-grid nth-of-type clear fix so that it actually works.</li>
+      <li>All size block grids now have the same spacing.</li>
+      <li>Made images <kbd>display: inline-block</kbd> by default to remove gap and not screw up layouts.</li>
+      <li>Progress bars respect their color variables instead of global.</li>
+      <li>Added variable for progress bar background color.</li>
+      <li>Fixed inconsistency between side margins on unordered and ordered lists.</li>
+      <li>Made it so you can set <kbd>custom_back_text</kbd> variable in top-bar to control if the back link is generic or specific.</li>
+      <li>Updated visibility classes to work properly with table display properties.</li>
+      <li>Helper classes like <kbd>.right, .left</kbd> now have <kbd>!important</kbd> so they don't get overriden on accident.</li>
+      <li>Added a page to the docs that explains our use of <a href="http://foundation.zurb.com/docs/media-queries.html">media queries</a>.</li>
+      <li>Removed default outline on a:focus elements that normalize adds.</li>
+      <li>Fixed bug with custom checkboxes not clickable from the <kbd>&lt;span&gt;</kbd>.</li>
+      <li>Added docs about using Sass standalone with Foundation.</li>
+    </ul>
+    <p>You can compare the commits <a href="https://github.com/zurb/foundation/compare/v4.0.4...master">here</a>.</p>
+
+    <hr>
 
     <h5>4.0.4</h5>
     <p>This patch fixes various bugs that have been submitted since release. We'll be more specific with changelog updates going forward.</p>

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

@@ -9,7 +9,7 @@
         <h2><%= @page_title %></h2>
         <h4 class="subheader">Block grids give you a way to evenly split contents of a list within the grid. If you wanted to create a row of 5 images or paragraphs that need to stay evenly spaced no matter the screen size, the block grid is for you.</h4>
 
-        <ul class="small-block-grid-2 large-block-grid-5">
+        <ul class="small-block-grid-2 large-block-grid-4">
           <li><img src="../img/demos/demo1.jpg"></li>
           <li><img src="../img/demos/demo2.jpg"></li>
           <li><img src="../img/demos/demo3.jpg"></li>
@@ -75,7 +75,7 @@
 
 <%= code_example '
 /* Mixin and configurable options */
-.your-class-name { @import block-grid($per-row, $spacing, $base-styles); }
+.your-class-name { @include block-grid($per-row, $spacing, $base-styles); }
 
 /* This controls how many elements will be on each row of the block grid. */
 /* Set this to whatever number you need, up to the max allowed in the variable */
@@ -97,6 +97,15 @@ $base-style: true
           <li><img src="../img/demos/demo5.jpg"></li>
         </ul>
 
+        <h5>Clearing Block Grid Rows</h5>
+        <p>We have this built into the CSS, but you'll need to add a bit of code if you want your block grid to change layout between breakpoints. If you don't use this, it will inherit whatever you put in the smallest media query. This code looks for the <code>n+1</code> of the grid so that it clears properly. That code looks like this:</p>
+
+<%= code_example '
+.your-small-class-name > li { clear: none !important; }
+', :css %>
+
+        <p><strong>Note:</strong> If you are using the same class across breakpoints, your mixin should override this and you won't need it. If you want to control the layout using different classes, use the above snippet.</p>
+
         <h5>Available SCSS Variables</h5>
 
 <%= code_example '

data/docs/components/clearing.html.erb

@@ -138,7 +138,7 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255);
 {
   // specify the classes or IDs will close clearing when clicked.
   close_selectors : '.clearing-close'
-}", :json %>
+}", :js %>
 
       </div>
     </div>

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

@@ -17,14 +17,14 @@
         <form class="custom">
           <div class="row">
             <div class="large-4 columns">
-              <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 1</label>
-              <label for="radio2"><input name="radio1" type="radio" id="radio2" style="display:none;"><span class="custom radio checked"></span> Radio Button 2</label>
-              <label for="radio3"><input name="radio1" type="radio" id="radio3" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
+              <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
+              <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
+              <label for="radio1"><input name="radio1" type="radio" id="radio1" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
             </div>
             <div class="large-4 columns">
               <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
-              <label for="checkbox2"><input type="checkbox" id="checkbox2" checked style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
-              <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3"> Label for Checkbox</label>
+              <label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
+              <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
             </div>
             <div class="large-4 columns">
               <label for="customDropdown1">Medium Example</label>
@@ -46,18 +46,18 @@
 <form class="custom">
   <div class="row">
     <div class="large-4 columns">
-      <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 1</label>
-      <label for="radio2"><input name="radio1" type="radio" id="radio2" style="display:none;"><span class="custom radio checked"></span> Radio Button 2</label>
-      <label for="radio3"><input name="radio1" type="radio" id="radio3" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
+      <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
+      <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
+      <label for="radio1"><input name="radio1" type="radio" id="radio1" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
     </div>
     <div class="large-4 columns">
       <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
-      <label for="checkbox2"><input type="checkbox" id="checkbox2" checked style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
-      <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3"> Label for Checkbox</label>
+      <label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
+      <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
     </div>
     <div class="large-4 columns">
-      <label for="customDropdown">Medium Example</label>
-      <select id="customDropdown" class="medium">
+      <label for="customDropdown1">Medium Example</label>
+      <select id="customDropdown1" class="medium">
         <option DISABLED>This is a dropdown</option>
         <option>This is another option</option>
         <option>This is another option too</option>
@@ -111,6 +111,7 @@
 
         <h3>Building Custom Selects</h3>
         <p>Sometimes you need to let people select a single item from a long list of options. This is what <code>&lt;select&gt;</code> elements are for. We've taken these a step further by including our own custom style that looks a lot better than inconsistent browser defaults. You can set any of the <code>&lt;option&gt;</code> elements to <code>&lt;option disabled&gt;</code> to make them unable to select. Custom selects are built like you'd expect:</p>
+        <p>For those who may want to apply custom styles to a specific dropdown, any classes on the <code>&lt;select&gt;</code> element will be appended to the generated <code>&lt;div class=&quot;custom dropdown&quot;&gt;</code> element.</p>
 
 <%= code_example '
 <form class="custom">
@@ -294,7 +295,7 @@
 <%= code_example "
 {
   disable_class: 'no-custom'
-}", :json %>
+}", :js %>
 
       </div>
     </div>

data/docs/components/dropdown.html.erb

@@ -154,7 +154,7 @@ $f-dropdown-list-hover-bg:        #eeeeee;', :css %>
 {
   // specify the class used for active dropdowns
   activeClass: 'open'
-}", :json %>
+}", :js %>
 
       </div>
     </div>

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

@@ -70,7 +70,7 @@
 
 <%= code_example '
 /* Using the default styles */
-.your-class-name { @include flex-video; }', :css %>
+.your-class-name { @include flex-video-container; }', :css %>
 
         <h5>Default SCSS Variables</h5>
 

data/docs/components/grid.html.erb

@@ -127,7 +127,7 @@
         <hr>
 
         <h4>Offsets</h4>
-        <p>Offsets allow you to create additional space between columns in a row. Like the rest of the grid, they're nestable. You can use classes like <code>.large-offset-1</code> and <code>.small-offset-3</code> to manipulate your column positions in different ways. You can offset up to 11 since you wouldn't even offset a full-width column.</p>
+        <p>Offsets allow you to create additional space between columns in a row. Like the rest of the grid, they're nestable. You can use classes like <code>.large-offset-1</code> and <code>.small-offset-3</code> to manipulate your column positions in different ways. You can offset up to 11 since you wouldn't ever offset a full-width column.</p>
 
 <%= code_example '
 <div class="row">
@@ -363,4 +363,4 @@ $total-columns: 12 !default;
   <div class="large-3 pull-9 columns">
     <%= render "_sidebar-components.html.erb" %>
   </div>
-</div>
+</div>

data/docs/components/joyride.html.erb

@@ -147,7 +147,7 @@ $joyride-screenfill:          rgba(0,0,0,0.5);
     wrapper : '<div class=\"joyride-content-wrapper\"></div>',
     button  : '<a href=\"#\" class=\"small button joyride-next-tip\"></a>'
   }
-}", :json %>
+}", :js %>
 
       </div>
     </div>

data/docs/components/magellan.html.erb

@@ -75,7 +75,7 @@
 {
   // specify the class used for active sections
   activeClass: 'active'
-}", :json %>
+}", :js %>
 
       </div>
     </div>

data/docs/components/orbit.html.erb

@@ -188,6 +188,7 @@
 
 <%= code_example '
 /* We use these to control the caption styles */
+$orbit-container-bg: #f5f5f5;
 $orbit-caption-bg-old-browser: #000;
 $orbit-caption-bg-old: rgb(0,0,0);
 $orbit-caption-bg: rgba(0,0,0,0.6);
@@ -209,6 +210,9 @@ $orbit-bullet-nav-color-active: #222;
 $orbit-slide-number-bg: rgb(0,0,0);
 $orbit-slide-number-font-color: #fff;
 $orbit-slide-number-padding: emCalc(5px);
+
+// Margin for when Orbit is stacked on small screens
+$stack-on-small-margin-bottom: emCalc(20px); // Stack on small does not function right now
 ', :css %>
 
         <hr>
@@ -252,7 +256,7 @@ $orbit-slide-number-padding: emCalc(5px);
   caption_class: 'orbit-caption',
   active_slide_class: 'active',
   orbit_transition_class: 'orbit-transitioning'
-}", :json %>
+}", :js %>
 
       </div>
     </div>

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

@@ -7,7 +7,7 @@
     <div class="row">
       <div class="large-12 columns">
         <h2><%= @page_title %></h2>
-        <h4 class="subheader">If you're making a rockin' marketing site for a subscription-based product, you are likely in need of a pricing table. These fill 100% of the their container and are made from a simple unorderd list.</h4>
+        <h4 class="subheader">If you're making a rockin' marketing site for a subscription-based product, you are likely in need of a pricing table. These fill 100% of their container and are made from a simple unordered list.</h4>
       </div>
     </div>
 
@@ -82,7 +82,7 @@
 .your-pricing-class  { @include pricing-table-container;
   .your-title-class  { @include pricing-table-title; }
   .your-price-class  { @include pricing-table-price; }
-  .your-desc-class   { @include pricing-description-title; }
+  .your-desc-class   { @include pricing-table-description; }
   .your-bullet-class { @include pricing-table-bullet; }
   .your-cta-class    { @include pricing-table-cta; }
 }', :css %>
@@ -153,4 +153,4 @@ $price-cta-padding:         emCalc(20px) emCalc(20px) 0;', :css %>
   <div class="large-3 pull-9 columns">
     <%= render "_sidebar-components.html.erb" %>
   </div>
-</div>
+</div>

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

@@ -106,6 +106,7 @@ $progress-bar-pad: emCalc(2px);
 $progress-bar-margin-bottom: emCalc(10px);
 
 /* We use these to set the meter colors */
+$progress-bar-color: transparent;
 $progress-meter-color: $primary-color;
 $progress-meter-secondary-color: $secondary-color;
 $progress-meter-success-color: $success-color;

data/docs/components/reveal.html.erb

@@ -54,6 +54,10 @@
 // trigger by event
 $('a.reveal-link').trigger('click');
 $('a.close-reveal-modal').trigger('click');
+
+// or directly on the modal
+$('#myModal').foundation('reveal', 'open');
+$('#myModal').foundation('reveal', 'close');
 ", :js %>
 
         <hr>
@@ -123,7 +127,7 @@ $reveal-border-color:    #666;', :css %>
       'display': 'none'
     }
   }
-}", :json %>
+}", :js %>
 
       </div>
     </div>

data/docs/components/section.html.erb

@@ -39,6 +39,32 @@
             </div>
           </div>
           <div class="large-9 columns">
+            <div class="section-container horizontal-nav" data-section data-options="deep_linking: false">
+              <section class="section">
+                <p class="title"><a href="#">Section 1</a></p>
+                <div class="content">
+                  <ul class="side-nav">
+                    <li><a href="#">Link 1</a></li>
+                    <li><a href="#">Link 2</a></li>
+                    <li><a href="#">Link 3</a></li>
+                    <li class="divider"></li>
+                    <li><a href="#">Link 1</a></li>
+                  </ul>
+                </div>
+              </section>
+              <section class="section">
+                <p class="title"><a href="#">Section 2</a></p>
+                <div class="content">
+                  <ul class="side-nav">
+                    <li><a href="#">Link 1</a></li>
+                    <li><a href="#">Link 2</a></li>
+                    <li><a href="#">Link 3</a></li>
+                    <li class="divider"></li>
+                    <li><a href="#">Link 1</a></li>
+                  </ul>
+                </div>
+              </section>
+            </div>
             <div class="section-container tabs" data-section data-options="deep_linking: true">
               <section class="section">
                 <p class="title"><a href="#panel1">Section 1</a></p>
@@ -84,7 +110,7 @@
 
         <hr>
 
-        <h3>Sections Replace Accordion, Tabs &amp; Vertical Nav</h3>
+        <h3>Sections Replace Accordion, Tabs, Vertical Nav &amp; Nav Bar</h3>
         <p>Sections replace a few things that you are used to from Foundation 3. We've taken the accordion, the tabs and the vertical nav and combined them into this really flexible plugin that can handle all of those. The single JS file handles all the interactions, but the classes you add to the element control how it gets rendered and styled across our breakpoint.</p>
 
         <hr>
@@ -184,9 +210,45 @@
   </div>
 </div>', :html %>
 
+        <h6>Horizontal Nav/Nav Bar</h6>
+        <p>Adding a <code>horizontal-nav</code> class to the section container will enable horizontal navigation elements on large screens and show an accordion on small screens.</p>
+
+        <p>Horizontal navigation is a combination of the tab setting with vertical navigation drop downs.</p>
+
+        <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>
+  <section class="section">
+    <p class="title"><a href="#">Section 1</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a href="#">Link 1</a></li>
+        <li><a href="#">Link 2</a></li>
+        <li><a href="#">Link 3</a></li>
+        <li class="divider"></li>
+        <li><a href="#">Link 1</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section">
+    <p class="title"><a href="#">Section 2</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a href="#">Link 1</a></li>
+        <li><a href="#">Link 2</a></li>
+        <li><a href="#">Link 3</a></li>
+        <li class="divider"></li>
+        <li><a href="#">Link 1</a></li>
+      </ul>
+    </div>
+  </section>
+</div>
+', :html %>
+
 
         <h6>Deep Linking</h6>
-        <p>Set <code>deep-linking</code> to true to enable deep linking to sections of content. Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. Deep linking also requires a matching <code>data-slug</code> on the content section that the hash shoudl point to, without the pound (&#35;) sign.</p>
+        <p>Set <code>deep-linking</code> to true to enable deep linking to sections of content. Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. Deep linking also requires a matching <code>data-slug</code> on the content section that the hash should point to, without the pound (&#35;) sign.</p>
 
         <%= code_example '
 <div class="section-container" data-section data-options="deep_linking: true">
@@ -282,7 +344,7 @@ $section-bottom-margin:          emCalc(20px);
   deep_linking: false,
   one_up: true,
   callback: function (){}
-}", :json %>
+}", :js %>
 
       </div>
     </div>
@@ -290,4 +352,4 @@ $section-bottom-margin:          emCalc(20px);
   <div class="large-3 pull-9 columns">
     <%= render "_sidebar-components.html.erb" %>
   </div>
-</div>
+</div>