From 15ebe58f2c23b33480229ab353671be744328caf Mon Sep 17 00:00:00 2001
From: Christopher Tarwater <ctarwater@gmail.com>
Date: Tue, 22 Mar 2016 17:15:04 -0700
Subject: [PATCH] update foundation zurb files

---
 .jekyll-metadata                              | Bin 28568 -> 0 bytes
 _sass/foundation/_foundation.scss             | 100 +-
 _sass/foundation/_global.scss                 | 523 ++++++++++-
 .../components/_accordion-menu.scss           |   6 +-
 _sass/foundation/components/_accordion.scss   |   9 +-
 _sass/foundation/components/_badge.scss       |   2 +-
 .../foundation/components/_button-group.scss  | 131 ++-
 _sass/foundation/components/_button.scss      |  41 +-
 _sass/foundation/components/_callout.scss     |  20 +-
 _sass/foundation/components/_drilldown.scss   |  28 +-
 .../foundation/components/_dropdown-menu.scss | 216 +++--
 _sass/foundation/components/_dropdown.scss    |   7 +-
 _sass/foundation/components/_flex-video.scss  |   5 -
 _sass/foundation/components/_flex.scss        |  28 +
 _sass/foundation/components/_label.scss       |   2 +-
 .../foundation/components/_media-object.scss  |  55 +-
 _sass/foundation/components/_menu-icon.scss   |   9 +
 _sass/foundation/components/_menu.scss        | 177 +++-
 _sass/foundation/components/_off-canvas.scss  |  15 +-
 _sass/foundation/components/_orbit.scss       |   7 +
 _sass/foundation/components/_pagination.scss  |  14 +-
 .../foundation/components/_progress-bar.scss  |  49 +-
 _sass/foundation/components/_reveal.scss      |  40 +-
 _sass/foundation/components/_slider.scss      |  45 +-
 _sass/foundation/components/_sticky.scss      |   2 +-
 _sass/foundation/components/_switch.scss      |   3 +-
 _sass/foundation/components/_table.scss       | 154 ++--
 _sass/foundation/components/_tabs.scss        | 162 ++--
 _sass/foundation/components/_title-bar.scss   |  77 +-
 _sass/foundation/components/_tooltip.scss     |  16 +-
 _sass/foundation/components/_top-bar.scss     | 131 ++-
 _sass/foundation/components/_visibility.scss  |  11 +-
 _sass/foundation/forms/_checkbox.scss         |   6 +-
 _sass/foundation/forms/_error.scss            |  12 +-
 _sass/foundation/forms/_fieldset.scss         |   1 +
 _sass/foundation/forms/_forms.scss            |  20 +-
 _sass/foundation/forms/_help-text.scss        |   2 +-
 _sass/foundation/forms/_input-group.scss      |  71 +-
 _sass/foundation/forms/_meter.scss            | 109 +++
 _sass/foundation/forms/_progress.scss         |  85 ++
 _sass/foundation/forms/_range.scss            | 144 +++
 _sass/foundation/forms/_select.scss           |  10 +-
 _sass/foundation/forms/_text.scss             |  18 +-
 _sass/foundation/grid/_classes.scss           | 128 +--
 _sass/foundation/grid/_column.scss            |  41 +-
 _sass/foundation/grid/_flex-grid.scss         | 228 +++--
 _sass/foundation/grid/_grid.scss              |  35 +-
 _sass/foundation/grid/_gutter.scss            |  19 +-
 _sass/foundation/grid/_layout.scss            |  20 +-
 _sass/foundation/grid/_position.scss          |  11 +-
 _sass/foundation/grid/_row.scss               |  43 +-
 _sass/foundation/settings/_settings.scss      | 862 +++++++++---------
 _sass/foundation/typography/_alignment.scss   |  22 +-
 _sass/foundation/typography/_base.scss        |   9 +-
 _sass/foundation/typography/_print.scss       |  14 +-
 _sass/foundation/util/_breakpoint.scss        | 137 ++-
 _sass/foundation/util/_color.scss             |  19 +
 _sass/foundation/util/_flex.scss              |  68 ++
 _sass/foundation/util/_mixins.scss            |  55 +-
 _sass/foundation/util/_unit.scss              |  42 +-
 _sass/foundation/util/_util.scss              |   6 +-
 _sass/foundation/util/_value.scss             |  45 +-
 _sass/foundation/vendor/normalize.scss        | 424 ---------
 63 files changed, 3118 insertions(+), 1673 deletions(-)
 delete mode 100644 .jekyll-metadata
 create mode 100644 _sass/foundation/components/_flex.scss
 create mode 100644 _sass/foundation/components/_menu-icon.scss
 create mode 100644 _sass/foundation/forms/_meter.scss
 create mode 100644 _sass/foundation/forms/_progress.scss
 create mode 100644 _sass/foundation/forms/_range.scss
 create mode 100644 _sass/foundation/util/_flex.scss
 delete mode 100644 _sass/foundation/vendor/normalize.scss

