zurb-foundation 3.0.7 → 3.0.8.rc1

data/{stylesheets → scss}/foundation/mixins/_semantic-grid.scss

@@ -2,21 +2,23 @@
 
   // Outer row mixin for container rows
 
-  @mixin outerRow() { width: $rowWidth; max-width: 100%; min-width: $screenSmall; margin: 0 auto; @include clearfix(); }
+  @mixin outerRow() { width: $rowWidth; max-width: 100%; min-width: $screenSmall; margin: 0 auto; @extend %clearfix; }
 
   // Inner row mixin for nested rows, must be a child of an outer-row element. $behavior can be 'collapse' to get rid of margins
 
+  @mixin innerRowBase { width: auto; max-width: none; min-width: 0; }
   @mixin innerRow($behavior: false) {
-    @if $behavior == collapse { width: auto; max-width: none; min-width: 0; margin: 0; @include clearfix();
-    } @else { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2)); @include clearfix(); }
+      @if $behavior == collapse { @extend %row-i-base; margin: 0; @extend %clearfix;
+    } @else                     { @extend %row-i-base; margin: 0 (-($columnGutter/2)); @extend %clearfix; }
   }
 
   // Columns mixin, syntax is ($columns, $behavior). Behavior can be 'centered' which centers things or 'collapse' which collapses the gutters. ex @include row(4,[center | collapse])
 
+  @mixin columnBase { position: relative; min-height: 1px; padding: 0 ($columnGutter/2); }
   @mixin column($columns:$columns, $behavior: false) {
-    @if $behavior == center { float: none; margin: 0 auto; position: relative; min-height: 1px; padding: 0 ($columnGutter/2); width: gridCalc($columns, $totalColumns);
-    } @else if $behavior == collapse { float: left; position: relative; min-height: 1px; padding: 0; width: gridCalc($columns, $totalColumns);
-    } @else { float: left; position: relative; min-height: 1px; padding: 0 ($columnGutter/2); width: gridCalc($columns, $totalColumns); }
+      @if      $behavior == center   { @extend %fl-n; margin: 0 auto !important; @extend %c-base; width: gridCalc($columns, $totalColumns);
+    } @else if $behavior == collapse { @extend %fl-l; @extend %c-base; padding: 0; width: gridCalc($columns, $totalColumns);
+    } @else                          { @extend %fl-l; @extend %c-base; width: gridCalc($columns, $totalColumns); }
   }
 
   // Offset Mixin, include after a column mixin to manipulate its grid offset.
@@ -35,12 +37,30 @@
   // Mobile Columns, syntax is @include mobile-column(#);
 
   @mixin mobileColumn($columns:$columns, $behavior: false) {
-    @if $behavior == center { @include respondTo(smallScreen) { float: none; margin: 0 auto; position: relative; min-height: 1px; padding: 0 ($columnGutter/2); width: gridCalc($columns, $mobileTotalColumns); }
+      @if      $behavior == center   { @include respondTo(smallScreen) { float: none; margin: 0 auto; position: relative; min-height: 1px; padding: 0 ($columnGutter/2); width: gridCalc($columns, $mobileTotalColumns); }
     } @else if $behavior == collapse { @include respondTo(smallScreen) { float: left; position: relative; min-height: 1px; padding: 0; width: gridCalc($columns, $mobileTotalColumns); }
-    } @else { @include respondTo(smallScreen) { width: gridCalc($columns, $mobileTotalColumns); float: left; padding: 0 ($columnGutter/2); } }
+    } @else                          { @include respondTo(smallScreen) { float: left; width: gridCalc($columns, $mobileTotalColumns); padding: 0 ($columnGutter/2); } }
   }
 
   // Mobile Push/Pull Mixin
 
   @mixin mobilePush($push:1) { @include respondTo(smallScreen) { left: gridCalc($push, $mobileTotalColumns); } }
   @mixin mobilePull($push:1) { @include respondTo(smallScreen) { right: gridCalc($push, $mobileTotalColumns); } }
+
+  // Invisible Placeholder Classes for Grid
+  %fl-l { float: left; }
+  %fl-r { float: right; }
+  %fl-n { float: none; }
+
+  %clearfix { @include clearfix(); }
+  %clearfix-m { @include mobileClearfix(); }
+
+  %row-o { @include outerRow(); }
+  %row-i-base { @include innerRowBase(); }
+  %row-i { @include innerRow(); }
+
+  %c-base { @include columnBase(); }
+
+  @for $i from 1 through $totalColumns {
+    .c-#{$i} { @include column($i); }
+  }

data/{stylesheets → scss}/foundation.scss

