zurb-foundation 4.3.1 → 4.3.2

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

@@ -98,11 +98,11 @@ $active-bg: $sub-nav-active-bg
 $include-html-nav-classes: $include-html-classes;
 
 /* We use these to control margin and padding */
-$sub-nav-list-margin: emCalc(-4, 0, 18);
-$sub-nav-list-padding-top: emCalc(4);
+$sub-nav-list-margin: em-calc(-4 0 18);
+$sub-nav-list-padding-top: em-calc(4);
 
 /* We use this to control the definition */
-$sub-nav-font-size: emCalc(14);
+$sub-nav-font-size: em-calc(14);
 $sub-nav-font-color: #999;
 $sub-nav-font-weight: normal;
 $sub-nav-text-decoration: none;
@@ -112,10 +112,14 @@ $sub-nav-border-radius: 1000px;
 $sub-nav-active-font-weight: bold;
 $sub-nav-active-bg: $primary-color;
 $sub-nav-active-color: #fff;
-$sub-nav-active-padding: emCalc(3, 9);
-$sub-nav-active-cursor: default;', :css %>
+$sub-nav-active-padding: em-calc(3 9);
+$sub-nav-active-cursor: default;
 
-        <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>_variables.scss</strong>.</p>
+/* We use these to the item divider */
+$sub-nav-item-divider: "";
+$sub-nav-item-divider-margin: emCalc(12);', :css %>
+
+        <p><strong>Note:</strong> <code>em-calc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
 
       </div>
     </div>

data/docs/components/switch.html.erb

@@ -257,7 +257,7 @@ $switch-height-tny: 22px;
 $switch-height-sml: 28px;
 $switch-height-med: 36px;
 $switch-height-lrg: 44px;
-$switch-bottom-margin: emCalc(20);
+$switch-bottom-margin: em-calc(20);
 
 /* We use these to control default font sizes for our classes. */
 $switch-font-size-tny: 11px;
@@ -280,7 +280,7 @@ $switch-negative-color: #f5f5f5;
 /* Outline Style for tabbing through switches */
 $switch-label-outline: 1px dotted #888;', :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>_variables.scss</strong>.</p>
+        <p><strong>Note:</strong> <code>em-calc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
 
       </div>
     </div>

data/docs/components/tables.html.erb

@@ -100,22 +100,22 @@ $table-border-color: #ddd;
 
 /* These control the table head styles */
 $table-head-bg: #f5f5f5;
-$table-head-font-size: emCalc(14);
+$table-head-font-size: em-calc(14);
 $table-head-font-color: #222;
 $table-head-font-weight: bold;
-$table-head-padding: emCalc(8, 10, 10);
+$table-head-padding: em-calc(8 10 10);
 
 /* These control the row padding and font styles */
-$table-row-padding: emCalc(9, 10);
-$table-row-font-size: emCalc(14);
+$table-row-padding: em-calc(9 10);
+$table-row-font-size: em-calc(14);
 $table-row-font-color: #222;
-$table-line-height: emCalc(18);
+$table-line-height: em-calc(18);
 
 /* These are for controlling the display and margin of tables */
 $table-display: table-cell;
-$table-margin-bottom: emCalc(20);', :css %>
+$table-margin-bottom: em-calc(20);', :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>_variables.scss</strong>.</p>
+        <p><strong>Note:</strong> <code>em-calc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
 
 
       </div>

data/docs/components/tooltips.html.erb

@@ -55,16 +55,16 @@ $has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%);
 $has-tip-font-color-hover: $primary-color;
 $has-tip-cursor-type: help;
 
-$tooltip-padding: emCalc(8);
+$tooltip-padding: em-calc(8);
 $tooltip-bg: #000;
-$tooltip-font-size: emCalc(15);
+$tooltip-font-size: em-calc(15);
 $tooltip-font-weight: bold;
 $tooltip-font-color: #fff;
 $tooltip-line-height: 1.3;
-$tooltip-close-font-size: emCalc(10);
+$tooltip-close-font-size: em-calc(10);
 $tooltip-close-font-weight: normal;
 $tooltip-close-font-color: #888;
-$tooltip-font-size-sml: emCalc(14);
+$tooltip-font-size-sml: em-calc(14);
 $tooltip-radius: $global-radius;
 $tooltip-pip-size: 5px;
 ', :css %>
@@ -72,10 +72,33 @@ $tooltip-pip-size: 5px;
         <hr>
 
         <h3>Using the Javascript</h3>
-        <p>You'll need to include <code>foundation.tooltips.js</code> to make sure everything works properly. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the 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>
+        <div class="panel">
+          Before you can use tooltips you'll want to verify that both jQuery (or Zepto) and <code>foundation.js</code> are available on your page. You can refer to the <a href="../javascript.html">javascript documentation</a> on setting that up.
+        </div>
 