diff --git a/.jekyll-metadata b/.jekyll-metadata
deleted file mode 100644
index bf135eefceb347ec51cd920329627ed5780e2335..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 28568
zcmeI5Yls_F6vvZo$@bymf~bhA)KD!x?q*-rb^}`Lt~IunZFjB3+NQHJH_7eJ%uVOf
zZR(@ZS`_@ywN}NdMSOe`D=0|)B0jzp!4C=w7OfVFB3kML5k$muCz;tvW@b~FNtNM#
zYs2p3?8*Jz|2gNLb2ERz{VQ_m<O7)!Rd7ZuX+#%PqomO?5i?^N-GN0z&#WOvMwf|#
z;MFOj>Sza^s>m`jN*I1CU#2?z&_G}R5bEzo1A_>D#1Lees6|9YgO)X{>u3=5p@K#g
zq>Gwhh^1ad(556ht)_-kqqpDRnM*HH45HvvHZhSihZj!3zq^*c(Nj$%%Eiv%g?p%q
zbLj<R;}h@`w+}C-g@TR^@^|$>F1=8~Wu5)vmabfSJk%c}3l(a@pTqvB-jbon?A>zd
ziBJzEswkTh)-xq6NUo=Dj^?QfHUvp91lN<dNAu(&r9~O%1yztM1`&1FJ8X*P9hgV3
z=6deE(L7fbc9EiB5URSK9g)oiN{t4a!#&qtauO~GrtDsIZCJ|9pk-5COON(cR}Svo
zxhM+|I)HVlf=ctMsgUGL!?piNSS6|9F5R3|h^WzY>XPh&W&jiIVa3PnTYu=Op58q9
zMuXYeg{0%iyzC;9$}UcK9^CG0V7svMF>?INp6XfQ+Ie*&N36{Yj2y8|O!YAnXI^w~
zV&KDe^Xp@(v)8(pfv^9<E%%1a(1nqYNz8js>_y3D?<M!y?z^bl*M05VM0~8=`EgHm
z{cFaGW-B|cvln9OVP7jF@?+C><YOVWWHfQ8v&|oE&`#!K(vqKgs+B*=f`{If9rkCt
zX~uW;(NF^6305Wrorp*@b%QEoPfanL&;+#K$M$n1g~uYb*s0xnSuPzBNIVwF2N9f0
zKNKZ)H@OmnNtqUFnSp>Hw2+7fNe9&`vk3yH@EkKSM_PGC;AE$cPhyb~B=<&!;Q;Cz
zK!PN(G`*JRAt%p626Yh%se3CJueKtL?)@zy3@(XW60Jf=EMPRFWO0zOh;(9LMJS`)
z3T$AsUTA9t-?Rl^b%w*|-SxQ=dVLZL`1V8#pF(#rA+##gMPii9NmLe!SZ5UKgXc!z
zl2x2Q?`q=&dVLZL0+WwKjG#bdRG`|lpjkobG+>Anc(G`z5SmIzl&L8dWI@BNc;pot
z&ncag2XP+b%HzH$c^pETFog?5#z-M5f!ZiWf(}Qny2T<b!(lCZjVMeeIgtPQ*qj6D
zZ6$Dg5(|Nhv{thmL6d__D^BwTi%XHEk@{eM8c(v+kz>d)wE9)rcK{mMX-m_wW!UEi
zpIjs#jZznvgZwe_%2Xy|g{6mZfFVvH9qKl+fizsenkGPqp$UZo5jl~ZNKRx^UsLk2
zD2ZGF4TlCULRTTH;6PI%B$1{H4RO%?h4z@*Br0k|s!3(7bFmeawSwx{C@<%DQzf20
zdVLa$Xf?S%N+?%0Kq*qC49TOFIo6wpS>y_xwx}$dMMwl%A-UQ*<Jf);N7B3eIFeqU
z!~@9(qearxnL_4SuecSsnnafDeA4Bx7VU2}bxf?|D0-J2N73sO*UFk5sEDX#@4O|E
zYr>E?)Hl?tNUZh4r<?RwP`0ZVY`f9Z3H!L+KHNF8%G(JWT`LXLZ(TDIeA0zax;SOn
z^M+SMlP>P1?1P$V1(83WYN1>(e-Ua#M53apVAZfP(9EQusxamd$p4b}d#Y=1Ui?)v
z|4kzz?V59QyR1F4J0ZQ9cUB`8*O-dyonge4^^ZIH<pcc~3=wVaz2!&Gc+QoMzE-N<
z`5dmVyj3+mt*ZGjgf;4!NYw%<nylOk!?l63wi>2NPi#H*b+fE3v&XyU@u0Rg6wYNW
zrm_}c5Lr9>pPM%IiknY1)7Ejs9;Zwdc@Amq=NvbVoA(xzMvbfIy>p7&rz3xRal3pr
zrX1tEao!ql%5gH;Sd>IVm2ew*V+ZuX;>PX@NcSE6wprYgzu2+lQtKKBULwhGaf_+A
zZH+F0vpTl(Rs(l1b5Fh5Q|({7{DNlYI!-$QrNIS`3tXH9E);XMxrmGlw!A2aCEQ!7
z-6`i&sk{nw?(nIjix;t5tUhxh$!D$VWc5JSbv;+pbx~`>><&bg@b0-Ps7!y4fA{+_
z&t8yqY<#5byBUaK?3yk7!xcU3_B^;41Wr|I_YFGs@-qv5H(zFUshqbH%k!|beYS|-
z;IQz6*N5I|Mlt!J9SUFOQ&xoo&23>wYz)@x*L$|8|Go;hqHXx|aH4LhbMsxtac9$b
zh9A4|3b5UOR=-R(UMce3(NPB_gWza=18fWPyUuhsZwnn4ChdJ;8BdWpY_Wzd)XZC>
z#Mz_I!NlDI`SH6?u7A!$+zWPo+*zo{?e18ecNOrig7|b5L|6gVVLT+5wh3q^*!R)(
z7kg-1?a+1)r;Y1dto1FzU{c347&aD6-n99z5f5xP+QDS1-?!S+h9+KK-Qm@p|Dw9H
zE==N9zr?W@E^!Q)`C#8&kVy3HYTbw)A@rsW_k#pYp|EznEq!NCd7yvKDc3yB6_zV(
ztQGc-Fx0Qh-8Q;@d^CXgi-9kCs{45lU!4wL(>@(TP`M4&9KUh&){(nLgRy5vPQ6FF
z?e8b4eYp}le!9U4tnc3L6?-siV;El*s0!b)L|`nOLJu*fMu69T`JC;O)i3J%WW9*&
z_k}4DnxpS3{-4Y-j6!I0LPchcAJ#N{@m6SiLUqR0PgZMlRS2$wg!#oC<)F`u6>2`g
z_r2@^Z`6)vI|uy13zgkA8mVBZg^6!1^)c~M2f}fG6C?Da4%ZjSa~Qb^Hn4-=e1FK}
z$5$L9i~dH23Sk=kxO*-OS&<--m^s-xsEY8D-7OEy;WW1R&b;mO$)0c)-<nlE+v`6&
CW~6oi

diff --git a/_sass/foundation/_foundation.scss b/_sass/foundation/_foundation.scss
index 4cc625e1..bdf43f8a 100644
--- a/_sass/foundation/_foundation.scss
+++ b/_sass/foundation/_foundation.scss
@@ -1,13 +1,13 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
+/**
+ * Foundation for Sites by ZURB
+ * Version 6.2.0
+ * foundation.zurb.com
+ * Licensed under MIT Open Source
+ */
 
 // Settings
 @import 'settings/settings';
 
-// Third-party libraries
-@import 'vendor/normalize';
-
 // Sass utilities
 @import 'util/util';
 
@@ -16,8 +16,94 @@
 
 // Components
 @import 'grid/grid';
+//@import 'typography/typography';
+//@import 'forms/forms';
 @import 'components/visibility';
+//@import 'components/float';
+//@import 'components/button';
+//@import 'components/button-group';
+//@import 'components/accordion-menu';
+//@import 'components/accordion';
+//@import 'components/badge';
+//@import 'components/breadcrumbs';
+//@import 'components/callout';
+//@import 'components/close-button';
+//@import 'components/drilldown';
+//@import 'components/dropdown-menu';
+//@import 'components/dropdown';
+//@import 'components/flex';
+//@import 'components/flex-video';
+//@import 'components/label';
+//@import 'components/media-object';
+//@import 'components/menu';
+//@import 'components/menu-icon';
+//@import 'components/off-canvas';
+//@import 'components/orbit';
+//@import 'components/pagination';
+//@import 'components/progress-bar';
+//@import 'components/reveal';
+//@import 'components/slider';
+//@import 'components/sticky';
+//@import 'components/switch';
+//@import 'components/table';
+//@import 'components/tabs';
+//@import 'components/title-bar';
+//@import 'components/top-bar';
+//@import 'components/thumbnail';
+//@import 'components/tooltip';
 
 @include foundation-global-styles;
 @include foundation-grid;
-@include foundation-visibility-classes;
\ No newline at end of file
+@include foundation-visibility-classes;
+
+@mixin foundation-everything($flex: false) {
+  @if $flex {
+    $global-flexbox: true !global;
+  }
+
+  @include foundation-global-styles;
+  @if not $flex {
+    @include foundation-grid;
+  }
+  @else {
+    @include foundation-flex-grid;
+  }
+  //@include foundation-typography;
+  //@include foundation-forms;
+  //@include foundation-button;
+  //@include foundation-accordion;
+  //@include foundation-accordion-menu;
+  //@include foundation-badge;
+  //@include foundation-breadcrumbs;
+  //@include foundation-button-group;
+  //@include foundation-callout;
+  //@include foundation-close-button;
+  //@include foundation-menu;
+  //@include foundation-menu-icon;
+  //@include foundation-drilldown-menu;
+  //@include foundation-dropdown;
+  //@include foundation-dropdown-menu;
+  //@include foundation-flex-video;
+  //@include foundation-label;
+  //@include foundation-media-object;
+  //@include foundation-off-canvas;
+  //@include foundation-orbit;
+  //@include foundation-pagination;
+  //@include foundation-progress-bar;
+  //@include foundation-slider;
+  //@include foundation-sticky;
+  //@include foundation-reveal;
+  //@include foundation-switch;
+  //@include foundation-table;
+  //@include foundation-tabs;
+  //@include foundation-thumbnail;
+  //@include foundation-title-bar;
+  //@include foundation-tooltip;
+  //@include foundation-top-bar;
+  @include foundation-visibility-classes;
+  //@include foundation-float-classes;
+
+  @if $flex {
+    @include foundation-flex-classes;
+  }
+}
diff --git a/_sass/foundation/_global.scss b/_sass/foundation/_global.scss
index 1df78e50..1d168614 100644
--- a/_sass/foundation/_global.scss
+++ b/_sass/foundation/_global.scss
@@ -2,41 +2,33 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
+// scss-lint:disable ColorVariable, QualifyingElement, VendorPrefix
+
 ////
 /// @group global
 ////
 
-/// Global width of your site. Used by the grid to determine row width.
-/// @type Number
-$global-width: rem-calc(1200) !default;
-
 /// Font size attribute applied to `<html>` and `<body>`. We use 100% by default so the value is inherited from the user's browser settings.
 /// @type Number
 $global-font-size: 100% !default;
 
+/// Global width of your site. Used by the grid to determine row width.
+/// @type Number
+$global-width: rem-calc(1200) !default;
+
 /// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px
 /// @type Number
 $global-lineheight: 1.5 !default;
 
-/// Primary color for interactive components like links and buttons.
-/// @type Color
-$primary-color: #2199e8 !default;
-
-/// Secondary color, used with components that support the `.secondary` class.
-/// @type Color
-$secondary-color: #777 !default;
-
-/// Color to indicate a positive status or action, used with the `.success` class.
-/// @type Color
-$success-color: #3adb76 !default;
-
-/// Color to indicate a caution status or action, used with the `.warning` class.
-/// @type Color
-$warning-color: #ffae00 !default;
-
-/// Color to indicate a negative status or action, used with the `.alert` class.
-/// @type Color
-$alert-color: #ec5840 !default;
+/// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.
+/// @type Map
+$foundation-palette: (
+  primary: #2199e8,
+  secondary: #777,
+  success: #3adb76,
+  warning: #ffae00,
+  alert: #ec5840,
+) !default;
 
 /// Color used for light gray UI items.
 /// @type Color
@@ -82,10 +74,6 @@ $global-margin: 1rem !default;
 /// @type Number
 $global-padding: 1rem !default;
 
-/// Global value used for margin between components.
-/// @type Number
-$global-margin: 1rem !default;
-
 /// Global font weight used for normal type.
 /// @type Keyword | Number
 $global-weight-normal: normal !default;
@@ -99,32 +87,49 @@ $global-weight-bold: bold !default;
 $global-radius: 0 !default;
 
 /// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.
+/// @type Keyword
 $global-text-direction: ltr !default;
 
+/// Enables flexbox for components that support it.
+/// @type Boolean
+$global-flexbox: false !default;
+
+@if not map-has-key($foundation-palette, primary) {
+  @error 'In $foundation-palette, you must have a color named "primary".';
+}
+
 // Internal variables used for text direction
 $global-left: if($global-text-direction == rtl, right, left);
 $global-right: if($global-text-direction == rtl, left, right);
 
-// Internal map used to iterate through colors, to generate CSS classes with less code
-$foundation-colors: (
-  primary: $primary-color,
-  secondary: $secondary-color,
-  success: $success-color,
-  alert: $alert-color,
-  warning: $warning-color,
-);
+// Internal variables used for colors
+$primary-color: map-get($foundation-palette, primary);
+$secondary-color: map-get($foundation-palette, secondary);
+$success-color: map-get($foundation-palette, success);
+$warning-color: map-get($foundation-palette, warning);
+$alert-color: map-get($foundation-palette, alert);
+
+// Remove this in 6.3
+$-zf-menu-icon-imported: false;
+$-zf-flex-classes-imported: false;
 
 @mixin foundation-global-styles {
-  html,
-  body {
+  @include -zf-normalize;
+
+  // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
+  .foundation-mq {
+    font-family: '#{-zf-bp-serialize($breakpoints)}';
+  }
+
+  html {
     font-size: $global-font-size;
     box-sizing: border-box;
   }
 
   // Set box-sizing globally to handle padding and border widths
   *,
-  *:before,
-  *:after {
+  *::before,
+  *::after {
     box-sizing: inherit;
   }
 
@@ -182,6 +187,7 @@ $foundation-colors: (
 
   // Reset <button> styles created by most browsers
   button {
+    @include disable-mouse-outline;
     -webkit-appearance: none;
     -moz-appearance: none;
     background: transparent;
@@ -190,4 +196,443 @@ $foundation-colors: (
     border-radius: $global-radius;
     line-height: 1;
   }
+
+  // Internal classes to show/hide elements in JavaScript
+  .is-visible {
+    display: block !important;
+  }
+
+  .is-hidden {
+    display: none !important;
+  }
+}
+
+/// Loads normalize.css.
+/// @access private
+@mixin -zf-normalize {
+  /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+  /**
+   * 1. Set default font family to sans-serif.
+   * 2. Prevent iOS and IE text size adjust after device orientation change,
+   *    without disabling user zoom.
+   */
+
+  html {
+    font-family: sans-serif; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+
+  /**
+   * Remove default margin.
+   */
+
+  body {
+    margin: 0;
+  }
+
+  /* HTML5 display definitions
+     ========================================================================== */
+
+  /**
+   * Correct `block` display not defined for any HTML5 element in IE 8/9.
+   * Correct `block` display not defined for `details` or `summary` in IE 10/11
+   * and Firefox.
+   * Correct `block` display not defined for `main` in IE 11.
+   */
+
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  main,
+  menu,
+  nav,
+  section,
+  summary {
+    display: block;
+  }
+
+  /**
+   * 1. Correct `inline-block` display not defined in IE 8/9.
+   * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+   */
+
+  audio,
+  canvas,
+  progress,
+  video {
+    display: inline-block; /* 1 */
+    vertical-align: baseline; /* 2 */
+  }
+
+  /**
+   * Prevent modern browsers from displaying `audio` without controls.
+   * Remove excess height in iOS 5 devices.
+   */
+
+  audio:not([controls]) {
+    display: none;
+    height: 0;
+  }
+
+  /**
+   * Address `[hidden]` styling not present in IE 8/9/10.
+   * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+   */
+
+  [hidden],
+  template {
+    display: none;
+  }
+
+  /* Links
+     ========================================================================== */
+
+  /**
+   * Remove the gray background color from active links in IE 10.
+   */
+
+  a {
+    background-color: transparent;
+  }
+
+  /**
+   * Improve readability of focused elements when they are also in an
+   * active/hover state.
+   */
+
+  a:active,
+  a:hover {
+    outline: 0;
+  }
+
+  /* Text-level semantics
+     ========================================================================== */
+
+  /**
+   * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+   */
+
+  abbr[title] {
+    border-bottom: 1px dotted;
+  }
+
+  /**
+   * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+   */
+
+  b,
+  strong {
+    font-weight: bold;
+  }
+
+  /**
+   * Address styling not present in Safari and Chrome.
+   */
+
+  dfn {
+    font-style: italic;
+  }
+
+  /**
+   * Address variable `h1` font-size and margin within `section` and `article`
+   * contexts in Firefox 4+, Safari, and Chrome.
+   */
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+  /**
+   * Address styling not present in IE 8/9.
+   */
+
+  mark {
+    background: #ff0;
+    color: #000;
+  }
+
+  /**
+   * Address inconsistent and variable font size in all browsers.
+   */
+
+  small {
+    font-size: 80%;
+  }
+
+  /**
+   * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+   */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  /* Embedded content
+     ========================================================================== */
+
+  /**
+   * Remove border when inside `a` element in IE 8/9/10.
+   */
+
+  img {
+    border: 0;
+  }
+
+  /**
+   * Correct overflow not hidden in IE 9/10/11.
+   */
+
+  svg:not(:root) {
+    overflow: hidden;
+  }
+
+  /* Grouping content
+     ========================================================================== */
+
+  /**
+   * Address margin not present in IE 8/9 and Safari.
+   */
+
+  figure {
+    margin: 1em 40px;
+  }
+
+  /**
+   * Address differences between Firefox and other browsers.
+   */
+
+  hr {
+    box-sizing: content-box;
+    height: 0;
+  }
+
+  /**
+   * Contain overflow in all browsers.
+   */
+
+  pre {
+    overflow: auto;
+  }
+
+  /**
+   * Address odd `em`-unit font size rendering in all browsers.
+   */
+
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+  }
+
+  /* Forms
+     ========================================================================== */
+
+  /**
+   * Known limitation: by default, Chrome and Safari on OS X allow very limited
+   * styling of `select`, unless a `border` property is set.
+   */
+
+  /**
+   * 1. Correct color not being inherited.
+   *    Known issue: affects color of disabled elements.
+   * 2. Correct font properties not being inherited.
+   * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+   */
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    color: inherit; /* 1 */
+    font: inherit; /* 2 */
+    margin: 0; /* 3 */
+  }
+
+  /**
+   * Address `overflow` set to `hidden` in IE 8/9/10/11.
+   */
+
+  button {
+    overflow: visible;
+  }
+
+  /**
+   * Address inconsistent `text-transform` inheritance for `button` and `select`.
+   * All other form control elements do not inherit `text-transform` values.
+   * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+   * Correct `select` style inheritance in Firefox.
+   */
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  /**
+   * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+   *    and `video` controls.
+   * 2. Correct inability to style clickable `input` types in iOS.
+   * 3. Improve usability and consistency of cursor style between image-type
+   *    `input` and others.
+   */
+
+  button,
+  html input[type="button"], /* 1 */
+  input[type="reset"],
+  input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+  }
+
+  /**
+   * Re-set default cursor for disabled elements.
+   */
+
+  button[disabled],
+  html input[disabled] {
+    cursor: default;
+  }
+
+  /**
+   * Remove inner padding and border in Firefox 4+.
+   */
+
+  button::-moz-focus-inner,
+  input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+
+  /**
+   * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+   * the UA stylesheet.
+   */
+
+  input {
+    line-height: normal;
+  }
+
+  /**
+   * It's recommended that you don't attempt to style these elements.
+   * Firefox's implementation doesn't respect box-sizing, padding, or width.
+   *
+   * 1. Address box sizing set to `content-box` in IE 8/9/10.
+   * 2. Remove excess padding in IE 8/9/10.
+   */
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  /**
+   * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+   * `font-size` values of the `input`, it causes the cursor style of the
+   * decrement button to change from `default` to `text`.
+   */
+
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /**
+   * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+   * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+   */
+
+  input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    box-sizing: content-box; /* 2 */
+  }
+
+  /**
+   * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+   * Safari (but not Chrome) clips the cancel button when the search input has
+   * padding (and `textfield` appearance).
+   */
+
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /**
+   * Define consistent border, margin, and padding.
+   * [NOTE] We don't enable this ruleset in Foundation, because we want the <fieldset> element to have plain styling.
+   */
+
+  /* fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+  } */
+
+  /**
+   * 1. Correct `color` not being inherited in IE 8/9/10/11.
+   * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+   */
+
+  legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  /**
+   * Remove default vertical scrollbar in IE 8/9/10/11.
+   */
+
+  textarea {
+    overflow: auto;
+  }
+
+  /**
+   * Don't inherit the `font-weight` (applied by a rule above).
+   * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+   */
+
+  optgroup {
+    font-weight: bold;
+  }
+
+  /* Tables
+     ========================================================================== */
+
+  /**
+   * Remove most spacing between table cells.
+   */
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  td,
+  th {
+    padding: 0;
+  }
 }
diff --git a/_sass/foundation/components/_accordion-menu.scss b/_sass/foundation/components/_accordion-menu.scss
index eef527de..0241030c 100644
--- a/_sass/foundation/components/_accordion-menu.scss
+++ b/_sass/foundation/components/_accordion-menu.scss
@@ -6,13 +6,17 @@
 /// @type Boolean
 $accordionmenu-arrows: true !default;
 
+/// Sets accordion menu arrow color if arrow is used.
+/// @type Color
+$accordionmenu-arrow-color: $primary-color !default;
+
 @mixin foundation-accordion-menu {
   @if $accordionmenu-arrows {
     .is-accordion-submenu-parent > a {
       position: relative;
 
       &::after {
-        @include css-triangle(6px, $primary-color, down);
+        @include css-triangle(6px, $accordionmenu-arrow-color, down);
         position: absolute;
         top: 50%;
         margin-top: -4px;
diff --git a/_sass/foundation/components/_accordion.scss b/_sass/foundation/components/_accordion.scss
index 04b22d10..1fb1ebee 100644
--- a/_sass/foundation/components/_accordion.scss
+++ b/_sass/foundation/components/_accordion.scss
@@ -47,6 +47,7 @@ $accordion-content-padding: 1rem !default;
   list-style-type: none;
   background: $accordion-background;
   border: $accordion-content-border;
+  border-bottom: 0;
   border-radius: $global-radius;
   margin-#{$global-left}: 0;
 }
@@ -66,11 +67,6 @@ $accordion-content-padding: 1rem !default;
     background-color: $accordion-item-background-hover;
   }
 
-  // Remove the border on the last title
-  :last-child > & {
-    border-bottom-width: 0;
-  }
-
   @if $accordion-plusminus {
     &::before {
       content: '+';
@@ -88,9 +84,10 @@ $accordion-content-padding: 1rem !default;
 
 /// Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
 @mixin accordion-content {
-  padding: $accordion-item-padding;
+  padding: $accordion-content-padding;
   display: none;
   border-bottom: $accordion-content-border;
+  background-color: $accordion-content-background;
 }
 
 @mixin foundation-accordion {
diff --git a/_sass/foundation/components/_badge.scss b/_sass/foundation/components/_badge.scss
index 6471a2ce..c3c0112d 100644
--- a/_sass/foundation/components/_badge.scss
+++ b/_sass/foundation/components/_badge.scss
@@ -43,7 +43,7 @@ $badge-font-size: 0.6rem !default;
     background: $badge-background;
     color: $badge-color;
 
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       @if $name != primary {
         &.#{$name} {
           background: $color;
diff --git a/_sass/foundation/components/_button-group.scss b/_sass/foundation/components/_button-group.scss
index 994b992b..ea95e38b 100644
--- a/_sass/foundation/components/_button-group.scss
+++ b/_sass/foundation/components/_button-group.scss
@@ -29,32 +29,70 @@ $buttongroup-expand-max: 6 !default;
 ) {
   @include clearfix;
   margin-bottom: $buttongroup-margin;
-  font-size: map-get($button-sizes, default);
+  font-size: 0;
+
+  @if $global-flexbox {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
 
   #{$child-selector} {
-    float: #{$global-left};
     margin: 0;
-    font-size: inherit;
+    font-size: map-get($button-sizes, default);
+
+    @if $global-flexbox {
+      flex: 0 0 auto;
+    }
+    @else {
+      float: #{$global-left};
+    }
 
     &:not(:last-child) {
-      border-#{$global-right}: $buttongroup-spacing solid $body-background;
+      @if $global-flexbox {
+        margin-right: $buttongroup-spacing;
+      }
+      @else {
+        border-#{$global-right}: $buttongroup-spacing solid $body-background;
+      }
     }
   }
 }
 
 /// Creates a full-width button group, making each button equal width.
-/// @param {Keyword|Number} $count [auto] - Number of buttons inside the button group. Set to `auto` to generate CSS that will account for a variable number of buttons.
 /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
 @mixin button-group-expand(
-  $count: auto,
-  $selector: $buttongroup-child-selector
+  $selector: $buttongroup-child-selector,
+  $count: null
 ) {
+  @if not $global-flexbox {
+    margin-right: -$buttongroup-spacing;
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+
+  // scss-lint:disable ZeroUnit
   #{$selector} {
-    @if $count == auto {
-      @include auto-width($buttongroup-expand-max, $selector);
+    @if $global-flexbox {
+      flex: 1 1 0px;
     }
-    @else if type-of($count) == 'number' {
-      width: percentage(1 / $count);
+    @else {
+      @for $i from 2 through $buttongroup-expand-max {
+        &:first-child:nth-last-child(#{$i}) {
+          &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
+            display: inline-block;
+            @if #{$buttongroup-spacing} == '0' {
+              width: #{percentage(1 / $i)};
+            } @else {
+              width: calc(#{percentage(1 / $i)} - #{$buttongroup-spacing});
+            }
+            margin-right: $buttongroup-spacing;
+          }
+        }
+      }
     }
   }
 }
@@ -64,9 +102,21 @@ $buttongroup-expand-max: 6 !default;
 @mixin button-group-stack(
   $selector: $buttongroup-child-selector
 ) {
+  @if $global-flexbox {
+    flex-wrap: wrap;
+  }
+
   #{$selector} {
-    width: 100%;
-    border-#{$global-right}: 0;
+    @if $global-flexbox {
+      flex: 0 0 100%;
+    }
+    @else {
+      width: 100%;
+    }
+
+    &:not(:last-child) {
+      margin-#{$global-right}: 0;
+    }
   }
 }
 
@@ -75,11 +125,17 @@ $buttongroup-expand-max: 6 !default;
 @mixin button-group-unstack(
   $selector: $buttongroup-child-selector
 ) {
+  // scss-lint:disable ZeroUnit
   #{$selector} {
-    width: auto;
+    @if $global-flexbox {
+      flex: 1 1 0px;
+    }
+    @else {
+      width: auto;
+    }
 
     &:not(:last-child) {
-      border-#{$global-right}: $buttongroup-spacing solid $body-background;
+      margin-#{$global-right}: $buttongroup-spacing;
     }
   }
 }
@@ -89,20 +145,33 @@ $buttongroup-expand-max: 6 !default;
     @include button-group;
 
     // Sizes
-    &.tiny     { font-size: map-get($button-sizes, tiny); }
-    &.small    { font-size: map-get($button-sizes, small); }
-    &.large    { font-size: map-get($button-sizes, large); }
+    @each $size, $value in map-remove($button-sizes, default) {
+      &.#{$size} #{$buttongroup-child-selector} {
+        font-size: $value;
+      }
+    }
+
+    // Even-width Group
     &.expanded { @include button-group-expand; }
 
     // Colors
-    @each $name, $color in $foundation-colors {
-      &.#{$name} #{$buttongroup-child-selector} {
-        @include button-style($color, auto, auto);
+    @each $name, $color in $foundation-palette {
+      @if $button-fill != hollow {
+        &.#{$name} #{$buttongroup-child-selector} {
+          @include button-style($color, auto, auto);
+        }
+      }
+      @else {
+        &.#{$name} #{$buttongroup-child-selector} {
+          @include button-hollow;
+          @include button-hollow-style($color);
+        }
       }
     }
 
     &.stacked,
-    &.stacked-for-small {
+    &.stacked-for-small,
+    &.stacked-for-medium {
       @include button-group-stack;
     }
 
@@ -111,5 +180,23 @@ $buttongroup-expand-max: 6 !default;
         @include button-group-unstack;
       }
     }
+
+    &.stacked-for-medium {
+      @include breakpoint(large) {
+        @include button-group-unstack;
+      }
+    }
+
+    // scss-lint:disable MergeableSelector
+    &.stacked-for-small.expanded {
+      @include breakpoint(small only) {
+        display: block;
+
+        #{$buttongroup-child-selector} {
+          display: block;
+          margin-right: 0;
+        }
+      }
+    }
   }
 }
diff --git a/_sass/foundation/components/_button.scss b/_sass/foundation/components/_button.scss
index 6b01bb5e..703c1fd1 100644
--- a/_sass/foundation/components/_button.scss
+++ b/_sass/foundation/components/_button.scss
@@ -12,7 +12,7 @@ $button-padding: 0.85em 1em !default;
 
 /// Margin around buttons.
 /// @type List
-$button-margin: 0 $global-margin $global-margin 0 !default;
+$button-margin: 0 0 $global-margin 0 !default;
 
 /// Default fill for buttons. Can either be `solid` or `hollow`.
 /// @type Keyword
@@ -28,11 +28,11 @@ $button-background-hover: scale-color($button-background, $lightness: -15%) !def
 
 /// Font color for buttons.
 /// @type List
-$button-color: #fff !default;
+$button-color: $white !default;
 
 /// Font color for buttons, if the background is light.
 /// @type List
-$button-color-alt: #000 !default;
+$button-color-alt: $black !default;
 
 /// Border radius for buttons, defaulted to global-radius.
 /// @type Number
@@ -64,7 +64,7 @@ $button-opacity-disabled: 0.25 !default;
   line-height: 1;
   cursor: pointer;
   -webkit-appearance: none;
-  transition: all 0.25s ease-out;
+  transition: background-color 0.25s ease-out, color 0.25s ease-out;
   vertical-align: middle;
   border: 1px solid transparent;
   border-radius: $button-radius;
@@ -99,25 +99,18 @@ $button-opacity-disabled: 0.25 !default;
   $color: $button-color
 ) {
   @if $color == auto {
-    $color: isitlight($background);
+    $color: foreground($background);
   }
 
   @if $background-hover == auto {
     $background-hover: scale-color($background, $lightness: -20%);
   }
 
-  @if lightness($background) >= 70% {
-    $color: $button-color-alt;
-  }
-  @else {
-    $color: $button-color;
-  }
-
-  background: $background;
+  background-color: $background;
   color: $color;
 
   &:hover, &:focus {
-    background: $background-hover;
+    background-color: $background-hover;
     color: $color;
   }
 }
@@ -126,7 +119,7 @@ $button-opacity-disabled: 0.25 !default;
 @mixin button-hollow {
   &,
   &:hover, &:focus {
-    background: transparent;
+    background-color: transparent;
   }
 }
 
@@ -201,13 +194,16 @@ $button-opacity-disabled: 0.25 !default;
     @include button;
 
     // Sizes
-    &.tiny     { font-size: map-get($button-sizes, tiny); }
-    &.small    { font-size: map-get($button-sizes, small); }
-    &.large    { font-size: map-get($button-sizes, large); }
+    @each $size, $value in map-remove($button-sizes, default) {
+      &.#{$size} {
+        font-size: $value;
+      }
+    }
+
     &.expanded { @include button-expand; }
 
     // Colors
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       @if $button-fill != hollow {
         &.#{$name} {
           @include button-style($color, auto);
@@ -230,7 +226,7 @@ $button-opacity-disabled: 0.25 !default;
         @include button-hollow;
         @include button-hollow-style;
 
-        @each $name, $color in $foundation-colors {
+        @each $name, $color in $foundation-palette {
           &.#{$name} {
             @include button-hollow-style($color);
           }
@@ -239,7 +235,8 @@ $button-opacity-disabled: 0.25 !default;
     }
 
     // Disabled style
-    &.disabled {
+    &.disabled,
+    &[disabled] {
       @include button-disabled;
     }
 
@@ -258,7 +255,7 @@ $button-opacity-disabled: 0.25 !default;
     &.arrow-only::after {
       margin-#{$global-left}: 0;
       float: none;
-      top: 0.2em;
+      top: -0.1em;
     }
   }
 }
diff --git a/_sass/foundation/components/_callout.scss b/_sass/foundation/components/_callout.scss
index 1482956b..a33792a8 100644
--- a/_sass/foundation/components/_callout.scss
+++ b/_sass/foundation/components/_callout.scss
@@ -14,7 +14,7 @@ $callout-background: $white !default;
 /// @type Number
 $callout-background-fade: 85% !default;
 
-/// Defualt border style for callouts.
+/// Default border style for callouts.
 /// @type List
 $callout-border: 1px solid rgba($black, 0.25) !default;
 
@@ -49,6 +49,7 @@ $callout-link-tint: 30% !default;
   border: $callout-border;
   border-radius: $callout-radius;
   position: relative;
+  color: $callout-font-color;
 
   // Respect the padding, fool.
   > :first-child {
@@ -60,23 +61,12 @@ $callout-link-tint: 30% !default;
   }
 }
 
-/// Generate quick styles for a callout using a single color as a baseline. If `$callout-link-tint` is enabled, links within colored panels will be a darker version of the background.
+/// Generate quick styles for a callout using a single color as a baseline.
 /// @param {Color} $color [$callout-background] - Color to use.
 @mixin callout-style($color: $callout-background) {
   $background: scale-color($color, $lightness: $callout-background-fade);
-  $link-color: scale-color($color, $lightness: -$callout-link-tint);
 
   background-color: $background;
-
-  @if $callout-link-tint and hue($background) > 0deg {
-    a {
-      color: $link-color;
-
-      &:hover {
-        color: darken($link-color, 15%);
-      }
-    }
-  }
 }
 
 @mixin callout-size($padding) {
@@ -98,14 +88,14 @@ $callout-link-tint: 30% !default;
   .callout {
     @include callout;
 
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       &.#{$name} {
         @include callout-style($color);
       }
     }
 
     &.small {
-      @include callout-size(.5rem);
+      @include callout-size(0.5rem);
     }
 
     &.large {
diff --git a/_sass/foundation/components/_drilldown.scss b/_sass/foundation/components/_drilldown.scss
index 6e0f24f3..159dbb4e 100644
--- a/_sass/foundation/components/_drilldown.scss
+++ b/_sass/foundation/components/_drilldown.scss
@@ -14,22 +14,34 @@ $drilldown-transition: transform 0.15s linear !default;
 /// @type Boolean
 $drilldown-arrows: true !default;
 
+/// Sets drilldown arrow color if arrow is used.
+/// @type Color
+$drilldown-arrow-color: $primary-color !default;
+
+/// Background color for drilldown submenus.
+/// @type Color
+$drilldown-background: $white !default;
+
 @mixin foundation-drilldown-menu {
   // Applied to the Menu container
   .is-drilldown {
     position: relative;
     overflow: hidden;
+
+    li {
+      display: block !important;
+    }
   }
 
   // Applied to nested <ul>s
-  .is-drilldown-sub {
+  .is-drilldown-submenu {
     position: absolute;
     top: 0;
     #{$global-left}: 100%;
     z-index: -1;
     height: 100%;
     width: 100%;
-    background: $white;
+    background: $drilldown-background;
     transition: $drilldown-transition;
 
     &.is-active {
@@ -48,7 +60,7 @@ $drilldown-arrows: true !default;
       position: relative;
 
       &::after {
-        @include css-triangle(6px, $primary-color, $global-right);
+        @include css-triangle(6px, $drilldown-arrow-color, $global-right);
         position: absolute;
         top: 50%;
         margin-top: -6px;
@@ -56,12 +68,12 @@ $drilldown-arrows: true !default;
       }
     }
 
-    .js-drilldown-back::before {
-      @include css-triangle(6px, $primary-color, $global-left);
-      float: $global-left;
+    .js-drilldown-back > a::before {
+      @include css-triangle(6px, $drilldown-arrow-color, $global-left);
+      border-#{$global-left}-width: 0;
+      display: inline-block;
+      vertical-align: middle;
       margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
-      margin-#{$global-left}: 0.6rem; // Lines the tip of the arrow with the items below
-      margin-top: 14px; // Aligns the arrow with the text
     }
   }
 }
diff --git a/_sass/foundation/components/_dropdown-menu.scss b/_sass/foundation/components/_dropdown-menu.scss
index d920408f..7ea6c340 100644
--- a/_sass/foundation/components/_dropdown-menu.scss
+++ b/_sass/foundation/components/_dropdown-menu.scss
@@ -10,6 +10,10 @@
 /// @type Boolean
 $dropdownmenu-arrows: true !default;
 
+/// Sets dropdown menu arrow color if arrow is used.
+/// @type Color
+$dropdownmenu-arrow-color: $anchor-color !default;
+
 /// Minimum width of dropdown sub-menus.
 /// @type Length
 $dropdownmenu-min-width: 200px !default;
@@ -18,96 +22,123 @@ $dropdownmenu-min-width: 200px !default;
 /// @type Color
 $dropdownmenu-background: $white !default;
 
-/// Border for dropdown panes.
+/// Border for dropdown sub-menus.
 /// @type List
 $dropdownmenu-border: 1px solid $medium-gray !default;
 
-@mixin foundation-dropdown-menu {
-  .dropdown.menu {
-    a {
-      @include disable-mouse-outline;
-    }
-    .is-dropdown-submenu-parent {
-      position: relative;
+// Border width for dropdown sub-menus.
+// Used to adjust top margin of a sub-menu if a border is used.
+// @type Length
+$dropdownmenu-border-width: nth($dropdownmenu-border, 1);
 
-      a::after {
-        float: right;
-        margin-top: 3px;
-        margin-left: 10px;
-      }
+@mixin left-right-arrows {
+  > a::after {
+    #{$global-right}: 14px;
+    margin-top: -3px;
+  }
 
-      @if $dropdownmenu-arrows {
-        &.is-down-arrow a {
-          padding-right: 1.5rem;
-          position: relative;
-        }
-        &.is-down-arrow > a::after {
-          @include css-triangle(5px, $anchor-color, down);
-          position: absolute;
-          top: 12px;
-          right: 5px;
-        }
-        &.is-left-arrow > a::after {
-          @include css-triangle(5px, $anchor-color, left);
-          float: left;
-          margin-left: 0;
-          margin-right: 10px;
-        }
-        &.is-right-arrow > a::after {
-          @include css-triangle(5px, $anchor-color, right);
-        }
-      }
+  &.opens-left > a::after {
+    @include css-triangle(5px, $dropdownmenu-arrow-color, left);
+  }
 
-      &.is-left-arrow.opens-inner .submenu{
-        right: 0;
+  &.opens-right > a::after {
+    @include css-triangle(5px, $dropdownmenu-arrow-color, right);
+  }
+}
+
+@mixin dropdown-menu-direction($dir: horizontal) {
+  @if $dir == horizontal {
+    > li.opens-left {
+      > .is-dropdown-submenu {
         left: auto;
+        right: 0;
+        top: 100%;
       }
-      &.is-right-arrow.opens-inner .submenu{
-        left: 0;
+    }
+
+    > li.opens-right {
+      > .is-dropdown-submenu {
         right: auto;
-      }
-      &.opens-inner .submenu {
+        left: 0;
         top: 100%;
       }
     }
 
-    .no-js & ul {
-      display: none;
+    @if $dropdownmenu-arrows {
+      > li.is-dropdown-submenu-parent > a {
+        padding-#{$global-right}: 1.5rem;
+        position: relative;
+      }
+
+      > li.is-dropdown-submenu-parent > a::after {
+        @include css-triangle(5px, $dropdownmenu-arrow-color, down);
+        #{$global-right}: 5px;
+        margin-top: -2px;
+      }
     }
+  }
+  @else if $dir == vertical {
+    > li {
+      .is-dropdown-submenu {
+        top: 0;
+      }
 
-    .submenu {
-      display: none;
-      position: absolute;
-      top: 0;
-      left: 100%;
-      min-width: $dropdownmenu-min-width;
-      z-index: 1;
-      background: $dropdownmenu-background;
-      border: $dropdownmenu-border;
-
-      > li {
-        width: 100%;
+      &.opens-left {
+        .is-dropdown-submenu {
+          left: auto;
+          right: 100%;
+        }
       }
 
-      &.first-sub {
-        top: 100%;
-        left: 0;
-        right: auto;
+      &.opens-right {
+        .is-dropdown-submenu {
+          right: auto;
+          left: 100%;
+        }
       }
 
-      &:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &,
-      &.js-dropdown-active {
-        display: block;
+      @if $dropdownmenu-arrows {
+        @include left-right-arrows;
       }
     }
+  }
+  @else {
+    @warn 'The direction used for dropdown-menu-direction() must be horizontal or vertical.';
+  }
+}
 
-    .is-dropdown-submenu-parent.opens-left .submenu {
-      left: auto;
-      right: 100%;
+@mixin foundation-dropdown-menu {
+  .dropdown.menu {
+    @include dropdown-menu-direction(horizontal);
+
+    a {
+      @include disable-mouse-outline;
+    }
+
+    .no-js & ul {
+      display: none;
+    }
+
+    &.vertical {
+      @include dropdown-menu-direction(vertical);
+    }
+
+    @each $size in $breakpoint-classes {
+      @if $size != $-zf-zero-breakpoint {
+        @include breakpoint($size) {
+          &.#{$size}-horizontal {
+            @include dropdown-menu-direction(horizontal);
+          }
+
+          &.#{$size}-vertical {
+            @include dropdown-menu-direction(vertical);
+          }
+        }
+      }
     }
 
     &.align-right {
-      .submenu.first-sub {
+      .is-dropdown-submenu.first-sub {
         top: 100%;
         left: auto;
         right: 0;
@@ -121,10 +152,59 @@ $dropdownmenu-border: 1px solid $medium-gray !default;
     &.align-right {
       float: right;
     }
+  }
+
+  .is-dropdown-submenu-parent {
+    position: relative;
+
+    a::after {
+      position: absolute;
+      top: 50%;
+      #{$global-right}: 5px;
+      margin-top: -2px;
+    }
+
+    &.opens-inner .is-dropdown-submenu {
+      top: 100%;
+    }
+
+    &.opens-left .is-dropdown-submenu {
+      left: auto;
+      right: 100%;
+    }
+  }
+
+  .is-dropdown-submenu {
+    display: none;
+    position: absolute;
+    top: 0;
+    #{$global-left}: 100%;
+    min-width: $dropdownmenu-min-width;
+    z-index: 1;
+    background: $dropdownmenu-background;
+    border: $dropdownmenu-border;
+
+    .is-dropdown-submenu-parent {
+      @if $dropdownmenu-arrows {
+        @include left-right-arrows;
+      }
+    }
+
+    @if (type-of($dropdownmenu-border-width) == 'number') {
+      .is-dropdown-submenu {
+        margin-top: (-$dropdownmenu-border-width);
+      }
+    }
+
+    > li {
+      width: 100%;
+    }
 
-    > li .submenu {
-      top: 0;
-      left: 100%;
+    // [TODO] Cut back specificity
+    // scss-lint:disable SelectorDepth
+    &:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &,
+    &.js-dropdown-active {
+      display: block;
     }
   }
 }
diff --git a/_sass/foundation/components/_dropdown.scss b/_sass/foundation/components/_dropdown.scss
index 97275bd8..771b5fd3 100644
--- a/_sass/foundation/components/_dropdown.scss
+++ b/_sass/foundation/components/_dropdown.scss
@@ -16,7 +16,7 @@ $dropdown-border: 1px solid $medium-gray !default;
 
 /// Font size for dropdown panes.
 /// @type List
-$dropdown-font-size: 16rem !default;
+$dropdown-font-size: 1rem !default;
 
 /// Width for dropdown panes.
 /// @type Number
@@ -38,13 +38,14 @@ $dropdown-sizes: (
 @mixin dropdown-container {
   background-color: $body-background;
   border: $dropdown-border;
+  border-radius: $dropdown-radius;
   display: block;
+  font-size: $dropdown-font-size;
   padding: $dropdown-padding;
   position: absolute;
   visibility: hidden;
-  width: 300px;
+  width: $dropdown-width;
   z-index: 10;
-  border-radius: $dropdown-radius;
 
   &.is-open {
     visibility: visible;
diff --git a/_sass/foundation/components/_flex-video.scss b/_sass/foundation/components/_flex-video.scss
index 67d09ea9..71cce125 100644
--- a/_sass/foundation/components/_flex-video.scss
+++ b/_sass/foundation/components/_flex-video.scss
@@ -6,10 +6,6 @@
 /// @group flex-video
 ////
 
-/// Padding above a flex video container.
-/// @type Number
-$flexvideo-padding-top: rem-calc(25) !default;
-
 /// Margin below a flex video container.
 /// @type Number
 $flexvideo-margin-bottom: rem-calc(16) !default;
@@ -36,7 +32,6 @@ $flexvideo-ratio-widescreen: 16 by 9 !default;
 @mixin flex-video($ratio: $flexvideo-ratio) {
   position: relative;
   height: 0;
-  padding-top: $flexvideo-padding-top;
   padding-bottom: flex-video($ratio);
   margin-bottom: $flexvideo-margin-bottom;
   overflow: hidden;
diff --git a/_sass/foundation/components/_flex.scss b/_sass/foundation/components/_flex.scss
new file mode 100644
index 00000000..07181d78
--- /dev/null
+++ b/_sass/foundation/components/_flex.scss
@@ -0,0 +1,28 @@
+@mixin foundation-flex-classes {
+  // Horizontal alignment using justify-content
+  @each $hdir, $prop in map-remove($-zf-flex-justify, left) {
+    .align-#{$hdir} {
+      @include flex-align($x: $hdir);
+    }
+  }
+
+  // Vertical alignment using align-items and align-self
+  @each $vdir, $prop in $-zf-flex-align {
+    .align-#{$vdir} {
+      @include flex-align($y: $vdir);
+    }
+
+    .align-self-#{$vdir} {
+      @include flex-align-self($y: $vdir);
+    }
+  }
+
+  // Source ordering
+  @include -zf-each-breakpoint {
+    @for $i from 1 through 6 {
+      .#{$-zf-size}-order-#{$i} {
+        @include flex-order($i);
+      }
+    }
+  }
+}
diff --git a/_sass/foundation/components/_label.scss b/_sass/foundation/components/_label.scss
index 75d3cf5b..6fb1864a 100644
--- a/_sass/foundation/components/_label.scss
+++ b/_sass/foundation/components/_label.scss
@@ -44,7 +44,7 @@ $label-radius: $global-radius !default;
     background: $label-background;
     color: $label-color;
 
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       @if $name != primary {
         &.#{$name} {
           background: $color;
diff --git a/_sass/foundation/components/_media-object.scss b/_sass/foundation/components/_media-object.scss
index 812130cc..00e615e8 100644
--- a/_sass/foundation/components/_media-object.scss
+++ b/_sass/foundation/components/_media-object.scss
@@ -14,37 +14,53 @@ $mediaobject-margin-bottom: $global-margin !default;
 /// @type Number
 $mediaobject-section-padding: $global-padding !default;
 
-/// With of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
+/// Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
 /// @type Number
 $mediaobject-image-width-stacked: 100% !default;
 
 /// Adds styles for a media object container.
 @mixin media-object-container {
   margin-bottom: $mediaobject-margin-bottom;
-  display: block;
+  display: if($global-flexbox, flex, block);
+
+  @if $global-flexbox {
+    flex-wrap: nowrap;
+  }
 }
 
 /// Adds styles for sections within a media object.
 /// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections.
 @mixin media-object-section($padding: $mediaobject-section-padding) {
-  display: table-cell;
-  vertical-align: top;
+  @if $global-flexbox {
+    flex: 0 0 auto;
+  }
+  @else {
+    display: table-cell;
+    vertical-align: top;
+  }
 
   &:first-child {
     padding-#{$global-right}: $padding;
   }
 
-  &:last-child:not(+ &:first-child) {
+  &:last-child:not(:nth-child(2)) {
     padding-#{$global-left}: $padding;
   }
 }
 
 /// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
 @mixin media-object-stack {
-  display: block;
   padding: 0;
   padding-bottom: $mediaobject-section-padding;
 
+  @if $global-flexbox {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  @else {
+    display: block;
+  }
+
   img {
     width: $mediaobject-image-width-stacked;
   }
@@ -58,8 +74,14 @@ $mediaobject-image-width-stacked: 100% !default;
       max-width: none;
     }
 
-    &.stack-for-small .media-object-section {
-      @include breakpoint(small only) {
+    @if $global-flexbox {
+      &.stack-for-#{$-zf-zero-breakpoint} {
+        flex-wrap: wrap;
+      }
+    }
+
+    &.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
+      @include breakpoint($-zf-zero-breakpoint only) {
         @include media-object-stack;
       }
     }
@@ -68,7 +90,20 @@ $mediaobject-image-width-stacked: 100% !default;
   .media-object-section {
     @include media-object-section;
 
-    &.middle { vertical-align: middle; }
-    &.bottom { vertical-align: bottom; }
+    @if $global-flexbox {
+      // scss-lint:disable ZeroUnit
+      &.main-section {
+        flex: 1 1 0px;
+      }
+    }
+    @else {
+      &.middle {
+        vertical-align: middle;
+      }
+
+      &.bottom {
+        vertical-align: bottom;
+      }
+    }
   }
 }
diff --git a/_sass/foundation/components/_menu-icon.scss b/_sass/foundation/components/_menu-icon.scss
new file mode 100644
index 00000000..b0df173b
--- /dev/null
+++ b/_sass/foundation/components/_menu-icon.scss
@@ -0,0 +1,9 @@
+@mixin foundation-menu-icon {
+  .menu-icon {
+    @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover);
+  }
+
+  .menu-icon.dark {
+    @include hamburger;
+  }
+}
diff --git a/_sass/foundation/components/_menu.scss b/_sass/foundation/components/_menu.scss
index 086e72ce..0cecaef7 100644
--- a/_sass/foundation/components/_menu.scss
+++ b/_sass/foundation/components/_menu.scss
@@ -18,24 +18,41 @@ $menu-margin-nested: 1rem !default;
 /// @type Number
 $menu-item-padding: 0.7rem 1rem !default;
 
+/// Text color of an active menu item.
+/// @type Color
+$menu-item-color-active: $white !default;
+
+/// Background color of an active menu item.
+/// @type Color
+$menu-item-background-active: map-get($foundation-palette, primary) !default;
+
 /// Spacing between an icon and text in a menu item.
 /// @type Number
 $menu-icon-spacing: 0.25rem !default;
 
-/// Maximum number of `expand-n` classes to include in the CSS.
-/// @type Number
-$menu-expand-max: 6 !default;
-
 /// Creates the base styles for a Menu.
 @mixin menu-base {
   margin: $menu-margin;
   list-style-type: none;
 
+  @if $global-flexbox {
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
   // List items are table cell to allow for vertical alignment
   > li {
     @include disable-mouse-outline;
-    display: table-cell;
-    vertical-align: middle;
+
+    @if $global-flexbox {
+      flex: 0 0 auto;
+    }
+    @else {
+      display: table-cell;
+      vertical-align: middle;
+    }
   }
 
   // Reset line height to make the height of the overall item easier to calculate
@@ -54,32 +71,55 @@ $menu-expand-max: 6 !default;
 }
 
 /// Expands the items of a Menu, so each item is the same width.
-/// @param {Keyword|Number} $count [auto] - Number of items in the Menu. You can hardcode a number, or use `auto` to generate CSS that will adapt to the number of items inside the menu.
-@mixin menu-expand($count: auto) {
-  display: table;
-  width: 100%;
-
-  > li {
-    @if $count == auto {
-      @include auto-width($menu-expand-max);
-    }
-    @else if type-of($count) == 'number' {
-      width: percentage(1 / $count);
+@mixin menu-expand {
+  @if $global-flexbox {
+    // scss-lint:disable ZeroUnit
+    > li {
+      flex: 1 1 0px;
     }
   }
+  @else {
+    width: 100%;
+    display: table;
+    table-layout: fixed;
+  }
 }
 
 /// Sets the direction of a Menu.
 /// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
 @mixin menu-direction($dir: horizontal) {
   @if $dir == horizontal {
-    > li {
-      display: table-cell;
+    @if $global-flexbox {
+      flex-wrap: nowrap;
+
+      > li {
+        flex: 0 0 auto;
+      }
+    }
+    @else {
+      > li {
+        display: table-cell;
+      }
     }
   }
   @else if $dir == vertical {
-    > li {
-      display: block;
+    @if $global-flexbox {
+      flex-wrap: wrap;
+
+      > li {
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+
+      > li  > a {
+        align-items: flex-start;
+        justify-content: flex-start;
+      }
+    }
+    @else {
+      > li {
+        display: block;
+      }
     }
   }
   @else {
@@ -89,9 +129,14 @@ $menu-expand-max: 6 !default;
 
 /// Creates a simple Menu, which has no padding or hover state.
 @mixin menu-simple {
+  li {
+    line-height: 1;
+    display: inline-block;
+    margin-#{$global-right}: get-side($menu-item-padding, $global-right);
+  }
+
   a {
     padding: 0;
-    margin-#{$global-right}: get-side($menu-item-padding, $global-right);
   }
 }
 
@@ -106,35 +151,62 @@ $menu-expand-max: 6 !default;
 /// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
 @mixin menu-icons($position: side, $base: true) {
   @if $base {
-    > li > a {
-      > img,
-      > i {
-        vertical-align: middle;
+    @if $global-flexbox {
+      > li > a {
+        display: flex;
       }
+    }
+    @else {
+      > li > a {
+        img,
+        i {
+          vertical-align: middle;
+        }
 
-      > span {
-        vertical-align: middle;
+        i + span,
+        img + span {
+          vertical-align: middle;
+        }
       }
     }
   }
 
   @if $position == side {
     > li > a {
-      > img,
-      > i {
-        display: inline-block;
+      @if $global-flexbox {
+        flex-flow: row nowrap;
+      }
+
+      img,
+      i {
         margin-#{$global-right}: $menu-icon-spacing;
+
+        @if not $global-flexbox {
+          display: inline-block;
+        }
       }
     }
   }
   @else if $position == top {
     > li > a {
-      text-align: center;
+      @if $global-flexbox {
+        flex-flow: column nowrap;
+      }
+      @else {
+        text-align: center;
+      }
 
-      > img,
-      > i {
-        display: block;
-        margin: 0 auto $menu-icon-spacing;
+      img,
+      i {
+        @if not $global-flexbox {
+          display: block;
+          margin: 0 auto $menu-icon-spacing;
+        }
+        @else {
+          align-self: stretch;
+          text-align: center;
+          margin-bottom: $menu-icon-spacing;
+        }
       }
     }
   }
@@ -162,7 +234,7 @@ $menu-expand-max: 6 !default;
     }
 
     @each $size in $breakpoint-classes {
-      @if $size != small {
+      @if $size != $-zf-zero-breakpoint {
         @include breakpoint($size) {
           &.#{$size}-horizontal {
             @include menu-direction(horizontal);
@@ -182,8 +254,15 @@ $menu-expand-max: 6 !default;
 
     // Align right
     &.align-#{$global-right} {
-      > li {
-        float: $global-right;
+      @if $global-flexbox {
+        justify-content: flex-end;
+      }
+      @else {
+        @include clearfix;
+
+        > li {
+          float: $global-right;
+        }
       }
     }
 
@@ -205,9 +284,29 @@ $menu-expand-max: 6 !default;
     &.nested {
       @include menu-nested;
     }
+
+    // Active state
+    .active > a {
+      color: $menu-item-color-active;
+      background: $menu-item-background-active;
+    }
   }
 
   .menu-text {
     @include menu-text;
   }
+
+  // Align center
+  .menu-centered {
+    text-align: center;
+
+    > .menu {
+      display: inline-block;
+    }
+  }
+
+  // Prevent FOUC when using the Responsive Menu plugin
+  .no-js [data-responsive-menu] ul {
+    display: none;
+  }
 }
diff --git a/_sass/foundation/components/_off-canvas.scss b/_sass/foundation/components/_off-canvas.scss
index cd67b85b..e7175e97 100644
--- a/_sass/foundation/components/_off-canvas.scss
+++ b/_sass/foundation/components/_off-canvas.scss
@@ -53,7 +53,7 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
     overflow-x: hidden;
     position: relative;
     backface-visibility: hidden;
-    -webkit-overflow-scrolling: touch;
+    -webkit-overflow-scrolling: auto;
   }
 
   .off-canvas-wrapper-inner {
@@ -64,12 +64,14 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
   }
 
   // Container for page content
-  .off-canvas-content {
+  .off-canvas-content,
+  .#{$maincontent-class} {
     min-height: 100%;
     background: $body-background;
     transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
     backface-visibility: hidden;
     z-index: 1;
+    padding-bottom: 0.1px; // Prevents margin collapsing, which would reveal the box shadow of the wrapper
 
     @if has-value($maincontent-shadow) {
       box-shadow: $maincontent-shadow;
@@ -87,10 +89,6 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
     background: $offcanvas-exit-background;
     cursor: pointer;
     transition: background $offcanvas-transition-length $offcanvas-transition-timing;
-
-    .is-off-canvas-open & {
-      display: block;
-    }
   }
 }
 
@@ -102,7 +100,7 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
   z-index: $offcanvas-zindex;
   max-height: 100%;
   overflow-y: auto;
-  transform: translateX(0px);
+  transform: translateX(0);
 }
 
 @mixin off-canvas-position(
@@ -164,11 +162,12 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
 
   // Reveal off-canvas menu on larger screens
   @each $name, $value in $breakpoint-classes {
-    @if $name != small {
+    @if $name != $-zf-zero-breakpoint {
       @include breakpoint($name) {
         .position-left.reveal-for-#{$name} {
           @include off-canvas-reveal(left);
         }
+
         .position-right.reveal-for-#{$name} {
           @include off-canvas-reveal(right);
         }
diff --git a/_sass/foundation/components/_orbit.scss b/_sass/foundation/components/_orbit.scss
index bdf6da43..357c154c 100644
--- a/_sass/foundation/components/_orbit.scss
+++ b/_sass/foundation/components/_orbit.scss
@@ -67,6 +67,13 @@ $orbit-control-zindex: 10 !default;
 @mixin orbit-slide {
   width: 100%;
   max-height: 100%;
+
+  &.no-motionui {
+    &.is-active {
+      top: 0;
+      left: 0;
+    }
+  }
 }
 
 @mixin orbit-figure {
diff --git a/_sass/foundation/components/_pagination.scss b/_sass/foundation/components/_pagination.scss
index 4d455777..1aaa2796 100644
--- a/_sass/foundation/components/_pagination.scss
+++ b/_sass/foundation/components/_pagination.scss
@@ -68,10 +68,14 @@ $pagination-arrows: true !default;
   li {
     font-size: $pagination-font-size;
     margin-#{$global-right}: $pagination-item-spacing;
-    display: none;
     border-radius: $pagination-radius;
 
-    @if not $pagination-mobile-items {
+    @if $pagination-mobile-items {
+      display: inline-block;
+    }
+    @else {
+      display: none;
+
       &:last-child,
       &:first-child {
         display: inline-block;
@@ -118,7 +122,7 @@ $pagination-arrows: true !default;
 
 /// Adds styles for an ellipsis for use in a pagination list.
 @mixin pagination-ellipsis {
-  content: '…';
+  content: '\2026';
   padding: $pagination-item-padding;
   color: $pagination-ellipsis-color;
 }
@@ -143,14 +147,14 @@ $pagination-arrows: true !default;
   @if $pagination-arrows {
     .pagination-previous a::before,
     .pagination-previous.disabled::before {
-      content: '«';
+      content: '\00ab';
       display: inline-block;
       margin-#{$global-right}: 0.5rem;
     }
 
     .pagination-next a::after,
     .pagination-next.disabled::after {
-      content: '»';
+      content: '\00bb';
       display: inline-block;
       margin-#{$global-left}: 0.5rem;
     }
diff --git a/_sass/foundation/components/_progress-bar.scss b/_sass/foundation/components/_progress-bar.scss
index 739b614a..e74a0c1f 100644
--- a/_sass/foundation/components/_progress-bar.scss
+++ b/_sass/foundation/components/_progress-bar.scss
@@ -2,30 +2,6 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-////
-/// @group progress-bar
-////
-
-/// Height of a progress bar.
-/// @type Number
-$progress-height: 1rem !default;
-
-/// Background color of a progress bar.
-/// @type Color
-$progress-background: $medium-gray !default;
-
-/// Bottom margin of a progress bar.
-/// @type Number
-$progress-margin-bottom: $global-margin !default;
-
-/// Default color of a progress bar's meter.
-/// @type Color
-$progress-meter-background: $primary-color !default;
-
-/// Default radius of a progress bar.
-/// @type Number
-$progress-radius: $global-radius !default;
-
 /// Adds styles for a progress bar container.
 @mixin progress-container {
   background-color: $progress-background;
@@ -41,20 +17,25 @@ $progress-radius: $global-radius !default;
   width: 0%;
   height: 100%;
   background-color: $progress-meter-background;
-  border-radius: $global-radius;
+
+  @if has-value($progress-radius) {
+    border-radius: $global-radius;
+  }
 }
 
 /// Adds styles for text in the progress meter.
 @mixin progress-meter-text {
+  @include absolute-center;
   position: absolute;
-  top: 50%;
-  #{$global-left}: 50%;
-  transform: translate(-50%, -50%);
   margin: 0;
   font-size: 0.75rem;
   font-weight: bold;
   color: $white;
   white-space: nowrap;
+
+  @if has-value($progress-radius) {
+    border-radius: $progress-radius;
+  }
 }
 
 @mixin foundation-progress-bar {
@@ -62,7 +43,7 @@ $progress-radius: $global-radius !default;
   .progress {
     @include progress-container;
 
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       &.#{$name} {
         .progress-meter {
           background-color: $color;
@@ -71,13 +52,13 @@ $progress-radius: $global-radius !default;
     }
   }
 
-  // Progress bar meter
+  // Inner meter
   .progress-meter {
     @include progress-meter;
+  }
 
-    // Progress bar meter text
-    .progress-meter-text {
-      @include progress-meter-text;
-    }
+  // Inner meter text
+  .progress-meter-text {
+    @include progress-meter-text;
   }
 }
diff --git a/_sass/foundation/components/_reveal.scss b/_sass/foundation/components/_reveal.scss
index d17170b9..1c0efec6 100644
--- a/_sass/foundation/components/_reveal.scss
+++ b/_sass/foundation/components/_reveal.scss
@@ -18,10 +18,6 @@ $reveal-width: 600px !default;
 /// @type Number
 $reveal-max-width: $global-width !default;
 
-/// Offset from the top of the window when a modal is added.
-/// @type Number
-$reveal-offset: rem-calc(100) !default;
-
 /// Default padding inside a modal.
 /// @type Number
 $reveal-padding: $global-padding !default;
@@ -63,8 +59,6 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   z-index: $reveal-zindex + 1;
   padding: $reveal-padding;
   border: $reveal-border;
-  // margin: 100px auto 0 100px;
-  margin: 100px auto 0 auto;
   background-color: $reveal-background;
   border-radius: $reveal-radius;
 
@@ -109,9 +103,17 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   min-height: 100vh;
   max-width: none;
   margin-left: 0;
+  border: 0;
+  border-radius: 0;
 }
 
 @mixin foundation-reveal {
+  // [TODO] Is this necessary?
+  // scss-lint:disable QualifyingElement
+  body.is-reveal-open {
+    overflow: hidden;
+  }
+
   // Overlay
   .reveal-overlay {
     @include reveal-overlay;
@@ -121,12 +123,11 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   .reveal {
     @include reveal-modal-base;
     @include reveal-modal-width($reveal-width);
-    position: absolute;
+    position: relative;
+    top: 100px;
+    margin-left: auto;
+    margin-right: auto;
     overflow-y: auto;
-    // Remove padding
-    &.collapse {
-      padding: 0;
-    }
 
     // Placeholder selector for medium-and-up modals
     // Prevents duplicate CSS when defining multiple Reveal sizes
@@ -138,6 +139,11 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
       }
     }
 
+    // Remove padding
+    &.collapse {
+      padding: 0;
+    }
+
     // Sizing classes
     &.tiny  { @include reveal-modal-width(30%); }
     &.small { @include reveal-modal-width(50%); }
@@ -147,9 +153,13 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
     &.full {
       @include reveal-modal-fullscreen;
     }
-  }
-}
 
-body.is-reveal-open {
-  overflow: hidden;
+    @include breakpoint($-zf-zero-breakpoint only) {
+      @include reveal-modal-fullscreen;
+    }
+
+    &.without-overlay {
+      position: fixed;
+    }
+  }
 }
diff --git a/_sass/foundation/components/_slider.scss b/_sass/foundation/components/_slider.scss
index 3f2d7d3c..7813e97f 100644
--- a/_sass/foundation/components/_slider.scss
+++ b/_sass/foundation/components/_slider.scss
@@ -9,43 +9,11 @@
 /// @group slider
 ////
 
-/// Default height of the slider.
+/// Default slider width of a vertical slider. (Doesn't apply to the native slider.)
 /// @type Number
-$slider-height: 0.5rem !default;
+$slider-width-vertical: 0.5rem !default;
 
-/// Default slider width of a vertical slider.
-/// @type Number
-$slider-width-vertical: $slider-height !default;
-
-/// Default background color of the slider's track.
-/// @type Color
-$slider-background: $light-gray !default;
-
-/// Default color of the active fill color of the slider.
-/// @type Color
-$slider-fill-background: $medium-gray !default;
-
-/// Default height of the handle of the slider.
-/// @type Number
-$slider-handle-height: 1.4rem !default;
-
-/// Default width of the handle of the slider.
-/// @type Number
-$slider-handle-width: 1.4rem !default;
-
-/// Default color of the handle for the slider.
-/// @type Color
-$slider-handle-background: $primary-color !default;
-
-/// Default fade amount of a disabled slider.
-/// @type Number
-$slider-opacity-disabled: 0.25 !default;
-
-/// Default radius for slider.
-/// @type Number
-$slider-radius: $global-radius !default;
-
-/// Transition properties to apply to the slider handle and fill.
+/// Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.)
 /// @type Transition
 $slider-transition: all 0.2s ease-in-out !default;
 
@@ -155,4 +123,11 @@ $slider-transition: all 0.2s ease-in-out !default;
   .slider.vertical {
     @include slider-vertical;
   }
+
+  // RTL support
+  @if $global-text-direction == rtl {
+    .slider:not(.vertical) {
+      transform: scale(-1, 1);
+    }
+  }
 }
diff --git a/_sass/foundation/components/_sticky.scss b/_sass/foundation/components/_sticky.scss
index 113e0011..0273603c 100644
--- a/_sass/foundation/components/_sticky.scss
+++ b/_sass/foundation/components/_sticky.scss
@@ -10,7 +10,7 @@
   .sticky {
     position: absolute;
     z-index: 0;
-    transform: translate3d(0,0,0);
+    transform: translate3d(0, 0, 0);
   }
 
   .sticky.is-stuck {
diff --git a/_sass/foundation/components/_switch.scss b/_sass/foundation/components/_switch.scss
index 4a9d816c..f623af7c 100644
--- a/_sass/foundation/components/_switch.scss
+++ b/_sass/foundation/components/_switch.scss
@@ -109,6 +109,7 @@ $switch-paddle-transition: all 0.25s ease-out !default;
     width: 1.5rem;
     transition: $switch-paddle-transition;
     transform: translate3d(0, 0, 0);
+    border-radius: $switch-paddle-radius;
   }
 
   // Change the visual style when the switch is active
@@ -178,7 +179,7 @@ $switch-paddle-transition: all 0.25s ease-out !default;
     height: $paddle-height;
   }
 
-  input:checked ~ .switch-paddle:after {
+  input:checked ~ .switch-paddle::after {
     #{$global-left}: $paddle-left-active;
   }
 }
diff --git a/_sass/foundation/components/_table.scss b/_sass/foundation/components/_table.scss
index 155c7259..384666bd 100644
--- a/_sass/foundation/components/_table.scss
+++ b/_sass/foundation/components/_table.scss
@@ -8,120 +8,133 @@
 /// @group table
 ////
 
-/// Defualt color for table background.
+/// Default color for table background.
 /// @type Color
 $table-background: $white  !default;
 
-/// Defualt scale for darkening the striped table rows and the table border.
+/// Default scale for darkening the striped table rows and the table border.
 /// @type Number
 $table-color-scale: 5% !default;
 
-/// Defualt style for table border.
+/// Default style for table border.
 /// @type List
 $table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;
 
-/// Defualt padding for table.
+/// Default padding for table.
 /// @type Number
 $table-padding: rem-calc(8 10 10) !default;
 
-/// Defualt scale for darkening the table rows on hover.
+/// Default scale for darkening the table rows on hover.
 /// @type Number
 $table-hover-scale: 2% !default;
 
-/// Defualt color of standard rows on hover.
+/// Default color of standard rows on hover.
 /// @type List
 $table-row-hover: darken($table-background, $table-hover-scale) !default;
 
-/// Defualt color of striped rows on hover.
+/// Default color of striped rows on hover.
 /// @type List
 $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;
 
-/// Defualt background color for striped rows.
+/// Default background color for striped rows.
 /// @type Color
 $table-striped-background: smart-scale($table-background, $table-color-scale) !default;
 
-/// Defualt value for showing the stripe on rows of the tables, excluding the header and footer If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or anyother value, the table rows will have no striping.
+/// Default value for showing the stripe on rows of the tables, excluding the header and footer If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or anyother value, the table rows will have no striping.
 /// @type Keyoword
 $table-stripe: even !default;
 
-/// Defualt color for header background.
+/// Default color for header background.
 /// @type Color
 $table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;
 
-/// Defualt color for footer background.
+/// Default color for footer background.
 /// @type Color
 $table-foot-background: smart-scale($table-background, $table-color-scale) !default;
 
-/// Defualt font color for header.
+/// Default font color for header.
 /// @type Color
 $table-head-font-color: $body-font-color !default;
 
-/// Defualt value for showing the header when using stacked tables.
+/// Default value for showing the header when using stacked tables.
 /// @type Boolean
 $show-header-for-stacked: false !default;
 
-/// Adds the general styles for tables.
-/// @param {Keyword} $stripe [$table-stripe] - Uses kewords even, odd, or none to darken rows of the table. The defualt value is even.
-@mixin table($stripe: $table-stripe) {
-  margin-bottom: $global-margin;
-  border-radius: $global-radius;
+@mixin -zf-table-children-styles($stripe: $table-stripe) {
+  thead,
+  tbody,
+  tfoot {
+    border: $table-border;
+    background-color: $table-background;
+  }
+
+  // Caption
+  caption {
+    font-weight: $global-weight-bold;
+    padding: $table-padding;
+  }
+
+  // Table head and foot
+  thead,
+  tfoot {
+    background: $table-head-background;
+    color: $table-head-font-color;
 
-  @at-root {
-    thead,
-    tbody,
-    tfoot {
-      border: $table-border;
-      background-color: $table-background;
+    // Rows within head and foot
+    tr {
+      background: transparent;
     }
 
-    // Caption
-    caption {
-      font-weight: $global-weight-bold;
+    // Cells within head and foot
+    th,
+    td {
       padding: $table-padding;
+      font-weight: $global-weight-bold;
+      text-align: #{$global-left};
     }
+  }
 
-    // Table head and foot
-    thead,
-    tfoot {
-      background: $table-head-background;
-      color: $table-head-font-color;
-
-      // Rows within head and foot
-      tr {
-        background: transparent;
+  // Table rows
+  tbody {
+    tr {
+      // If stripe is set to even, darken the even rows.
+      @if $stripe == even {
+        &:nth-child(even) {
+          background-color: $table-striped-background;
+        }
       }
 
-      // Cells within head and foot
-      th,
-      td {
-        padding: $table-padding;
-        font-weight: $global-weight-bold;
-        text-align: #{$global-left};
+      // If stripe is set to odd, darken the odd rows.
+      @else if $stripe == odd {
+        &:nth-child(odd) {
+          background-color: $table-striped-background;
+        }
       }
     }
 
-    // Table rows
-    tbody {
-      tr {
-        // If stripe is set to even, darken the even rows.
-        @if $stripe == even {
-          &:nth-child(even) {
-            background-color: $table-striped-background;
-          }
-        }
+    th,
+    td {
+      padding: $table-padding;
+    }
+  }
+}
 
-        // If stripe is set to odd, darken the odd rows.
-        @else if $stripe == odd {
-          &:nth-child(odd) {
-            background-color: $table-striped-background;
-          }
-        }
-      }
+/// Adds the general styles for tables.
+/// @param {Keyword} $stripe [$table-stripe] - Uses keywords even, odd, or none to darken rows of the table. The default value is even.
+@mixin table(
+  $stripe: $table-stripe,
+  $nest: false
+) {
+  width: 100%;
+  margin-bottom: $global-margin;
+  border-radius: $global-radius;
 
-      th,
-      td {
-        padding: $table-padding;
-      }
+  @if $nest {
+    @include -zf-table-children-styles($stripe);
+  }
+  @else {
+    @at-root {
+      @include -zf-table-children-styles($stripe);
     }
   }
 }
@@ -130,7 +143,7 @@ $show-header-for-stacked: false !default;
 @mixin table-scroll {
   display: block;
   width: 100%;
-  overflow-y: scroll;
+  overflow-x: auto;
 }
 
 /// Slightly darkens the table rows on hover.
@@ -170,7 +183,8 @@ $show-header-for-stacked: false !default;
         display: none;
       }
     }
-  } @else {
+  }
+  @else {
     thead {
       display: none;
     }
@@ -191,9 +205,9 @@ $show-header-for-stacked: false !default;
   }
 }
 
-@mixin foundation-table {
+@mixin foundation-table($nest: false) {
   table {
-    @include table;
+    @include table($nest: $nest);
   }
 
   table.stack {
@@ -209,4 +223,12 @@ $show-header-for-stacked: false !default;
   table.hover {
     @include table-hover;
   }
+
+  .table-scroll {
+    overflow-x: auto;
+
+    table {
+      width: auto;
+    }
+  }
 }
diff --git a/_sass/foundation/components/_tabs.scss b/_sass/foundation/components/_tabs.scss
index 9a73704e..1e545ef5 100644
--- a/_sass/foundation/components/_tabs.scss
+++ b/_sass/foundation/components/_tabs.scss
@@ -18,18 +18,14 @@ $tab-background: $white !default;
 /// @type Color
 $tab-background-active: $light-gray !default;
 
-/// Default border color of tab content.
-/// @type Color
-$tab-border: $light-gray !default;
-
-/// Default text color for items in a Menu.
-/// @type Color
-$tab-item-color: foreground($tab-background, $primary-color) !default;
+/// Font size of tab items.
+/// @type Number
+$tab-item-font-size: rem-calc(12) !default;
 
 /// Default background color on hover for items in a Menu.
 $tab-item-background-hover: $white !default;
 
-/// Default padding of a a tab item.
+/// Default padding of a tab item.
 /// @type Number
 $tab-item-padding: 1.25rem 1.5rem !default;
 
@@ -53,85 +49,117 @@ $tab-content-color: foreground($tab-background, $primary-color) !default;
 /// @type Number | List
 $tab-content-padding: 1rem !default;
 
-@mixin foundation-tabs {
-  .tabs {
-    @include clearfix;
-    margin: $tab-margin;
-    list-style-type: none;
-    background: $tab-background;
-    border: 1px solid $tab-content-border;
-
-    // Simple
-    &.simple {
-      > li > a {
-        padding: 0;
-
-        &:hover {
-          background: transparent;
-        }
-      }
+/// Adds styles for a tab container. Apply this to a `<ul>`.
+@mixin tabs-container {
+  @include clearfix;
+  margin: $tab-margin;
+  list-style-type: none;
+  background: $tab-background;
+  border: 1px solid $tab-content-border;
+}
+
+/// Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`.
+@mixin tabs-container-vertical {
+  > li {
+    width: auto;
+    float: none;
+    display: block;
+  }
+}
+
+/// Adds styles for the links within a tab container. Apply this to the `<li>` elements inside a tab container.
+@mixin tabs-title {
+  float: #{$global-left};
+
+  > a {
+    display: block;
+    padding: $tab-item-padding;
+    line-height: 1;
+    font-size: $tab-item-font-size;
+
+    &:hover {
+      background: $tab-item-background-hover;
     }
 
-    // Vertical
-    &.vertical {
-      > li {
-        width: auto;
-        float: none;
-        display: block;
-      }
+    &:focus,
+    &[aria-selected='true'] {
+      background: $tab-background-active;
     }
+  }
+}
+
+/// Adds styles for the wrapper that surrounds a tab group's content panes.
+@mixin tabs-content {
+  background: $tab-content-background;
+  transition: all 0.5s ease;
+  border: 1px solid $tab-content-border;
+  border-top: 0;
+}
 
-    // Primary color
-    &.primary {
-      background: $primary-color;
+/// Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with `tabs-content()`.
+@mixin tabs-content-vertical {
+  border: 1px solid $tab-content-border;
+  border-#{$global-left}: 0;
+}
+
+/// Adds styles for an individual tab content panel within the tab content container.
+@mixin tabs-panel {
+  display: none;
+  padding: $tab-content-padding;
+
+  &.is-active {
+    display: block;
+  }
+}
+
+@mixin foundation-tabs {
+  .tabs {
+    @include tabs-container;
+  }
+
+  // Vertical
+  .tabs.vertical {
+    @include tabs-container-vertical;
+  }
 
-      > li > a {
-        color: foreground($primary-color);
+  // Simple
+  .tabs.simple {
+    > li > a {
+      padding: 0;
 
-        &:hover,
-        &:focus {
-          background: smart-scale($primary-color);
-        }
+      &:hover {
+        background: transparent;
       }
     }
   }
 
-  .tabs-title {
-    float: #{$global-left};
+  // Primary color
+  .tabs.primary {
+    background: $primary-color;
 
-    > a {
-      display: block;
-      padding: $tab-item-padding;
-      line-height: 1;
-      font-size: 12px;
-      color: $tab-item-color;
+    > li > a {
+      color: foreground($primary-color);
 
       &:hover,
-      &:focus,
-      &[aria-selected='true'] {
-        background: $tab-background-active;
+      &:focus {
+        background: smart-scale($primary-color);
       }
     }
   }
 
+  .tabs-title {
+    @include tabs-title;
+  }
+
   .tabs-content {
-    background: $tab-content-background;
-    transition: all 0.5s ease;
-    border: 1px solid $tab-content-border;
-    border-top: 0;
-
-    &.vertical {
-      border: 1px solid $tab-content-border;
-      border-#{$global-left}: 0;
-    }
+    @include tabs-content;
   }
 
-  .tabs-panel {
-    display: none;
-    padding: $tab-content-padding;
+  .tabs-content.vertical {
+    @include tabs-content-vertical;
+  }
 
-    &.is-active {
-      display: block;
-    }
+  .tabs-panel {
+    @include tabs-panel;
   }
 }
diff --git a/_sass/foundation/components/_title-bar.scss b/_sass/foundation/components/_title-bar.scss
index 524b433a..8a268802 100644
--- a/_sass/foundation/components/_title-bar.scss
+++ b/_sass/foundation/components/_title-bar.scss
@@ -6,38 +6,83 @@
 /// @group title-bar
 ////
 
+/// Background color of a title bar.
+/// @type Color
+$titlebar-background: $black !default;
+
+/// Color of text inside a title bar.
+/// @type Color
+$titlebar-color: $white !default;
+
+/// Padding inside a title bar.
+/// @type Length
+$titlebar-padding: 0.5rem !default;
+
+/// Font weight of text inside a title bar.
+/// @type Weight
+$titlebar-text-font-weight: bold !default;
+
+/// Color of menu icons inside a title bar.
+/// @type Color
+$titlebar-icon-color: $white !default;
+
+/// Color of menu icons inside a title bar on hover.
+/// @type Color
+$titlebar-icon-color-hover: $medium-gray !default;
+
+/// Spacing between the menu icon and text inside a title bar.
+/// @type Length
+$titlebar-icon-spacing: 0.25rem !default;
+
 @mixin foundation-title-bar {
   .title-bar {
-    @include clearfix;
-    background: $black;
-    color: $white;
-    padding: 0.5rem;
+    background: $titlebar-background;
+    color: $titlebar-color;
+    padding: $titlebar-padding;
+
+    @if $global-flexbox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    @else {
+      @include clearfix;
+    }
 
     .menu-icon {
-      margin-#{$global-left}: 0.25rem;
-      margin-#{$global-right}: 0.5rem;
+      margin-#{$global-left}: $titlebar-icon-spacing;
+      margin-#{$global-right}: $titlebar-padding;
     }
   }
 
-  .title-bar-left {
-    float: left;
+  @if $global-flexbox {
+    // scss-lint:disable ZeroUnit
+    .title-bar-left,
+    .title-bar-right {
+      flex: 1 1 0px;
+    }
+
+    .title-bar-right {
+      text-align: right;
+    }
   }
+  @else {
+    .title-bar-left {
+      float: left;
+    }
 
-  .title-bar-right {
-    float: right;
-    text-align: right;
+    .title-bar-right {
+      float: right;
+      text-align: right;
+    }
   }
 
   .title-bar-title {
-    font-weight: bold;
+    font-weight: $titlebar-text-font-weight;
     vertical-align: middle;
     display: inline-block;
   }
 
-  .menu-icon {
-    @include hamburger($color: white, $color-hover: $medium-gray);
-  }
-
   .menu-icon.dark {
     @include hamburger;
   }
diff --git a/_sass/foundation/components/_tooltip.scss b/_sass/foundation/components/_tooltip.scss
index a28c3e69..5afd5ec0 100644
--- a/_sass/foundation/components/_tooltip.scss
+++ b/_sass/foundation/components/_tooltip.scss
@@ -6,6 +6,14 @@
 /// @group tooltip
 ////
 
+/// Default font weight of the defined term.
+/// @type Keyword | Number
+$has-tip-font-weight: $global-weight-bold !default;
+
+/// Default border bottom of the defined term.
+/// @type List
+$has-tip-border-bottom: dotted 1px $dark-gray !default;
+
 /// Default color of the tooltip background.
 /// @type Color
 $tooltip-background-color: $black !default;
@@ -30,17 +38,13 @@ $tooltip-pip-width: 0.75rem !default;
 /// @type Number
 $tooltip-pip-height: $tooltip-pip-width * 0.866 !default;
 
-/// Default pip offset for tooltips. This controls how far the pip is indented from the left edge of the tooltip.
-/// @type Number
-$tooltip-pip-offset: 1.25rem !default;
-
 /// Default radius for tooltips.
 /// @type Number
 $tooltip-radius: $global-radius !default;
 
 @mixin has-tip {
-  border-bottom: dotted 1px $dark-gray;
-  font-weight: bold;
+  border-bottom: $has-tip-border-bottom;
+  font-weight: $has-tip-font-weight;
   position: relative;
   display: inline-block;
   cursor: help;
diff --git a/_sass/foundation/components/_top-bar.scss b/_sass/foundation/components/_top-bar.scss
index 09c92f3a..f56d3d04 100644
--- a/_sass/foundation/components/_top-bar.scss
+++ b/_sass/foundation/components/_top-bar.scss
@@ -12,46 +12,157 @@ $topbar-padding: 0.5rem !default;
 
 /// Background color for the top bar. This color also cascades to menus within the top bar.
 /// @type Color
-$topbar-background: #eee !default;
+$topbar-background: $light-gray !default;
 
-/// Color for links inside a top bar menu.
+/// Background color submenus within the top bar. Usefull if $topbar-background is transparent.
 /// @type Color
-$topbar-link-color: #fff !default;
+$topbar-submenu-background: $topbar-background !default;
 
-/// Width of `<input>` elements inside the top bar.
+/// Spacing for the top bar title.
+/// @type Number
+$topbar-title-spacing: 1rem !default;
+
+/// Maximum width of `<input>` elements inside the top bar.
 /// @type Number
 $topbar-input-width: 200px !default;
 
+/// Breakpoint at which top bar switches from mobile to desktop view.
+/// @type Breakpoint
+$topbar-unstack-breakpoint: medium !default;
+
 /// Adds styles for a top bar container.
 @mixin top-bar-container {
-  @include clearfix;
+  @if $global-flexbox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+  }
+  @else {
+    @include clearfix;
+  }
+
   padding: $topbar-padding;
 
-  &, ul {
+  &,
+  ul {
     background-color: $topbar-background;
   }
 
+  // Check if $topbar-background is differnt from $topbar-background-submenu
+  @if ($topbar-background != $topbar-submenu-background) {
+    ul ul {
+      background-color: $topbar-submenu-background;
+    }
+  }
+
+  // Restrain width of inputs by default to make them easier to arrange
   input {
-    width: $topbar-input-width;
+    max-width: $topbar-input-width;
     margin-#{$global-right}: 1rem;
   }
+
+  // The above styles shouldn't apply to input group fields
+  .input-group-field {
+    width: 100%;
+    margin-#{$global-right}: 0;
+  }
+
+  // scss-lint:disable QualifyingElement
+  input.button {
+    width: auto;
+  }
+}
+
+/// Makes sections of a top bar stack on top of each other.
+@mixin top-bar-stacked {
+  @if $global-flexbox {
+    flex-wrap: wrap;
+
+    // Sub-sections
+    .top-bar-left,
+    .top-bar-right {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+  }
+  @else {
+    // Sub-sections
+    .top-bar-left,
+    .top-bar-right {
+      width: 100%;
+    }
+  }
+}
+
+/// Undoes the CSS applied by the `top-bar-stacked()` mixin.
+@mixin top-bar-unstack {
+  @if $global-flexbox {
+    flex-wrap: nowrap;
+
+    // scss-lint:disable ZeroUnit
+    .top-bar-left,
+    .top-bar-right {
+      flex: 1 1 0px;
+    }
+  }
+  @else {
+    .top-bar-left,
+    .top-bar-right {
+      width: auto;
+    }
+  }
 }
 
 @mixin foundation-top-bar {
   // Top bar container
   .top-bar {
     @include top-bar-container;
+
+    // Stack on small screens by default
+    @include top-bar-stacked;
+
+    @include breakpoint($topbar-unstack-breakpoint) {
+      @include top-bar-unstack;
+    }
+
+    // Generate classes for stacking on each screen size (defined in $breakpoint-classes)
+    @each $size in $breakpoint-classes {
+      @if $size != $-zf-zero-breakpoint {
+        &.stacked-for-#{$size} {
+          @include breakpoint($size down) {
+            @include top-bar-stacked;
+          }
+        }
+      }
+    }
   }
 
   // Sub-sections
-  // Stack on small screens
-  @include breakpoint(medium) {
+  @if $global-flexbox {
+    .top-bar-title {
+      flex: 0 0 auto;
+      margin-right: $topbar-title-spacing;
+    }
+
+    .top-bar-left,
+    .top-bar-right {
+      flex: 0 0 auto;
+    }
+  }
+  @else {
+    .top-bar-title {
+      float: left;
+      margin-right: $topbar-title-spacing;
+
+    }
+
     .top-bar-left {
       float: left;
     }
 
     .top-bar-right {
-      float: right
+      float: right;
     }
   }
 }
diff --git a/_sass/foundation/components/_visibility.scss b/_sass/foundation/components/_visibility.scss
index 2c191a72..8906f597 100644
--- a/_sass/foundation/components/_visibility.scss
+++ b/_sass/foundation/components/_visibility.scss
@@ -6,7 +6,7 @@
 /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
 @mixin show-for($size) {
   $size: map-get($breakpoints, $size);
-  $size: -zf-bp-to-em($size) - (1/16);
+  $size: -zf-bp-to-em($size) - (1 / 16);
 
   @include breakpoint($size down) {
     display: none !important;
@@ -20,9 +20,9 @@
   $upper-bound-size: -zf-map-next($breakpoints, $size);
 
   // more often than not this will be correct, just one time round the loop it won't so set in scope here
-  $lower-bound: -zf-bp-to-em($lower-bound-size) - (1/16);
+  $lower-bound: -zf-bp-to-em($lower-bound-size) - (1 / 16);
   // test actual lower-bound-size, if 0 set it to 0em
-  @if $lower-bound-size == 0 {
+  @if strip-unit($lower-bound-size) == 0 {
     $lower-bound: -zf-bp-to-em($lower-bound-size);
   }
 
@@ -33,6 +33,7 @@
   }
   @else {
     $upper-bound: -zf-bp-to-em($upper-bound-size);
+
     @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
       display: none !important;
     }
@@ -68,7 +69,7 @@
 
   // Responsive visibility classes
   @each $size in $breakpoint-classes {
-    @if $size != small {
+    @if $size != $-zf-zero-breakpoint {
       .hide-for-#{$size} {
         @include hide-for($size);
       }
@@ -88,7 +89,7 @@
   }
 
   // Screen reader visibility classes
-  // Need a “hide-for-sr” class? Add aria-hidden='true' to the element
+  // Need a "hide-for-sr" class? Add aria-hidden='true' to the element
   .show-for-sr,
   .show-on-focus {
     @include element-invisible;
diff --git a/_sass/foundation/forms/_checkbox.scss b/_sass/foundation/forms/_checkbox.scss
index 3bb4339f..0c388cd3 100644
--- a/_sass/foundation/forms/_checkbox.scss
+++ b/_sass/foundation/forms/_checkbox.scss
@@ -21,11 +21,15 @@
     margin-#{$global-right}: $form-spacing;
     margin-bottom: 0;
     vertical-align: baseline;
+
+    &[for] {
+      cursor: pointer;
+    }
   }
 
   // Styles for inputs inside labels
   label > [type='checkbox'],
-  label > [type='label'] {
+  label > [type='radio'] {
     margin-#{$global-right}: $form-spacing * 0.5;
   }
 
diff --git a/_sass/foundation/forms/_error.scss b/_sass/foundation/forms/_error.scss
index 9e52b6e5..792182d4 100644
--- a/_sass/foundation/forms/_error.scss
+++ b/_sass/foundation/forms/_error.scss
@@ -16,15 +16,15 @@ $abide-labels: true !default;
 
 /// Background color to use for invalid text inputs.
 /// @type Color
-$input-background-invalid: $alert-color !default;
+$input-background-invalid: map-get($foundation-palette, alert) !default;
 
 /// Color to use for labels of invalid inputs.
 /// @type Color
-$form-label-color-invalid: $alert-color !default;
+$form-label-color-invalid: map-get($foundation-palette, alert) !default;
 
 /// Default font color for form error text.
 /// @type Color
-$input-error-color: $alert-color !default;
+$input-error-color: map-get($foundation-palette, alert) !default;
 
 /// Default font size for form error text.
 /// @type Number
@@ -37,11 +37,13 @@ $input-error-font-weight: $global-weight-bold !default;
 /// Styles the background and border of an input field to have an error state.
 ///
 /// @param {Color} $background [$alert-color] - Color to use for the background and border.
+/// @param {Number} $background-alpha [0.1] - Transparency level of the background color.
 @mixin form-input-error(
-  $background: $alert-color
+  $background: $input-background-invalid,
+  $background-alpha: 0.1
 ) {
   &:not(:focus) {
-    background-color: rgba($background, 0.1);
+    background-color: rgba($background, $background-alpha);
     border-color: $background;
   }
 }
diff --git a/_sass/foundation/forms/_fieldset.scss b/_sass/foundation/forms/_fieldset.scss
index 27ea801e..875706d2 100644
--- a/_sass/foundation/forms/_fieldset.scss
+++ b/_sass/foundation/forms/_fieldset.scss
@@ -45,6 +45,7 @@ $legend-padding: rem-calc(0 3) !default;
 
   legend {
     margin-bottom: $form-spacing * 0.5;
+    max-width: 100%;
   }
 
   .fieldset {
diff --git a/_sass/foundation/forms/_forms.scss b/_sass/foundation/forms/_forms.scss
index 0d9aa970..1507fda3 100644
--- a/_sass/foundation/forms/_forms.scss
+++ b/_sass/foundation/forms/_forms.scss
@@ -10,15 +10,17 @@
 /// @type Number
 $form-spacing: rem-calc(16) !default;
 
-@import
-  'text',
-  'checkbox',
-  'label',
-  'help-text',
-  'input-group',
-  'fieldset',
-  'select',
-  'error';
+@import 'text';
+@import 'checkbox';
+@import 'label';
+@import 'help-text';
+@import 'input-group';
+@import 'fieldset';
+@import 'select';
+@import 'range';
+@import 'progress';
+@import 'meter';
+@import 'error';
 
 @mixin foundation-forms {
   @include foundation-form-text;
diff --git a/_sass/foundation/forms/_help-text.scss b/_sass/foundation/forms/_help-text.scss
index b0315abd..04e5237f 100644
--- a/_sass/foundation/forms/_help-text.scss
+++ b/_sass/foundation/forms/_help-text.scss
@@ -8,7 +8,7 @@
 
 /// Default color for help text.
 /// @type Color
-$helptext-color: #333 !default;
+$helptext-color: $black !default;
 
 /// Default font size for help text.
 /// @type Number
diff --git a/_sass/foundation/forms/_input-group.scss b/_sass/foundation/forms/_input-group.scss
index 4ba26c76..153dd89a 100644
--- a/_sass/foundation/forms/_input-group.scss
+++ b/_sass/foundation/forms/_input-group.scss
@@ -22,27 +22,55 @@ $input-prefix-border: 1px solid $medium-gray !default;
 $input-prefix-padding: 1rem !default;
 
 @mixin foundation-form-prepostfix {
+  $height: ($input-font-size + $form-spacing * 1.5);
+
   .input-group {
-    display: table;
+    display: if($global-flexbox, flex, table);
     width: 100%;
     margin-bottom: $form-spacing;
+
+    @if $global-flexbox {
+      align-items: stretch;
+    }
+
+    > :first-child {
+      border-radius: if($global-text-direction == rtl, 0 $global-radius $global-radius 0, $global-radius 0 0 $global-radius);
+    }
+
+    > :last-child {
+      > * {
+        border-radius: if($global-text-direction == rtl, $global-radius 0 0 $global-radius, 0 $global-radius $global-radius 0);
+      }
+    }
   }
 
   %input-group-child {
-    display: table-cell;
     margin: 0;
-    vertical-align: middle;
+
+    @if not $global-flexbox {
+      display: table-cell;
+      vertical-align: middle;
+    }
   }
 
   .input-group-label {
     @extend %input-group-child;
     text-align: center;
-    width: 1%;
-    height: 100%;
     padding: 0 $input-prefix-padding;
     background: $input-prefix-background;
     color: $input-prefix-color;
     border: $input-prefix-border;
+    white-space: nowrap;
+
+    @if $global-flexbox {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+    }
+    @else {
+      width: 1%;
+      height: 100%;
+    }
 
     @if has-value($input-prefix-border) {
       &:first-child {
@@ -57,14 +85,43 @@ $input-prefix-padding: 1rem !default;
 
   .input-group-field {
     @extend %input-group-child;
+    border-radius: 0;
+
+    // scss-lint:disable ZeroUnit
+    @if $global-flexbox {
+      flex: 1 1 0px;
+      width: auto;
+      height: auto;
+    }
+    @else {
+      height: $height;
+    }
   }
 
   .input-group-button {
     @extend %input-group-child;
-    height: 100%;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
-    width: 1%;
+
+    @if $global-flexbox {
+      flex: 0 0 auto;
+    }
+    @else {
+      height: 100%;
+      width: 1%;
+    }
+
+    a,
+    input,
+    button {
+      margin: 0;
+    }
+  }
+
+  // Specificity bump needed to prevent override by buttons
+  // scss-lint:disable QualifyingSelector
+  .input-group .input-group-button {
+    display: table-cell;
   }
 }
diff --git a/_sass/foundation/forms/_meter.scss b/_sass/foundation/forms/_meter.scss
new file mode 100644
index 00000000..27299323
--- /dev/null
+++ b/_sass/foundation/forms/_meter.scss
@@ -0,0 +1,109 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group meter
+////
+
+/// Height of a `<meter>` element.
+/// @type Length
+$meter-height: 1rem !default;
+
+/// Border radius of a `<meter>` element.
+/// @type Length
+$meter-radius: $global-radius !default;
+
+/// Background color of a `<meter>` element.
+/// @type Color
+$meter-background: $medium-gray !default;
+
+/// Meter fill for an optimal value in a `<meter>` element.
+/// @type Color
+$meter-fill-good: $success-color !default;
+
+/// Meter fill for an average value in a `<meter>` element.
+/// @type Color
+$meter-fill-medium: $warning-color !default;
+
+/// Meter fill for a suboptimal value in a `<meter>` element.
+/// @type Color
+$meter-fill-bad: $alert-color !default;
+
+@mixin foundation-meter-element {
+  meter {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    display: block;
+    width: 100%;
+    height: $meter-height;
+    margin-bottom: 1rem;
+
+    @if has-value($meter-radius) {
+      border-radius: $meter-radius;
+    }
+
+    // For Firefox
+    background: $meter-background;
+    border: 0;
+
+    // Chrome/Safari
+    &::-webkit-meter-bar {
+      background: $meter-background;
+
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &::-webkit-meter-inner-element {
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &::-webkit-meter-optimum-value {
+      background: $meter-fill-good;
+
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &::-webkit-meter-suboptimum-value {
+      background: $meter-fill-medium;
+
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &::-webkit-meter-even-less-good-value {
+      background: $meter-fill-bad;
+
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &::-moz-meter-bar {
+      background: $primary-color;
+
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &:-moz-meter-optimum::-moz-meter-bar {
+      background: $meter-fill-good;
+    }
+
+    &:-moz-meter-sub-optimum::-moz-meter-bar {
+      background: $meter-fill-medium;
+    }
+
+    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+      background: $meter-fill-bad;
+    }
+  }
+}
diff --git a/_sass/foundation/forms/_progress.scss b/_sass/foundation/forms/_progress.scss
new file mode 100644
index 00000000..e6811bc4
--- /dev/null
+++ b/_sass/foundation/forms/_progress.scss
@@ -0,0 +1,85 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group progress-bar
+////
+
+/// Height of a progress bar.
+/// @type Number
+$progress-height: 1rem !default;
+
+/// Background color of a progress bar.
+/// @type Color
+$progress-background: $medium-gray !default;
+
+/// Bottom margin of a progress bar.
+/// @type Number
+$progress-margin-bottom: $global-margin !default;
+
+/// Default color of a progress bar's meter.
+/// @type Color
+$progress-meter-background: $primary-color !default;
+
+/// Default radius of a progress bar.
+/// @type Number
+$progress-radius: $global-radius !default;
+
+@mixin foundation-progress-element {
+  progress {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    display: block;
+    width: 100%;
+    height: $progress-height;
+    margin-bottom: $progress-margin-bottom;
+
+    @if hasvalue($progress-radius) {
+      border-radius: $progress-radius;
+    }
+
+    // For Firefox
+    background: $progress-background;
+    border: 0;
+
+    &::-webkit-progress-bar {
+      background: $progress-background;
+
+      @if hasvalue($progress-radius) {
+        border-radius: $progress-radius;
+      }
+    }
+
+    &::-webkit-progress-value {
+      background: $progress-meter-background;
+
+      @if hasvalue($progress-radius) {
+        border-radius: $progress-radius;
+      }
+    }
+
+    &::-moz-progress-bar {
+      background: $progress-meter-background;
+
+      @if hasvalue($progress-radius) {
+        border-radius: $progress-radius;
+      }
+    }
+
+    @each $name, $color in $foundation-palette {
+      &.#{$name} {
+        // Internet Explorer sets the fill with color
+        color: $color;
+
+        &::-webkit-progress-value {
+          background: $color;
+        }
+
+        &::-moz-progress-bar {
+          background: $color;
+        }
+      }
+    }
+  }
+}
diff --git a/_sass/foundation/forms/_range.scss b/_sass/foundation/forms/_range.scss
new file mode 100644
index 00000000..9524458b
--- /dev/null
+++ b/_sass/foundation/forms/_range.scss
@@ -0,0 +1,144 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group slider
+////
+
+/// Default height of the slider.
+/// @type Number
+$slider-height: 0.5rem !default;
+
+/// Default background color of the slider's track.
+/// @type Color
+$slider-background: $light-gray !default;
+
+/// Default color of the active fill color of the slider.
+/// @type Color
+$slider-fill-background: $medium-gray !default;
+
+/// Default height of the handle of the slider.
+/// @type Number
+$slider-handle-height: 1.4rem !default;
+
+/// Default width of the handle of the slider.
+/// @type Number
+$slider-handle-width: 1.4rem !default;
+
+/// Default color of the handle for the slider.
+/// @type Color
+$slider-handle-background: $primary-color !default;
+
+/// Default fade amount of a disabled slider.
+/// @type Number
+$slider-opacity-disabled: 0.25 !default;
+
+/// Default radius for slider.
+/// @type Number
+$slider-radius: $global-radius !default;
+
+@mixin foundation-range-input {
+  // scss-lint:disable QualifyingElement
+  input[type="range"] {
+    $margin: ($slider-handle-height - $slider-height) / 2;
+
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    display: block;
+    width: 100%;
+    height: auto;
+    cursor: pointer;
+    margin-top: $margin;
+    margin-bottom: $margin;
+    border: 0;
+    line-height: 1;
+
+    @if has-value($slider-radius) {
+      border-radius: $slider-radius;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+
+    &[disabled] {
+      opacity: $slider-opacity-disabled;
+    }
+
+    // Chrome/Safari
+    &::-webkit-slider-runnable-track {
+      height: $slider-height;
+      background: $slider-background;
+    }
+
+    &::-webkit-slider-handle {
+      -webkit-appearance: none;
+      background: $slider-handle-background;
+      width: $slider-handle-width;
+      height: $slider-handle-height;
+      margin-top: -$margin;
+
+      @if has-value($slider-radius) {
+        border-radius: $slider-radius;
+      }
+    }
+
+    // Firefox
+    &::-moz-range-track {
+      -moz-appearance: none;
+      height: $slider-height;
+      background: $slider-background;
+    }
+
+    &::-moz-range-thumb {
+      -moz-appearance: none;
+      background: $slider-handle-background;
+      width: $slider-handle-width;
+      height: $slider-handle-height;
+      margin-top: -$margin;
+
+      @if has-value($slider-radius) {
+        border-radius: $slider-radius;
+      }
+    }
+
+    // Internet Explorer
+    &::-ms-track {
+      height: $slider-height;
+      background: $slider-background;
+      color: transparent;
+      border: 0;
+      overflow: visible;
+      border-top: $margin solid $body-background;
+      border-bottom: $margin solid $body-background;
+    }
+
+    &::-ms-thumb {
+      background: $slider-handle-background;
+      width: $slider-handle-width;
+      height: $slider-handle-height;
+      border: 0;
+
+      @if has-value($slider-radius) {
+        border-radius: $slider-radius;
+      }
+    }
+
+    &::-ms-fill-lower {
+      background: $slider-fill-background;
+    }
+
+    &::-ms-fill-upper {
+      background: $slider-background;
+    }
+
+    @at-root {
+      output {
+        line-height: $slider-handle-height;
+        vertical-align: middle;
+        margin-left: 0.5em;
+      }
+    }
+  }
+}
diff --git a/_sass/foundation/forms/_select.scss b/_sass/foundation/forms/_select.scss
index c23915ad..4471125a 100644
--- a/_sass/foundation/forms/_select.scss
+++ b/_sass/foundation/forms/_select.scss
@@ -8,11 +8,11 @@
 
 /// Background color for select menus.
 /// @type Color
-$select-background: #fafafa !default;
+$select-background: $white !default;
 
 /// Color of the dropdown triangle inside select menus. Set to `transparent` to remove it entirely.
 /// @type Color
-$select-triangle-color: #333 !default;
+$select-triangle-color: $dark-gray !default;
 
 /// Default radius for select menus.
 /// @type Color
@@ -24,7 +24,6 @@ $select-radius: $global-radius !default;
   height: $height;
   padding: ($form-spacing / 2);
   border: $input-border;
-  border-radius: $global-radius;
   margin: 0 0 $form-spacing;
   font-size: $input-font-size;
   font-family: $input-font-family;
@@ -38,9 +37,11 @@ $select-radius: $global-radius !default;
   @if $select-triangle-color != transparent {
     @include background-triangle($select-triangle-color);
     background-size: 9px 6px;
-    background-position: $global-right ($form-spacing / 2) center;
+    background-position: $global-right center;
+    background-origin: content-box;
     background-repeat: no-repeat;
   }
+
   // Disabled state
   &:disabled {
     background-color: $input-background-disabled;
@@ -54,6 +55,7 @@ $select-radius: $global-radius !default;
 
   &[multiple] {
     height: auto;
+    background-image: none;
   }
 }
 
diff --git a/_sass/foundation/forms/_text.scss b/_sass/foundation/forms/_text.scss
index 8a2a1da9..39917321 100644
--- a/_sass/foundation/forms/_text.scss
+++ b/_sass/foundation/forms/_text.scss
@@ -8,7 +8,11 @@
 
 /// Font color of text inputs.
 /// @type Color
-$input-color: $dark-gray !default;
+$input-color: $black !default;
+
+/// Font color of placeholder text within text inputs.
+/// @type Color
+$input-placeholder-color: $medium-gray !default;
 
 /// Font family of text inputs.
 /// @type Font
@@ -87,7 +91,7 @@ $input-radius: $global-radius !default;
   // Focus state
   &:focus {
     border: $input-border-focus;
-    background: $input-background-focus;
+    background-color: $input-background-focus;
     outline: none;
     box-shadow: $input-shadow-focus;
 
@@ -115,9 +119,14 @@ $input-radius: $global-radius !default;
     }
   }
 
-  // Disabled/readonly state
   input,
   textarea {
+    // Placeholder text
+    &::placeholder {
+      color: $input-placeholder-color;
+    }
+
+    // Disabled/readonly state
     &:disabled,
     &[readonly] {
       background-color: $input-background-disabled;
@@ -128,12 +137,13 @@ $input-radius: $global-radius !default;
   // Reset styles on button-like inputs
   [type='submit'],
   [type='button'] {
-    border-radius: $global-radius;
+    border-radius: $button-radius;
     -webkit-appearance: none;
     -moz-appearance: none;
   }
 
   // Reset Normalize setting content-box to search elements
+  // scss-lint:disable QualifyingElement
   input[type='search'] {
     box-sizing: border-box;
   }
diff --git a/_sass/foundation/grid/_classes.scss b/_sass/foundation/grid/_classes.scss
index 4fd20894..487d821c 100644
--- a/_sass/foundation/grid/_classes.scss
+++ b/_sass/foundation/grid/_classes.scss
@@ -15,13 +15,12 @@
   $push: 'push',
   $pull: 'pull',
   $center: 'centered',
-  $uncenter: 'uncenter',
+  $uncenter: 'uncentered',
   $collapse: 'collapse',
   $uncollapse: 'uncollapse',
   $offset: 'offset',
   $end: 'end',
-  $expanded: 'expanded',
-  $breakpoints: $breakpoint-classes
+  $expanded: 'expanded'
 ) {
   // Row
   .#{$row} {
@@ -29,34 +28,29 @@
 
     // Collapsing
     &.#{$collapse} {
-      > .#{$column} { @include grid-col-collapse; }
+      > .#{$column} {
+        @include grid-col-collapse;
+      }
     }
 
     // Nesting
     & & {
-      @include grid-row($behavior: nest, $cf: false);
+      @include grid-row-nest($grid-column-gutter);
 
       &.#{$collapse} {
-        @include grid-row($behavior: nest collapse, $cf: false);
-      }
-    }
-
-    // Responsive collapsing
-    @each $size in $breakpoint-classes {
-      @include breakpoint($size) {
-        &.#{$size}-#{$collapse} {
-          > .#{$column} { @include grid-col-collapse; }
-        }
-
-        &.#{$size}-#{$uncollapse} {
-          > .#{$column} { @include grid-col-uncollapse; }
-        }
+        margin-left: 0;
+        margin-right: 0;
       }
     }
 
     // Expanded (full-width) row
     &.#{$expanded} {
       max-width: none;
+
+      .#{$row} {
+        margin-left: auto;
+        margin-right: auto;
+      }
     }
   }
 
@@ -64,8 +58,10 @@
   .#{$column} {
     @include grid-col;
 
-    &.#{$end} {
-      @include grid-col-end;
+    @if $grid-column-align-edge {
+      &.#{$end} {
+        @include grid-col-end;
+      }
     }
   }
 
@@ -73,54 +69,76 @@
   // The double .row class is needed to bump up the specificity
   .#{$column}.#{$row}.#{$row} {
     float: none;
-  }
 
-  @each $size in $breakpoints {
-    @include breakpoint($size) {
-      @for $i from 1 through $grid-column-count {
-        // Column width
-        .#{$size}-#{$i} {
-          @include grid-col-size($i);
-        }
+    // To properly nest a column row, padding and margin is removed
+    .#{$row} & {
+      padding-left: 0;
+      padding-right: 0;
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
 
-        // Source ordering
-        @if $i < $grid-column-count {
-          .#{$size}-#{$push}-#{$i} {
-            @include grid-col-pos($i);
-          }
+  @include -zf-each-breakpoint {
+    @for $i from 1 through $grid-column-count {
+      // Column width
+      .#{$-zf-size}-#{$i} {
+        @include grid-col-size($i);
+      }
 
-          .#{$size}-#{$pull}-#{$i} {
-            @include grid-col-pos(-$i);
-          }
+      // Source ordering
+      @if $i < $grid-column-count {
+        .#{$-zf-size}-#{$push}-#{$i} {
+          @include grid-col-pos($i);
         }
 
-        // Offsets
-        $o: $i - 1;
-
-        .#{$size}-#{$offset}-#{$o} {
-          @include grid-col-off($o);
+        .#{$-zf-size}-#{$pull}-#{$i} {
+          @include grid-col-pos(-$i);
         }
       }
 
-      // Block grid
-      @for $i from 1 through $block-grid-max {
-        .#{$size}-up-#{$i} {
-          @include grid-layout($i);
-        }
+      // Offsets
+      $o: $i - 1;
+
+      .#{$-zf-size}-#{$offset}-#{$o} {
+        @include grid-col-off($o);
       }
+    }
 
-      // Positioning
-      .#{$column}.#{$size}-#{$center} {
-        @include grid-col-pos(center);
+    // Block grid
+    @for $i from 1 through $block-grid-max {
+      .#{$-zf-size}-up-#{$i} {
+        @include grid-layout($i, ".#{$column}");
       }
+    }
+
+    // Responsive collapsing
+    .#{$-zf-size}-#{$collapse} {
+      > .#{$column} { @include grid-col-collapse; }
 
-      // Gutter adjustment
-      .#{$size}-#{$uncenter},
-      .#{$size}-#{$push}-0,
-      .#{$size}-#{$pull}-0 {
-        @include grid-col-unpos;
+      .#{$row} {
+        margin-left: 0;
+        margin-right: 0;
       }
     }
+
+    .#{$-zf-size}-#{$uncollapse} {
+      $gutter: -zf-get-bp-val($grid-column-gutter, $-zf-size);
+
+      > .#{$column} { @include grid-col-uncollapse($gutter); }
+    }
+
+    // Positioning
+    .#{$-zf-size}-#{$center} {
+      @include grid-col-pos(center);
+    }
+
+    // Gutter adjustment
+    .#{$-zf-size}-#{$uncenter},
+    .#{$-zf-size}-#{$push}-0,
+    .#{$-zf-size}-#{$pull}-0 {
+      @include grid-col-unpos;
+    }
   }
 
   @if $column == 'column' {
diff --git a/_sass/foundation/grid/_column.scss b/_sass/foundation/grid/_column.scss
index abf272ce..a128cd8a 100644
--- a/_sass/foundation/grid/_column.scss
+++ b/_sass/foundation/grid/_column.scss
@@ -12,7 +12,7 @@
 ///   Width of the column. Accepts multiple values:
 ///   - A percentage value will make the column that exact size.
 ///   - A single digit will make the column span that number of columns wide, taking into account the column count of the parent row.
-///   - A string of the format “x of y” will make a column that is *x* columns wide, assuming *y* total columns for the parent.
+///   - A string of the format "x of y" will make a column that is *x* columns wide, assuming *y* total columns for the parent.
 ///
 /// @returns {Number} A calculated percentage value.
 @function grid-column($columns) {
@@ -31,10 +31,10 @@
     }
   }
 
-  // Parsing “n of n” expressions
+  // Parsing "n of n" expressions
   @else if type-of($columns) == 'list' {
     @if length($columns) != 3 {
-      @error 'Wrong syntax for grid-column(). Use the format “n of n”.';
+      @error 'Wrong syntax for grid-column(). Use the format "n of n".';
     }
     @else {
       $width: percentage(nth($columns, 1) / nth($columns, 3));
@@ -43,7 +43,7 @@
 
   // Anything else is incorrect
   @else {
-    @error 'Wrong syntax for grid-column(). Use a number, decimal, percentage, or “n of n”.';
+    @error 'Wrong syntax for grid-column(). Use a number, decimal, percentage, or "n of n".';
   }
 
   @return $width;
@@ -57,18 +57,31 @@
   $columns: $grid-column-count,
   $gutter: $grid-column-gutter
 ) {
-  @if ($columns <= $grid-column-count) {
-    @include grid-column-size($columns);
-  }
+  @include grid-column-size($columns);
+  float: $global-left;
 
-  $gutter: rem-calc($gutter) / 2;
+  // Gutters
+  @if type-of($gutter) == 'map' {
+    @each $breakpoint, $value in $gutter {
+      $padding: rem-calc($value) / 2;
 
-  float: $global-left;
-  padding-left: $gutter;
-  padding-right: $gutter;
+      @include breakpoint($breakpoint) {
+        padding-left: $padding;
+        padding-right: $padding;
+      }
+    }
+  }
+  @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
+    $padding: rem-calc($gutter) / 2;
+    padding-left: $padding;
+    padding-right: $padding;
+  }
 
-  &:last-child:not(:first-child) {
-    float: $global-right;
+  // Last column alignment
+  @if $grid-column-align-edge {
+    &:last-child:not(:first-child) {
+      float: $global-right;
+    }
   }
 }
 
@@ -80,7 +93,7 @@
 ) {
   @include grid-row;
   @include grid-column($gutter: $gutter);
-  
+
   &,
   &:last-child {
     float: none;
diff --git a/_sass/foundation/grid/_flex-grid.scss b/_sass/foundation/grid/_flex-grid.scss
index c5f8367e..1dcf34e8 100644
--- a/_sass/foundation/grid/_flex-grid.scss
+++ b/_sass/foundation/grid/_flex-grid.scss
@@ -13,20 +13,28 @@
 /// @param {Number} $width [$grid-row-width] - Maximum width of the row.
 /// @param {Number} $columns [null] - Number of columns to use for this row. If set to `null` (the default), the global column count will be used.
 /// @param {Boolean} $base [true] - Set to `false` to prevent basic styles from being output. Useful if you're calling this mixin on the same element twice, as it prevents duplicate CSS output.
+/// @param {Number} $gutter [$grid-column-gutter] - Gutter to use when inverting margins, in case the row is nested.
 @mixin flex-grid-row(
   $behavior: null,
   $width: $grid-row-width,
   $columns: null,
-  $base: true
+  $base: true,
+  $gutter: $grid-column-gutter
 ) {
-  $behavior: -zf-get-options($behavior, nest collapse);
   $margin: auto;
 
-  @if map-get($behavior, nest) {
-    $margin: rem-calc($grid-column-gutter) / 2 * -1;
+  @if index($behavior, nest) != null {
+    @include grid-row-nest($gutter);
+
+    @if index($behavior, collapse) != null {
+      margin-left: 0;
+      margin-right: 0;
+    }
   }
   @else {
     max-width: $width;
+    margin-left: auto;
+    margin-right: auto;
   }
 
   @if $base {
@@ -34,9 +42,6 @@
     flex-flow: row wrap;
   }
 
-  margin-left: $margin;
-  margin-right: $margin;
-
   @if $columns != null {
     @include grid-context($columns, $base) {
       @content;
@@ -50,6 +55,7 @@
 ///
 /// @param {Mixed} $columns [null] - Width of the column.
 @function flex-grid-column($columns: null) {
+  // scss-lint:disable ZeroUnit
   $flex: 1 1 0px;
 
   @if $columns == shrink {
@@ -70,11 +76,25 @@
   $columns: null,
   $gutter: $grid-column-gutter
 ) {
-  $gutter: rem-calc($gutter) / 2;
-
+  // Base properties
   flex: flex-grid-column($columns);
-  padding-left: $gutter;
-  padding-right: $gutter;
+
+  // Gutters
+  @if type-of($gutter) == 'map' {
+    @each $breakpoint, $value in $gutter {
+      $padding: rem-calc($value) / 2;
+
+      @include breakpoint($breakpoint) {
+        padding-left: $padding;
+        padding-right: $padding;
+      }
+    }
+  }
+  @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
+    $padding: rem-calc($gutter) / 2;
+    padding-left: $padding;
+    padding-right: $padding;
+  }
 
   // max-width fixes IE 10/11 not respecting the flex-basis property
   @if $columns != null and $columns != shrink {
@@ -82,10 +102,46 @@
   }
 }
 
+/// Creates a block grid for a flex grid row.
+///
+/// @param {Number} $n - Number of columns to display on each row.
+/// @param {String} $selector - Selector to use to target columns within the row.
+@mixin flex-grid-layout(
+  $n,
+  $selector: '.column'
+) {
+  flex-wrap: wrap;
+
+  > #{$selector} {
+    $pct: percentage(1/$n);
+
+    flex: 0 0 $pct;
+    max-width: $pct;
+  }
+}
+
 /// Changes the source order of a flex grid column. Columns with lower numbers appear first in the layout.
 /// @param {Number} $order [0] - Order number to apply.
 @mixin flex-grid-order($order: 0) {
-  order: $order;
+  @warn 'This mixin is being replaced by flex-order(). flex-grid-order() will be removed in Foundation 6.3.';
+  @include flex-order($order);
+}
+
+/// Horizontally or vertically aligns the columns within a flex row. Apply this mixin to a flex row.
+///
+/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.
+/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
+@mixin flex-grid-row-align($x: null, $y: null) {
+  @warn 'This mixin is being replaced by flex-align(). flex-grid-row-align() will be removed in Foundation 6.3.';
+  @include flex-align($x, $y);
+}
+
+/// Vertically align a single column within a flex row. Apply this mixin to a flex column.
+///
+/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
+@mixin flex-grid-column-align($y: null) {
+  @warn 'This mixin is being replaced by flex-align-self(). flex-grid-column-align() will be removed in Foundation 6.3.';
+  @include flex-align-self($y);
 }
 
 @mixin foundation-flex-grid {
@@ -94,101 +150,119 @@
     @include flex-grid-row;
 
     // Nesting behavior
-    & &,
-    .column-row & {
+    & & {
       @include flex-grid-row(nest, $base: false);
     }
+
+    // Expanded row
+    &.expanded {
+      max-width: none;
+    }
+
+    &.collapse {
+      > .column { @include grid-col-collapse; }
+    }
   }
 
   // Column
-  %flex-column {
+  .column {
     @include flex-grid-column;
   }
 
-  .column,
-  .columns {
-    @extend %flex-column;
+  // Column row
+  // The double .row class is needed to bump up the specificity
+  .column.row.row {
+    float: none;
+
+    // To properly nest a column row, padding and margin is removed
+    .row & {
+      padding-left: 0;
+      padding-right: 0;
+      margin-left: 0;
+      margin-right: 0;
+    }
   }
 
-  // Sizing (percentage)
-  @each $size in $breakpoint-classes {
-    @include breakpoint($size) {
-      @for $i from 1 through $grid-column-count {
-        .#{$size}-#{$i} {
-          flex: flex-grid-column($i);
-          max-width: grid-column($i);
-        }
+  @include -zf-each-breakpoint {
+    @for $i from 1 through $grid-column-count {
+      // Sizing (percentage)
+      .#{$-zf-size}-#{$i} {
+        flex: flex-grid-column($i);
+        max-width: grid-column($i);
+      }
+
+      // Offsets
+      $o: $i - 1;
+
+      .#{$-zf-size}-offset-#{$o} {
+        @include grid-column-offset($o);
       }
     }
-  }
 
-  // Sizing (expand)
-  @each $size in $breakpoint-classes {
-    @if $size != small {
-      @include breakpoint($size) {
-        .#{$size}-expand {
-          flex: flex-grid-column();
-        }
+    // Source ordering
+    @for $i from 1 through 6 {
+      .#{$-zf-size}-order-#{$i} {
+        @include flex-order($i);
       }
     }
-  }
 
-  // Sizing (shrink)
-  .shrink {
-    flex: flex-grid-column(shrink);
-  }
+    // Block grid
+    @for $i from 1 through $block-grid-max {
+      .#{$-zf-size}-up-#{$i} {
+        @include flex-grid-layout($i);
+      }
+    }
 
-  // Auto-stacking/unstacking
-  @each $size in $breakpoint-classes {
-    @if $size != small {
-      .row.#{$size}-unstack {
-        .column {
-          flex: flex-grid-column(100%);
+    @if $-zf-size != $-zf-zero-breakpoint {
+      // Sizing (expand)
+      @include breakpoint($-zf-size) {
+        .#{$-zf-size}-expand {
+          flex: flex-grid-column();
+        }
+      }
+
+      // Auto-stacking/unstacking
+      @at-root (without: media) {
+        .row.#{$-zf-size}-unstack {
+          > .column {
+            flex: flex-grid-column(100%);
 
-          @include breakpoint($size) {
-            flex: flex-grid-column();
+            @include breakpoint($-zf-size) {
+              flex: flex-grid-column();
+            }
           }
         }
       }
     }
-  }
 
-  // Source ordering
-  @each $size in $breakpoint-classes {
-    @include breakpoint($size) {
-      @for $i from 1 through 6 {
-        .#{$size}-order-#{$i} {
-          @include flex-grid-order($i);
-        }
-      }
+    // Responsive collapsing
+    .#{$-zf-size}-collapse {
+      > .column { @include grid-col-collapse; }
     }
-  }
 
-  // Horizontal alignment using justify-content
-  @each $hdir, $prop in (
-    'right': flex-end,
-    'center': center,
-    'justify': space-between,
-    'spaced': space-around,
-  ) {
-    .row.align-#{$hdir} {
-      justify-content: $prop;
+    .#{$-zf-size}-uncollapse {
+      $gutter: -zf-get-bp-val($grid-column-gutter, $-zf-size);
+
+      > .column { @include grid-col-uncollapse($gutter); }
     }
   }
 
-  // Horizontal alignment using align-items and align-self
-  @each $vdir, $prop in (
-    'top': flex-start,
-    'bottom': flex-end,
-    'middle': center,
-    'stretch': stretch,
-  ) {
-    .row.align-#{$vdir} {
-      align-items: $prop;
-    }
+  // Sizing (shrink)
+  .shrink {
+    flex: flex-grid-column(shrink);
+    max-width: 100%;
+  }
 
+  // Vertical alignment using align-items and align-self
+  // Remove these in 6.3
+  @each $vdir, $prop in $-zf-flex-align {
     .column.align-#{$vdir} {
-      align-self: $prop;
+      @include flex-align-self($vdir);
     }
   }
+
+  .columns {
+    // scss-lint:disable PlaceholderInExtend
+    @extend .column;
+  }
 }
diff --git a/_sass/foundation/grid/_grid.scss b/_sass/foundation/grid/_grid.scss
index 28e81ebb..0a8d879c 100644
--- a/_sass/foundation/grid/_grid.scss
+++ b/_sass/foundation/grid/_grid.scss
@@ -14,13 +14,40 @@ $grid-row-width: $global-width !default;
 /// @type Number
 $grid-column-count: 12 !default;
 
-/// The amount of space between columns.
-/// @type Number
-$grid-column-gutter: 30px !default;
+/// The amount of space between columns at different screen sizes. To use just one size, set the variable to a number instead of a map.
+/// @type Map | Length
+/// @since 6.1.0
+$grid-column-gutter: (
+  small: 20px,
+  medium: 30px,
+) !default;
+
+/// If `true`, the last column in a row will align to the opposite edge of the row.
+/// @type Boolean
+$grid-column-align-edge: true !default;
 
 /// The highest number of `.x-up` classes available when using the block grid CSS.
 /// @type Number
-$block-grid-max: 6 !default;
+$block-grid-max: 8 !default;
+
+// Internal value to store the end column float direction
+$-zf-end-float: if($grid-column-align-edge, $global-right, $global-left);
+
+// The last piece to transition the responsive gutter feature
+// Remove this in 6.3
+$grid-column-responsive-gutter: null !default;
+@if $grid-column-responsive-gutter {
+  // scss-lint:disable DebugStatement
+  @warn 'Rename $grid-column-responsive-gutter to $grid-column-gutter to remove this warning.';
+  $grid-column-gutter: $grid-column-responsive-gutter;
+}
+
+// If a single value is passed as a gutter, convert it to a map so the code knows what to do with it
+@if type-of($grid-column-gutter) == 'number' {
+  $grid-column-gutter: (
+    small: $grid-column-gutter,
+  );
+}
 
 @import 'row';
 @import 'column';
diff --git a/_sass/foundation/grid/_gutter.scss b/_sass/foundation/grid/_gutter.scss
index a0e90cb6..5897eb55 100644
--- a/_sass/foundation/grid/_gutter.scss
+++ b/_sass/foundation/grid/_gutter.scss
@@ -6,26 +6,29 @@
 /// @group grid
 ////
 
-/// Collapse the gutters on a column by removing the padding.
-@mixin grid-column-collapse() {
+/// Collapse the gutters on a column by removing the padding. **Note:** only use this mixin within a breakpoint. To collapse a column's gutters on all screen sizes, use the `$gutter` parameter of the `grid-column()` mixin instead.
+@mixin grid-column-collapse {
   padding-left: 0;
   padding-right: 0;
 }
 
 /// Un-collapse the gutters on a column by re-adding the padding.
-@mixin grid-column-uncollapse() {
-  padding-left: $grid-column-gutter;
-  padding-right: $grid-column-gutter;
+///
+/// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns.
+@mixin grid-column-uncollapse($gutter: $grid-column-gutter) {
+  $gutter: rem-calc($gutter) / 2;
+  padding-left: $gutter;
+  padding-right: $gutter;
 }
 
 /// Shorthand for `grid-column-collapse()`.
 /// @alias grid-column-collapse
-@mixin grid-col-collapse() {
+@mixin grid-col-collapse {
   @include grid-column-collapse;
 }
 
 /// Shorthand for `grid-column-uncollapse()`.
 /// @alias grid-column-uncollapse
-@mixin grid-col-uncollapse() {
-  @include grid-column-uncollapse;
+@mixin grid-col-uncollapse($gutter: $grid-column-gutter) {
+  @include grid-column-uncollapse($gutter);
 }
diff --git a/_sass/foundation/grid/_layout.scss b/_sass/foundation/grid/_layout.scss
index 4b3761d3..9f5da07c 100644
--- a/_sass/foundation/grid/_layout.scss
+++ b/_sass/foundation/grid/_layout.scss
@@ -14,7 +14,7 @@
   $n,
   $selector: '.column'
 ) {
-  #{$selector} {
+  & > #{$selector} {
     width: percentage(1/$n);
     float: $global-left;
 
@@ -31,3 +31,21 @@
     }
   }
 }
+
+/// Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.
+///
+/// @param {Number} $n - Number of items that appear in each row.
+@mixin grid-layout-center-last($n) {
+  @for $i from 1 to $n {
+    @if $i == 1 {
+      &:nth-child(#{$n}n+1):last-child {
+        margin-left: (100 - 100/$n * $i) / 2 * 1%;
+      }
+    }
+    @else {
+      &:nth-child(#{$n}n+1):nth-last-child(#{$i}) {
+        margin-left: (100 - 100/$n * $i) / 2 * 1%;
+      }
+    }
+  }
+}
diff --git a/_sass/foundation/grid/_position.scss b/_sass/foundation/grid/_position.scss
index 9cafac9a..7cb5d1b1 100644
--- a/_sass/foundation/grid/_position.scss
+++ b/_sass/foundation/grid/_position.scss
@@ -27,10 +27,11 @@
 }
 
 /// Reset a position definition.
-@mixin grid-column-unposition() {
+@mixin grid-column-unposition {
   position: static;
   margin-left: 0;
   margin-right: 0;
+  float: left;
 }
 
 /// Offsets a column to the right by `$n` columns.
@@ -40,9 +41,9 @@
 }
 
 /// Disable the default behavior of the last column in a row aligning to the opposite edge.
-@mixin grid-column-end() {
+@mixin grid-column-end {
   // This extra specificity is required for the property to be applied
-  &:last-child {
+  &:last-child:last-child {
     float: $global-left;
   }
 }
@@ -55,7 +56,7 @@
 
 /// Shorthand for `grid-column-unposition()`.
 /// @alias grid-column-unposition
-@mixin grid-col-unpos() {
+@mixin grid-col-unpos {
   @include grid-column-unposition;
 }
 
@@ -67,6 +68,6 @@
 
 /// Shorthand for `grid-column-end()`.
 /// @alias grid-column-end
-@mixin grid-col-end() {
+@mixin grid-col-end {
   @include grid-column-end;
 }
diff --git a/_sass/foundation/grid/_row.scss b/_sass/foundation/grid/_row.scss
index 23fbbbda..daa71e03 100644
--- a/_sass/foundation/grid/_row.scss
+++ b/_sass/foundation/grid/_row.scss
@@ -10,7 +10,7 @@
 /// @content
 ///
 /// @param {Number} $columns - Number of columns to use.
-/// @param {Booleam} $root [false]
+/// @param {Boolean} $root [false]
 ///   If `false`, selectors inside this mixin will nest inside the parent selector.
 ///   If `true`, selectors will not nest.
 @mixin grid-context(
@@ -18,7 +18,7 @@
   $root: false
 ) {
   // Store the current column count so it can be re-set later
-  $old-grid-column-count: $columns;
+  $old-grid-column-count: $grid-column-count;
   $grid-column-count: $columns !global;
 
   @if $root {
@@ -29,7 +29,7 @@
   }
 
   // Restore the old column count
-  $grid-column-count: $old-grid-column-count !global;
+  $grid-column-count: $old-grid-column-count;
 }
 
 /// Creates a grid row.
@@ -40,36 +40,55 @@
 ///   Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.
 /// @param {Number} $width [$grid-row-width] - Maximum width of the row.
 /// @param {Boolean} $cf [true] - Whether or not to include a clearfix.
+/// @param {Number} $gutter [$grid-column-gutter] - Gutter to use when inverting margins, in case the row is nested.
 @mixin grid-row(
   $columns: null,
   $behavior: null,
   $width: $grid-row-width,
-  $cf: true
+  $cf: true,
+  $gutter: $grid-column-gutter
 ) {
-  $behavior: -zf-get-options($behavior, nest collapse);
   $margin: auto;
 
-  @if map-get($behavior, nest) {
-    $margin: rem-calc($grid-column-gutter) / 2 * -1;
+  @if index($behavior, nest) != null {
+    @include grid-row-nest($gutter);
 
-    @if map-get($behavior, collapse) {
-      $margin: 0;
+    @if index($behavior, collapse) != null {
+      margin-left: 0;
+      margin-right: 0;
     }
   }
   @else {
     max-width: $width;
+    margin-left: auto;
+    margin-right: auto;
   }
 
   @if $cf {
     @include clearfix;
   }
 
-  margin-left: $margin;
-  margin-right: $margin;
-
   @if $columns != null {
     @include grid-context($columns) {
       @content;
     }
   }
 }
+
+/// Inverts the margins of a row to nest it inside of a column.
+///
+/// @param {Map|null} $gutter [null] - Gutter value to use when inverting the margins. Set to `null` to refer to the responsive gutter settings.
+@mixin grid-row-nest($gutter: $grid-column-gutter) {
+  @if type-of($gutter) == 'number' {
+    $gutter: ($-zf-zero-breakpoint: $gutter);
+  }
+
+  @each $breakpoint, $value in $gutter {
+    $margin: rem-calc($value) / 2 * -1;
+
+    @include breakpoint($breakpoint) {
+      margin-left: $margin;
+      margin-right: $margin;
+    }
+  }
+}
diff --git a/_sass/foundation/settings/_settings.scss b/_sass/foundation/settings/_settings.scss
index 40f3f1dd..2858deb3 100644
--- a/_sass/foundation/settings/_settings.scss
+++ b/_sass/foundation/settings/_settings.scss
@@ -3,439 +3,95 @@
 //
 //  Table of Contents:
 //
-//   1. Abide
-//   2. Accordion
-//   3. Badge
-//   4. Breadcrumbs
-//   5. Breakpoints
-//   6. Button
-//   7. Button Group
-//   8. Callout
-//   9. Close Button
-//  10. Dropdown
-//  11. Flex Video
-//  12. Forms
-//  13. Global
-//  14. The Grid
-//  15. Label
-//  16. Media Object
-//  17. Menu
-//  18. Off-canvas
-//  19. Orbit
-//  20. Pagination
-//  21. Progress Bar
-//  22. Reveal
-//  23. Slider
-//  24. Switch
-//  25. Table
-//  26. Tabs
-//  27. Thumbnail
-//  28. Tooltip
-//  29. Top Bar
-//  30. Base Typography
-//  31. Typography Helpers
-
-// Abide
-// -----
-
-// $abide-inputs: true;
-// $abide-labels: true;
-// $input-background-invalid: $alert-color;
-// $form-label-color-invalid: $alert-color;
-// $input-error-color: $alert-color;
-// $input-error-font-size: rem-calc(12);
-// $input-error-font-weight: $global-weight-bold;
-
-// Accordion
+//   1. Global
+//   2. Breakpoints
+//   3. The Grid
+//   4. Base Typography
+//   5. Typography Helpers
+//   6. Abide
+//   7. Accordion
+//   8. Accordion Menu
+//   9. Badge
+//  10. Breadcrumbs
+//  11. Button
+//  12. Button Group
+//  13. Callout
+//  14. Close Button
+//  15. Drilldown
+//  16. Dropdown
+//  17. Dropdown Menu
+//  18. Flex Video
+//  19. Forms
+//  20. Label
+//  21. Media Object
+//  22. Menu
+//  23. Meter
+//  24. Off-canvas
+//  25. Orbit
+//  26. Pagination
+//  27. Progress Bar
+//  28. Reveal
+//  29. Slider
+//  30. Switch
+//  31. Table
+//  32. Tabs
+//  33. Thumbnail
+//  34. Title Bar
+//  35. Tooltip
+//  36. Top Bar
+
+//@import 'util/util';
+
+// 1. Global
 // ---------
 
-// $accordion-background: $white;
-// $accordion-plusminus: true;
-// $accordion-item-color: foreground($accordion-background, $primary-color);
-// $accordion-item-background-hover: $light-gray;
-// $accordion-item-padding: 1.25rem 1rem;
-// $accordion-content-background: $white;
-// $accordion-content-border: 1px solid $light-gray;
-// $accordion-content-color: foreground($accordion-background, $primary-color);
-// $accordion-content-padding: 1rem;
-
-// Badge
-// -----
-
-// $badge-background: $primary-color;
-// $badge-color: foreground($badge-background);
-// $badge-padding: 0.3em;
-// $badge-minwidth: 2.1em;
-// $badge-font-size: 0.6rem;
-
-// Breadcrumbs
-// -----------
-
-// $breadcrumbs-margin: 0 0 $global-margin 0;
-// $breadcrumbs-item-font-size: rem-calc(11);
-// $breadcrumbs-item-color: $primary-color;
-// $breadcrumbs-item-color-current: $black;
-// $breadcrumbs-item-color-disabled: $medium-gray;
-// $breadcrumbs-item-margin: 0.75rem;
-// $breadcrumbs-item-uppercase: true;
-// $breadcrumbs-item-slash: true;
-
-// Breakpoints
-// -----------
-
-// $breakpoints: (
-//   small: 0,
-//   medium: 512px,
-//   large: 1024px,
-//   xlarge: 1200px,
-//   xxlarge: 1440px,
-// );
-// $breakpoint-classes: (small medium large);
-
-// Button
-// ------
-
-// $button-padding: 0.85em 1em;
-// $button-margin: 0 $global-margin $global-margin 0;
-// $button-fill: solid;
-// $button-background: $primary-color;
-// $button-background-hover: scale-color($button-background, $lightness: -15%);
-// $button-font-color: #fff;
-// $button-font-color-alt: #000;
-// $button-sizes: (
-//   tiny: 0.6rem,
-//   small: 0.75rem,
-//   default: 0.9rem,
-//   large: 1.25rem,
-// );
-// $button-opacity-disabled: 0.25;
-
-// Button Group
-// ------------
-
-// $buttongroup-margin: 1rem;
-// $buttongroup-spacing: 1px;
-// $buttongroup-child-selector: '.button';
-// $buttongroup-expand-max: 6;
-
-// Callout
-// -------
-
-// $callout-background: $white;
-// $callout-background-fade: 85%;
-// $callout-border: 1px solid rgba($black, 0.25);
-// $callout-margin: 0 0 1rem 0;
-// $callout-padding: 1rem;
-// $callout-font-color: $body-font-color;
-// $callout-font-color-alt: $body-background;
-// $callout-link-tint: 30%;
-
-// Close Button
-// ------------
-
-// $closebutton-position: $global-right top;
-// $closebutton-offset-horizontal: 1rem;
-// $closebutton-offset-vertical: 0.5rem;
-// $closebutton-size: 2em;
-// $closebutton-lineheight: 1;
-// $closebutton-color: $dark-gray;
-// $closebutton-color-hover: $black;
-
-// Dropdown
-// --------
-
-// $dropdown-padding: 1rem;
-// $dropdown-border: 1px solid $medium-gray;
-// $dropdown-font-size: 16rem;
-// $dropdown-width: 300px;
-// $dropdown-sizes: (
-//   tiny: 100px,
-//   small: 200px,
-//   large: 400px,
-// );
-
-// Flex Video
-// ----------
-
-// $flexvideo-padding-top: rem-calc(25);
-// $flexvideo-margin-bottom: rem-calc(16);
-// $flexvideo-ratio: 4 by 3;
-// $flexvideo-ratio-widescreen: 16 by 9;
-
-// Forms
-// -----
-
-// $fieldset-border: 1px solid $medium-gray;
-// $fieldset-padding: rem-calc(20);
-// $fieldset-margin: rem-calc(18 0);
-// $legend-padding: rem-calc(0 3);
-// $form-spacing: rem-calc(16);
-// $helptext-color: #333;
-// $helptext-font-size: rem-calc(13);
-// $helptext-font-style: italic;
-// $input-prefix-color: $black;
-// $input-prefix-background: $light-gray;
-// $input-prefix-border: 1px solid $medium-gray;
-// $input-prefix-padding: 1rem;
-// $form-label-color: $black;
-// $form-label-font-size: rem-calc(14);
-// $form-label-font-weight: $global-weight-normal;
-// $form-label-line-height: 1.8;
-// $select-background: #fafafa;
-// $select-triangle-color: #333;
-// $input-color: $dark-gray;
-// $input-font-family: inherit;
-// $input-font-size: rem-calc(16);
-// $input-background: $white;
-// $input-background-focus: $white;
-// $input-background-disabled: $light-gray;
-// $input-border: 1px solid $medium-gray;
-// $input-border-focus: 1px solid $dark-gray;
-// $input-shadow: inset 0 1px 2px rgba($black, 0.1);
-// $input-shadow-focus: 0 0 5px $medium-gray;
-// $input-cursor-disabled: default;
-// $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
-// $input-number-spinners: true;
-
-// Global
-// ------
-
-// $global-width: rem-calc(1200);
 // $global-font-size: 100%;
+// $global-width: rem-calc(1200);
 // $global-lineheight: 1.5;
-// $primary-color: #2199e8;
-// $secondary-color: #777;
-// $success-color: #3adb76;
-// $warning-color: #ffae00;
-// $alert-color: #ec5840;
-// $light-gray: #f3f3f3;
+// $foundation-palette: ( primary: #2199e8, secondary: #777, success: #3adb76, warning: #ffae00, alert: #ec5840, );
+// $light-gray: #e6e6e6;
 // $medium-gray: #cacaca;
 // $dark-gray: #8a8a8a;
 // $black: #0a0a0a;
 // $white: #fefefe;
 // $body-background: $white;
 // $body-font-color: $black;
-// $body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+// $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
 // $body-antialiased: true;
-// $text-direction: ltr;
 // $global-margin: 1rem;
 // $global-padding: 1rem;
-// $global-margin: 1rem;
 // $global-weight-normal: normal;
 // $global-weight-bold: bold;
-// $global-radius: 3px;
-// $global-namespace: false;
+// $global-radius: 0;
 // $global-text-direction: ltr;
-// $rem-base: 16px;
+// $global-flexbox: false;
+// $print-transparent-backgrounds: true;
 
-// The Grid
-// --------
+// @include add-foundation-colors;
 
-// $grid-row-width: $global-width;
-// $grid-column-count: 12;
-// $grid-column-gutter: 1.875rem / 2;
-
-// Label
-// -----
-
-// $label-background: $primary-color;
-// $label-color: foreground($label-background);
-// $label-font-size: 0.8rem;
-// $label-padding: 0.33333rem 0.5rem;
-
-// Media Object
-// ------------
-
-// $mediaobject-margin-bottom: $global-margin;
-// $mediaobject-section-padding: $global-padding;
-// $mediaobject-image-width-stacked: 100%;
-
-// Menu
-// ----
-
-// $menu-margin: 0;
-// $menu-margin-nested: 1rem;
-// $menu-item-padding: 0.7rem 1rem;
-// $menu-icon-spacing: 0.25rem;
-// $menu-expand-max: 6;
-
-// Off-canvas
-// ----------
-
-// $offcanvas-size: 250px;
-// $offcanvas-background: $white;
-// $offcanvas-zindex: -1;
-// $offcanvas-transition-length: 0.5s;
-// $offcanvas-transition-timing: ease;
-// $offcanvas-exit-background: rgba($white, 0.25);
-// $maincontent-class: 'main-content';
-// $maincontent-shadow: 0 0 10px rgba($black, 0.5);
-
-// Orbit
-// -----
-
-// $orbit-bullet-background: $medium-gray;
-// $orbit-bullet-background-active: $dark-gray;
-// $orbit-bullet-diameter: 1.2rem;
-// $orbit-bullet-margin: 0.1rem;
-// $orbit-bullet-margin-top: 0.8rem;
-// $orbit-bullet-margin-bottom: 0.8rem;
-// $orbit-caption-background: rgba($black, 0.5);
-// $orbit-caption-padding: 1rem;
-// $orbit-control-background-hover: rgba($black, 0.5);
-// $orbit-control-padding: 1rem;
-// $orbit-control-zindex: 10;
-
-// Pagination
-// ----------
+// 2. Breakpoints
+// --------------
 
-// $pagination-font-size: rem-calc(14);
-// $pagination-margin-bottom: $global-margin;
-// $pagination-item-color: $black;
-// $pagination-item-padding: rem-calc(3 10);
-// $pagination-item-spacing: rem-calc(1);
-// $pagination-item-background-hover: $light-gray;
-// $pagination-item-background-current: $primary-color;
-// $pagination-item-color-current: foreground($pagination-item-background-current);
-// $pagination-item-color-disabled: $medium-gray;
-// $pagination-ellipsis-color: $black;
-// $pagination-mobile-items: false;
-// $pagination-arrows: true;
-
-// Progress Bar
-// ------------
-
-// $progress-height: 1rem;
-// $progress-background: $medium-gray;
-// $progress-margin-bottom: $global-margin;
-// $progress-meter-background: $primary-color;
-
-// Reveal
-// ------
-
-// $reveal-background: $white;
-// $reveal-width: 600px;
-// $reveal-max-width: $global-width;
-// $reveal-offset: rem-calc(100);
-// $reveal-padding: $global-padding;
-// $reveal-border: 1px solid $medium-gray;
-// $reveal-zindex: 1005;
-// $reveal-overlay-background: rgba($black, 0.45);
-
-// Slider
-// ------
-
-// $slider-height: 0.5rem;
-// $slider-width-vertical: $slider-height;
-// $slider-background: $light-gray;
-// $slider-fill-background: $medium-gray;
-// $slider-handle-height: 1.4rem;
-// $slider-handle-width: 1.4rem;
-// $slider-handle-background: $primary-color;
-// $slider-opacity-disabled: 0.25;
-// $slider-transition: all 0.2s ease-in-out;
-
-// Switch
-// ------
-
-// $switch-background: $medium-gray;
-// $switch-background-active: $primary-color;
-// $switch-height: 2rem;
-// $switch-height-tiny: 1.5rem;
-// $switch-height-small: 1.75rem;
-// $switch-height-large: 2.5rem;
-// $switch-radius: 0;
-// $switch-margin: $global-margin;
-// $switch-paddle-background: $white;
-// $switch-paddle-offset: 0.25rem;
-// $switch-paddle-radius: 0;
-// $switch-paddle-transition: all 0.25s ease-out;
-
-// Table
-// -----
-
-// $table-background: $white;
-// $table-color-scale: 5%;
-// $table-border: 1px solid smart-scale($table-background, $table-color-scale);
-// $table-padding: rem-calc(8 10 10);
-// $table-hover-scale: 2%;
-// $table-row-hover: darken($table-background, $table-hover-scale);
-// $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
-// $table-striped-background: smart-scale($table-background, $table-color-scale);
-// $table-stripe: even;
-// $table-head-background: smart-scale($table-background, $table-color-scale / 2);
-// $table-foot-background: smart-scale($table-background, $table-color-scale);
-// $table-head-font-color: $body-font-color;
-// $show-header-for-stacked: false;
-
-// Tabs
-// ----
-
-// $tab-margin: 0;
-// $tab-background: $white;
-// $tab-background-active: $light-gray;
-// $tab-border: $light-gray;
-// $tab-item-color: foreground($tab-background, $primary-color);
-// $tab-item-background-hover: $white;
-// $tab-item-padding: 1.25rem 1.5rem;
-// $tab-expand-max: 6;
-// $tab-content-background: $white;
-// $tab-content-border: $light-gray;
-// $tab-content-color: foreground($tab-background, $primary-color);
-// $tab-content-padding: 1rem;
-
-// Thumbnail
-// ---------
-
-// $thumbnail-border: solid 4px $white;
-// $thumbnail-margin-bottom: $global-margin;
-// $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
-// $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
-// $thumbnail-transition: box-shadow 200ms ease-out;
-
-// Tooltip
-// -------
-
-// $tooltip-background-color: $black;
-// $tooltip-padding: 0.75rem;
-// $tooltip-font-size: $small-font-size;
-// $tooltip-pip-width: 0.75rem;
-// $tooltip-pip-height: $tooltip-pip-width * 0.866;
-// $tooltip-pip-offset: 1.25rem;
+// $breakpoints: ( small: 0, medium: 640px, large: 1024px, xlarge: 1200px, xxlarge: 1440px, );
+// $breakpoint-classes: (small medium large);
 
-// Top Bar
-// -------
+// 3. The Grid
+// -----------
 
-// $topbar-padding: 0.5rem;
-// $topbar-background: #eee;
-// $topbar-link-color: #fff;
-// $topbar-input-width: 200px;
+// $grid-row-width: $global-width;
+// $grid-column-count: 12;
+// $grid-column-gutter: ( small: 20px, medium: 30px, );
+// $grid-column-align-edge: true;
+// $block-grid-max: 8;
 
-// Base Typography
-// ---------------
+// 4. Base Typography
+// ------------------
 
 // $header-font-family: $body-font-family;
 // $header-font-weight: $global-weight-normal;
 // $header-font-style: normal;
-// $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
-// $header-sizes: (
-//   small: (
-//     'h1': 24,
-//     'h2': 20,
-//     'h3': 19,
-//     'h4': 18,
-//     'h5': 17,
-//     'h6': 16,
-//   ),
-//   medium: (
-//     'h1': 48,
-//     'h2': 40,
-//     'h3': 31,
-//     'h4': 25,
-//     'h5': 20,
-//     'h6': 16,
-//   ),
-// );
+// $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+// $header-sizes: ( small: ( 'h1': 24, 'h2': 20, 'h3': 19, 'h4': 18, 'h5': 17, 'h6': 16, ), medium: ( 'h1': 48, 'h2': 40, 'h3': 31, 'h4': 25, 'h5': 20, 'h6': 16, ), );
 // $header-color: inherit;
 // $header-lineheight: 1.4;
 // $header-margin-bottom: 0.5rem;
@@ -457,7 +113,7 @@
 // $anchor-text-decoration-hover: none;
 // $hr-width: $global-width;
 // $hr-border: 1px solid $medium-gray;
-// $hr-margin: rem-calc(20) 0;
+// $hr-margin: rem-calc(20) auto;
 // $list-lineheight: $paragraph-lineheight;
 // $list-margin-bottom: $paragraph-margin-bottom;
 // $list-style-type: disc;
@@ -479,8 +135,8 @@
 // $keystroke-radius: $global-radius;
 // $abbr-underline: 1px dotted $black;
 
-// Typography Helpers
-// ------------------
+// 5. Typography Helpers
+// ---------------------
 
 // $lead-font-size: $global-font-size * 1.25;
 // $lead-lineheight: 1.6;
@@ -490,3 +146,389 @@
 // $subheader-margin-top: 0.2rem;
 // $subheader-margin-bottom: 0.5rem;
 // $stat-font-size: 2.5rem;
+
+// 6. Abide
+// --------
+
+// $abide-inputs: true;
+//$abide-labels: true;
+//$input-background-invalid: map-get($foundation-palette, alert);
+//$form-label-color-invalid: map-get($foundation-palette, alert);
+//$input-error-color: map-get($foundation-palette, alert);
+//$input-error-font-size: rem-calc(12);
+//$input-error-font-weight: $global-weight-bold;
+
+// 7. Accordion
+// ------------
+
+//$accordion-background: $white;
+//$accordion-plusminus: true;
+//$accordion-item-color: foreground($accordion-background, $primary-color);
+//$accordion-item-background-hover: $light-gray;
+//$accordion-item-padding: 1.25rem 1rem;
+//$accordion-content-background: $white;
+//$accordion-content-border: 1px solid $light-gray;
+//$accordion-content-color: foreground($accordion-background, $primary-color);
+//$accordion-content-padding: 1rem;
+
+// 8. Accordion Menu
+// -----------------
+
+//$accordionmenu-arrows: true;
+//$accordionmenu-arrow-color: $primary-color;
+
+// 9. Badge
+// --------
+
+//$badge-background: $primary-color;
+//$badge-color: foreground($badge-background);
+//$badge-padding: 0.3em;
+//$badge-minwidth: 2.1em;
+//$badge-font-size: 0.6rem;
+
+// 10. Breadcrumbs
+// ---------------
+
+//$breadcrumbs-margin: 0 0 $global-margin 0;
+//$breadcrumbs-item-font-size: rem-calc(11);
+//$breadcrumbs-item-color: $primary-color;
+//$breadcrumbs-item-color-current: $black;
+//$breadcrumbs-item-color-disabled: $medium-gray;
+//$breadcrumbs-item-margin: 0.75rem;
+//$breadcrumbs-item-uppercase: true;
+//$breadcrumbs-item-slash: true;
+
+// 11. Button
+// ----------
+
+//$button-padding: 0.85em 1em;
+//$button-margin: 0 0 $global-margin 0;
+//$button-fill: solid;
+//$button-background: $primary-color;
+//$button-background-hover: scale-color($button-background, $lightness: -15%);
+//$button-color: $white;
+//$button-color-alt: $black;
+//$button-radius: $global-radius;
+//$button-sizes: (
+//  tiny: 0.6rem,
+//  small: 0.75rem,
+//  default: 0.9rem,
+//  large: 1.25rem,
+//);
+//$button-opacity-disabled: 0.25;
+
+// 12. Button Group
+// ----------------
+
+//$buttongroup-margin: 1rem;
+//$buttongroup-spacing: 1px;
+//$buttongroup-child-selector: '.button';
+//$buttongroup-expand-max: 6;
+
+// 13. Callout
+// -----------
+
+//$callout-background: $white;
+//$callout-background-fade: 85%;
+//$callout-border: 1px solid rgba($black, 0.25);
+//$callout-margin: 0 0 1rem 0;
+//$callout-padding: 1rem;
+//$callout-font-color: $body-font-color;
+//$callout-font-color-alt: $body-background;
+//$callout-radius: $global-radius;
+//$callout-link-tint: 30%;
+
+// 14. Close Button
+// ----------------
+
+//$closebutton-position: right top;
+//$closebutton-offset-horizontal: 1rem;
+//$closebutton-offset-vertical: 0.5rem;
+//$closebutton-size: 2em;
+//$closebutton-lineheight: 1;
+//$closebutton-color: $dark-gray;
+//$closebutton-color-hover: $black;
+
+// 15. Drilldown
+// -------------
+
+//$drilldown-transition: transform 0.15s linear;
+//$drilldown-arrows: true;
+//$drilldown-arrow-color: $primary-color;
+//$drilldown-background: $white;
+
+// 16. Dropdown
+// ------------
+
+//$dropdown-padding: 1rem;
+//$dropdown-border: 1px solid $medium-gray;
+//$dropdown-font-size: 1rem;
+//$dropdown-width: 300px;
+//$dropdown-radius: $global-radius;
+//$dropdown-sizes: (
+//  tiny: 100px,
+//  small: 200px,
+//  large: 400px,
+//);
+
+// 17. Dropdown Menu
+// -----------------
+
+//$dropdownmenu-arrows: true;
+//$dropdownmenu-arrow-color: $anchor-color;
+//$dropdownmenu-min-width: 200px;
+//$dropdownmenu-background: $white;
+//$dropdownmenu-border: 1px solid $medium-gray;
+
+// 18. Flex Video
+// --------------
+
+//$flexvideo-margin-bottom: rem-calc(16);
+//$flexvideo-ratio: 4 by 3;
+//$flexvideo-ratio-widescreen: 16 by 9;
+
+// 19. Forms
+// ---------
+
+//$fieldset-border: 1px solid $medium-gray;
+//$fieldset-padding: rem-calc(20);
+//$fieldset-margin: rem-calc(18 0);
+//$legend-padding: rem-calc(0 3);
+//$form-spacing: rem-calc(16);
+//$helptext-color: $black;
+//$helptext-font-size: rem-calc(13);
+//$helptext-font-style: italic;
+//$input-prefix-color: $black;
+//$input-prefix-background: $light-gray;
+//$input-prefix-border: 1px solid $medium-gray;
+//$input-prefix-padding: 1rem;
+//$form-label-color: $black;
+//$form-label-font-size: rem-calc(14);
+//$form-label-font-weight: $global-weight-normal;
+//$form-label-line-height: 1.8;
+//$select-background: $white;
+//$select-triangle-color: $dark-gray;
+//$select-radius: $global-radius;
+//$input-color: $black;
+//$input-placeholder-color: $medium-gray;
+//$input-font-family: inherit;
+//$input-font-size: rem-calc(16);
+//$input-background: $white;
+//$input-background-focus: $white;
+//$input-background-disabled: $light-gray;
+//$input-border: 1px solid $medium-gray;
+//$input-border-focus: 1px solid $dark-gray;
+//$input-shadow: inset 0 1px 2px rgba($black, 0.1);
+//$input-shadow-focus: 0 0 5px $medium-gray;
+//$input-cursor-disabled: default;
+//$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+//$input-number-spinners: true;
+//$input-radius: $global-radius;
+
+// 20. Label
+// ---------
+
+//$label-background: $primary-color;
+//$label-color: foreground($label-background);
+//$label-font-size: 0.8rem;
+//$label-padding: 0.33333rem 0.5rem;
+//$label-radius: $global-radius;
+
+// 21. Media Object
+// ----------------
+
+//$mediaobject-margin-bottom: $global-margin;
+//$mediaobject-section-padding: $global-padding;
+//$mediaobject-image-width-stacked: 100%;
+
+// 22. Menu
+// --------
+
+//$menu-margin: 0;
+//$menu-margin-nested: 1rem;
+//$menu-item-padding: 0.7rem 1rem;
+//$menu-item-color-active: $white;
+//$menu-item-background-active: map-get($foundation-palette, primary);
+//$menu-icon-spacing: 0.25rem;
+
+// 23. Meter
+// ---------
+
+//$meter-height: 1rem;
+//$meter-radius: $global-radius;
+//$meter-background: $medium-gray;
+//$meter-fill-good: $success-color;
+//$meter-fill-medium: $warning-color;
+//$meter-fill-bad: $alert-color;
+
+// 24. Off-canvas
+// --------------
+
+//$offcanvas-size: 250px;
+//$offcanvas-background: $light-gray;
+//$offcanvas-zindex: -1;
+//$offcanvas-transition-length: 0.5s;
+//$offcanvas-transition-timing: ease;
+//$offcanvas-fixed-reveal: true;
+//$offcanvas-exit-background: rgba($white, 0.25);
+//$maincontent-class: 'off-canvas-content';
+//$maincontent-shadow: 0 0 10px rgba($black, 0.5);
+
+// 25. Orbit
+// ---------
+
+//$orbit-bullet-background: $medium-gray;
+//$orbit-bullet-background-active: $dark-gray;
+//$orbit-bullet-diameter: 1.2rem;
+//$orbit-bullet-margin: 0.1rem;
+//$orbit-bullet-margin-top: 0.8rem;
+//$orbit-bullet-margin-bottom: 0.8rem;
+//$orbit-caption-background: rgba($black, 0.5);
+//$orbit-caption-padding: 1rem;
+//$orbit-control-background-hover: rgba($black, 0.5);
+//$orbit-control-padding: 1rem;
+//$orbit-control-zindex: 10;
+
+// 26. Pagination
+// --------------
+
+//$pagination-font-size: rem-calc(14);
+//$pagination-margin-bottom: $global-margin;
+//$pagination-item-color: $black;
+//$pagination-item-padding: rem-calc(3 10);
+//$pagination-item-spacing: rem-calc(1);
+//$pagination-radius: $global-radius;
+//$pagination-item-background-hover: $light-gray;
+//$pagination-item-background-current: $primary-color;
+//$pagination-item-color-current: foreground($pagination-item-background-current);
+//$pagination-item-color-disabled: $medium-gray;
+//$pagination-ellipsis-color: $black;
+//$pagination-mobile-items: false;
+//$pagination-arrows: true;
+
+// 27. Progress Bar
+// ----------------
+
+//$progress-height: 1rem;
+//$progress-background: $medium-gray;
+//$progress-margin-bottom: $global-margin;
+//$progress-meter-background: $primary-color;
+//$progress-radius: $global-radius;
+
+// 28. Reveal
+// ----------
+
+//$reveal-background: $white;
+//$reveal-width: 600px;
+//$reveal-max-width: $global-width;
+//$reveal-padding: $global-padding;
+//$reveal-border: 1px solid $medium-gray;
+//$reveal-radius: $global-radius;
+//$reveal-zindex: 1005;
+//$reveal-overlay-background: rgba($black, 0.45);
+
+// 29. Slider
+// ----------
+
+//$slider-width-vertical: 0.5rem;
+//$slider-transition: all 0.2s ease-in-out;
+//$slider-height: 0.5rem;
+//$slider-background: $light-gray;
+//$slider-fill-background: $medium-gray;
+//$slider-handle-height: 1.4rem;
+//$slider-handle-width: 1.4rem;
+//$slider-handle-background: $primary-color;
+//$slider-opacity-disabled: 0.25;
+//$slider-radius: $global-radius;
+
+// 30. Switch
+// ----------
+
+//$switch-background: $medium-gray;
+//$switch-background-active: $primary-color;
+//$switch-height: 2rem;
+//$switch-height-tiny: 1.5rem;
+//$switch-height-small: 1.75rem;
+//$switch-height-large: 2.5rem;
+//$switch-radius: $global-radius;
+//$switch-margin: $global-margin;
+//$switch-paddle-background: $white;
+//$switch-paddle-offset: 0.25rem;
+//$switch-paddle-radius: $global-radius;
+//$switch-paddle-transition: all 0.25s ease-out;
+
+// 31. Table
+// ---------
+
+//$table-background: $white;
+//$table-color-scale: 5%;
+//$table-border: 1px solid smart-scale($table-background, $table-color-scale);
+//$table-padding: rem-calc(8 10 10);
+//$table-hover-scale: 2%;
+//$table-row-hover: darken($table-background, $table-hover-scale);
+//$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+//$table-striped-background: smart-scale($table-background, $table-color-scale);
+//$table-stripe: even;
+//$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+//$table-foot-background: smart-scale($table-background, $table-color-scale);
+//$table-head-font-color: $body-font-color;
+//$show-header-for-stacked: false;
+
+// 32. Tabs
+// --------
+
+//$tab-margin: 0;
+//$tab-background: $white;
+//$tab-background-active: $light-gray;
+//$tab-item-font-size: rem-calc(12);
+//$tab-item-background-hover: $white;
+//$tab-item-padding: 1.25rem 1.5rem;
+//$tab-expand-max: 6;
+//$tab-content-background: $white;
+//$tab-content-border: $light-gray;
+//$tab-content-color: foreground($tab-background, $primary-color);
+//$tab-content-padding: 1rem;
+
+// 33. Thumbnail
+// -------------
+
+//$thumbnail-border: solid 4px $white;
+//$thumbnail-margin-bottom: $global-margin;
+//$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+//$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+//$thumbnail-transition: box-shadow 200ms ease-out;
+//$thumbnail-radius: $global-radius;
+
+// 34. Title Bar
+// -------------
+
+//$titlebar-background: $black;
+//$titlebar-color: $white;
+//$titlebar-padding: 0.5rem;
+//$titlebar-text-font-weight: bold;
+//$titlebar-icon-color: $white;
+//$titlebar-icon-color-hover: $medium-gray;
+//$titlebar-icon-spacing: 0.25rem;
+
+// 35. Tooltip
+// -----------
+
+//$has-tip-font-weight: $global-weight-bold;
+//$has-tip-border-bottom: dotted 1px $dark-gray;
+//$tooltip-background-color: $black;
+//$tooltip-color: $white;
+//$tooltip-padding: 0.75rem;
+//$tooltip-font-size: $small-font-size;
+//$tooltip-pip-width: 0.75rem;
+//$tooltip-pip-height: $tooltip-pip-width * 0.866;
+//$tooltip-radius: $global-radius;
+
+// 36. Top Bar
+// -----------
+
+//$topbar-padding: 0.5rem;
+//$topbar-background: $light-gray;
+//$topbar-submenu-background: $topbar-background;
+//$topbar-title-spacing: 1rem;
+//$topbar-input-width: 200px;
+//$topbar-unstack-breakpoint: medium;
diff --git a/_sass/foundation/typography/_alignment.scss b/_sass/foundation/typography/_alignment.scss
index e4e6fe0c..77ffd617 100644
--- a/_sass/foundation/typography/_alignment.scss
+++ b/_sass/foundation/typography/_alignment.scss
@@ -3,20 +3,20 @@
 // Licensed under MIT Open Source
 
 @mixin foundation-text-alignment {
-    @each $size in $breakpoint-classes {
-      @include breakpoint($size) {
-        @each $align in (left, right, center, justify) {
-          @if $size != 'small' {
-            .#{$size}-text-#{$align} {
-              text-align: $align;
-            }
+  @each $size in $breakpoint-classes {
+    @include breakpoint($size) {
+      @each $align in (left, right, center, justify) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-text-#{$align} {
+            text-align: $align;
           }
-          @else {            
-            .text-#{$align} {
-              text-align: $align;
-            }
+        }
+        @else {
+          .text-#{$align} {
+            text-align: $align;
           }
         }
       }
     }
+  }
 }
diff --git a/_sass/foundation/typography/_base.scss b/_sass/foundation/typography/_base.scss
index 6b828263..55a9b518 100644
--- a/_sass/foundation/typography/_base.scss
+++ b/_sass/foundation/typography/_base.scss
@@ -306,7 +306,9 @@ $abbr-underline: 1px dotted $black !default;
   @each $size, $headers in $header-sizes {
     @include breakpoint($size) {
       @each $header, $font-size in $headers {
-        #{$header} { font-size: rem-calc($font-size); }
+        #{$header} {
+          font-size: rem-calc($font-size);
+        }
       }
     }
   }
@@ -373,7 +375,6 @@ $abbr-underline: 1px dotted $black !default;
     & & {
       margin-#{$global-left}: $list-nested-side-margin;
       margin-bottom: 0;
-      list-style-type: inherit;
     }
   }
 
@@ -434,5 +435,9 @@ $abbr-underline: 1px dotted $black !default;
     background-color: $keystroke-background;
     color: $keystroke-color;
     font-family: $keystroke-font;
+
+    @if has-value($keystroke-radius) {
+      border-radius: $keystroke-radius;
+    }
   }
 }
diff --git a/_sass/foundation/typography/_print.scss b/_sass/foundation/typography/_print.scss
index 244bbcfa..348aad9c 100644
--- a/_sass/foundation/typography/_print.scss
+++ b/_sass/foundation/typography/_print.scss
@@ -2,9 +2,10 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-////
-/// @group typography
-////
+/// If `true`, all elements will have transparent backgrounds when printed, to save on ink.
+/// @type Boolean
+/// @group global
+$print-transparent-backgrounds: true !default;
 
 // scss-lint:disable all
 
@@ -13,7 +14,10 @@
 
   @media print {
     * {
-      background: transparent !important;
+      @if $print-transparent-backgrounds {
+        background: transparent !important;
+      }
+
       color: black !important; // Black prints faster: h5bp.com/s
       box-shadow: none !important;
       text-shadow: none !important;
@@ -45,7 +49,7 @@
     // Prevent page breaks in the middle of a blockquote or preformatted text block
     pre,
     blockquote {
-      border: 1px solid #999;
+      border: 1px solid $dark-gray;
       page-break-inside: avoid;
     }
 
diff --git a/_sass/foundation/util/_breakpoint.scss b/_sass/foundation/util/_breakpoint.scss
index f7e22b64..55bc0299 100644
--- a/_sass/foundation/util/_breakpoint.scss
+++ b/_sass/foundation/util/_breakpoint.scss
@@ -18,6 +18,14 @@ $breakpoints: (
   xxlarge: 1440px,
 ) !default;
 
+$-zf-zero-breakpoint: small !default;
+
+@if nth(map-values($breakpoints),1) != 0 {
+  @error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
+} @else {
+  $-zf-zero-breakpoint: nth(map-keys($breakpoints),1);
+}
+
 /// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
 /// @type List
 $breakpoint-classes: (small medium large) !default;
@@ -25,7 +33,7 @@ $breakpoint-classes: (small medium large) !default;
 /// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.
 ///
 /// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
-@function breakpoint($val: small) {
+@function breakpoint($val: $-zf-zero-breakpoint) {
   // Size or keyword
   $bp: nth($val, 1);
   // Value for max-width media queries
@@ -49,14 +57,7 @@ $breakpoint-classes: (small medium large) !default;
   @if type-of($bp) == 'string' {
     @if map-has-key($breakpoints, $bp) {
       @if $dir == 'only' or $dir == 'down' {
-        $next-bp: -zf-map-next($breakpoints, $bp);
-
-        @if $next-bp == null {
-          $bp-max: null;
-        }
-        @else {
-          $bp-max: $next-bp;
-        }
+        $bp-max: -zf-map-next($breakpoints, $bp);
       }
 
       $bp: map-get($breakpoints, $bp);
@@ -64,6 +65,7 @@ $breakpoint-classes: (small medium large) !default;
     }
     @else {
       $bp: 0;
+      @warn 'breakpoint(): "#{$val}" is not defined in your $breakpoints setting.';
     }
   }
 
@@ -73,39 +75,49 @@ $breakpoint-classes: (small medium large) !default;
     $bp-max: -zf-bp-to-em($bp-max) - (1/16);
   }
 
-  // Skip media query creation if the input is “0 up” or “0 down”
-  @if $bp > 0 or $dir == 'only' {
+  // Conditions to skip media query creation
+  // - It's a named breakpoint that resolved to "0 down" or "0 up"
+  // - It's a numeric breakpoint that resolved to "0 " + anything
+  @if $bp > 0em or $dir == 'only' or $dir == 'down' {
     // `only` ranges use the format `(min-width: n) and (max-width: n)`
     @if $dir == 'only' {
+      // Only named media queries can have an "only" range
       @if $named == true {
-        $str: $str + '(min-width: #{$bp})';
+        // Only use "min-width" if the floor is greater than 0
+        @if $bp > 0em {
+          $str: $str + '(min-width: #{$bp})';
+
+          // Only add "and" to the media query if there's a ceiling
+          @if $bp-max != null {
+            $str: $str + ' and ';
+          }
+        }
 
+        // Only use "max-width" if there's a ceiling
         @if $bp-max != null {
-          $str: $str + ' and (max-width: #{$bp-max})';
+          $str: $str + '(max-width: #{$bp-max})';
         }
       }
       @else {
-        @warn 'Only named media queries can have an `only` range.';
+        @warn 'breakpoint(): Only named media queries can have an `only` range.';
       }
     }
 
     // `down` ranges use the format `(max-width: n)`
     @else if $dir == 'down' {
-      $max: 0;
+      $max: if($named, $bp-max, $bp);
 
-      // For named breakpoints, subtract the breakpoint value by one “pixel”, or 1/16em.
-      @if $named {
-        $max: $bp-max;
-      }
-      @else {
-        $max: $bp;
+      // Skip media query creation if input value is exactly "0 down",
+      // unless the function was called as "small down", in which case it's just "small only"
+      @if $named or $bp > 0em {
+        @if $max != null {
+          $str: $str + '(max-width: #{$max})';
+        }
       }
-
-      $str: $str + '(max-width: #{$max})';
     }
 
     // `up` ranges use the format `(min-width: n)`
-    @else if strip-unit($bp) > 0 {
+    @else if $bp > 0em {
       $str: $str + '(min-width: #{$bp})';
     }
   }
@@ -115,7 +127,7 @@ $breakpoint-classes: (small medium large) !default;
 
 /// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:
 ///  - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.
-///  - If a pixel value is passed, it will be converted to an em value using `$rem-base`.
+///  - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.
 ///  - If a rem value is passed, the unit will be changed to em.
 ///  - If an em value is passed, the value will be used as-is.
 ///
@@ -187,7 +199,76 @@ $breakpoint-classes: (small medium large) !default;
   }
 }
 
-// These styles are applied to <meta> tags, which are read by the Foundation JavaScript
-.foundation-mq {
-  font-family: '#{-zf-bp-serialize($breakpoints)}';
+/// Get a value for a breakpoint from a responsive config map. If the config map has the key `$value`, the exact breakpoint value is returned. If the config map does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.
+/// @access private
+///
+/// @param {Map} $map - Input config map.
+/// @param {Keyword} $value - Breakpoint name to use.
+///
+/// @return {Mixed} The corresponding breakpoint value.
+@function -zf-get-bp-val($map, $value) {
+  // Check if the breakpoint name exists globally
+  @if not map-has-key($breakpoints, $value) {
+    @return null;
+  }
+  // Check if the breakpoint name exists in the local config map
+  @else if map-has-key($map, $value) {
+    // If it does, just return the value
+    @return map-get($map, $value);
+  }
+  // Otherwise, find the next lowest breakpoint and return that value
+  @else {
+    $anchor: null;
+    $found: false;
+
+    @each $key, $val in $breakpoints {
+      @if not $found {
+        @if map-has-key($map, $key) {
+          $anchor: $key;
+        }
+        @if $key == $value {
+          $found: true;
+        }
+      }
+    }
+
+    @return map-get($map, $anchor);
+  }
+}
+
+// Legacy breakpoint variables
+// These will be removed in 6.3
+$small-up: null;
+$small-only: null;
+$medium-up: null;
+$medium-only: null;
+$large-up: null;
+$large-only: null;
+$xlarge-up: null;
+$xlarge-only: null;
+$xxlarge-up: null;
+$xxlarge-only: null;
+
+@if map-has-key($breakpoints, small) {
+  $small-up: screen;
+  $small-only: unquote('screen and #{breakpoint(small only)}');
+}
+
+@if map-has-key($breakpoints, medium) {
+  $medium-up: unquote('screen and #{breakpoint(medium)}');
+  $medium-only: unquote('screen and #{breakpoint(medium only)}');
+}
+
+@if map-has-key($breakpoints, large) {
+  $large-up: unquote('screen and #{breakpoint(large)}');
+  $large-only: unquote('screen and #{breakpoint(large only)}');
+}
+
+@if map-has-key($breakpoints, xlarge) {
+  $xlarge-up: unquote('screen and #{breakpoint(xlarge)}');
+  $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');
+}
+
+@if map-has-key($breakpoints, xxlarge) {
+  $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');
 }
diff --git a/_sass/foundation/util/_color.scss b/_sass/foundation/util/_color.scss
index 74c456b1..a001de2a 100644
--- a/_sass/foundation/util/_color.scss
+++ b/_sass/foundation/util/_color.scss
@@ -39,3 +39,22 @@
   }
   @return scale-color($color, $lightness: $scale);
 }
+
+/// Transfers the colors in the `$foundation-palette` variable into the legacy color variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.
+@mixin add-foundation-colors() {
+  @if map-has-key($foundation-palette, primary) {
+    $primary-color: map-get($foundation-palette, primary) !global;
+  }
+  @if map-has-key($foundation-palette, secondary) {
+    $secondary-color: map-get($foundation-palette, secondary) !global;
+  }
+  @if map-has-key($foundation-palette, success) {
+    $success-color: map-get($foundation-palette, success) !global;
+  }
+  @if map-has-key($foundation-palette, warning) {
+    $warning-color: map-get($foundation-palette, warning) !global;
+  }
+  @if map-has-key($foundation-palette, alert) {
+    $alert-color: map-get($foundation-palette, alert) !global;
+  }
+}
diff --git a/_sass/foundation/util/_flex.scss b/_sass/foundation/util/_flex.scss
new file mode 100644
index 00000000..cf7d3455
--- /dev/null
+++ b/_sass/foundation/util/_flex.scss
@@ -0,0 +1,68 @@
+$-zf-flex-justify: (
+  'left': flex-start,
+  'right': flex-end,
+  'center': center,
+  'justify': space-between,
+  'spaced': space-around,
+);
+
+$-zf-flex-align: (
+  'top': flex-start,
+  'bottom': flex-end,
+  'middle': center,
+  'stretch': stretch,
+);
+
+/// Enables flexbox by adding `display: flex` to the element.
+@mixin flex {
+  display: flex;
+}
+
+/// Horizontally or vertically aligns the items within a flex container.
+///
+/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.
+/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
+@mixin flex-align($x: null, $y: null) {
+  @if $x {
+    @if map-has-key($-zf-flex-justify, $x) {
+      $x: map-get($-zf-flex-justify, $x);
+    }
+    @else {
+      @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.'
+    }
+  }
+
+  @if $y {
+    @if map-has-key($-zf-flex-align, $y) {
+      $y: map-get($-zf-flex-align, $y);
+    }
+    @else {
+      @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.'
+    }
+  }
+
+  justify-content: $x;
+  align-items: $y;
+}
+
+/// Vertically align a single column within a flex row. Apply this mixin to a flex column.
+///
+/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
+@mixin flex-align-self($y: null) {
+  @if $y {
+    @if map-has-key($-zf-flex-align, $y) {
+      $y: map-get($-zf-flex-align, $y);
+    }
+    @else {
+      @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.'
+    }
+  }
+
+  align-self: $y;
+}
+
+/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.
+/// @param {Number} $order [0] - Order number to apply.
+@mixin flex-order($order: 0) {
+  order: $order;
+}
diff --git a/_sass/foundation/util/_mixins.scss b/_sass/foundation/util/_mixins.scss
index fdd15bb1..fb0768ed 100644
--- a/_sass/foundation/util/_mixins.scss
+++ b/_sass/foundation/util/_mixins.scss
@@ -10,7 +10,7 @@
 ///
 /// @param {Number} $triangle-size - Width of the triangle.
 /// @param {Color} $triangle-color - Color of the triangle.
-/// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `top`, `right`, `bottom`, or `left`.
+/// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `up`, `right`, `down`, or `left`.
 @mixin css-triangle(
   $triangle-size,
   $triangle-color,
@@ -25,32 +25,36 @@
   @if ($triangle-direction == down) {
     border-color: $triangle-color transparent transparent;
     border-top-style: solid;
+    border-bottom-width: 0;
   }
   @if ($triangle-direction == up) {
     border-color: transparent transparent $triangle-color;
     border-bottom-style: solid;
+    border-top-width: 0;
   }
   @if ($triangle-direction == right) {
     border-color: transparent transparent transparent $triangle-color;
     border-left-style: solid;
+    border-right-width: 0;
   }
   @if ($triangle-direction == left) {
     border-color: transparent $triangle-color transparent transparent;
     border-right-style: solid;
+    border-left-width: 0;
   }
 }
 
 /// Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing. <div class="docs-example-burger"></div>
 ///
-/// @param {Color} $color - Color to use for the icon.
-/// @param {Color} $color-hover - Color to use when the icon is hovered over.
-/// @param {Number} $width - Width of the icon.
-/// @param {Number} $height - Height of the icon.
-/// @param {Number} $weight - Height of individual bars in the icon.
-/// @param {Number} $bars - Number of bars in the icon.
+/// @param {Color} $color [$black] - Color to use for the icon.
+/// @param {Color} $color-hover [$dark-gray] - Color to use when the icon is hovered over.
+/// @param {Number} $width [20px] - Width of the icon.
+/// @param {Number} $height [16px] - Height of the icon.
+/// @param {Number} $weight [2px] - Height of individual bars in the icon.
+/// @param {Number} $bars [3] - Number of bars in the icon.
 @mixin hamburger(
-  $color: black,
-  $color-hover: #666,
+  $color: $black,
+  $color-hover: $dark-gray,
   $width: 20px,
   $height: 16px,
   $weight: 2px,
@@ -110,27 +114,33 @@
 ///
 /// @param {Color} $color [$black] - Color to use for the triangle.
 @mixin background-triangle($color: $black) {
-  $rgb: 'rgb(#{red($color)}, #{green($color)}, #{blue($color)})';
+  $rgb: 'rgb%28#{red($color)}, #{green($color)}, #{blue($color)}%29';
 
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #{$rgb}'></polygon></svg>");
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: #{$rgb}"></polygon></svg>');
 
   @media screen and (min-width:0\0) {
-    @if lightness($color) < 50% {
+    @if lightness($color) < 60% {
+      // White triangle
       background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');
     }
     @else {
+      // Black triangle
       background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNrEllsOhCAMRVszC9IlzU7KCmVHTJsoMWYMUtpyv9BgbuXQB5ZSdgBYYY4ycgBivk8KYFsQMfMiTTBP4o3nUzCKzOabLJbLy2/g31evGkAginR4/ZegKH5qX3bJCscA3t0x3kgO5tQFyhhFf50xRqFLbyMUNJQzgyjGS/wgCpvKqkRBpuWrE4V9d+1E4dPUXqIg107SQOE/2DRQxMwTDygIInVDET9T3lCoj/6j/VCmGjZOl2lKpZ8AAwDQP7zIimDGFQAAAABJRU5ErkJggg==');
     }
   }
 }
 
 /// Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.
+/// The clearfix is augmented with specific styles to prevent borders in flexbox environments
 /// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack
+/// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix
 @mixin clearfix {
   &::before,
   &::after {
     content: ' ';
     display: table;
+    flex-basis: 0;
+    order: 1;
   }
 
   &::after {
@@ -203,8 +213,21 @@
   transform: translate(-50%, -50%);
 }
 
-// Remove in 6.1.
-// Vertically centers an element using `transform`.
-@mixin v-align-middle {
-  @include vertical-center;
+/// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.
+///
+/// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.
+@mixin -zf-each-breakpoint($small: true) {
+  $map: $breakpoint-classes;
+
+  @if not $small {
+    $map: map-remove($map, $-zf-zero-breakpoint);
+  }
+
+  @each $size in $map {
+    $-zf-size: $size !global;
+
+    @include breakpoint($size) {
+      @content;
+    }
+  }
 }
diff --git a/_sass/foundation/util/_unit.scss b/_sass/foundation/util/_unit.scss
index a87f07f2..bb96c98c 100644
--- a/_sass/foundation/util/_unit.scss
+++ b/_sass/foundation/util/_unit.scss
@@ -6,12 +6,9 @@
 /// @group functions
 ////
 
-// scss-lint:disable ZeroUnit
+$global-font-size: 100% !default;
 
-/// Defines the base font size of the page, which is the value `1rem` is equal to.
-/// @type Number
-/// @group global
-$rem-base: 16px !default;
+// scss-lint:disable ZeroUnit
 
 /// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
 ///
@@ -25,15 +22,22 @@ $rem-base: 16px !default;
 /// Converts one or more pixel values into matching rem values.
 ///
 /// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
-/// @param {Number} $base [$rem-base] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px.
+/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
 ///
 /// @returns {List} A list of converted values.
-@function rem-calc($values, $base: $rem-base) {
+@function rem-calc($values, $base: null) {
   $rem-values: ();
   $count: length($values);
 
+  // If no base is defined, defer to the global font size
   @if $base == null {
-    $base: $rem-base;
+    $base: $global-font-size;
+  }
+
+  // If the base font size is a %, then multiply it by 16px
+  // This is because 100% font size = 16px in most all browsers
+  @if unit($base) == '%' {
+    $base: ($base / 100%) * 16px;
   }
 
   @if $count == 1 {
@@ -51,26 +55,36 @@ $rem-base: 16px !default;
 @function -zf-bp-to-em($value) {
   // Pixel and unitless values are converted to rems
   @if unit($value) == 'px' or unitless($value) {
-    $value: rem-calc($value);
+    $value: rem-calc($value, $base: 16px);
   }
 
   // Then the value is converted to ems
   @return strip-unit($value) * 1em;
 }
 
-/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$rem-base` variable.
+/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
 /// @access private
 ///
 /// @param {Number} $value - Pixel value to convert.
-/// @param {Number} $base [$rem-base] - Base for pixel conversion.
+/// @param {Number} $base [null] - Base for pixel conversion.
 ///
 /// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
-@function -zf-to-rem($value, $base: $rem-base) {
+@function -zf-to-rem($value, $base: null) {
+  // Check if the value is a number
+  @if type-of($value) != 'number' {
+    @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
+    @return $value;
+  }
+
   // Calculate rem if units for $value is not rem
-  @if (unit($value) != 'rem') {
+  @if unit($value) != 'rem' {
     $value: strip-unit($value) / strip-unit($base) * 1rem;
   }
+
   // Turn 0rem into 0
-  @if ($value == 0rem) { $value: 0; }
+  @if $value == 0rem {
+    $value: 0;
+  }
+
   @return $value;
 }
diff --git a/_sass/foundation/util/_util.scss b/_sass/foundation/util/_util.scss
index 5ab38d25..c38b4254 100644
--- a/_sass/foundation/util/_util.scss
+++ b/_sass/foundation/util/_util.scss
@@ -2,14 +2,10 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-// Utilities
 @import 'unit';
 @import 'value';
 @import 'color';
 @import 'selector';
-
-// Libraries
+@import 'flex';
 @import 'breakpoint';
-
-// Mixins
 @import 'mixins';
diff --git a/_sass/foundation/util/_value.scss b/_sass/foundation/util/_value.scss
index 54c5443b..54e562b0 100644
--- a/_sass/foundation/util/_value.scss
+++ b/_sass/foundation/util/_value.scss
@@ -6,7 +6,7 @@
 /// @group functions
 ////
 
-/// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list. **This function was originally named `hasvalue()`. The old name for the function will be removed in Foundation 6.1.**
+/// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list.
 ///
 /// @param {Mixed} $val - Value to check.
 ///
@@ -24,12 +24,6 @@
   @return true;
 }
 
-// Remove this in 6.1.
-@function hasvalue($val) {
-  @warn 'The function hasvalue() was renamed to has-value(). The old function name will be removed in Foundation 6.1.';
-  @return has-value($val);
-}
-
 /// Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using a shorthand format.
 ///
 /// @param {List|Number} $val - Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em"
@@ -95,38 +89,19 @@
     style: solid,
     color: #000,
   );
-  @return map-get($defaults, $elem);
-}
 
-/// Calculates x^y, where x is `$base` and y is `$power`.
-/// @access private
-///
-/// @param {Number} $base - Base number (x).
-/// @param {Number} $power - Exponent (y).
-@function pow($base, $power) {
-  @if $power == 0 { @return 1; }
-  @return $base * pow($base, $power - 1);
+  @return map-get($defaults, $elem);
 }
 
-// TODO: Remove this (it's used by the grid but is overkill)
-/// Given a user-defined list of keywords and a list of possible keywords, find the ones that were passed in.
-/// @access private
-///
-/// @param {List} $opts - List of values to find keywords in.
-/// @param {List} $seeking - List of all possible keywords.
+/// Finds a value in a nested map.
+/// @link https://css-tricks.com/snippets/sass/deep-getset-maps/ Deep Get/Set in Maps
 ///
-/// @returns {Map} A map of all keywords in $seeking. If a keyword was found in $opts, its value is true, otherwise false.
-@function -zf-get-options($opts, $seeking) {
-  @if type-of($opts) != 'list' {
-    $opts: ($opts);
+/// @param {Map} $map - Map to pull a value from.
+/// @param {String} $keys... - Keys to use when looking for a value.
+/// @returns {Mixed} The value found in the map.
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
   }
-
-  $map: ();
-  @each $keyword in $seeking {
-    $val: if(index($opts, $keyword) != null, true, false);
-    $item: ($keyword: $val);
-    $map: map-merge($map, $item);
-  }
-
   @return $map;
 }
diff --git a/_sass/foundation/vendor/normalize.scss b/_sass/foundation/vendor/normalize.scss
deleted file mode 100644
index 5e5e3c89..00000000
--- a/_sass/foundation/vendor/normalize.scss
+++ /dev/null
@@ -1,424 +0,0 @@
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
-
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS and IE text size adjust after device orientation change,
- *    without disabling user zoom.
- */
-
-html {
-  font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/**
- * Remove default margin.
- */
-
-body {
-  margin: 0;
-}
-
-/* HTML5 display definitions
-   ========================================================================== */
-
-/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-
-/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
-}
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
- */
-
-[hidden],
-template {
-  display: none;
-}
-
-/* Links
-   ========================================================================== */
-
-/**
- * Remove the gray background color from active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * Improve readability of focused elements when they are also in an
- * active/hover state.
- */
-
-a:active,
-a:hover {
-  outline: 0;
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-
-b,
-strong {
-  font-weight: bold;
-}
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/**
- * Address styling not present in IE 8/9.
- */
-
-mark {
-  background: #ff0;
-  color: #000;
-}
-
-/**
- * Address inconsistent and variable font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove border when inside `a` element in IE 8/9/10.
- */
-
-img {
-  border: 0;
-}
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * Address margin not present in IE 8/9 and Safari.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * Address differences between Firefox and other browsers.
- */
-
-hr {
-  box-sizing: content-box;
-  height: 0;
-}
-
-/**
- * Contain overflow in all browsers.
- */
-
-pre {
-  overflow: auto;
-}
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-
-/**
- * 1. Correct color not being inherited.
- *    Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit; /* 1 */
-  font: inherit; /* 2 */
-  margin: 0; /* 3 */
-}
-
-/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-
-button {
-  overflow: visible;
-}
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-
-button,
-select {
-  text-transform: none;
-}
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
- */
-
-button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-  cursor: pointer; /* 3 */
-}
-
-/**
- * Re-set default cursor for disabled elements.
- */
-
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-
-input {
-  line-height: normal;
-}
-
-/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
- */
-
-input[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  box-sizing: content-box; /* 2 */
-}
-
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * Define consistent border, margin, and padding.
- */
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-
-legend {
-  border: 0; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
-/* Tables
-   ========================================================================== */
-
-/**
- * Remove most spacing between table cells.
- */
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
-}