@@ -7,10 +7,10 @@
 
 @import "foundation/functions/all";
 
-@import "foundation/mixins/all";
-
 @import "foundation/settings";
 
+@import "foundation/mixins/all";
+
 @import "foundation/common/base";
 
 @import "foundation/components/grid", "foundation/components/modules/all";

data/templates/project/index.html

@@ -29,7 +29,7 @@
 	<div class="row">
 		<div class="twelve columns">
 			<h2>Welcome to Foundation</h2>
-			<p>This is version 3.0.6 released on July 20, 2012</p>
+			<p>This is version <%= Foundation::VERSION %>.</p>
 			<hr />
 		</div>
 	</div>
@@ -120,27 +120,27 @@
 	</div>
 	
 	<!-- Included JS Files (Uncompressed) -->
-	<!--
-	<script src="jquery.js"></script>
-  <script src="javascripts/foundation/modernizr.foundation.js"></script>
+	<script src="javascripts/foundation/jquery.js"></script>
+  <script src="javascripts/foundation/jquery.foundation.reveal.js"></script>
+  <script src="javascripts/foundation/jquery.foundation.orbit.js"></script>
+  <script src="javascripts/foundation/jquery.foundation.forms.js"></script>
   <script src="javascripts/foundation/jquery.placeholder.js"></script>
+  <script src="javascripts/foundation/jquery.foundation.tooltips.js"></script>
   <script src="javascripts/foundation/jquery.foundation.alerts.js"></script>
-  <script src="javascripts/foundation/jquery.foundation.accordion.js"></script>
   <script src="javascripts/foundation/jquery.foundation.buttons.js"></script>
-  <script src="javascripts/foundation/jquery.foundation.tooltips.js"></script>
-  <script src="javascripts/foundation/jquery.foundation.forms.js"></script>
-  <script src="javascripts/foundation/jquery.foundation.tabs.js"></script>
+  <script src="javascripts/foundation/jquery.foundation.accordion.js"></script>
   <script src="javascripts/foundation/jquery.foundation.navigation.js"></script>
-  <script src="javascripts/foundation/jquery.foundation.reveal.js"></script>
-  <script src="javascripts/foundation/jquery.foundation.orbit.js"></script>
-  -->
+  <script src="javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
+  <script src="javascripts/foundation/jquery.foundation.tabs.js"></script>
 	
 	<!-- Included JS Files (Compressed) -->
+	<!--
 	<script src="javascripts/jquery.min.js"></script>
 	<script src="javascripts/foundation.min.js"></script>
+	-->
 	
 	<!-- Application Javascript, safe to override -->
-	<script src="javascripts/app.js"></script>
+	<script src="javascripts/foundation/app.js"></script>
 	
 
 </body>

data/templates/project/manifest.rb

@@ -1,53 +1,38 @@
 description 'Foundation Compass Gem'
 
 # Sass Files
-stylesheet 'sass/_settings.scss',                         :to => '_settings.scss'
-stylesheet 'sass/app.scss',                               :to => 'app.scss', :media => "screen, projector, print"
-
-# Relative asset paths
-js_path = "/../../vendor/assets/javascripts/foundation"
-compressed_js_path = "/../../public/assets"
-images_path = "/../../vendor/assets/images/foundation"
-
-# Compressed Javascripts
-javascript "#{compressed_js_path}/jquery.js",             :to => "jquery.min.js"
-javascript "#{compressed_js_path}/foundation.js",         :to => "foundation.min.js"
-
-# Uncompressed Javascripts
-javascript "#{js_path}/jquery.js",                        :to => "jquery.js"
-javascript "#{js_path}/modernizr.foundation.js",          :to => "foundation/modernizr.foundation.js"
-javascript "#{js_path}/jquery.placeholder.js",            :to => "foundation/jquery.placeholder.js"
-javascript "#{js_path}/jquery.foundation.alerts.js",      :to => "foundation/jquery.foundation.alerts.js"
-javascript "#{js_path}/jquery.foundation.accordion.js",   :to => "foundation/jquery.foundation.accordion.js" 
-javascript "#{js_path}/jquery.foundation.buttons.js",     :to => "foundation/jquery.foundation.buttons.js"
-javascript "#{js_path}/jquery.foundation.tooltips.js",    :to => "foundation/jquery.foundation.tooltips.js"
-javascript "#{js_path}/jquery.foundation.forms.js",       :to => "foundation/jquery.foundation.forms.js"
-javascript "#{js_path}/jquery.foundation.tabs.js",        :to => "foundation/jquery.foundation.tabs.js"
-javascript "#{js_path}/jquery.foundation.navigation.js",  :to => "foundation/jquery.foundation.navigation.js"
-javascript "#{js_path}/jquery.foundation.reveal.js",      :to => "foundation/jquery.foundation.reveal.js"
-javascript "#{js_path}/jquery.foundation.orbit.js",       :to => "foundation/jquery.foundation.orbit.js"
-
-# Customizable Javascript
-javascript "#{js_path}/app.js",                           :to => "app.js"
+stylesheet 'scss/_settings.scss',                         :to => '_settings.scss'
+stylesheet 'scss/app.scss',                               :to => 'app.scss', :media => "screen, projector, print"
 
 # Make sure you list all the project template files here in the manifest.
