zurb-foundation 3.2.0.rc1 → 3.2.0.rc2

data/CHANGELOG.md

@@ -3,6 +3,32 @@ We'll keep you up to date with what we've released so you at least have a gist o
 
 ---
 
+### **3.2**- October 26, 2012
+With this update we've revamped our documentation to be more organized and explain details regarding Scss, Compass and Javascripts.
+
+The updates to Foundation itself are as follows:
+* Added [Magellan](http://foundation.zurb.com/docs/magellan.php), a plugin for building design agnostic sticky navs that know where you are on the page.
+* Added [Joyride](http://foundation.zurb.com/docs/joyride.php), our plugin for creating tours of your website or app.
+* Added [Clearing](http://foundation.zurb.com/docs/clearing.php), our new responsive image gallery lightbox plugin.
+* Cleaned up Orbit a bit. We now use opacity on each slide so you don't have stacking problems or different image size problems. You can now optionally stack slides on mobile. Orbit can now be swipable on mobile as well.
+* Updated Reveal
+* Updated index files to use defined header and footer structure
+* Cleaned up some Compass included
+* RTL for ui and navbar.
+* Tabs can now use unordered lists or definition lists, replacing the definition title with an li.section-title.
+* Added definition list styles.
+* Added mobile-#-up classes to use in conjunction with regular block-grid classes for a different mobile grid.
+* Updated block grids to be really flexible and customizable based on a variable.
+* Added better responsive styling for tooltips.
+* Separated all media queries into their own file for easy droppping.
+* Updated modular scale to use new functions, doesn't effect end-users.
+* Updated visibility classes to use inherit instead of block to accomodate for spans.
+* Removed HTML5 Shiv from header since its included in modernizr.
+* Added [pricing tables](http://foundation.zurb.com/docs/elements.php#pricing-tables) UI element
+* Added many new Scss variables to control styling for things like: topbar, clearing, joyride, pricint tables, etc.
+* Bug fixes for Topbar.
+* Added 5 [HTML templates](http://foundation.zurb.com/templates.php) to the add-ons section.
+
 ### 3.1.1- September 19, 2012
 Updating Top Bar navigation implementation pattern to wrap `.contain-to-grid` and/or `.fixed` around the `nav` element to prevent horizontal scroll bars when using `.contain-to-grid`. Updated the topBar breakpoint option so users only need to update the Scss variable.
 

data/lib/foundation/version.rb

@@ -1,3 +1,3 @@
 module Foundation
-  VERSION = "3.2.0.rc1"
+  VERSION = "3.2.0.rc2"
 end

data/scss/foundation/_settings.scss

@@ -201,6 +201,7 @@ $orbitSlideNumFontColor: #fff !default;
 $orbitSlideNumPadding: 5px !default;
 
 // Clearing Settings
+
 $clearingBg: rgba(0,0,0,0.8) !default;
 $clearingOldBrowserBg: rgb(0,0,0) !default;
 $clearingCaptionBg: rgba(0,0,0,0.7) !default;
@@ -209,14 +210,34 @@ $clearingCaptionFontColor: #fff !default;
 $clearingCloseColor: #fff !default;
 $clearingArrowColor: #fff !default;
 $clearingArrowSize: 16px !default;
-$clearingCarouselOldBrowserBg: rgb(0,0,0) !default;
 $clearingCarouselBg: rgba(0,0,0,0.75) !default;
+$clearingCarouselOldBrowserBg: rgb(0,0,0) !default;
 $clearingCarouselHeight: 150px !default;
-$clearingCarouselThumbHeight: 150px !default;
-$clearingCarouselThumbWidth: 175px !default;
+$clearingActiveImgHeight: 75% !default;
+$clearingCarouselThumbWidth: 175px;
 $clearingCarouselThumbActiveBorder: 4px solid rgb(255,255,255) !default;
-$clearingImgOldBrowserBg: rgb(0,0,0) !default;
 $clearingImgBg: rgba(0,0,0,0.75) !default;
+$clearingImgOldBrowserBg: rgb(0,0,0) !default;
+
+// Joyride Settings
+
+$tipBg: rgba(0,0,0,0.8) !default;
+$tipBgIE8: #000 !default;
+$tipFontColor: #fff !default;
+$tipHeaderWeight: bold !default;
+$tipDefaultWidth: 300px !default;
+$tipBorderRadius: 4px !default;
+$tipPadding: 18px 20px 24px !default;
+$tipNubSize: 14px !default;
+$tipFontSize: 14px !default;
+$tipTimerWidth: 50px !default;
+$tipTimerHeight: 3px !default;
+$tipTimerBorder: solid 1px #555 !default;
+$tipTimerColor: #666 !default;
+$tipCloseColor: #777 !default;
+$tipCloseSize: 20px !default;
+$tipCloseWeight: normal !default;
+$tipScreenFill: rgba(0,0,0,0.5) !default;
 
 // Off Canvas Width Settings
 

data/scss/foundation/components/modules/_clearing.scss

@@ -5,14 +5,14 @@
   .clearing-close { display: block; }
 }
 
-.clearing-container { margin: 3% 5%; height: 90%; overflow: hidden; }
+.clearing-container { height: 100%; overflow: hidden; }
 
-.visible-img { height: 75%; position: relative;
+.visible-img { height: $clearingActiveImgHeight; position: relative;
   img { position: absolute; left: 50%; top: 50%; margin-left: -50%; max-height: 100%; max-width: 100%; }
-  p { margin-bottom: 0; text-align: center; position: absolute; bottom: 0; background: $clearingCaptionOldBrowserBg; background: $clearingCaptionBg; width: 100%; padding: 10px 100px; }
+  .clearing-caption { color: $clearingCaptionFontColor;  margin-bottom: 0; text-align: center; position: absolute; bottom: 0; background: $clearingCaptionOldBrowserBg; background: $clearingCaptionBg; width: 100%; padding: 10px 100px; }
 }
 
-.clearing-close { position: absolute; top: 10px; right: 20px; font-size: 30px; line-height: 1; color: $clearingCloseColor; display: none;
+.clearing-close { z-index: 99; position: absolute; top: 10px; right: 20px; font-size: 30px; line-height: 1; color: $clearingCloseColor; display: none;
   &:hover { color: #ccc; }
 }
 .clearing-main-left, .clearing-main-right { position: absolute; top: 50%; margin-top: -16px; }
@@ -21,25 +21,21 @@
 .clearing-main-left { left: 10px; @include cssTriangle($clearingArrowSize,$clearingArrowColor,right); }
 .clearing-main-right { right: 10px; @include cssTriangle($clearingArrowSize,$clearingArrowColor,left); }
 
-.clearing-caption { color: $clearingCaptionFontColor; }
+.block-grid.three-up > li:nth-child(3n+1) { clear: none; }
 
-.clearing-opened { height: 20%; margin-bottom: 0;
-  li { width: 20% !important; float: left;
-    a { display: block; }
-  }
+ul[data-clearing] li { display: block;
+  &.clearing-feature ~ li { display: none; }
 }
 
-.block-grid.three-up > li:nth-child(3n+1) { clear: none; }
-
 .clearing-assembled .clearing-container {
   .carousel { background: $clearingCarouselOldBrowserBg; background: $clearingCarouselBg; height: $clearingCarouselHeight; margin-top: 5px; }
   .visible-img { background: $clearingImgOldBrowserBg; background: $clearingImgBg; overflow: hidden; }
-  ul[data-clearing] { width: 200%; margin-left: 0; position: relative; left: 0;
-    li { width: $clearingCarouselThumbWidth; height: $clearingCarouselThumbHeight; padding: 0; float: left; overflow: hidden; background: #222; margin-right: 1px; position: relative;
+  ul[data-clearing] { width: 200%; height: 100%; margin-left: 0; position: relative; left: 0;
+    li { display: block; width: $clearingCarouselThumbWidth; height: inherit; padding: 0; float: left; overflow: hidden; background: #222; margin-right: 1px; position: relative;
       &.fix-height {
-        img { height: 100%; max-width: none; }
+        img { min-height: 100%; height: 100%; max-width: none; }
       }
-      img { cursor: pointer !important; min-width: 100% !important; vertical-align: middle; }
+      img { cursor: pointer !important; min-width: 100% !important; }
       &.visible { border-top: $clearingCarouselThumbActiveBorder; }
     }
   }

data/scss/foundation/components/modules/_joyride.scss

@@ -1,224 +1,33 @@
-body {
-  position: relative;
-}
-
 #joyRideTipContent { display: none; }
 
 /* Default styles for the container */
-.joyride-tip-guide {
-  position: absolute;
-  background: #000;
-  background: rgba(0,0,0,0.8);
-  display: none;
-  color: #fff;
-  width: 300px;
-  z-index: 101;
-  top: 0; /* keeps the page from scrolling when calculating position */
-  left: 0;
-  font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", Helvetica, Arial, Lucida, sans-serif;
-  font-weight: normal;
-     -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-          border-radius: 4px;
-}
-
-.joyride-content-wrapper {
-  padding: 10px 10px 15px 15px;
-}
-
-/* Mobile */
-@media only screen and (max-width: 767px) {
-  .joyride-tip-guide {
-    width: 95% !important;
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    left: 2.5% !important;
-  }
-  .joyride-tip-guide-wrapper {
-    width: 100%;
-  }
-}
-
+.joyride-tip-guide { display: none; position: absolute; background: $tipBgIE8; background: $tipBg; color: $tipFontColor; width: $tipDefaultWidth; z-index: 101; top: 0; left: 0; font-family: inherit; font-weight: normal; @include border-radius($tipBorderRadius); }
+.joyride-content-wrapper { padding: $tipPadding; }
 
 /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
-.joyride-tip-guide span.joyride-nub {
-  display: block;
-  position: absolute;
-  left: 22px;
-  width: 0;
-  height: 0;
-  border: solid 14px;
-  border: solid 14px;
-}
-
-.joyride-tip-guide span.joyride-nub.top {
-  /*
-  IE7/IE8 Don't support rgba so we set the fallback
-  border color here. However, IE7/IE8 are also buggy
-  in that the fallback color doesn't work for
-  border-bottom-color so here we set the border-color
-  and override the top,left,right colors below.
-  */
-  border-color: #000;
-  border-color: rgba(0,0,0,0.8);
-  border-top-color: transparent !important;
-  border-left-color: transparent !important;
-  border-right-color: transparent !important;
-  top: -28px;
-  bottom: none;
-}
-
-.joyride-tip-guide span.joyride-nub.bottom {
-  /*
-  IE7/IE8 Don't support rgba so we set the fallback
-  border color here. However, IE7/IE8 are also buggy
-  in that the fallback color doesn't work for
-  border-top-color so here we set the border-color
-  and override the bottom,left,right colors below.
-  */
-  border-color: #000;
-  border-color: rgba(0,0,0,0.8) !important;
-  border-bottom-color: transparent !important;
-  border-left-color: transparent !important;
-  border-right-color: transparent !important;
-  bottom: -28px;
-  bottom: none;
-}
-
-.joyride-tip-guide span.joyride-nub.right {
-  border-color: #000;
-  border-color: rgba(0,0,0,0.8) !important;
-  border-top-color: transparent !important;
-  border-right-color: transparent !important;
-  border-bottom-color: transparent !important;
-  top: 22px;
-  bottom: none;
-  left: auto;
-  right: -28px;
-}
-
-.joyride-tip-guide span.joyride-nub.left {
-  border-color: #000;
-  border-color: rgba(0,0,0,0.8) !important;
-  border-top-color: transparent !important;
-  border-left-color: transparent !important;
-  border-bottom-color: transparent !important;
-  top: 22px;
-  left: -28px;
-  right: auto;
-  bottom: none;
+.joyride-tip-guide {
+  span.joyride-nub { display: block; position: absolute; left: 22px; width: 0; height: 0; border: solid $tipNubSize;
+    &.top { border-color: $tipBgIE8; border-color: $tipBg; border-top-color: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important; top: -($tipNubSize*2); bottom: none; }
+    &.bottom { border-color: $tipBgIE8; border-color: $tipBg !important; border-bottom-color: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important; bottom: -($tipNubSize*2); bottom: none; }
+    &.right { border-color: $tipBgIE8; border-color: $tipBg !important; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; top: 22px; bottom: none; left: auto; right: -($tipNubSize*2); }
+    &.left { border-color: $tipBgIE8; border-color: $tipBg !important; border-top-color: transparent !important; border-left-color: transparent !important; border-bottom-color: transparent !important; top: 22px; left: -($tipNubSize*2); right: auto; bottom: none; }
+  }
 }
 
 /* Typography */
-.joyride-tip-guide h1,.joyride-tip-guide h2,.joyride-tip-guide h3,.joyride-tip-guide h4,.joyride-tip-guide h5,.joyride-tip-guide h6 {
-  line-height: 1.25;
-  margin: 0;
-  font-weight: bold;
-  color: #fff;
-}
-.joyride-tip-guide h1 { font-size: 30px; }
-.joyride-tip-guide h2 { font-size: 26px; }
-.joyride-tip-guide h3 { font-size: 22px; }
-.joyride-tip-guide h4 { font-size: 18px; }
-.joyride-tip-guide h5 { font-size: 16px; }
-.joyride-tip-guide h6 { font-size: 14px; }
-.joyride-tip-guide p {
-  margin: 0 0 18px 0;
-  font-size: 14px;
-  line-height: 18px;
-}
-.joyride-tip-guide a {
-  color: rgb(255,255,255);
-  text-decoration: none;
-  border-bottom: dotted 1px rgba(255,255,255,0.6);
-}
-.joyride-tip-guide a:hover {
-  color: rgba(255,255,255,0.8);
-  border-bottom: none;
-}
+.joyride-tip-guide h1,
+.joyride-tip-guide h2,
+.joyride-tip-guide h3,
+.joyride-tip-guide h4,
+.joyride-tip-guide h5,
+.joyride-tip-guide h6 { line-height: 1.25; margin: 0; font-weight: $tipHeaderWeight; color: $tipFontColor }
+.joyride-tip-guide p { margin: 0 0 18px 0; font-size: $tipFontSize; line-height: 1.3; }
 
-/* Button Style */
-.joyride-tip-guide .joyride-next-tip {
-  width: auto;
-  padding: 6px 18px 4px;
-  font-size: 13px;
-  text-decoration: none;
-  color: rgb(255,255,255);
-  border: solid 1px rgb(0,60,180);
-  background: rgb(0,99,255);
-  background: -moz-linear-gradient(top, rgb(0,99,255) 0%, rgb(0,85,214) 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,99,255)), color-stop(100%,rgb(0,85,214)));
-  background: -webkit-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
-  background: -o-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
-  background: -ms-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0063ff', endColorstr='#0055d6',GradientType=0 );
-  background: linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
-  text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-  -webkit-border-radius: 2px;
-     -moz-border-radius: 2px;
-          border-radius: 2px;
-  -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset;
-     -moz-box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset;
-          box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset;
-}
+.joyride-timer-indicator-wrap { width: $tipTimerWidth; height: $tipTimerHeight; border: $tipTimerBorder; position: absolute; right: 17px; bottom: 16px; }
+.joyride-timer-indicator { display: block; width: 0; height: inherit; background: $tipTimerColor; }
 
-.joyride-next-tip:hover {
-  color: rgb(255,255,255) !important;
-  border: solid 1px rgb(0,60,180) !important;
-  background: rgb(43,128,255);
-  background: -moz-linear-gradient(top, rgb(43,128,255) 0%, rgb(29,102,211) 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(43,128,255)), color-stop(100%,rgb(29,102,211)));
-  background: -webkit-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
-  background: -o-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
-  background: -ms-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b80ff', endColorstr='#1d66d3',GradientType=0 );
-  background: linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
+.joyride-close-tip { position: absolute; right: 10px; top: 10px; color: $tipCloseColor !important; text-decoration: none; font-size: $tipCloseSize; font-weight: $tipCloseWeight; line-height: .5 !important;
+  &:hover { color: #eee !important; }
 }
 
-.joyride-timer-indicator-wrap {
-  width: 50px;
-  height: 3px;
-  border: solid 1px rgba(255,255,255,0.1);
-  position: absolute;
-  right: 17px;
-  bottom: 16px;
-}
-.joyride-timer-indicator {
-  display: block;
-  width: 0;
-  height: inherit;
-  background: rgba(255,255,255,0.25);
-}
-
-.joyride-close-tip {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  color: rgba(255,255,255,0.4) !important;
-  text-decoration: none;
-  font-family: Verdana, sans-serif;
-  font-size: 10px;
-  font-weight: bold;
-  border-bottom: none !important;
-}
-
-.joyride-close-tip:hover {
-  color: rgba(255,255,255,0.9) !important;
-}
-
-.joyride-modal-bg {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  background: rgb(0,0,0);
-  background: rgba(0,0,0, 0.5);
-  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-  filter: alpha(opacity=50);
-  opacity: 0.5;
-  z-index: 100;
-  display: none;
-  top: 0;
-  left: 0;
-  cursor: pointer;
-}
+.joyride-modal-bg { position: fixed; height: 100%; width: 100%; background: $tipScreenFill; z-index: 100; display: none; top: 0; left: 0; cursor: pointer; }

data/scss/foundation/components/modules/_mqueries.scss

@@ -154,12 +154,12 @@
     }
     .clearing-main-left {
       left: 0;
-      &:before { left: 5px; @include cssTriangle(16px,#fff,right); }
+      &:before { left: 5px; @include cssTriangle($clearingArrowSize,$clearingArrowColor,right); }
     }
     .clearing-main-right {
       height: 100%;
       right: 0;
-      &:before { @include cssTriangle(16px,#fff,left); }
+      &:before { @include cssTriangle($clearingArrowSize,$clearingArrowColor,left); }
     }
 
   }
@@ -308,6 +308,11 @@
       ul[data-clearing] { display: none; }
     }
 
+    /* Joyride --- */
+    /*             */
+    .joyride-tip-guide { width: 95% !important; left: 2.5% !important; @include border-radius($tipBorderRadius); }
+    .joyride-tip-guide-wrapper { width: 100%; }
+
     /* Tabs --- */
     /*          */
     .tabs.mobile { width: auto; margin: 20px -20px 40px; border-bottom: solid 1px #ccc; height: auto; margin: 20px -15px 0px -15px;

data/scss/foundation/components/modules/_topbar.scss

@@ -39,7 +39,7 @@
     &.expanded { height: inherit; }
 
     /* topbar global <ul> styles */
-    ul { display: inline; height: $topBarHeight; line-height: $topBarHeight; list-style: none;
+    ul { margin-left: 0; display: inline; height: $topBarHeight; line-height: $topBarHeight; list-style: none;
 
       /* Main Navigation links style */
       &>li { float: left;

data/scss/foundation/components/modules/_ui.scss

@@ -231,7 +231,7 @@
   table tfoot tr th,
   table tbody tr td,
   table tr td,
-  table tfoot tr td { font-size: ms(0); line-height: 18px; text-align: #{$defaultFloat}; }
+  table tfoot tr td { display: table-cell; font-size: ms(0); line-height: 18px; text-align: #{$defaultFloat}; }
   table thead tr th,
   table tfoot tr td { padding: 8px 10px 9px; font-size: ms(0); font-weight: bold; color: #222; }
   table thead tr th:first-child, table tfoot tr td:first-child { border-#{$defaultFloat}: none; }
@@ -277,7 +277,7 @@
   }
 
   /* Pricing Tables ---------------------- */
-  .pricing-table { border: $priceTableBorder; margin-left: 0;
+  .pricing-table { border: $priceTableBorder; margin-left: 0; margin-bottom: 20px;
     & * { list-style: none; line-height: 1; }
     .title { background-color: $priceTitleBgColor; padding: $priceTitlePadding; text-align: $priceTitleAlign; color: $priceTitleColor; font-weight: $priceTitleWeight; font-size: $priceTitleSize; }
     .price { background-color: $priceMoneyBgColor; padding: $priceMoneyPadding; text-align: $priceMoneyAlign; color: $priceMoneyColor; font-weight: $priceMoneyWeight; font-size: $priceMoneySize; }

data/templates/project/scss/_settings.scss

@@ -192,13 +192,51 @@
 // $orbitSlideNumFontColor: #fff;
 // $orbitSlideNumPadding: 5px;
 
-// Off Canvas Width Settings
-
-// $mainWidth: 80%;
-// $complementaryWidth: 20%;
+// Clearing Settings
+
+// $clearingBg: rgba(0,0,0,0.8);
+// $clearingOldBrowserBg: rgb(0,0,0);
+// $clearingCaptionBg: rgba(0,0,0,0.7);
+// $clearingCaptionOldBrowserBg: rgb(0,0,0);
+// $clearingCaptionFontColor: #fff;
+// $clearingCloseColor: #fff;
+// $clearingArrowColor: #fff;
+// $clearingArrowSize: 16px;
+// $clearingCarouselBg: rgba(0,0,0,0.75);
+// $clearingCarouselOldBrowserBg: rgb(0,0,0);
+// $clearingCarouselHeight: 150px;
+// $clearingActiveImgHeight: 75%;
+// $clearingCarouselThumbWidth: 175px;
+// $clearingCarouselThumbActiveBorder: 4px solid rgb(255,255,255);
+// $clearingImgBg: rgba(0,0,0,0.75);
+// $clearingImgOldBrowserBg: rgb(0,0,0);
+
+// Joyride Settings
+
+// $tipBg: rgba(0,0,0,0.8);
+// $tipBgIE8: #000;
+// $tipFontColor: #fff;
+// $tipHeaderWeight: bold;
+// $tipDefaultWidth: 300px;
+// $tipBorderRadius: 4px;
+// $tipPadding: 18px 20px 24px;
+// $tipNubSize: 14px;
+// $tipFontSize: 14px;
+// $tipTimerWidth: 50px;
+// $tipTimerHeight: 3px;
+// $tipTimerBorder: solid 1px #555;
+// $tipTimerColor: #666;
+// $tipCloseColor: #777;
+// $tipCloseSize: 20px;
+// $tipCloseWeight: normal;
+// $tipScreenFill: rgba(0,0,0,0.5);
 
 // Modular Scale Settings
 
 // $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
 // $baseFontSize: 14px;
-// $importantModNum: 44px;
+// $importantModNum: 44px;
+// $base-size: $baseFontSize $importantModNum;
+// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
+// http://www.modularscale.com by Tim Brown
+// https://github.com/scottkellum/modular-scale by scottkellum

data/test/elements.html

@@ -33,6 +33,7 @@
         <dd><a href="#keystrokes">Keystrokes</a></dd>
         <dd><a href="#panels">Panels</a></dd>
         <dd><a href="#inline-list">Inline List</a></dd>
+        <dd><a href="#tables">Tables</a></dd>
         <dd><a href="#progress-bars">Progress Bars</a></dd>
         <dd><a href="#pricing-tables">Pricing Tables</a></dd>
         <dd><a href="#thumbs">Thumbs</a></dd>
@@ -279,6 +280,58 @@
         </div>
       </div>
 
+      <br><br>
+
+      <div class="row">
+        <div class="four columns">
+          <a name="tables"></a>
+          <h4>Tables</h4>
+          <p>Okay, they're not the sexiest things ever, but tables get the job done (for tabular data).</p>
+        </div>
+        <br>
+        <div class="eight columns">
+          <table>
+            <thead>
+              <tr>
+                <th>Table Header</th>
+                <th>Table Header</th>
+                <th>Table Header</th>
+                <th>Table Header</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Content</td>
+                <td>This is longer content</td>
+                <td>Content</td>
+                <td>Content</td>
+              </tr>
+              <tr>
+                <td>Content</td>
+                <td>This is longer content</td>
+                <td>Content</td>
+                <td>Content</td>
+              </tr>
+              <tr>
+                <td>Content</td>
+                <td>This is longer content</td>
+                <td>Content</td>
+                <td>Content</td>
+              </tr>
+              <tr>
+                <td>Content</td>
+                <td>This is longer content</td>
+                <td>Content</td>
+                <td>Content</td>
+              </tr>
+            </tbody>
+          </table>
+          </ul>
+        </div>
+      </div>
+
+
+
       <br><br>
 
       <div class="row">

data/test/joyride.html

@@ -79,23 +79,23 @@
       <!-- Tip Content -->
     <ol id="joyRideTipContent">
       <li data-class="so-awesome" data-text="Next" class="custom">
-        <h2>Stop #1</h2>
+        <h4>Stop #1</h4>
         <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
       </li>
       <li data-id="numero2" data-button="Next" data-options="tipLocation:top;tipAnimation:fade">
-        <h2>Stop #2</h2>
+        <h4>Stop #2</h4>
         <p>Get the details right by styling Joyride with a custom stylesheet!</p>
       </li>
       <li data-id="numero3" data-button="Next" data-options="tipLocation:right">
-        <h2>Stop #3</h2>
+        <h4>Stop #3</h4>
         <p>It works right aligned.</p>
       </li>
       <li data-button="Next">
-        <h2>Stop #4</h2>
+        <h4>Stop #4</h4>
         <p>It works as a modal too!</p>
       </li>
       <li data-id="numero5" data-button="Close">
-        <h2>Stop #5</h2>
+        <h4>Stop #5</h4>
         <p>Now what are you waiting for? Add this to your projects and get the most out of your apps!</p>
       </li>
     </ol>
@@ -113,6 +113,7 @@
     <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/jquery.cookie.js"></script>
     <script src="../vendor/assets/javascripts/foundation/jquery.foundation.joyride.js"></script>
     <script src="../vendor/assets/javascripts/foundation/jquery.foundation.clearing.js"></script>
     <script src="../vendor/assets/javascripts/foundation/app.js"></script>

data/test/scss/_settings.scss

@@ -192,13 +192,51 @@
 // $orbitSlideNumFontColor: #fff;
 // $orbitSlideNumPadding: 5px;
 
-// Off Canvas Width Settings
-
-// $mainWidth: 80%;
-// $complementaryWidth: 20%;
+// Clearing Settings
+
+// $clearingBg: rgba(0,0,0,0.8);
+// $clearingOldBrowserBg: rgb(0,0,0);
+// $clearingCaptionBg: rgba(0,0,0,0.7);
+// $clearingCaptionOldBrowserBg: rgb(0,0,0);
+// $clearingCaptionFontColor: #fff;
+// $clearingCloseColor: #fff;
+// $clearingArrowColor: #fff;
+// $clearingArrowSize: 16px;
+// $clearingCarouselBg: rgba(0,0,0,0.75);
+// $clearingCarouselOldBrowserBg: rgb(0,0,0);
+// $clearingCarouselHeight: 150px;
+// $clearingActiveImgHeight: 75%;
+// $clearingCarouselThumbWidth: 175px;
+// $clearingCarouselThumbActiveBorder: 4px solid rgb(255,255,255);
+// $clearingImgBg: rgba(0,0,0,0.75);
+// $clearingImgOldBrowserBg: rgb(0,0,0);
+
+// Joyride Settings
+
+// $tipBg: rgba(0,0,0,0.8);
+// $tipBgIE8: #000;
+// $tipFontColor: #fff;
+// $tipHeaderWeight: bold;
+// $tipDefaultWidth: 300px;
+// $tipBorderRadius: 4px;
+// $tipPadding: 18px 20px 24px;
+// $tipNubSize: 14px;
+// $tipFontSize: 14px;
+// $tipTimerWidth: 50px;
+// $tipTimerHeight: 3px;
+// $tipTimerBorder: solid 1px #555;
+// $tipTimerColor: #666;
+// $tipCloseColor: #777;
+// $tipCloseSize: 20px;
+// $tipCloseWeight: normal;
+// $tipScreenFill: rgba(0,0,0,0.5);
 
 // Modular Scale Settings
 
 // $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
 // $baseFontSize: 14px;
-// $importantModNum: 44px;
+// $importantModNum: 44px;
+// $base-size: $baseFontSize $importantModNum;
+// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
+// http://www.modularscale.com by Tim Brown
+// https://github.com/scottkellum/modular-scale by scottkellum

data/vendor/assets/javascripts/foundation/jquery.cookie.js

@@ -0,0 +1,72 @@
+/*jshint eqnull:true */
+/*!
+ * jQuery Cookie Plugin v1.2
+ * https://github.com/carhartl/jquery-cookie
+ *
+ * Copyright 2011, Klaus Hartl
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.opensource.org/licenses/GPL-2.0
+ */
+(function ($, document, undefined) {
+
+  var pluses = /\+/g;
+
+  function raw(s) {
+    return s;
+  }
+
+  function decoded(s) {
+    return decodeURIComponent(s.replace(pluses, ' '));
+  }
+
+  $.cookie = function (key, value, options) {
+
+    // key and at least value given, set cookie...
+    if (value !== undefined && !/Object/.test(Object.prototype.toString.call(value))) {
+      options = $.extend({}, $.cookie.defaults, options);
+
+      if (value === null) {
+        options.expires = -1;
+      }
+
+      if (typeof options.expires === 'number') {
+        var days = options.expires, t = options.expires = new Date();
+        t.setDate(t.getDate() + days);
+      }
+
+      value = String(value);
+
+      return (document.cookie = [
+        encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value),
+        options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+        options.path    ? '; path=' + options.path : '',
+        options.domain  ? '; domain=' + options.domain : '',
+        options.secure  ? '; secure' : ''
+      ].join(''));
+    }
+
+    // key and possibly options given, get cookie...
+    options = value || $.cookie.defaults || {};
+    var decode = options.raw ? raw : decoded;
+    var cookies = document.cookie.split('; ');
+    for (var i = 0, parts; (parts = cookies[i] && cookies[i].split('=')); i++) {
+      if (decode(parts.shift()) === key) {
+        return decode(parts.join('='));
+      }
+    }
+
+    return null;
+  };
+
+  $.cookie.defaults = {};
+
+  $.removeCookie = function (key, options) {
+    if ($.cookie(key, options) !== null) {
+      $.cookie(key, null, options);
+      return true;
+    }
+    return false;
+  };
+
+})(jQuery, document);

data/vendor/assets/javascripts/foundation/jquery.foundation.clearing.js

@@ -68,7 +68,7 @@
 
             if (image.length > 0) {
               methods.center(image);
-            } 
+            }
           });
 
           doc.on('click.fndtn.clearing', '.clearing-main-right', function (e) {
@@ -196,7 +196,7 @@
             var li = $(this),
                 image = li.find('img');
 
-            if (li.height() > image.height()) {
+            if (li.height() > image.outerHeight()) {
               li.addClass('fix-height');
             }
           });

data/vendor/assets/javascripts/foundation/jquery.foundation.joyride.js

@@ -34,7 +34,7 @@
         'timer'   : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
         'tip'     : '<div class="joyride-tip-guide"><span class="joyride-nub"></span></div>',
         'wrapper' : '<div class="joyride-content-wrapper"></div>',
-        'button'  : '<a href="#" class="joyride-next-tip"></a>'
+        'button'  : '<a href="#" class="small button joyride-next-tip"></a>'
       }
     },
 
@@ -47,79 +47,83 @@
       init : function (opts) {
         return this.each(function () {
 
-          settings = $.extend(defaults, opts);
+          if ($.isEmptyObject(settings)) {
+            settings = $.extend(defaults, opts);
 
-          // non configureable settings
-          settings.document = window.document;
-          settings.$document = $(settings.document);
-          settings.$window = $(window);
-          settings.$content_el = $(this);
-          settings.body_offset = $(settings.tipContainer).position();
-          settings.$tip_content = $('li', settings.$content_el);
-          settings.paused = false;
-          settings.attempts = 0;
+            // non configureable settings
+            settings.document = window.document;
+            settings.$document = $(settings.document);
+            settings.$window = $(window);
+            settings.$content_el = $(this);
+            settings.body_offset = $(settings.tipContainer).position();
+            settings.$tip_content = $('li', settings.$content_el);
+            settings.paused = false;
+            settings.attempts = 0;
 
-          settings.tipLocationPatterns = {
-            top: ['bottom'],
-            bottom: [], // bottom should not need to be repositioned
-            left: ['right', 'top', 'bottom'],
-            right: ['left', 'top', 'bottom']
-          };
+            settings.tipLocationPatterns = {
+              top: ['bottom'],
+              bottom: [], // bottom should not need to be repositioned
+              left: ['right', 'top', 'bottom'],
+              right: ['left', 'top', 'bottom']
+            };
 
-          // are we using jQuery 1.7+
-          methods.jquery_check();
+            // are we using jQuery 1.7+
+            methods.jquery_check();
 
-          // can we create cookies?
-          if (!$.isFunction($.cookie)) {
-            settings.cookieMonster = false;
-          }
+            // can we create cookies?
+            if (!$.isFunction($.cookie)) {
+              settings.cookieMonster = false;
+            }
 
-          // generate the tips and insert into dom.
-          if (!settings.cookieMonster || !$.cookie(settings.cookieName)) {
+            // generate the tips and insert into dom.
+            if (!settings.cookieMonster || !$.cookie(settings.cookieName)) {
 
-            settings.$tip_content.each(function (index) {
-              methods.create({$li : $(this), index : index});
-            });
+              settings.$tip_content.each(function (index) {
+                methods.create({$li : $(this), index : index});
+              });
 
-            // show first tip
-            if (!settings.startTimerOnClick && settings.timer > 0) {
-              methods.show('init');
-              methods.startTimer();
-            } else {
-              methods.show('init');
-            }
+              // show first tip
+              if (!settings.startTimerOnClick && settings.timer > 0) {
+                methods.show('init');
+                methods.startTimer();
+              } else {
+                methods.show('init');
+              }
 
-          }
+            }
 
-          settings.$document.on('click.joyride', '.joyride-next-tip, .joyride-modal-bg', function (e) {
-            e.preventDefault();
+            settings.$document.on('click.joyride', '.joyride-next-tip, .joyride-modal-bg', function (e) {
+              e.preventDefault();
 
-            if (settings.$li.next().length < 1) {
-              methods.end();
-            } else if (settings.timer > 0) {
-              clearTimeout(settings.automate);
-              methods.hide();
-              methods.show();
-              methods.startTimer();
-            } else {
-              methods.hide();
-              methods.show();
-            }
+              if (settings.$li.next().length < 1) {
+                methods.end();
+              } else if (settings.timer > 0) {
+                clearTimeout(settings.automate);
+                methods.hide();
+                methods.show();
+                methods.startTimer();
+              } else {
+                methods.hide();
+                methods.show();
+              }
 
-          });
+            });
 
-          $('.joyride-close-tip').on('click.joyride', function (e) {
-            e.preventDefault();
-            methods.end();
-          });
+            $('.joyride-close-tip').on('click.joyride', function (e) {
+              e.preventDefault();
+              methods.end();
+            });
 
-          settings.$window.on('resize.joyride', function (e) {
-            if (methods.is_phone()) {
-              methods.pos_phone();
-            } else {
-              methods.pos_default();
-            }
-          });
+            settings.$window.on('resize.joyride', function (e) {
+              if (methods.is_phone()) {
+                methods.pos_phone();
+              } else {
+                methods.pos_default();
+              }
+            });
+          } else {
+            methods.restart();
+          }
 
         });
       },
@@ -359,6 +363,7 @@
         $(window).off('.joyride');
         $('.joyride-close-tip, .joyride-next-tip, .joyride-modal-bg').off('.joyride');
         $('.joyride-tip-guide, .joyride-modal-bg').remove();
+        clearTimeout(settings.automate);
         settings = {};
       },
 
@@ -409,7 +414,7 @@
             } else if (methods.left()) {
 
               settings.$next_tip.css({
-                top: settings.$target.offset().top - settings.$target.outerHeight(),
+                top: settings.$target.offset().top,
                 left: (settings.$target.offset().left - settings.$next_tip.outerWidth() - nub_height)});
 
               methods.nub_position($nub, settings.tipSettings.nubPosition, 'right');
@@ -492,7 +497,6 @@
         methods.center();
         $nub.hide();
 
-        // bg issues on some mobile devices
         if ($('.joyride-modal-bg').length < 1) {
           $('body').append('<div class="joyride-modal-bg">').show();
         }

data/vendor/assets/javascripts/foundation/jquery.foundation.topbar.js

@@ -36,7 +36,7 @@
           }
 
           if (settings.$topbar.parent().hasClass('fixed')) {
-            $('body').css('margin-top',settings.$topbar.outerHeight())
+            $('body').css('padding-top',settings.$topbar.outerHeight())
           }
 
           $('.top-bar .toggle-topbar').die('click.fndtn').live('click.fndtn', function (e) {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: zurb-foundation
 version: !ruby/object:Gem::Version
-  version: 3.2.0.rc1
+  version: 3.2.0.rc2
   prerelease: 6
 platform: ruby
 authors:
@@ -178,6 +178,7 @@ files:
 - vendor/assets/images/foundation/orbit/timer-black.png
 - vendor/assets/javascripts/foundation/app.js
 - vendor/assets/javascripts/foundation/index.js
+- vendor/assets/javascripts/foundation/jquery.cookie.js
 - vendor/assets/javascripts/foundation/jquery.event.move.js
 - vendor/assets/javascripts/foundation/jquery.event.swipe.js
 - vendor/assets/javascripts/foundation/jquery.foundation.accordion.js
@@ -212,7 +213,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -833065823339611627
+      hash: 1961324652888388162
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements: