zurb-foundation 3.0.7 → 3.0.8.rc1

data/.gitignore

@@ -18,3 +18,5 @@ tmp
 *.DS_Store
 marketing/.sass-cache/*
 .sass-cache/*
+test/.sass-cache/*
+test/stylesheets/*

data/CONTRIBUTING.md

@@ -0,0 +1,43 @@
+# Foundation
+
+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
+
+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.
+
+## Compass Project
+
+If you have a compass project and would like updated assets you can run the following command at any given time from within your project directory:
+
+compass create -r zurb-foundation --using foundation
+
+## Development
+
+Want to test out the Compass templates.  Don't recompile the gem every time, use `bundler` like so:
+
+```bash
+mkdir demo1
+cd demo1
+echo -e 'source :rubygems\n
+gem "zurb-foundation", :path => "/path/to/foundation/repo"\n
+gem "compass"\n' > Gemfile
+bundle exec compass create -r zurb-foundation --using foundation
+```
+
+On subsequent template updates use:
+
+```bash
+bundle exec compass create -r zurb-foundation --using foundation --force
+```
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Test your changes to the best of your ability.  We've provided a test/ folder, feel free to add to it as necessary.
+4. Commit your changes (`git commit -am 'Added some feature'`)
+5. Push to the branch (`git push origin my-new-feature`)
+6. Create new Pull Request

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    zurb-foundation (3.0.7)
+    zurb-foundation (3.0.8.rc1)
       compass (>= 0.12.2)
       rake
       sass (>= 3.2.0.alpha.244)
@@ -9,42 +9,17 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
-    POpen4 (0.1.4)
-      Platform (>= 0.4.0)
-      open4
-    Platform (0.4.0)
-    capistrano (2.12.0)
-      highline
-      net-scp (>= 1.0.0)
-      net-sftp (>= 2.0.0)
-      net-ssh (>= 2.0.14)
-      net-ssh-gateway (>= 1.1.0)
     chunky_png (1.2.5)
     compass (0.12.2)
       chunky_png (~> 1.2)
       fssm (>= 0.2.7)
       sass (~> 3.1)
     fssm (0.2.9)
-    highline (1.6.12)
-    jammit (0.6.5)
-      yui-compressor (>= 0.9.3)
-    net-scp (1.0.4)
-      net-ssh (>= 1.99.1)
-    net-sftp (2.0.5)
-      net-ssh (>= 2.0.9)
-    net-ssh (2.5.2)
-    net-ssh-gateway (1.1.0)
-      net-ssh (>= 1.99.1)
-    open4 (1.3.0)
     rake (0.9.2.2)
-    sass (3.2.0.alpha.275)
-    yui-compressor (0.9.6)
-      POpen4 (>= 0.1.4)
+    sass (3.2.0.alpha.277)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  capistrano
-  jammit
   zurb-foundation!

data/README.md

@@ -20,7 +20,7 @@ Repo Contents
 ZURB
 ====
 
-Foundation was made by [ZURB](http://www.zurb.com), an interaction design and design strategy firm in Campbell, CA.
+Foundation was made by [ZURB](http://www.zurb.com), a product design company in Campbell, CA.
 
 If Foundation knocks your socks off the way we hope it does and you want more, why not check out [our jobs](http://www.zurb.com/talent)?
 
@@ -92,4 +92,4 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
 
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/foundation.gemspec

@@ -8,7 +8,7 @@ Gem::Specification.new do |gem|
   gem.summary       = %q{ZURB Foundation on SASS/Compass}
   gem.homepage      = "http://foundation.zurb.com"
 
-  gem.files         = `git ls-files`.split($\).reject {|f| /marketing\/*/.match(f)}
+  gem.files         = `git ls-files`.split($\)
   gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
   gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
   gem.name          = "zurb-foundation"
@@ -18,6 +18,4 @@ Gem::Specification.new do |gem|
   gem.add_dependency "compass", [">= 0.12.2"]
   gem.add_dependency "sass", [">= 3.2.0.alpha.244"]
   gem.add_dependency "rake"