-        <p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
+        <p>Just add <code>foundation.tooltips.js</code> AFTER the <code>foundation.js</code> file. Your markup should look something like this:</p>
 
+        <%= code_example '
+<body>
+
+  ...
+
+  <script>
+      document.write(\'<script src=/js/vendor/\'
+        + (\'__proto__\' in {} ? \'zepto\' : \'jquery\')
+        + \'.js><\/script>\');
+    </script>
+
+  <script src="js/foundation/foundation.js"></script>
+  <script src="js/foundation/foundation.tooltips.js"></script>
+  <!-- Other JS plugins can be included here -->
+
+  <script>
+    $(document).foundation();
+  </script>
+
+</body>
+        ', :html %>
         <p>Required Foundation Library: <code>foundation.tooltips.js</code></p>
 
         <p>Then, you'll need to add a data-attribute to make the JS work properly on that element. That looks like:</p>
@@ -93,6 +116,7 @@ $tooltip-pip-size: 5px;
   selector : '.has-tip',
   additionalInheritableClasses : [],
   tooltipClass : '.tooltip',
+  touchCloseText: 'tap to close',
   disable-for-touch: false,
   tipTemplate : function (selector, content) {
     return '<span data-selector=\"' + selector + '\" class=\"'

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

@@ -81,10 +81,74 @@
         <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.</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>
+        <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 in the wrapping div (<code>div class="contain-to-grid fixed</code>).</p>
 
         <h5>Building the Nav</h5>
-        <p>When building your bar it is good to be aware of how many links you'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>
+        <p>When building your bar it is good to be aware of how many links you'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 an 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>
+
+        <nav class="top-bar hide-for-small" style="">
+          <ul class="title-area">
+            <!-- Title Area -->
+            <li class="name">
+              <h1>
+                <a href="http://www.zurb.com/expo">
+                  Expo
+                </a>
+              </h1>
+            </li>
+            <li class="toggle-topbar"><a href="#"></a></li>
+          </ul>
+
+
+          <section class="top-bar-section">
+            <!-- Right Nav Section -->
+            <ul class="right">
+              <li><a href="#">Courses</a></li>
+              <li class="has-dropdown">
+                <a href="#">Library</a>
+                <ul class="dropdown">
+                  <li><a href="http://patterntap.com">Pattern Tap</a></li>
+                  <li><a href="http://www.zurb.com/word">Word</a></li>
+                  <li><a href="http://www.zurb.com/responsive">Responsive</a></li>
+                  <li><a href="http://www.zurb.com/playground">Playground</a></li>
+                  <li><a href="http://www.zurb.com/quips">Quips</a></li>
+                </ul>
+              </li>
+              <li class="has-dropdown">
+                <a href="http://www.zurb.com/expo/community">Community</a>
+                <ul class="dropdown">
+                  <li><a href="http://www.forrst.com">Forrst</a></li>
+                  <li><a href="http://www.zurb.com/soapbox">Soapbox</a></li>
+                  <li><a href="http://www.zurb.com/speak">Speak</a></li>
+                  <li><a href="http://www.zurb.com/wired">Wired</a></li>
+                  <li><a href="http://www.enrollapp.com">Enroll</a></li>
+                </ul>
+              </li>
+              <li>
+                <a href="http://www.zurb.com/jobs">Job Board</a>
+              </li>
+              <!--
+
+              <li class="logged-in has-dropdown">
+                <a href="#">
+                  <div class="avatar">
+                    <img src="http://placehold.it/25x25">
+                    User-Name Here
+                  </div>
+                </a>
+                <ul class="dropdown">
+                  <li><a href="#"><img src="http://placehold.it/20x20&text=N">Notable</a></li>
+                  <li><a href="#"><img src="http://placehold.it/20x20&text=S">Solidify</a></li>
+                  <li><a href="#"><img src="http://placehold.it/20x20&text=V">Verify</a></li>
+                  <li><a href="#"><img src="http://placehold.it/20x20&text=I">Influence</a></li>
+                  <li class="signout"><a href="#">Sign Out</a></li>
+                </ul>
+              </li>
+        -->
+
+            </ul>
+          </section>
+        </nav>
 
         <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-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>
@@ -218,7 +282,7 @@
       <a name="clickable"></a>
       <h4>Clickable Topbar</h4>
       <p>You can now make the top bar clickable by adding a data-attribute to the nav element. Here's an example:</p>
-      <nav class="top-bar">
+      <nav class="top-bar" data-options="is_hover:false">
         <ul class="title-area">
           <!-- Title Area -->
           <li class="name">
@@ -285,14 +349,14 @@ $topbar-bg: #111;
 
 /* Height and margin */
 $topbar-height: 45px;
-$topbar-margin-bottom: emCalc(30);
+$topbar-margin-bottom: em-calc(30);
 
 /* Control Input height for top bar */
 $topbar-input-height: 2.45em;
 
 /* Controlling the styles for the title in the top bar */
 $topbar-title-weight: bold;
-$topbar-title-font-size: emCalc(17);
+$topbar-title-font-size: em-calc(17);
 
 /* Style the top bar dropdown elements */
 $topbar-dropdown-bg: #222;
@@ -307,7 +371,7 @@ $topbar-link-color: #fff;
 $topbar-link-color-hover: #fff;
 $topbar-link-color-active: #fff;
 $topbar-link-weight: bold;
-$topbar-link-font-size: emCalc(13);
+$topbar-link-font-size: em-calc(13);
 $topbar-link-hover-lightness: -30%; /* Darken by 30% */
 $topbar-link-bg-hover: darken($topbar-bg, 3%);
 $topbar-link-bg-active: darken($topbar-bg, 3%);
@@ -315,11 +379,11 @@ $topbar-link-bg-active: darken($topbar-bg, 3%);
 $topbar-dropdown-label-color: #555;
 $topbar-dropdown-label-text-transform: uppercase;
 $topbar-dropdown-label-font-weight: bold;
-$topbar-dropdown-label-font-size: emCalc(10);
+$topbar-dropdown-label-font-size: em-calc(10);
 
 /* Top menu icon styles */
 $topbar-menu-link-transform: uppercase;
-$topbar-menu-link-font-size: emCalc(13);
+$topbar-menu-link-font-size: em-calc(13);
 $topbar-menu-link-weight: bold;
 $topbar-menu-link-color: #fff;
 $topbar-menu-icon-color: #fff;
@@ -328,7 +392,7 @@ $topbar-menu-icon-color-toggled: #888;
 
 /* Transitions and breakpoint styles */
 $topbar-transition-speed: 300ms;
-$topbar-breakpoint: emCalc(940); /* Change to 9999px for always mobile layout */
+$topbar-breakpoint: em-calc(940); /* Change to 9999px for always mobile layout */
 $topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";
 
 /* Divider Styles */
@@ -336,17 +400,41 @@ $topbar-divider-border-bottom: solid 1px lighten($topbar-bg, 10%);
 $topbar-divider-border-top: solid 1px darken($topbar-bg, 10%);
 
 /* Sticky Class */
-$topbar-sticky-class: ".sticky";', :css %>
+$topbar-sticky-class: ".sticky";
+$topbar-arrows: true; //Set false to remove the triangle icon from the menu item', :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>_variables.scss</strong>.</p>
+        <p><strong>Note:</strong> <code>em-calc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
 
         <hr>
 
         <h3>Using the JavaScript</h3>
-        <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>
+        <div class="panel">
+          Before you can use the top bar you'll want to verify that both jQuery (or Zepto) and <code>foundation.js</code> are available on your page. You can refer to the <a href="../javascript.html">javascript documentation</a> on setting that up.
+        </div>
+
+        <p>Just add <code>foundation.topbar.js</code> AFTER the <code>foundation.js</code> file. Your markup should look something like this:</p>
+
+        <%= code_example '
+<body>
+
+  ...
+
+  <script>
+      document.write(\'<script src=/js/vendor/\'
+        + (\'__proto__\' in {} ? \'zepto\' : \'jquery\')
+        + \'.js><\/script>\');
+    </script>
+
+  <script src="js/foundation/foundation.js"></script>
+  <script src="js/foundation/foundation.topbar.js"></script>
+  <!-- Other JS plugins can be included here -->
 
-        <p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
+  <script>
+    $(document).foundation();
+  </script>
 
+</body>
+        ', :html %>
         <p>Required Foundation Library: <code>foundation.topbar.js</code></p>
 
         <h5>Optional JavaScript Configuration</h5>

data/docs/components/type.html.erb

@@ -302,11 +302,11 @@ $header-bottom-margin: .5em;
 $header-text-rendering: optimizeLegibility;
 
 /* We use these to control header font sizes */
-$h1-font-size: emCalc(44);
-$h2-font-size: emCalc(37);
-$h3-font-size: emCalc(27);
-$h4-font-size: emCalc(23);
-$h5-font-size: emCalc(18);
+$h1-font-size: em-calc(44);
+$h2-font-size: em-calc(37);
+$h3-font-size: em-calc(27);
+$h4-font-size: em-calc(23);
+$h5-font-size: em-calc(18);
 $h6-font-size: 1em;
 
 /* These control how subheaders are styled. */
@@ -325,8 +325,8 @@ $paragraph-font-family: inherit;
 $paragraph-font-weight: normal;
 $paragraph-font-size: 1em;
 $paragraph-line-height: 1.6;
-$paragraph-margin-bottom: emCalc(20);
-$paragraph-aside-font-size: emCalc(14);
+$paragraph-margin-bottom: em-calc(20);
+$paragraph-aside-font-size: em-calc(14);
 $paragraph-aside-line-height: 1.35;
 $paragraph-aside-font-style: italic;
 $paragraph-text-rendering: optimizeLegibility;
@@ -345,21 +345,21 @@ $anchor-font-color-hover: darken($primary-color, 5%);
 $hr-border-width: 1px;
 $hr-border-style: solid;
 $hr-border-color: #ddd;
-$hr-margin: emCalc(20);
+$hr-margin: em-calc(20);
 
 /* We use these to style lists */
 $list-style-position: outside;
 $list-side-margin: 0;
-$list-nested-margin: emCalc(20);
+$list-nested-margin: em-calc(20);
 $definition-list-header-weight: bold;
 $definition-list-header-margin-bottom: .3em;
-$definition-list-margin-bottom: emCalc(12);
+$definition-list-margin-bottom: em-calc(12);
 
 /* We use these to style blockquotes */
 $blockquote-font-color: lighten($header-font-color, 30%);
-$blockquote-padding: emCalc(9, 20, 0, 19);
+$blockquote-padding: em-calc(9 20 0 19);
 $blockquote-border: 1px solid #ddd;
-$blockquote-cite-font-size: emCalc(13);
+$blockquote-cite-font-size: em-calc(13);
 $blockquote-cite-font-color: lighten($header-font-color, 20%);
 $blockquote-cite-link-color: $blockquote-cite-font-color;
 
@@ -367,8 +367,8 @@ $blockquote-cite-link-color: $blockquote-cite-font-color;
 $acronym-underline: 1px dotted #ddd;
 
 /* We use these to control padding and margin */
-$microformat-padding: emCalc(10, 12);
-$microformat-margin: emCalc(0, 0, 20, 0);
+$microformat-padding: em-calc(10 12);
+$microformat-margin: em-calc(0 0 20 0);
 
 /* We use these to control the border styles */
 $microformat-border-width: 1px;
@@ -377,13 +377,13 @@ $microformat-border-color: #ddd;
 
 /* We use these to control full name font styles */
 $microformat-fullname-font-weight: bold;
-$microformat-fullname-font-size: emCalc(15);
+$microformat-fullname-font-size: em-calc(15);
 
 /* We use this to control the summary font styles */
 $microformat-summary-font-weight: bold;
 
 /* We use this to control abbr padding */
-$microformat-abbr-padding: emCalc(0, 1);
+$microformat-abbr-padding: em-calc(0 1);
 
 /* We use this to control abbr font styles */
 $microformat-abbr-font-weight: bold;

data/docs/config.ru

@@ -4,10 +4,27 @@ require 'sass'
 map '/assets' do
   environment = Sprockets::Environment.new
   environment.append_path File.expand_path('../../scss', __FILE__)
+  environment.append_path File.expand_path('../../js', __FILE__)
   environment.append_path File.expand_path('../css', __FILE__)
   environment.append_path File.expand_path('../../test/js', __FILE__)
-  environment.append_path File.expand_path('../../js', __FILE__)
   environment.append_path File.expand_path('../js', __FILE__)
   environment.append_path File.expand_path('../img', __FILE__)
+  
+  # environment.css_compressor = YUI::CssCompressor.new
+  # environment.js_compressor  = Uglifier.new(mangle: true)
+
   run environment
 end
+
+map '/' do
+  use Rack::ContentLength
+  use Rack::Static, 
+    :urls => ["/images", "/js", "/css"],
+    :root => "public",
+    :index => 'index.html'
+
+  run Rack::File.new("public")
+
+end
+
+

data/docs/controller.rb

@@ -16,7 +16,7 @@ helpers do
     elsif Socket.gethostname == "foundation"
       "http://foundation.zurb.com/docs/assets"
     else
-      "http://#{Socket.ip_address_list.detect{|intf| intf.ipv4_private?}.getnameinfo[0]}:4001/assets"
+      "/assets"
     end
   end
 

data/docs/css/_coderay.scss

@@ -11,7 +11,7 @@
 }
 
 .CodeRay pre {
-  margin: 0px;
+  margin: 0;
   font-size: .7em;
   line-height: 1.4em;
   white-space: pre-wrap;
@@ -114,4 +114,4 @@ table.CodeRay td {
 .CodeRay .insert .insert { color: #080; }
 .CodeRay .delete .delete { color: #800; }
 .CodeRay .change .change { color: #66f; }
-.CodeRay .head .head { color: #f4f; }
+.CodeRay .head .head { color: #f4f; }