-html 'index.html', :erb => true
+html 'index.html', :erb => true # use Foundation::VERSION
 file 'humans.txt'
 file 'robots.txt'
 file 'MIT-LICENSE.txt'
 
-# Image Files
-image "#{images_path}/orbit/bullets.jpg",                   :to => "foundation/orbit/bullets.jpg"
-image "#{images_path}/orbit/left-arrow.png",                :to => "foundation/orbit/left-arrow.png"
-image "#{images_path}/orbit/left-arrow-small.png",          :to => "foundation/orbit/left-arrow-small.png"
-image "#{images_path}/orbit/loading.gif",                   :to => "foundation/orbit/loading.gif"
-image "#{images_path}/orbit/mask-black.png",                :to => "foundation/orbit/mask-black.png"
-image "#{images_path}/orbit/pause-black.png",               :to => "foundation/orbit/pause-black.png"
-image "#{images_path}/orbit/right-arrow.png",               :to => "foundation/orbit/right-arrow.png"
-image "#{images_path}/orbit/right-arrow-small.png",         :to => "foundation/orbit/right-arrow-small.png"
-image "#{images_path}/orbit/rotator-black.png",             :to => "foundation/orbit/rotator-black.png"
-image "#{images_path}/orbit/timer-black.png",               :to => "foundation/orbit/timer-black.png"
-
+# Images exist in non-standard location so they will play nicely with
+# Rails asset-pipeline.  So this method allows us to copy images from
+# outside the compass template
+def copy_images_from(relative_path, prefix_path)
+  absolute_path = File.join(File.dirname(__FILE__), relative_path, prefix_path)
+  Dir.glob("#{absolute_path}/*.*") do |img|
+    image "#{relative_path}/#{prefix_path}/#{File.basename(img)}", 
+      :to => "#{prefix_path}/#{File.basename(img)}"
+  end
+end
+
+def copy_js_from(relative_path, prefix_path, excludes=[])
+  absolute_path = File.join(File.dirname(__FILE__), relative_path, prefix_path)
+  js_files = Dir.glob("#{absolute_path}/*.js")
+  js_files.reject! {|f| excludes.include? File.basename(f)}
+  js_files.each do |js|
+    javascript "#{relative_path}/#{prefix_path}/#{File.basename(js)}", 
+      :to => "#{prefix_path}/#{File.basename(js)}"
+  end
+end
+
+copy_images_from("../../vendor/assets/images", "foundation/orbit")
+copy_js_from("../../vendor/assets/javascripts", "foundation", ["index.js"])
 
 help %Q{
 
@@ -59,4 +44,4 @@ welcome_message %Q{
 
 w00t! You're using ZURB Foundation, now go forth and rock 'n roll!
 
-}
+}

data/templates/project/{sass → scss}/_settings.scss

@@ -56,3 +56,20 @@
 // Modular Scale
 // $ratio: $golden;
 // $base-size: 14px 44px;
+
+// Tooltip Settings
+// $hasTipBorderBottom: dotted 1px #ccc;
+// $hasTipFontWeight: bold;
+// $hasTipFontColor: #333;
+// $hasTipBorderBottomHover: dotted 1px darken($mainColor, 20%);
+// $hasTipFontColorHover: $mainColor;
+// $tooltipBackgroundColor: #000;
+// $tooltipBackgroundOpacity: 0.85;
+// $tooltipFontSize: 12;
+// $tooltipFontWeight: bold;
+// $tooltipFontColor: #fff;
+// $tapToCloseFontSize: 10;
+// $tapToCloseFontWeight: normal;
+// $tapToCloseFontColor: #888;
+// $tooltipFontSizeScreenSmall: 14;
+// $tooltipBackgroundOpacityScreenSmall: 0.85;

data/templates/project/{sass → scss}/app.scss

@@ -9,10 +9,10 @@
 // and uncommenting what you want below. You must uncomment the following if customizing
 
 // @import "compass/css3";