-  gem.add_development_dependency "capistrano"
-  gem.add_development_dependency "jammit"
 end

data/index.html

@@ -122,12 +122,18 @@
 
 
   <!-- Included JS Files -->
-  <script src="vendor/assets/javascripts/foundation/jquery.min.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.reveal.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.orbit-1.4.0.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.customforms.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.placeholder.min.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.tooltips.js"></script>
+  <script src="vendor/assets/javascripts/foundation/jquery.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/jquery.foundation.forms.js"></script>
+  <script src="vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
+  <script src="vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
+  <script src="vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
+  <script src="vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
+  <script src="vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
+  <script src="vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
+  <script src="vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
+  <script src="vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
   <script src="vendor/assets/javascripts/foundation/app.js"></script>
 
 </body>

data/lib/foundation/version.rb

@@ -1,3 +1,3 @@
 module Foundation
-  VERSION = "3.0.7"
+  VERSION = "3.0.8.rc1"
 end

data/lib/zurb-foundation.rb

@@ -1,11 +1,18 @@
-require 'foundation/version'
+root = File.join(File.dirname(__FILE__), "..")
+require "foundation/version"
+require "compass"
+# require "modular-scale"
+
+Compass::Frameworks.register("foundation",
+  :stylesheets_directory => File.join(root,"scss"),
+  :templates_directory => File.join(root,"templates"),
+  :images_dir => File.join(root,"vendor","assets","images","foundation")
+)
+
 if defined?(Rails)
   require "foundation/generators/layout_generator"
   require "foundation/generators/install_generator"
 end
-require 'compass'
-extension_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
-Compass::Frameworks.register('foundation', :path => extension_path)
 
 module Foundation
   require "foundation/engine" if defined?(Rails)

data/{stylesheets → scss}/foundation/_settings.scss

@@ -28,7 +28,6 @@ $bodyFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !de
 $bodyFontWeight: normal !default;
 $bodyFontColor: #222 !default;
 
-
 // Button Settings
 
 $buttonRadius: 3px !default;
@@ -64,13 +63,29 @@ $base-size: 14px 44px !default;
 // http://www.modularscale.com by Tim Brown
 // https://github.com/scottkellum/modular-scale by scottkellum
 
+// Tooltip Settings
+$hasTipBorderBottom: dotted 1px #ccc !default;
+$hasTipFontWeight: bold !default;
+$hasTipFontColor: #333 !default;
+$hasTipBorderBottomHover: dotted 1px darken($mainColor, 20%) !default;
+$hasTipFontColorHover: $mainColor !default;
+$tooltipBackgroundColor: #000 !default;
+$tooltipBackgroundOpacity: 0.85 !default;
+$tooltipFontSize: 12 !default;
+$tooltipFontWeight: bold !default;
+$tooltipFontColor: #fff !default;
+$tapToCloseFontSize: 10 !default;
+$tapToCloseFontWeight: normal !default;
+$tapToCloseFontColor: #888 !default;
+$tooltipFontSizeScreenSmall: 14 !default;
+$tooltipBackgroundOpacityScreenSmall: 0.85 !default;
+
 // Media Queries
 
 $screenSmall: 768px !default;
 $screenMedium: 1279px !default;
 $screenXlarge: 1441px !default;
 
-
 // Saving for better em-based testing
 // $screenSmall: 44em !default;
 // $screenMedium: 77em !default;

data/{stylesheets → scss}/foundation/common/_forms.scss

@@ -33,7 +33,7 @@
 
   input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { border: 1px solid darken($white, 20%); @include border-radius(2px); @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1)); color: rgba(0,0,0,0.75); display: block; font-size: ms(0); margin: 0 0 $formSpacing 0; padding: ($formSpacing / 2); height: (ms(0) + ($formSpacing * 1.5)); width: 100%; @include transition(all 0.15s linear);
 
