zurb-foundation 4.0.2 → 4.0.3

data/CHANGELOG.md

@@ -3,6 +3,18 @@ We'll keep you up to date with what we've released so you at least have a gist o
 
 ---
 
+### **4.0**- February 28, 2013
+Initial launch of Foundation 4, a rewritten, mobile-first implementation of the framework. Major enhancements include a mobile-first approach across the board, Scss tools to allow for all-semantic coding, and rewritten JS plugins for speed and ease of use. Marketing site updates, new docs, refined and simplified styles and more. Review the [migration guide](http://foundation.zurb.com/migration.php) for more information.
+
+### 3.2.5
+Bug fixes
+
+### 3.2.4
+Bug fixes
+
+### 3.2.3
+Bug fixes
+
 ### 3.2.2- November 10, 2012
 This patch fixes a typo found in the tabs plugin.
 

data/Gemfile.lock

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

data/docs/_sidebar-components.html.erb

@@ -103,8 +103,8 @@
 
 <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">
+<!-- <div class="jobs hide-for-small">
   <h5>Awesome product jobs:</h5>
   <script type="text/javascript" src="http://www.zurb.com/jobs/widgets/jobs.js?limit=3&variation=foundation-sidebar"></script>
   <a id="via" href="http://zurbjobs.com">via&nbsp;<span class="jobs-link">ZURBjobs</span></a>
-</div>
+</div> -->

data/docs/_sidebar.html.erb

@@ -102,8 +102,8 @@
 
 <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">
+<!-- <div class="jobs hide-for-small">
   <h5>Awesome product jobs:</h5>
   <script type="text/javascript" src="http://www.zurb.com/jobs/widgets/jobs.js?limit=3&variation=foundation-sidebar"></script>
   <a id="via" href="http://zurbjobs.com">via&nbsp;<span class="jobs-link">ZURBjobs</span></a>
-</div>
+</div> -->

data/docs/_zurb-jobs.html.erb

@@ -1,5 +1,5 @@
-<div class="jobs hide-on-phones">
+<!-- <div class="jobs hide-on-phones">
   <h5>Awesome product jobs:</h5>
   <script type="text/javascript" src="http://www.zurb.com/jobs/widgets/jobs.js?limit=3&variation=foundation-sidebar"></script>
   <a id="via" href="http://zurbjobs.com">via&nbsp;<span class="jobs-link">ZURBjobs</span></a>
-</div>
+</div> -->

data/docs/compile.rb

@@ -2,42 +2,33 @@ require 'bundler'
 Bundler.require
 require 'fileutils'
 
-class FoundationDocs
-    def initialize
-      @environment = Sprockets::Environment.new
-      @environment.append_path File.expand_path('../../scss', __FILE__)
-      @environment.append_path File.expand_path('../css', __FILE__)
-      @environment.append_path File.expand_path('../../js', __FILE__)
-      @environment.append_path File.expand_path('../js', __FILE__)
-    end
-    def compile
-      FileUtils.mkdir_p('public/assets/vendor')
-      File.delete("public/assets/normalize.css") if File.exists?("public/assets/normalize.css")
-      File.delete("public/assets/docs.css") if File.exists?("public/assets/docs.css")
-      File.delete("public/assets/docs.js") if File.exists?("public/assets/docs.js")
-      File.delete("public/assets/vendor/custom.modernizr.js") if File.exists?("public/assets/vendor/custom.modernizr.js")
-      File.delete("public/assets/vendor/zepto.js") if File.exists?("public/assets/vendor/zepto.js")
-      File.delete("public/assets/vendor/jquery.js") if File.exists?("public/assets/vendor/jquery.js")
+class FoundationAssets
 
-      normalize_css_code = @environment["normalize.css"].to_s
-      docs_css_code = @environment["docs.css"].to_s
-      docs_js_code = Uglifier.compile(@environment["docs.js"].to_s)
-      modernizr_code = Uglifier.compile(@environment["vendor/custom.modernizr.js"].to_s)
-      jquery_code = Uglifier.compile(@environment["vendor/jquery.js"].to_s)
-      zepto_code = Uglifier.compile(@environment["vendor/zepto.js"].to_s)
+    BUNDLES = [
+      "vendor/custom.modernizr.js", "vendor/zepto.js", "vendor/jquery.js", 
+      "docs.js", "docs.css", "normalize.css"
+    ]
 
-      File.open("public/assets/normalize.css","w") {|f| f.puts normalize_css_code } 
-      File.open("public/assets/docs.css","w") {|f| f.puts  docs_css_code}
-      File.open("public/assets/docs.js","w") {|f| f.puts  docs_js_code}
+    def initialize
+      @env = Sprockets::Environment.new
+      @env.append_path File.expand_path('../../scss', __FILE__)
+      @env.append_path File.expand_path('../css', __FILE__)
+      @env.append_path File.expand_path('../../js', __FILE__)
+      @env.append_path File.expand_path('../js', __FILE__)
+    end
 
-      File.open("public/assets/vendor/custom.modernizr.js","w") {|f| f.puts modernizr_code }
-      File.open("public/assets/vendor/zepto.js","w") {|f| f.puts zepto_code}
-      File.open("public/assets/vendor/jquery.js","w") {|f| f.puts jquery_code}
+    def compile
+      assets_path = "public/assets"
+      FileUtils.mkdir_p("#{assets_path}/vendor")
+      BUNDLES.each do |bundle|
+        pth = "#{assets_path}/#{bundle}"
+        File.delete(pth) if File.exists?(pth)
+        code = @env[bundle].to_s
+        File.open(pth, "w") {|f| f.puts code}
+      end
     end
 end
 
-#s = Stasis.new(File.expand_path('.',__FILE__), File.expand_path('./public', __FILE__))
-#s.render
-`bundle exec stasis`
-f=FoundationDocs.new
-f.compile
+Stasis.new(File.expand_path('.'), File.expand_path('./public'), {:asset_path => "http://foundation.zurb.com/docs/assets"}).render
+assets = FoundationAssets.new
+assets.compile

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

@@ -103,6 +103,9 @@ $base-style: true
 /* We use this to control the maximum blocks and spacing */
 $block-grid-elements: 12;
 $block-grid-default-spacing: 10px;
+
+/* Enables media queries for block-grid classes. Set to false if writing semantic HTML. */
+$block-grid-media-queries: true
 ', :css %>
 
       </div>

data/docs/components/dropdown.html.erb

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

data/docs/components/grid.html.erb

@@ -355,7 +355,7 @@ $total-columns: 12 !default;
         <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>
+        <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>
 
       </div>
     </div>

data/docs/components/joyride.html.erb

@@ -51,7 +51,7 @@
   <div class="joyride-content-wrapper">
     <p>Hello and welcome to the Joyride documentation page.</p>
     <a href="#" class="small button joyride-next-tip">Next</a>
-    <a href="#close" class="joyride-close-tip">×</a>
+    <a href="#close" class="joyride-close-tip">&times;</a>
   </div>
 </div>
 ', :html %>

data/docs/components/reveal.html.erb

@@ -119,31 +119,32 @@ $reveal-border-color:    #666;', :css %>
 
       </div>
     </div>
+</div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>
 
-    <div id="firstModal" class="reveal-modal">
-      <h2>This is a 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>
-      <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>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
-      <a class="close-reveal-modal">&#215;</a>
-    </div>
+<div id="firstModal" class="reveal-modal">
+  <h2>This is a 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>
+  <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal…</a></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">
-        <iframe width="800" height="315" src="http://www.youtube.com/embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
-      </div>
+<div id="secondModal" class="reveal-modal">
+  <h2>This is a second modal.</h2>
+  <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
+  <a class="close-reveal-modal">&#215;</a>
+</div>
 
-      <a class="close-reveal-modal">&#215;</a>
-    </div>
-  </div>
-  <div class="large-3 pull-9 columns">
-    <%= render "_sidebar-components.html.erb" %>
+<div id="videoModal" class="reveal-modal large">
+  <h2>This modal has video</h2>
+  <div class="flex-video">
+    <iframe width="800" height="315" src="http://www.youtube.com/embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
   </div>
+
+  <a class="close-reveal-modal">&#215;</a>
 </div>
+

data/docs/components/section.html.erb

@@ -59,7 +59,7 @@
         <hr>
 
         <h3>Sections Replace Accordion, Tabs &amp; Vertical Nav</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 interactionss, but the classes you add to the element control how it gets rendered and styled across our breakpoint.</p>
+        <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>
 
@@ -73,18 +73,20 @@
         <p>There are two ways to build sections in Foundation 4, with our predefined HTML classes or with our structure and mixins. Building a sections using our predefined classes is super-easy, you just need to create a <code>&lt;div class="section-container" data-section&gt;</code> as a wrapper for the sections themselves. Inside of this wrapper, you'll create either a <code>&lt;section class="section"&gt;</code> or <code>&lt;div class="section"&gt;</code>. Within that you'll include some sort of <code>.title</code> (this can be headers or a paragragh) and a <code>&lt;div class="content"&gt;</code>. Here is the markup you'll need:</p>
 
 <%= code_example '
-<section class="section">
-  <p class="title"><a href="#panel1">Section 1</a></p>
-  <div class="content" data-slug="panel1">
-    <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-  </div>
-</section>
-<section class="section">
-  <p class="title"><a href="#panel2">Section 2 Section 2</a></p>
-  <div class="content" data-slug="panel2">
-    <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-  </div>
-</section>', :html %>
+<div class="section-container" data-section>
+  <section class="section">
+    <p class="title"><a href="#panel1">Section 1</a></p>
+    <div class="content">
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section class="section">
+    <p class="title"><a href="#panel2">Section 2</a></p>
+    <div class="content">
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
 
         <p>The class options:</p>
         <ul class="disc">
@@ -95,6 +97,91 @@
 
         <hr>
 
+        <h3>Variations</h3>
+        <h6>Tabs/Accordion</h6>
+        <p>Adding a <code>tabs</code> class to the section container will enable tabs on large screens and show an accordion on small screens.</p>
+<%= code_example '
+<div class="section-container tabs" data-section>
+  <section class="section">
+    <p class="title"><a href="#">Section 1</a></p>
+    <div class="content">
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section class="section">
+    <p class="title"><a href="#">Section 2</a></p>
+    <div class="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>
+
+        <p>Vertical navigation elements usually appear within the grid so the width can be controlled on desktop.</p>
+
+        <p>Use the <code>side-nav</code> class on the list to apply the Foundation navigation styles</p>
+
+<%= code_example '
+<div class="row">
+  <div class="large-3 columns">
+    <div class="section-container vertical-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>
+  </div>
+  <div class="large-9 columns">
+    <p>Content to the right of the navigation.</p>
+  </div>
+</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>
+
+        <%= code_example '
+<div class="section-container" data-section data-options="deep_linking: true">
+  <section class="section">
+    <p class="title"><a href="#section1">Section 1</a></p>
+    <div class="content" data-slug="section1">
+      <p>Content of section 1.</p>
+    </div>
+  </section>
+  <section class="section">
+    <p class="title"><a href="#section2">Section 2</a></p>
+    <div class="content" data-slug="section2">
+      <p>Content of section 2.</p>
+    </div>
+  </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>
+
+        <hr>
+
         <h5>Default SCSS Variables</h5>
 <%= code_example '
 /* We use these to set padding and hover factor */
@@ -123,7 +210,7 @@ $section-bottom-margin:          emCalc(20px);
         <hr>
 
         <h3>Using the JavaScript</h3>
-        <p>You don't need ths JS to create alert boxes with Foundation. The only reason you'll need to include <code>foundation.alerts.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 don't need ths JS to create sections with Foundation. The only reason you'll need to include <code>foundation.section.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 sections 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>
 
@@ -132,9 +219,31 @@ $section-bottom-margin:          emCalc(20px);
         <p>Then, you'll need to add a data-attribute to make the JS work properly on that element. That looks like:</p>
 
 <%= code_example '
-<div data-alert class="alert-box">
-  <!-- Your content goes here -->
-  <a href="#" class="close">&times;</a>
+<div class="section-container" data-section>
+  <section class="section">
+    <p class="title"><a href="#panel1">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="#panel2">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 %>
 

data/docs/controller.rb

@@ -10,8 +10,10 @@ ignore /compile.rb/
 
 helpers do
   def asset_path
-    if Socket.gethostname == "foundation"
-      "http://foundation4.zurb.com/docs/assets"
+    if @_stasis.options[:asset_path]
+      @_stasis.options[:asset_path]
+    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"
     end
@@ -20,23 +22,23 @@ helpers do
   def code_example(code, lang=:ruby)
     "<div class='#{lang}'>" + CodeRay.scan(code, lang).div(:css => :class) + "</div>"
   end
-  
+
   def foundation_home_path
     '/'
   end
-  
+
   def features_path
     '/grid.php'
   end
-  
+
   def add_ons_path
     '/templates.php'
   end
-  
+
   def case_studies_path
     '/case-jacquelinewest.php'
   end
-  
+
   def docs_path
     '/docs/'
   end