-// @import "foundations/settings";
-// @import "foundations/function/all";
-// @import "foundations/common/globals";
-// @import "foundations/mixins/clearfix";
+// @import "foundation/settings";
+// @import "foundation/functions/all";
+// @import "foundation/common/globals";
+// @import "foundation/mixins/clearfix";
 
 // Control which mixins you have access too
 

data/templates/upgrade/manifest.rb

@@ -0,0 +1,39 @@
+description 'Foundation Compass Gem'
+
+# Images exist in non-standard location so they will play nicely with
+# Rails asset-pipeline.  So this method allows us to copy images from
+# outside the compass template
+def copy_images_from(relative_path, prefix_path)
+  absolute_path = File.join(File.dirname(__FILE__), relative_path, prefix_path)
+  Dir.glob("#{absolute_path}/*.*") do |img|
+    image "#{relative_path}/#{prefix_path}/#{File.basename(img)}", 
+      :to => "#{prefix_path}/#{File.basename(img)}"
+  end
+end
+
+def copy_js_from(relative_path, prefix_path, excludes=[])
+  absolute_path = File.join(File.dirname(__FILE__), relative_path, prefix_path)
+  js_files = Dir.glob("#{absolute_path}/*.js")
+  js_files.reject! {|f| excludes.include? File.basename(f)}
+  js_files.each do |js|
+    javascript "#{relative_path}/#{prefix_path}/#{File.basename(js)}", 
+      :to => "#{prefix_path}/#{File.basename(js)}"
+  end
+end
+
+copy_images_from("../../vendor/assets/images", "foundation/orbit")
+copy_js_from("../../vendor/assets/javascripts", "foundation", ["app.js","index.js"])
+
+help %Q{
+
+If you need help, email us at foundation@zurb.com or visit foundation.zurb.com"
+
+}
+
+welcome_message %Q{
+
+bundle exec compass install -r zurb-foundation foundation/upgrade
+
+Your project assets have been upgraded, w00t!  It's possible there have been additional customizable settings added to Foundation so you should check out http://foundation.zurb.com/docs/gem-install.php#settings.
+
+}