-    &.oversize { @include font-size(18, true); }
+    &.oversize { font-size: ms(1); padding: (($formSpacing - 4) / 2) ($formSpacing / 2); }
 
     &:focus { background: darken($white, 2%); outline: none !important; border-color: darken($white, 30%); }
     &[disabled] { background-color: #ddd; }
@@ -50,7 +50,7 @@
   }
 
   /* Errors */
-  .error input, input.error { border-color: $alertColor; background-color: rgba($alertColor, 0.1); }
+  .error input, input.error, .error textarea, textarea.error { border-color: $alertColor; background-color: rgba($alertColor, 0.1); }
   .error label, label.error { color: $alertColor; }
   .error small, small.error { display: block; padding: 6px 4px; margin-top: -($formSpacing) - 1; margin-bottom: $formSpacing; background: $alertColor; color: #fff; @include font-size(12); font-weight: bold; @include border-bottom-left-radius(2px); @include border-bottom-right-radius(2px); }
 

data/{stylesheets → scss}/foundation/common/_globals.scss

@@ -28,3 +28,6 @@
   #map_canvas embed { max-width: none; }
   #map_canvas img { max-width: none; }
   #map_canvas object { max-width: none; }
+
+  /* Reset for strange margins by default on <figure> elements */
+  figure { margin: 0; }

data/{stylesheets → scss}/foundation/common/_typography.scss

@@ -8,8 +8,6 @@
 
   p { font-family: $bodyFontFamily; font-weight: $bodyFontWeight; font-size: ms(0); line-height: 1.6; margin-bottom: ms(1);
     &.lead { font-size: ms(0) * 1.25; line-height: 1.6; margin-bottom: ms(1); }
-    img.left, img { margin: ms(1); margin-left: 0; }
-    img.right { margin: ms(1); margin-right: 0; }
   }
   aside p { font-size: ms(0) - 1; line-height: 1.35; font-style: italic; }
 
@@ -40,10 +38,10 @@
   code { font-weight: bold; background: $highlightColor; }
 
   /* Lists ---------------------- */
-  ul, ol { font-size: ms(0); line-height: 1.6; margin-bottom: ms(1); list-style-position: outside; }
+  ul, ol { font-size: ms(0); line-height: 1.6; margin-bottom: ms(1); list-style-position: inside; }
   ul {
     li {
-      ul { margin-left: 20px; margin-bottom: 0; list-style: outside; }
+      ul, ol { margin-left: 20px; margin-bottom: 0; }
     }
     &.square, &.circle, &.disc { margin-left: ms(1); }
     &.square { list-style-type: square;
@@ -58,7 +56,11 @@
     &.no-bullet { list-style: none; }
     &.large li { line-height: 21px; }
   }
-
+  ol {
+    li {
+      ul, ol { margin-left: 20px; margin-bottom: 0; }
+    }
+  }
 
   /* Blockquotes ---------------------- */
   blockquote, blockquote p { line-height: 1.5; color: lighten($headerFontColor, 30%); }

data/{stylesheets → scss}/foundation/components/_grid.scss

@@ -18,10 +18,15 @@
   [class*="column"] + [class*="column"]:last-child { float: right; }
   [class*="column"] + [class*="column"].end { float: left; }
 
+  // Creating column classes
+  @for $i from 1 through $totalColumns {
+    .#{convert-number-to-word($i)} { width: gridCalc($i, $totalColumns); }
+  }
+
   // Creating .row-# classes
   @for $i from 1 through $totalColumns {
     .row {
-      .#{convert-number-to-word($i)} { width: gridCalc($i, $totalColumns); }
+      .#{convert-number-to-word($i)} { @extend .#{convert-number-to-word($i)}; }
     }
   }
 
@@ -39,6 +44,7 @@
   }
 
   img, object, embed { max-width: 100%; height: auto; }
+  object, embed { height: 100%; }
   img { -ms-interpolation-mode: bicubic; }
   #map_canvas img, .map_canvas img {max-width: none!important;}
 
@@ -103,29 +109,38 @@ that IE7/8 do not support :nth-child.
   .block-grid { display: block; overflow: hidden; padding: 0;
 
     &>li { display: block; height: auto; float: left; }
-  }
+    &.one-up { margin: 0; 
+      &>li { width: 100%; padding: 0 0 15px; }
+    }
 
-  .block-grid.one-up { margin: 0; }
-  .block-grid.one-up>li { width: 100%; padding: 0 0 15px; }
-  
-  .block-grid.two-up { margin: 0 -15px; }
-  .block-grid.two-up>li { width: 50%; padding: 0 15px 15px; }
-  /*  .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */
+    &.two-up { margin: 0 -15px; 
+      &>li { width: 50%; padding: 0 15px 15px; 
+        &:nth-child(2n+1) { clear: both; }
+      }
+    }
 
-  .block-grid.three-up { margin: 0 -12px; }
-  .block-grid.three-up>li { width: 33.33%; padding: 0 12px 12px; }
-  /*  .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */
+    &.three-up { margin: 0 -12px; 
+      &>li { width: 33.33%; padding: 0 12px 12px; 
+        &:nth-child(3n+1) { clear: both; }
+      }
+    }
 
-  .block-grid.four-up { margin: 0 -10px; }
-  .block-grid.four-up>li { width: 25%; padding: 0 10px 10px; }
-  /*  .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */
+    &.four-up { margin: 0 -10px; 
+      &>li { width: 25%; padding: 0 10px 10px; 
+        &:nth-child(4n+1) { clear: both; }
+      }
+    }
 
-  .block-grid.five-up { margin: 0 -8px; }
-  .block-grid.five-up>li { width: 20%; padding: 0 8px 8px; }
-  /*  .block-grid.five-up>li:nth-child(5n+1) {clear: left;} */
+    &.five-up { margin: 0 -8px; 
+      &>li { width: 20%; padding: 0 8px 8px; 
+        &:nth-child(5n+1) { clear: both; }
+      }
+    }
+  }
 
   /* Mobile Block Grids */
   @media only screen and (max-width: $screenSmall - 1) {
-    .block-grid.mobile { margin-left: 0; }
-    .block-grid.mobile > li { float: none; width: 100%; margin-left: 0; }
+    .block-grid.mobile { margin-left: 0;
+      &>li { float: none; width: 100%; margin-left: 0; }
+    }
   }