data/test/buttons.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+  <meta charset="utf-8" />
+
+  <!-- Set the viewport width to device width for mobile -->
+  <meta name="viewport" content="width=device-width" />
+
+  <title>Foundation Button Testing</title>
+
+  <!-- Included CSS Files -->
+  <link rel="stylesheet" href="stylesheets/styles.css">
+  
+  <script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
+
+  <!-- IE Fix for HTML5 Tags -->
+  <!--[if lt IE 9]>
+    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
+</head>
+<body>
+  
+  <div class="row">
+    <div class="twelve columns">
+      <p><a href="index.html">&laquo; Back</a></p>
+      <h2>Foundation Button Testing</h2>
+      <hr />
+      <dl class="sub-nav">
+        <dt>Go to:</dt>
+        <dd><a href="#buttons">Buttons</a></dd>
+        <dd><a href="#button-groups">Button Groups</a></dd>
+        <dd><a href="#dropdown-buttons">Dropdown Buttons</a></dd>
+      </dl>
+    </div>
+  </div>
+  
+  <!-- Test Foundation Components Here -->
+  <div class="row">
+    <div class="twelve columns">
+      
+      <h3>Buttons</h3>
+      <h4 class="subheader">Buttons are a convenient tool when it comes to more traditional actions. To that end, Foundation includes a lot of easy to use button styles that you can customize or override.</h4>
+      <br>
+      <div class="row">
+        <div class="four columns">
+          <a name="buttons"></a>
+          <h4>Basic Buttons</h4>
+          <p>Foundation buttons have a number of parameters and styles &mdash; you can see a few examples below. The out of the box classes include size, type (color) and style (square, slightly rounded, and completely rounded).</p>
+        </div>
+        <br>
+        <div class="eight columns">
+          <div class="row">
+            <div class="six columns">
+              <a href="#" class="tiny button">Tiny Button &raquo;</a><br /><br />
+              <a href="#" class="small button">Small Button &raquo;</a><br /><br />
+              <a href="#" class="button">Regular Button &raquo;</a><br /><br />
+              <a href="#" class="large button">Large Button &raquo;</a><br /><br />
+              <br /><br />
+              <a href="#" class="tiny secondary button">Secondary Button &raquo;</a><br /><br />
+              <a href="#" class="small secondary button">Secondary Button &raquo;</a><br /><br />
+              <a href="#" class="secondary button">Secondary Button &raquo;</a><br /><br />
+              <a href="#" class="large secondary button">Secondary Button &raquo;</a><br /><br />
+              <br /><br />
+            </div>
+            <div class="six columns">
+              <a href="#" class="tiny success button">Success Button &raquo;</a><br /><br />
+              <a href="#" class="small success button">Success Button &raquo;</a><br /><br />
+              <a href="#" class="success button">Success Button &raquo;</a><br /><br />
+              <a href="#" class="large success button">Success Button &raquo;</a><br /><br />
+              <br /><br />
+              <a href="#" class="tiny alert button">Alert Button &raquo;</a><br /><br />
+              <a href="#" class="small alert button">Alert Button &raquo;</a><br /><br />
+              <a href="#" class="alert button">Alert Button &raquo;</a><br /><br />
+              <a href="#" class="large alert button">Alert Button &raquo;</a><br /><br />
+              <br /><br />
+            </div>
+          </div>
+          <p>Button classes can also be applied to <code>button</code> elements, as well as <code>input type="submit"</code> elements.</p>
+
+          <button class="button">Form Button</button>
+          <input type="submit" class="button" value="Input Submit Button" />
+          <a href="#" class="button">Regular Button &raquo;</a>
+        </div>
+      </div>
+      
+      <br><br><br>
+
+      <div class="row">
+        <div class="four columns">
+          <a name="button-groups"></a>
+          <h4>Button Groups</h4>
+          <p>When you need a group of actions, button groups give you some easy-to-use options. These can have a class of <code>.rounded</code> or <code>.even</code>. You can even create button bars by using <code>.button-bar</code>.</p>
+        </div>
+        <br>
+        <div class="eight columns">
+          <ul class="button-group radius">
+            <li><a href="#" class="button radius">Button 1</a></li>
+            <li><a href="#" class="button radius">Button 2</a></li>
+            <li><a href="#" class="button radius">Button 3</a></li>
+          </ul>
+          <ul class="button-group even three-up">
+            <li><a href="#" class="button">Button 1</a></li>
+            <li><a href="#" class="button">Button 2</a></li>
+            <li><a href="#" class="button">Button 3</a></li>
+          </ul>
+          <div class="button-bar">
+            <ul class="button-group">
+              <li><a href="#" class="button">Button 1</a></li>
+              <li><a href="#" class="button">Button 2</a></li>
+              <li><a href="#" class="button">Button 3</a></li>
+            </ul>
+
+            <ul class="button-group">
+              <li><a href="#" class="button">Button 1</a></li>
+              <li><a href="#" class="button">Button 2</a></li>
+              <li><a href="#" class="button">Button 3</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      
+      <br><br>
+
+      <div class="row">
+        <div class="four columns">
+          <a name="dropdown-buttons"> </a>
+          <h4>Dropdown Buttons</h4>
+          <p>These are useful when an action has several possible outcomes to select from, or when there are secondary choices you can make in lieu of a primary action.</p>
+          <p>If you need your dropdown to go up, simple add a class of <code>.up</code> to <code>.button.dropdown</code>.</p>
+        </div>
+        <div class="eight columns">
+          <p>
+            <div href="#" class="large button dropdown">
+              Dropdown Button
+              <ul>
+                <li><a href="#">Dropdown Item</a></li>
+                <li><a href="#">Another Dropdown Item</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Last Item</a></li>
+              </ul>
+            </div>
+          </p>
+          <p>
+            <div href="#" class="large alert button split dropdown">
+              <a href="#">Split Button</a>
+              <span></span>
+              <ul>
+                <li><a href="#">Dropdown Item</a></li>
+                <li><a href="#">Another Dropdown Item</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Last Item</a></li>
+              </ul>
+            </div>
+          </p>
+          <p>Notice that in a split button, the <code>span</code> is the dropdown affordance and the main anchor is the primary button action.</p>
+        </div>
+      </div>
+
+    </div>
+  </div>
+  
+  <!-- Included JS Files -->
+  <script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
+  <script src="../vendor/assets/javascripts/foundation/app.js"></script>
+  <script type="text/javascript">
+    // Page-Specific JavaScript Goes Here
+  </script> 
+</body>
+</html>

data/test/config.rb

@@ -0,0 +1,11 @@
+require File.join(File.dirname(__FILE__),"../lib/zurb-foundation")
+# require "foundation"
+project_type = :stand_alone
+http_path = "/"
+sass_dir = "scss"
+css_dir = "stylesheets"
+images_dir = "../vendor/assets/images"
+line_comments = false
+preferred_syntax = :scss
+output_style = :compact
+relative_assets = true