data/{stylesheets → scss}/foundation/components/modules/_all.scss

@@ -1,6 +1,6 @@
 @import "buttons";
 @import "navbar";
-@import "offcanvas";
+// @import "offcanvas";
 @import "orbit";
 @import "reveal";
 @import "tabs";

data/{stylesheets → scss}/foundation/components/modules/_buttons.scss

@@ -40,7 +40,7 @@
     &.round { @include border-radius(1000px); }
 
     /* Layout */
-    &.full-width { width: 100%; text-align: center; padding-left: 0 !important; padding-right: !important; }
+    &.full-width { width: 100%; text-align: center; padding-left: 0px !important; padding-right: 0px !important; }
     &.left-align { text-align: left; text-indent: 12px; }
 
 		/* Disabled ---------- */
@@ -94,7 +94,7 @@
     /* Flyout List */
     &>ul { @include box-sizing(content-box); display: none; position: absolute; left: -1px; background: #fff; background: rgba(#fff,0.95); list-style: none; margin: 0; padding: 0; border: 1px solid darken($white, 20%); border-top: none; min-width: 100%; z-index: 40;
 
-      li { cursor: pointer; padding: 0; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none;
+      li { width: 100%; cursor: pointer; padding: 0; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none;
         a { display: block; color: #555; font-size: ms(0) - 1; font-weight: $bodyFontWeight; padding: 6px 14px; text-align: left; }
         &:hover { background-color: lighten($mainColor, 45%); color: #222; }
         &.divider { min-height: 0; padding: 0; height: 1px; margin: 4px 0; background: darken($white, 7%); }
@@ -162,16 +162,18 @@
       &:first-child { margin-left: 0; }
     }
 
-    &.radius {
-      li:first-child .button, li:first-child .button.radius, li:first-child .button.rounded { @include border-radius(0px); border-top-left-radius: $buttonRadius; border-bottom-left-radius: $buttonRadius; }
-      li + li .button, li + li .button.radius, li + li .button.rounded { border-radius: 0; }
-      li:last-child .button, li:last-child .button.radius, li:last-child .button.rounded { @include border-radius(0px); border-top-right-radius: $buttonRadius; border-bottom-right-radius: $buttonRadius; }
-    }
-
-    &.rounded {
-      li:first-child .button, li:first-child .button.radius, li:first-child .button.rounded { @include border-radius(0px); border-top-left-radius: 1000px; border-bottom-left-radius: 1000px; }
-      li + li .button, li + li .button.radius, li + li .button.rounded { border-radius: 0; }
-      li:last-child .button, li:last-child .button.radius, li:last-child .button.rounded { @include border-radius(0px); border-top-right-radius: 1000px; border-bottom-right-radius: 1000px; }
+    &.radius li {
+      a {
+        &.button, &.button.radius, &.button-rounded { @include border-radius(0px); }
+      }
+      &:first-child a {
+        &.button, &.button.radius { @include border-left-radius($buttonRadius); }
+        &.button.rounded { @include border-left-radius(1000px); }
+      }
+      &:last-child a {
+        &.button, &.button.radius { @include border-right-radius($buttonRadius); }
+        &.button.rounded { @include border-right-radius(1000px); }
+      }
     }
 
     &.even {

data/{stylesheets → scss}/foundation/components/modules/_reveal.scss

@@ -25,6 +25,7 @@
     &.small   { width: 30%; margin-left: -10%; }
     &.medium  { width: 40%; margin-left: -20%; }
     &.large   { width: 60%; margin-left: -30%; }
+    &.xlarge  { width: 70%; margin-left: -35%; }
     &.expand  { width: 90%; margin-left: -45%; }
     .row { min-width: 0; }
   }

data/{stylesheets → scss}/foundation/components/modules/_tabs.scss

@@ -12,7 +12,9 @@
     }
 
     dd { display: block; float: left; padding: 0; margin: 0;
-      a { color: lighten($txtColor, 30%); display: block; font-size: ms(0); height: $tabHeight; line-height: $tabHeight; padding: 0px ms(1) * 1.4; }
+      a { color: lighten($txtColor, 30%); display: block; font-size: ms(0); height: $tabHeight; line-height: $tabHeight; padding: 0px ms(1) * 1.4;
+        &:focus { font-weight: bold; color: $mainColor; }
+      }
       &.active { border-top: 3px solid $mainColor; margin-top: -3px;
         a { cursor: default; color: lighten($txtColor, 10%); background: #fff; border-left: 1px solid darken($white, 10%); border-right: 1px solid darken($white, 10%); font-weight: bold; }
       }
@@ -66,8 +68,8 @@
   .no-js ul.tabs-content>li { display: block; }
 
   @media only screen and (max-width: $screenSmall - 1) {
-    dl.tabs.mobile, dl.nice.tabs.mobile { width: auto; margin: 20px -20px 40px; height: auto; }
-    dl.tabs.mobile dt, dl.tabs.mobile dd, dl.nice.tabs.mobile dt, dl.nice.tabs.mobile dd { float: none; height: auto; }
+    dl.tabs.mobile { width: auto; margin: 20px -20px 40px; height: auto; }
+    dl.tabs.mobile dt, dl.tabs.mobile dd { float: none; height: auto; }
 
     dl.tabs.mobile dd a { display: block; width: auto; height: auto; padding: 18px 20px; line-height: 1; border: solid 0 #ccc; border-width: 1px 0 0; margin: 0; color: #555; background: #eee; @include font-size(15); }
     dl.tabs.mobile dd a.active { height: auto; margin: 0; border-width: 1px 0 0; }
@@ -80,7 +82,7 @@
       dd:first-child a.active { margin: 0; }
     }
 
-    dl.contained.mobile, dl.nice.contained.mobile { margin-bottom: 0; }
+    dl.contained.mobile { margin-bottom: 0; }
     dl.contained.tabs.mobile dd a { padding: 18px 20px; }
 
     dl.tabs.mobile + ul.contained { margin-left: -20px; margin-right: -20px; border-width: 0 0 1px 0; }

data/{stylesheets → scss}/foundation/components/modules/_ui.scss

@@ -23,7 +23,7 @@
 */
 
   /* Visibility Classes ---------------------- */
-
+  
   /* Standard (large) display targeting */
   .show-for-small,
   .show-for-medium,
@@ -76,15 +76,15 @@
   /* Small display targeting */
   @media only screen and (max-width: $screenSmall - 1) {
     .show-for-small,
-    .show-for-medium-down,
     .hide-for-medium,
+    .show-for-medium-down,
     .hide-for-large,
     .hide-for-large-up,
     .hide-for-xlarge { display: block !important; }
 
     .hide-for-small,
     .show-for-medium,
-    .show-for-medium-down,
+    .hide-for-medium-down,
     .show-for-large,
     .show-for-large-up,
     .show-for-xlarge { display: none !important; }
@@ -166,40 +166,40 @@
 
   /* Tooltips ---------------------- */
 
-  .has-tip { border-bottom: dotted 1px #ccc; cursor: help; font-weight: bold; color: #333;
+  .has-tip { border-bottom: $hasTipBorderBottom; cursor: help; font-weight: $hasTipFontWeight; color: $hasTipFontColor;
 
-    &:hover { border-bottom: dotted 1px #0593dc; color: #0192dd; }
+    &:hover { border-bottom: $hasTipBorderBottomHover; color: $hasTipFontColorHover; }
     &.tip-left, &.tip-right { float: none !important; }
 
   }
 
-  .tooltip { display: none; background: rgb(0,0,0); background: rgba(0,0,0,0.8); position: absolute; color: #fff; font-weight: bold; @include font-size(12); padding: 5px; z-index: 999; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; line-height: normal;
+  .tooltip { display: none; background: $tooltipBackgroundColor; background: rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity); position: absolute; color: $tooltipFontColor; font-weight: $tooltipFontWeight; @include font-size($tooltipFontSize); padding: 5px; z-index: 999; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; line-height: normal;
 
-    &>.nub { display: block; width: 0; height: 0; border: solid 5px; border-color: transparent transparent rgb(0,0,0) transparent; border-color: transparent transparent rgba(0,0,0,0.8) transparent; position: absolute; top: -10px; left: 10px; }
-    &.tip-override>.nub { border-color: transparent transparent rgb(0,0,0) transparent !important; border-color: transparent transparent rgba(0,0,0,0.8) transparent !important; top: -10px !important; }
-    &.tip-top>.nub { border-color: rgb(0,0,0) transparent transparent transparent; border-color: rgba(0,0,0,0.8) transparent transparent transparent; top: auto; bottom: -10px; }
+    &>.nub { display: block; width: 0; height: 0; border: solid 5px; border-color: transparent transparent $tooltipBackgroundColor transparent; border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent; position: absolute; top: -10px; left: 10px; }
+    &.tip-override>.nub { border-color: transparent transparent $tooltipBackgroundColor transparent !important; border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent !important; top: -10px !important; }
+    &.tip-top>.nub { border-color: $tooltipBackgroundColor transparent transparent transparent; border-color: rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent transparent transparent; top: auto; bottom: -10px; }
 
     &.tip-left, &.tip-right { float: none !important; }
 
-    &.tip-left>.nub { border-color: transparent transparent transparent rgb(0,0,0); border-color: transparent transparent transparent rgba(0,0,0,0.8); right: -10px; left: auto; }
-    &.tip-right>.nub { border-color: transparent rgb(0,0,0) transparent transparent; border-color: transparent rgba(0,0,0,0.8) transparent transparent; right: auto; left: -10px; }
+    &.tip-left>.nub { border-color: transparent transparent transparent $tooltipBackgroundColor; border-color: transparent transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity); right: -10px; left: auto; }
+    &.tip-right>.nub { border-color: transparent $tooltipBackgroundColor transparent transparent; border-color: transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent transparent; right: auto; left: -10px; }
 
     &.noradius { @include border-radius(0); }
-    &.opened { color: #0192DD !important; border-bottom: dotted 1px #0593DC !important; }
+    &.opened { color: $hasTipFontColorHover !important; border-bottom: $hasTipBorderBottomHover !important; }
 
   }
 
-  .tap-to-close { display: block; @include font-size(10); color: #888; font-weight: normal; }
+  .tap-to-close { display: block; @include font-size($tapToCloseFontSize); color: $tapToCloseFontColor; font-weight: $tapToCloseFontWeight; }
 
   @media only screen and (max-width: $screenSmall - 1) {
     .tooltip {
-      @include font-size(14);
+      @include font-size($tooltipFontSizeScreenSmall);
       line-height: 1.4;
       padding: 7px 10px 9px 10px;
     }
     .tooltip > .nub, .tooltip.top > .nub, .tooltip.left > .nub, .tooltip.right > .nub {
-      border-color: transparent transparent rgb(0,0,0) transparent;
-      border-color: transparent transparent rgba(0,0,0,0.85) transparent;
+      border-color: transparent transparent $tooltipBackgroundColor transparent;
+      border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacityScreenSmall) transparent;
       top: -12px;
       left: 10px;
     }
@@ -228,7 +228,7 @@
   
   ul.accordion { margin: 0 0 22px 0; border-bottom: 1px solid $secondaryColor;
     
-    li {  list-style: none; margin: 0; padding: 0; border-top: 1px solid $secondaryColor;
+    &>li {  list-style: none; margin: 0; padding: 0; border-top: 1px solid $secondaryColor;
       
       .title { cursor: pointer; background: lighten($secondaryColor, 5%); padding: 15px; margin: 0; position: relative;  border-left: 1px solid $secondaryColor; border-right: 1px solid $secondaryColor; @include single-transition(0.15s, background, linear);
         
@@ -263,11 +263,11 @@
     }
   }
 
-/* Sub Navs http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na ---------------------- */
+  /* Sub Navs http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na ---------------------- */
 
   dl.sub-nav { display: block; width: auto; overflow: hidden; margin: -4px 0 18px -9px; padding-top: 4px;
 
-    dt, dd { float: left; display: inline; margin-left: 9px; margin-bottom: 4px; }
+    dt, dd { float: left; display: inline; margin-left: 9px; margin-bottom: 10px; }
     dt { color: #999; font-weight: $bodyFontWeight; }
     dd a { text-decoration: none; @include border-radius(1000px); }
     dd.active a { font-weight: bold; background: $mainColor; color: #fff; padding: 3px 9px; cursor: default; }
@@ -313,15 +313,6 @@
 
   }
 
-  /* Lists ---------------------- */
-
-  ul.nice, ol.nice { list-style: none; margin: 0;
-
-    li { padding-left: 13px; position: relative;
-      span.bullet, span.number { position: absolute; left: 0; top: 0; color: #ccc; }
-    }
-  }
-
   /* Link List */
   ul.link-list { margin: 0 0 ms(1) -22px; padding: 0; list-style: none; overflow: hidden;
 
@@ -331,7 +322,6 @@
     }
   }
 
-
   /* Keytroke Characters ---------------------- */
 
   .keystroke, kbd { font-family: "Consolas", "Menlo", "Courier", monospace; font-size: ms(0) - 1; padding: 2px 4px 0px; margin: 0; background: darken($white, 7%); border: solid 1px darken($white, 14%); @include border-radius($buttonRadius); }

data/{stylesheets → scss}/foundation/mixins/_font-size.scss

@@ -1,6 +1,8 @@
   // Font size mixin to include px and rem
 
   @mixin font-size($size, $is-important: false) {
+    $size: if(unitless($size), $size, $size / 1px);
+    
     @if $is-important {
       font-size: $size + px !important;
       font-size: ($size / 10) + rem !important;