From 270ed816657548defa328ea51a10658945bb5d86 Mon Sep 17 00:00:00 2001
From: Karan Khanna <karan@khanna.io>
Date: Wed, 18 Nov 2020 12:22:53 +0530
Subject: [PATCH 1/5] update: what-input latest release update

---
 .../static/libs/what-input/.gitattributes                    | 1 -
 .../static/libs/what-input/what-input.min.js                 | 5 +++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 delete mode 100644 {{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/.gitattributes

diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/.gitattributes b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/.gitattributes
deleted file mode 100644
index 36fe3a5315..0000000000
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/.gitattributes
+++ /dev/null
@@ -1 +0,0 @@
-* linguist-vendored
\ No newline at end of file
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/what-input.min.js b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/what-input.min.js
index f99e7b7058..70188dddf3 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/what-input.min.js
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/what-input.min.js
@@ -1,7 +1,8 @@
 /**
  * what-input - A global utility for tracking the current input method (mouse, keyboard or touch).
- * @version v4.1.6
+ * @version v5.2.10
  * @link https://github.com/ten1seven/what-input
  * @license MIT
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("whatInput",[],t):"object"==typeof exports?exports.whatInput=t():e.whatInput=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t){"use strict";e.exports=function(){var e="initial",t=null,n=document.documentElement,o=["input","select","textarea"],i=[],r=[16,17,18,91,93],u={keydown:"keyboard",mousedown:"mouse",mousemove:"mouse",MSPointerDown:"pointer",MSPointerMove:"pointer",pointerdown:"pointer",pointermove:"pointer",touchstart:"touch"},d=[],s=!1,a=!1,c={x:null,y:null},p={2:"touch",3:"touch",4:"mouse"},f=!1;try{var v=Object.defineProperty({},"passive",{get:function(){f=!0}});window.addEventListener("test",null,v)}catch(e){}var m=function(){window.PointerEvent?(n.addEventListener("pointerdown",w),n.addEventListener("pointermove",h)):window.MSPointerEvent?(n.addEventListener("MSPointerDown",w),n.addEventListener("MSPointerMove",h)):(n.addEventListener("mousedown",w),n.addEventListener("mousemove",h),"ontouchstart"in window&&(n.addEventListener("touchstart",y),n.addEventListener("touchend",y))),n.addEventListener(L(),h,!!f&&{passive:!0}),n.addEventListener("keydown",w)},w=function(n){if(!s){var i=n.which,d=u[n.type];if("pointer"===d&&(d=E(n)),e!==d||t!==d){var a=document.activeElement,c=!1;a&&a.nodeName&&-1===o.indexOf(a.nodeName.toLowerCase())&&(c=!0),("touch"===d||"mouse"===d||"keyboard"===d&&i&&c&&-1===r.indexOf(i))&&(e=t=d,l())}}},l=function(){n.setAttribute("data-whatinput",e),n.setAttribute("data-whatintent",e),-1===d.indexOf(e)&&(d.push(e),n.className+=" whatinput-types-"+e),x("input")},h=function(e){if(c.x!==e.screenX||c.y!==e.screenY?(a=!1,c.x=e.screenX,c.y=e.screenY):a=!0,!s&&!a){var o=u[e.type];"pointer"===o&&(o=E(e)),t!==o&&(t=o,n.setAttribute("data-whatintent",t),x("intent"))}},y=function(e){"touchstart"===e.type?(s=!1,w(e)):s=!0},x=function(e){for(var n=0,o=i.length;n<o;n++)i[n].type===e&&i[n].function.call(void 0,t)},E=function(e){return"number"==typeof e.pointerType?p[e.pointerType]:"pen"===e.pointerType?"touch":e.pointerType},L=function(){return"onwheel"in document.createElement("div")?"wheel":void 0!==document.onmousewheel?"mousewheel":"DOMMouseScroll"};return"addEventListener"in window&&Array.prototype.indexOf&&function(){u[L()]="mouse",m(),l()}(),{ask:function(n){return"loose"===n?t:e},types:function(){return d},ignoreKeys:function(e){r=e},onChange:function(e,t){i.push({function:e,type:t})}}}()}])});
\ No newline at end of file
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("whatInput",[],t):"object"==typeof exports?exports.whatInput=t():e.whatInput=t()}(this,function(){return i={},n.m=o=[function(e,t){"use strict";e.exports=function(){if("undefined"==typeof document||"undefined"==typeof window)return{ask:function(){return"initial"},element:function(){return null},ignoreKeys:function(){},specificKeys:function(){},registerOnChange:function(){},unRegisterOnChange:function(){}};var t=document.documentElement,n=null,s="initial",u=s,o=Date.now(),i="false",d=["button","input","select","textarea"],r=[],c=[16,17,18,91,93],w=[],p={keydown:"keyboard",keyup:"keyboard",mousedown:"mouse",mousemove:"mouse",MSPointerDown:"pointer",MSPointerMove:"pointer",pointerdown:"pointer",pointermove:"pointer",touchstart:"touch",touchend:"touch"},a=!1,f={x:null,y:null},l={2:"touch",3:"touch",4:"mouse"},m=!1;try{var e=Object.defineProperty({},"passive",{get:function(){m=!0}});window.addEventListener("test",null,e)}catch(e){}var h=function(){var e=!!m&&{passive:!0};document.addEventListener("DOMContentLoaded",v),window.PointerEvent?(window.addEventListener("pointerdown",y),window.addEventListener("pointermove",E)):window.MSPointerEvent?(window.addEventListener("MSPointerDown",y),window.addEventListener("MSPointerMove",E)):(window.addEventListener("mousedown",y),window.addEventListener("mousemove",E),"ontouchstart"in window&&(window.addEventListener("touchstart",y,e),window.addEventListener("touchend",y))),window.addEventListener(O(),E,e),window.addEventListener("keydown",y),window.addEventListener("keyup",y),window.addEventListener("focusin",L),window.addEventListener("focusout",b)},v=function(){if(i=!(t.getAttribute("data-whatpersist")||"false"===document.body.getAttribute("data-whatpersist")))try{window.sessionStorage.getItem("what-input")&&(s=window.sessionStorage.getItem("what-input")),window.sessionStorage.getItem("what-intent")&&(u=window.sessionStorage.getItem("what-intent"))}catch(e){}g("input"),g("intent")},y=function(e){var t=e.which,n=p[e.type];"pointer"===n&&(n=S(e));var o=!w.length&&-1===c.indexOf(t),i=w.length&&-1!==w.indexOf(t),r="keyboard"===n&&t&&(o||i)||"mouse"===n||"touch"===n;if(M(n)&&(r=!1),r&&s!==n&&(x("input",s=n),g("input")),r&&u!==n){var a=document.activeElement;a&&a.nodeName&&(-1===d.indexOf(a.nodeName.toLowerCase())||"button"===a.nodeName.toLowerCase()&&!C(a,"form"))&&(x("intent",u=n),g("intent"))}},g=function(e){t.setAttribute("data-what"+e,"input"===e?s:u),k(e)},E=function(e){var t=p[e.type];"pointer"===t&&(t=S(e)),A(e),(!a&&!M(t)||a&&"wheel"===e.type||"mousewheel"===e.type||"DOMMouseScroll"===e.type)&&u!==t&&(x("intent",u=t),g("intent"))},L=function(e){e.target.nodeName?(n=e.target.nodeName.toLowerCase(),t.setAttribute("data-whatelement",n),e.target.classList&&e.target.classList.length&&t.setAttribute("data-whatclasses",e.target.classList.toString().replace(" ",","))):b()},b=function(){n=null,t.removeAttribute("data-whatelement"),t.removeAttribute("data-whatclasses")},x=function(e,t){if(i)try{window.sessionStorage.setItem("what-"+e,t)}catch(e){}},S=function(e){return"number"==typeof e.pointerType?l[e.pointerType]:"pen"===e.pointerType?"touch":e.pointerType},M=function(e){var t=Date.now(),n="mouse"===e&&"touch"===s&&t-o<200;return o=t,n},O=function(){return"onwheel"in document.createElement("div")?"wheel":void 0!==document.onmousewheel?"mousewheel":"DOMMouseScroll"},k=function(e){for(var t=0,n=r.length;t<n;t++)r[t].type===e&&r[t].fn.call(void 0,"input"===e?s:u)},A=function(e){f.x!==e.screenX||f.y!==e.screenY?(a=!1,f.x=e.screenX,f.y=e.screenY):a=!0},C=function(e,t){var n=window.Element.prototype;if(n.matches||(n.matches=n.msMatchesSelector||n.webkitMatchesSelector),n.closest)return e.closest(t);do{if(e.matches(t))return e;e=e.parentElement||e.parentNode}while(null!==e&&1===e.nodeType);return null};return"addEventListener"in window&&Array.prototype.indexOf&&(p[O()]="mouse",h()),{ask:function(e){return"intent"===e?u:s},element:function(){return n},ignoreKeys:function(e){c=e},specificKeys:function(e){w=e},registerOnChange:function(e,t){r.push({fn:e,type:t||"input"})},unRegisterOnChange:function(e){var t=function(e){for(var t=0,n=r.length;t<n;t++)if(r[t].fn===e)return t}(e);!t&&0!==t||r.splice(t,1)},clearStorage:function(){window.sessionStorage.clear()}}}()}],n.c=i,n.p="",n(0);function n(e){if(i[e])return i[e].exports;var t=i[e]={exports:{},id:e,loaded:!1};return o[e].call(t.exports,t,t.exports,n),t.loaded=!0,t.exports}var o,i});
+//# sourceMappingURL=what-input.min.js.map

From 6f200fb29e3499ac83a2eb998ec59a9cd96717aa Mon Sep 17 00:00:00 2001
From: Karan Khanna <karan@khanna.io>
Date: Wed, 18 Nov 2020 12:23:08 +0530
Subject: [PATCH 2/5] update:bump to version 6.6.3

---
 .../libs/foundation-sites/.gitattributes      |   1 -
 .../normalize-scss/sass/_normalize.scss       |   3 -
 .../sass/normalize/_import-now.scss           |  11 -
 .../sass/normalize/_normalize-mixin.scss      | 676 ------------------
 .../sass/normalize/_variables.scss            |  36 -
 .../sass/normalize/_vertical-rhythm.scss      |  61 --
 .../libs/foundation-sites/scss/_global.scss   |  29 +-
 .../scss/components/_accordion-menu.scss      |   9 +-
 .../scss/components/_accordion.scss           |  17 +-
 .../scss/components/_badge.scss               |   4 +-
 .../scss/components/_breadcrumbs.scss         |  18 +-
 .../scss/components/_button-group.scss        |  97 ++-
 .../scss/components/_button.scss              | 251 ++++---
 .../scss/components/_callout.scss             |  26 +-
 .../scss/components/_card.scss                |   8 +-
 .../scss/components/_close-button.scss        |  35 +-
 .../scss/components/_drilldown.scss           |  16 +-
 .../scss/components/_dropdown-menu.scss       |  29 +-
 .../scss/components/_dropdown.scss            |  15 +-
 .../scss/components/_flex.scss                |  14 +-
 .../scss/components/_float.scss               |   4 +-
 .../scss/components/_label.scss               |   4 +-
 .../scss/components/_media-object.scss        |  70 +-
 .../scss/components/_menu.scss                |  14 +-
 .../scss/components/_off-canvas.scss          |  19 +-
 .../scss/components/_orbit.scss               |   5 +-
 .../scss/components/_pagination.scss          |  16 +-
 .../scss/components/_progress-bar.scss        |   5 +-
 .../scss/components/_responsive-embed.scss    |  17 +-
 .../scss/components/_reveal.scss              |  37 +-
 .../scss/components/_slider.scss              |   4 +-
 .../scss/components/_sticky.scss              |   4 +-
 .../scss/components/_switch.scss              |  18 +-
 .../scss/components/_table.scss               |  14 +-
 .../scss/components/_tabs.scss                |   9 +-
 .../scss/components/_thumbnail.scss           |   6 +-
 .../scss/components/_title-bar.scss           |   4 +-
 .../scss/components/_tooltip.scss             |   4 +-
 .../scss/components/_top-bar.scss             |   4 +-
 .../scss/components/_visibility.scss          |  11 +-
 .../scss/forms/_checkbox.scss                 |   4 +-
 .../foundation-sites/scss/forms/_error.scss   |   5 +-
 .../scss/forms/_fieldset.scss                 |   4 +-
 .../foundation-sites/scss/forms/_forms.scss   |   4 +-
 .../scss/forms/_help-text.scss                |   4 +-
 .../scss/forms/_input-group.scss              |  24 +-
 .../foundation-sites/scss/forms/_label.scss   |   4 +-
 .../foundation-sites/scss/forms/_meter.scss   |  14 +-
 .../scss/forms/_progress.scss                 |  16 +-
 .../foundation-sites/scss/forms/_range.scss   |  14 +-
 .../foundation-sites/scss/forms/_select.scss  |   8 +-
 .../foundation-sites/scss/forms/_text.scss    |  18 +-
 .../foundation-sites/scss/foundation.scss     | 144 ++--
 .../foundation-sites/scss/grid/_classes.scss  |  41 +-
 .../foundation-sites/scss/grid/_column.scss   |  44 +-
 .../scss/grid/_flex-grid.scss                 |   5 +-
 .../foundation-sites/scss/grid/_grid.scss     |   4 +-
 .../foundation-sites/scss/grid/_gutter.scss   |  19 +-
 .../foundation-sites/scss/grid/_layout.scss   |   4 +-
 .../foundation-sites/scss/grid/_position.scss |  36 +-
 .../libs/foundation-sites/scss/grid/_row.scss |   4 +-
 .../foundation-sites/scss/grid/_size.scss     |   4 +-
 .../scss/prototype/_arrow.scss                |   4 +-
 .../scss/prototype/_border-box.scss           |   4 +-
 .../scss/prototype/_border-none.scss          |   4 +-
 .../scss/prototype/_bordered.scss             |   4 +-
 .../foundation-sites/scss/prototype/_box.scss |   4 +-
 .../scss/prototype/_display.scss              |   4 +-
 .../scss/prototype/_font-styling.scss         |   4 +-
 .../scss/prototype/_list-style-type.scss      |   4 +-
 .../scss/prototype/_overflow.scss             |   4 +-
 .../scss/prototype/_position.scss             |   4 +-
 .../scss/prototype/_prototype.scss            |   4 +-
 .../scss/prototype/_relation.scss             |   2 +-
 .../scss/prototype/_rotate.scss               |   4 +-
 .../scss/prototype/_rounded.scss              |  11 +-
 .../scss/prototype/_separator.scss            |   4 +-
 .../scss/prototype/_shadow.scss               |   4 +-
 .../scss/prototype/_sizing.scss               |   4 +-
 .../scss/prototype/_spacing.scss              | 223 +++---
 .../scss/prototype/_text-decoration.scss      |   4 +-
 .../scss/prototype/_text-transformation.scss  |   4 +-
 .../scss/prototype/_text-utilities.scss       |   4 +-
 .../scss/settings/_settings.scss              |  56 +-
 .../scss/typography/_alignment.scss           |   4 +-
 .../scss/typography/_base.scss                |  75 +-
 .../scss/typography/_helpers.scss             | 106 ++-
 .../scss/typography/_print.scss               |  18 +-
 .../scss/typography/_typography.scss          |   4 +-
 .../scss/util/_breakpoint.scss                | 291 +++++---
 .../foundation-sites/scss/util/_color.scss    |  16 +-
 .../scss/util/_direction.scss                 |   6 +-
 .../foundation-sites/scss/util/_flex.scss     |  19 +-
 .../foundation-sites/scss/util/_math.scss     |  79 +-
 .../foundation-sites/scss/util/_mixins.scss   | 120 +++-
 .../foundation-sites/scss/util/_selector.scss |   4 +-
 .../scss/util/_typography.scss                |   4 +-
 .../foundation-sites/scss/util/_unit.scss     |  10 +-
 .../foundation-sites/scss/util/_util.scss     |   4 +-
 .../foundation-sites/scss/util/_value.scss    |  44 +-
 .../scss/vendor/normalize.scss                | 281 ++++++++
 .../foundation-sites/scss/xy-grid/_cell.scss  | 277 ++++---
 .../scss/xy-grid/_classes.scss                |  99 +--
 .../scss/xy-grid/_collapse.scss               |  11 +-
 .../foundation-sites/scss/xy-grid/_frame.scss |   3 +-
 .../foundation-sites/scss/xy-grid/_grid.scss  |   8 +-
 .../scss/xy-grid/_gutters.scss                |  10 +-
 .../scss/xy-grid/_layout.scss                 |  23 +-
 .../scss/xy-grid/_position.scss               |  45 +-
 .../scss/xy-grid/_xy-grid.scss                |   4 +-
 110 files changed, 2078 insertions(+), 1900 deletions(-)
 delete mode 100644 {{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/.gitattributes
 delete mode 100644 {{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/_normalize.scss
 delete mode 100644 {{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_import-now.scss
 delete mode 100644 {{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss
 delete mode 100644 {{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_variables.scss
 delete mode 100644 {{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss
 create mode 100644 {{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/vendor/normalize.scss

diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/.gitattributes b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/.gitattributes
deleted file mode 100644
index 36fe3a5315..0000000000
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/.gitattributes
+++ /dev/null
@@ -1 +0,0 @@
-* linguist-vendored
\ No newline at end of file
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/_normalize.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/_normalize.scss
deleted file mode 100644
index fd669eb9bc..0000000000
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/_normalize.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'normalize/variables';
-@import 'normalize/vertical-rhythm';
-@import 'normalize/normalize-mixin';
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_import-now.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_import-now.scss
deleted file mode 100644
index aac5d2b698..0000000000
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_import-now.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// Import Now
-//
-// If you import this module directly, it will immediately output all the CSS
-// needed to normalize default HTML elements across all browsers.
-//
-// ```
-// @import "normalize/import-now";
-// ```
-
-@import '../normalize';
-@include normalize();
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss
deleted file mode 100644
index 70a8d3d371..0000000000
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss
+++ /dev/null
@@ -1,676 +0,0 @@
-// Helper function for the normalize() mixin.
-@function _normalize-include($section, $exclude: null) {
-  // Initialize the global variables needed by this function.
-  @if not global_variable_exists(_normalize-include) {
-    $_normalize-include: () !global;
-    $_normalize-exclude: () !global;
-  }
-  // Since we are given 2 parameters, set the global variables.
-  @if $exclude != null {
-    $include: $section;
-    // Sass doesn't have static variables, so the work-around is to stuff these
-    // values into global variables so we can access them in future calls.
-    $_normalize-include: if(type-of($include) == 'list', $include, ($include)) !global;
-    $_normalize-exclude: if(type-of($exclude) == 'list', $exclude, ($exclude)) !global;
-    @return true;
-  }
-
-  // Check if $section is in the $include list.
-  @if index($_normalize-include, $section) {
-    @return true;
-  }
-  // If $include is set to (all), make sure $section is not in $exclude.
-  @else if not index($_normalize-exclude, $section) and index($_normalize-include, all) {
-    @return true;
-  }
-  @return false;
-}
-
-@mixin normalize($include: (all), $exclude: ()) {
-  // Initialize the helper function by passing it this mixin's parameters.
-  $init: _normalize-include($include, $exclude);
-
-  // If we've customized any font variables, we'll need extra properties.
-  @if $base-font-size != 16px
-    or $base-line-height != 24px
-    or $base-unit != 'em'
-    or $h1-font-size != 2    * $base-font-size
-    or $h2-font-size != 1.5  * $base-font-size
-    or $h3-font-size != 1.17 * $base-font-size
-    or $h4-font-size != 1    * $base-font-size
-    or $h5-font-size != 0.83 * $base-font-size
-    or $h6-font-size != 0.67 * $base-font-size {
-    $normalize-vertical-rhythm: true !global;
-  }
-
-  /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
-
-  @if _normalize-include(document) {
-    /* Document
-       ========================================================================== */
-
-    /**
-     * 1. Change the default font family in all browsers (opinionated).
-     * 2. Correct the line height in all browsers.
-     * 3. Prevent adjustments of font size after orientation changes in
-     *    IE on Windows Phone and in iOS.
-     */
-
-    html {
-      font-family: $base-font-family; /* 1 */
-      @if $normalize-vertical-rhythm {
-        // Correct old browser bug that prevented accessible resizing of text
-        // when root font-size is set with px or em.
-        font-size: ($base-font-size / 16px) * 100%;
-        line-height: ($base-line-height / $base-font-size) * 1em; /* 2 */
-      }
-      @else {
-        line-height: 1.15; /* 2 */
-      }
-      -ms-text-size-adjust: 100%; /* 3 */
-      -webkit-text-size-adjust: 100%; /* 3 */
-    }
-  }
-
-  @if _normalize-include(sections) {
-    /* Sections
-       ========================================================================== */
-
-    /**
-     * Remove the margin in all browsers (opinionated).
-     */
-
-    body {
-      margin: 0;
-    }
-
-    /**
-     * Add the correct display in IE 9-.
-     */
-
-    article,
-    aside,
-    footer,
-    header,
-    nav,
-    section {
-      display: block;
-    }
-
-    /**
-     * Correct the font size and margin on `h1` elements within `section` and
-     * `article` contexts in Chrome, Firefox, and Safari.
-     */
-
-    h1 {
-      @include normalize-font-size($h1-font-size);
-      @if $normalize-vertical-rhythm {
-        @include normalize-line-height($h1-font-size);
-      }
-
-      @if $normalize-vertical-rhythm {
-        /* Set 1 unit of vertical rhythm on the top and bottom margins. */
-        @include normalize-margin(1 0, $h1-font-size);
-      }
-      @else {
-        margin: 0.67em 0;
-      }
-    }
-
-    @if $normalize-vertical-rhythm {
-      h2 {
-        @include normalize-font-size($h2-font-size);
-        @include normalize-line-height($h2-font-size);
-        @include normalize-margin(1 0, $h2-font-size);
-      }
-
-      h3 {
-        @include normalize-font-size($h3-font-size);
-        @include normalize-line-height($h3-font-size);
-        @include normalize-margin(1 0, $h3-font-size);
-      }
-
-      h4 {
-        @include normalize-font-size($h4-font-size);
-        @include normalize-line-height($h4-font-size);
-        @include normalize-margin(1 0, $h4-font-size);
-      }
-
-      h5 {
-        @include normalize-font-size($h5-font-size);
-        @include normalize-line-height($h5-font-size);
-        @include normalize-margin(1 0, $h5-font-size);
-      }
-
-      h6 {
-        @include normalize-font-size($h6-font-size);
-        @include normalize-line-height($h6-font-size);
-        @include normalize-margin(1 0, $h6-font-size);
-      }
-    }
-  }
-
-  @if _normalize-include(grouping) {
-    /* Grouping content
-       ========================================================================== */
-
-    @if $normalize-vertical-rhythm {
-      /**
-       * Set 1 unit of vertical rhythm on the top and bottom margin.
-       */
-
-      blockquote {
-        @include normalize-margin(1 $indent-amount);
-      }
-
-      dl,
-      ol,
-      ul {
-        @include normalize-margin(1 0);
-      }
-
-      /**
-       * Turn off margins on nested lists.
-       */
-
-      ol,
-      ul {
-        ol,
-        ul {
-          margin: 0;
-        }
-      }
-
-      dd {
-        margin: 0 0 0 $indent-amount;
-      }
-
-      ol,
-      ul {
-        padding: 0 0 0 $indent-amount;
-      }
-    }
-
-    /**
-     * Add the correct display in IE 9-.
-     */
-
-    figcaption,
-    figure {
-      display: block;
-    }
-
-    /**
-     * Add the correct margin in IE 8.
-     */
-
-    figure {
-      @if $normalize-vertical-rhythm {
-        @include normalize-margin(1 $indent-amount);
-      }
-      @else {
-        margin: 1em $indent-amount;
-      }
-    }
-
-    /**
-     * 1. Add the correct box sizing in Firefox.
-     * 2. Show the overflow in Edge and IE.
-     */
-
-    hr {
-      box-sizing: content-box; /* 1 */
-      height: 0; /* 1 */
-      overflow: visible; /* 2 */
-    }
-
-    /**
-     * Add the correct display in IE.
-     */
-
-    main {
-      display: block;
-    }
-
-    @if $normalize-vertical-rhythm {
-      /**
-       * Set 1 unit of vertical rhythm on the top and bottom margin.
-       */
-
-      p,
-      pre {
-        @include normalize-margin(1 0);
-      }
-    }
-
-    /**
-     * 1. Correct the inheritance and scaling of font size in all browsers.
-     * 2. Correct the odd `em` font sizing in all browsers.
-     */
-
-    pre {
-      font-family: monospace, monospace; /* 1 */
-      font-size: 1em; /* 2 */
-    }
-  }
-
-  @if _normalize-include(links) {
-    /* Links
-       ========================================================================== */
-
-    /**
-     * 1. Remove the gray background on active links in IE 10.
-     * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
-     */
-
-    a {
-      background-color: transparent; /* 1 */
-      -webkit-text-decoration-skip: objects; /* 2 */
-    }
-
-    /**
-     * Remove the outline on focused links when they are also active or hovered
-     * in all browsers (opinionated).
-     */
-
-    a:active,
-    a:hover {
-      outline-width: 0;
-    }
-  }
-
-  @if _normalize-include(text) {
-    /* Text-level semantics
-       ========================================================================== */
-
-    /**
-     * 1. Remove the bottom border in Firefox 39-.
-     * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-     */
-
-    abbr[title] {
-      border-bottom: none; /* 1 */
-      text-decoration: underline; /* 2 */
-      text-decoration: underline dotted; /* 2 */
-    }
-
-    /**
-     * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
-     */
-
-    b,
-    strong {
-      font-weight: inherit;
-    }
-
-    /**
-     * Add the correct font weight in Chrome, Edge, and Safari.
-     */
-
-    b,
-    strong {
-      font-weight: bolder;
-    }
-
-    /**
-     * 1. Correct the inheritance and scaling of font size in all browsers.
-     * 2. Correct the odd `em` font sizing in all browsers.
-     */
-
-    code,
-    kbd,
-    samp {
-      font-family: monospace, monospace; /* 1 */
-      font-size: 1em; /* 2 */
-    }
-
-    /**
-     * Add the correct font style in Android 4.3-.
-     */
-
-    dfn {
-      font-style: italic;
-    }
-
-    /**
-     * Add the correct background and color in IE 9-.
-     */
-
-    mark {
-      background-color: #ff0;
-      color: #000;
-    }
-
-    /**
-     * Add the correct font size in all browsers.
-     */
-
-    small {
-      font-size: 80%;
-    }
-
-    /**
-     * Prevent `sub` and `sup` elements from affecting the line height in
-     * all browsers.
-     */
-
-    sub,
-    sup {
-      font-size: 75%;
-      line-height: 0;
-      position: relative;
-      vertical-align: baseline;
-    }
-
-    sub {
-      bottom: -0.25em;
-    }
-
-    sup {
-      top: -0.5em;
-    }
-  }
-
-  @if _normalize-include(embedded) {
-    /* Embedded content
-       ========================================================================== */
-
-    /**
-     * Add the correct display in IE 9-.
-     */
-
-    audio,
-    video {
-      display: inline-block;
-    }
-
-    /**
-     * Add the correct display in iOS 4-7.
-     */
-
-    audio:not([controls]) {
-      display: none;
-      height: 0;
-    }
-
-    /**
-     * Remove the border on images inside links in IE 10-.
-     */
-
-    img {
-      border-style: none;
-    }
-
-    /**
-     * Hide the overflow in IE.
-     */
-
-    svg:not(:root) {
-      overflow: hidden;
-    }
-  }
-
-  @if _normalize-include(forms) {
-    /* Forms
-       ========================================================================== */
-
-    /**
-     * 1. Change the font styles in all browsers (opinionated).
-     * 2. Remove the margin in Firefox and Safari.
-     */
-
-    button,
-    input,
-    optgroup,
-    select,
-    textarea {
-      font-family: $base-font-family; /* 1 */
-      font-size: 100%; /* 1 */
-      @if $normalize-vertical-rhythm {
-        line-height: ($base-line-height / $base-font-size) * 1em; /* 1 */
-      }
-      @else {
-        line-height: 1.15; /* 1 */
-      }
-      margin: 0; /* 2 */
-    }
-
-    /**
-     * Show the overflow in IE.
-     */
-
-    button {
-      overflow: visible;
-    }
-
-    /**
-     * Remove the inheritance of text transform in Edge, Firefox, and IE.
-     * 1. Remove the inheritance of text transform in Firefox.
-     */
-
-    button,
-    select { /* 1 */
-      text-transform: none;
-    }
-
-    /**
-     * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
-     *    controls in Android 4.
-     * 2. Correct the inability to style clickable types in iOS and Safari.
-     */
-
-    button,
-    html [type="button"], /* 1 */
-    [type="reset"],
-    [type="submit"] {
-      -webkit-appearance: button; /* 2 */
-    }
-
-    button,
-    [type="button"],
-    [type="reset"],
-    [type="submit"] {
-
-      /**
-       * Remove the inner border and padding in Firefox.
-       */
-
-      &::-moz-focus-inner {
-        border-style: none;
-        padding: 0;
-      }
-
-      /**
-       * Restore the focus styles unset by the previous rule.
-       */
-
-      &:-moz-focusring {
-        outline: 1px dotted ButtonText;
-      }
-    }
-
-    /**
-     * Show the overflow in Edge.
-     */
-
-    input {
-      overflow: visible;
-    }
-
-    /**
-     * 1. Add the correct box sizing in IE 10-.
-     * 2. Remove the padding in IE 10-.
-     */
-
-    [type="checkbox"],
-    [type="radio"] {
-      box-sizing: border-box; /* 1 */
-      padding: 0; /* 2 */
-    }
-
-    /**
-     * Correct the cursor style of increment and decrement buttons in Chrome.
-     */
-
-    [type="number"]::-webkit-inner-spin-button,
-    [type="number"]::-webkit-outer-spin-button {
-      height: auto;
-    }
-
-    /**
-     * 1. Correct the odd appearance in Chrome and Safari.
-     * 2. Correct the outline style in Safari.
-     */
-
-    [type="search"] {
-      -webkit-appearance: textfield; /* 1 */
-      outline-offset: -2px; /* 2 */
-
-      /**
-       * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
-       */
-
-      &::-webkit-search-cancel-button,
-      &::-webkit-search-decoration {
-        -webkit-appearance: none;
-      }
-    }
-
-    /**
-     * 1. Correct the inability to style clickable types in iOS and Safari.
-     * 2. Change font properties to `inherit` in Safari.
-     */
-
-    ::-webkit-file-upload-button {
-      -webkit-appearance: button; /* 1 */
-      font: inherit; /* 2 */
-    }
-
-    /**
-     * Change the border, margin, and padding in all browsers (opinionated).
-     */
-
-    fieldset {
-      border: 1px solid #c0c0c0;
-      margin: 0 2px;
-      padding: 0.35em 0.625em 0.75em;
-    }
-
-    /**
-     * 1. Correct the text wrapping in Edge and IE.
-     * 2. Correct the color inheritance from `fieldset` elements in IE.
-     * 3. Remove the padding so developers are not caught out when they zero out
-     *    `fieldset` elements in all browsers.
-     */
-
-    legend {
-      box-sizing: border-box; /* 1 */
-      display: table; /* 1 */
-      max-width: 100%; /* 1 */
-      padding: 0; /* 3 */
-      color: inherit; /* 2 */
-      white-space: normal; /* 1 */
-    }
-
-    /**
-     * 1. Add the correct display in IE 9-.
-     * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
-     */
-
-    progress {
-      display: inline-block; /* 1 */
-      vertical-align: baseline; /* 2 */
-    }
-
-    /**
-     * Remove the default vertical scrollbar in IE.
-     */
-
-    textarea {
-      overflow: auto;
-    }
-  }
-
-  @if _normalize-include(interactive) {
-    /* Interactive
-       ========================================================================== */
-
-    /*
-     * Add the correct display in Edge, IE, and Firefox.
-     */
-
-    details {
-      display: block;
-    }
-
-    /*
-     * Add the correct display in all browsers.
-     */
-
-    summary {
-      display: list-item;
-    }
-
-    /*
-     * Add the correct display in IE 9-.
-     */
-
-    menu {
-      display: block;
-
-      @if $normalize-vertical-rhythm {
-        /*
-         * 1. Set 1 unit of vertical rhythm on the top and bottom margin.
-         * 2. Set consistent space for the list style image.
-         */
-
-        @include normalize-margin(1 0); /* 1 */
-        padding: 0 0 0 $indent-amount; /* 2 */
-
-        /**
-         * Turn off margins on nested lists.
-         */
-
-        menu &,
-        ol &,
-        ul & {
-          margin: 0;
-        }
-      }
-    }
-  }
-
-  @if _normalize-include(scripting) {
-    /* Scripting
-       ========================================================================== */
-
-    /**
-     * Add the correct display in IE 9-.
-     */
-
-    canvas {
-      display: inline-block;
-    }
-
-    /**
-     * Add the correct display in IE.
-     */
-
-    template {
-      display: none;
-    }
-  }
-
-  @if _normalize-include(hidden) {
-    /* Hidden
-       ========================================================================== */
-
-    /**
-     * Add the correct display in IE 10-.
-     */
-
-    [hidden] {
-      display: none;
-    }
-  }
-}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_variables.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_variables.scss
deleted file mode 100644
index 2f06b25388..0000000000
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_variables.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-//
-// Variables
-//
-// You can override the default values by setting the variables in your Sass
-// before importing the normalize-scss library.
-
-// The font size set on the root html element.
-$base-font-size: 16px !default;
-
-// The base line height determines the basic unit of vertical rhythm.
-$base-line-height: 24px !default;
-
-// The length unit in which to output vertical rhythm values.
-// Supported values: px, em, rem.
-$base-unit: 'em' !default;
-
-// The default font family.
-$base-font-family: sans-serif !default;
-
-// The font sizes for h1-h6.
-$h1-font-size: 2    * $base-font-size !default;
-$h2-font-size: 1.5  * $base-font-size !default;
-$h3-font-size: 1.17 * $base-font-size !default;
-$h4-font-size: 1    * $base-font-size !default;
-$h5-font-size: 0.83 * $base-font-size !default;
-$h6-font-size: 0.67 * $base-font-size !default;
-
-// The amount lists and blockquotes are indented.
-$indent-amount: 40px !default;
-
-// The following variable controls whether normalize-scss will output
-// font-sizes, line-heights and block-level top/bottom margins that form a basic
-// vertical rhythm on the page, which differs from the original Normalize.css.
-// However, changing any of the variables above will cause
-// $normalize-vertical-rhythm to be automatically set to true.
-$normalize-vertical-rhythm: false !default;
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss
deleted file mode 100644
index 4f53647ca0..0000000000
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-//
-// Vertical Rhythm
-//
-// This is the minimal amount of code needed to create vertical rhythm in our
-// CSS. If you are looking for a robust solution, look at the excellent Typey
-// library. @see https://github.com/jptaranto/typey
-
-@function normalize-rhythm($value, $relative-to: $base-font-size, $unit: $base-unit) {
-  @if unit($value) != px {
-    @error "The normalize vertical-rhythm module only supports px inputs. The typey library is better.";
-  }
-  @if $unit == rem {
-    @return ($value / $base-font-size) * 1rem;
-  }
-  @else if $unit == em {
-    @return ($value / $relative-to) * 1em;
-  }
-  @else { // $unit == px
-    @return $value;
-  }
-}
-
-@mixin normalize-font-size($value, $relative-to: $base-font-size) {
-  @if unit($value) != 'px' {
-    @error "normalize-font-size() only supports px inputs. The typey library is better.";
-  }
-  font-size: normalize-rhythm($value, $relative-to);
-}
-
-@mixin normalize-rhythm($property, $values, $relative-to: $base-font-size) {
-  $value-list: $values;
-  $sep: space;
-  @if type-of($values) == 'list' {
-    $sep: list-separator($values);
-  }
-  @else {
-    $value-list: append((), $values);
-  }
-
-  $normalized-values: ();
-  @each $value in $value-list {
-    @if unitless($value) and $value != 0 {
-      $value: $value * normalize-rhythm($base-line-height, $relative-to);
-    }
-    $normalized-values: append($normalized-values, $value, $sep);
-  }
-  #{$property}: $normalized-values;
-}
-
-@mixin normalize-margin($values, $relative-to: $base-font-size) {
-  @include normalize-rhythm(margin, $values, $relative-to);
-}
-
-@mixin normalize-line-height($font-size, $min-line-padding: 2px) {
-  $lines: ceil($font-size / $base-line-height);
-  // If lines are cramped include some extra leading.
-  @if ($lines * $base-line-height - $font-size) < ($min-line-padding * 2) {
-    $lines: $lines + 1;
-  }
-  @include normalize-rhythm(line-height, $lines, $font-size);
-}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/_global.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/_global.scss
index 18152fedd5..dad62e6b59 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/_global.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/_global.scss
@@ -1,13 +1,15 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
-// sass-lint:disable force-attribute-nesting, force-pseudo-nesting, no-color-literals, no-qualifying-elements
+// sass-lint:disable no-color-literals, no-qualifying-elements
 
 ////
 /// @group global
 ////
 
+@import 'util/util';
+
 /// 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;
@@ -121,19 +123,18 @@ $global-button-cursor: auto !default;
 $global-left: if($global-text-direction == rtl, right, left);
 $global-right: if($global-text-direction == rtl, left, right);
 
+// Internal variable that contains the flex justifying options
+$-zf-flex-justify: -zf-flex-justify($global-text-direction);
+
 /// Global tolerance for color pick contrast.
 /// @type Number
 $global-color-pick-contrast-tolerance: 0 !default;
 
 // Internal variables used for colors
-$primary-color: get-color(primary);
-$secondary-color: get-color(secondary);
-$success-color: get-color(success);
-$warning-color: get-color(warning);
-$alert-color: get-color(alert);
+@include add-foundation-colors;
 
 @mixin foundation-global-styles {
-  @include -zf-normalize;
+  @include foundation-normalize;
 
   // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
   .foundation-mq {
@@ -165,8 +166,8 @@ $alert-color: get-color(alert);
     color: $body-font-color;
 
     @if ($body-antialiased) {
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
+      -webkit-font-smoothing: antialiased; // sass-lint:disable-line no-vendor-prefixes
+      -moz-osx-font-smoothing: grayscale; // sass-lint:disable-line no-vendor-prefixes
     }
   }
 
@@ -241,9 +242,3 @@ $alert-color: get-color(alert);
     display: none !important;
   }
 }
-
-/// Loads normalize.css.
-/// @access private
-@mixin -zf-normalize {
-  @include normalize();
-}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_accordion-menu.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_accordion-menu.scss
index 7d25446607..1e05469c86 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_accordion-menu.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_accordion-menu.scss
@@ -62,10 +62,12 @@ $accordionmenu-arrow-size: 6px !default;
       #{$global-right}: 1rem;
     }
   }
+
   &.align-left .is-accordion-submenu-parent > a::after {
-    left: auto;
     right: 1rem;
+    left: auto;
   }
+
   &.align-right .is-accordion-submenu-parent > a::after {
     right: auto;
     left: 1rem;
@@ -93,7 +95,7 @@ $accordionmenu-arrow-size: 6px !default;
       }
       padding: $accordionmenu-padding;
     }
-    
+
     .is-accordion-submenu a {
       padding: $accordionmenu-submenu-padding;
     }
@@ -138,11 +140,12 @@ $accordionmenu-arrow-size: 6px !default;
     position: absolute;
     top: 0;
     #{$global-right}: 0;
-    cursor: pointer;
 
     width: $accordionmenu-submenu-toggle-width;
     height: $accordionmenu-submenu-toggle-height;
 
+    cursor: pointer;
+
     border-#{$global-left}: $accordion-submenu-toggle-border;
 
     @if $accordionmenu-submenu-toggle-background {
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_accordion.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_accordion.scss
index c646be7d15..6ec5ccdcd8 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_accordion.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_accordion.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -14,6 +14,14 @@ $accordion-background: $white !default;
 /// @type Boolean
 $accordion-plusminus: true !default;
 
+/// Content for the plus icon when `$accordion-plusminus` is `true`
+/// @type String
+$accordion-plus-content: '\002B' !default;
+
+/// Content for the minus icon when `$accordion-plusminus` is `true`
+/// @type String
+$accordion-minus-content: '\2013' !default;
+
 /// Font size of accordion titles.
 /// @type Number
 $accordion-title-font-size: rem-calc(12) !default;
@@ -53,6 +61,7 @@ $accordion-content-padding: 1rem !default;
   margin-#{$global-left}: 0;
   background: $background;
   list-style-type: none;
+
   &[disabled] {
     .accordion-title {
       cursor: not-allowed;
@@ -106,11 +115,11 @@ $accordion-content-padding: 1rem !default;
       top: 50%;
       #{$global-right}: 1rem;
       margin-top: -0.5rem;
-      content: '+';
+      content: $accordion-plus-content;
     }
 
     .is-active > &::before {
-      content: '\2013';
+      content: $accordion-minus-content;
     }
   }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_badge.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_badge.scss
index 3d5b6bab79..f3b69a4693 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_badge.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_badge.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_breadcrumbs.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_breadcrumbs.scss
index 75eb9a1569..e9e08c8c72 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_breadcrumbs.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_breadcrumbs.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -82,12 +82,14 @@ $breadcrumbs-item-separator-color: $medium-gray !default;
       // Need to escape the backslash
       $separator: if($global-text-direction == 'ltr', $breadcrumbs-item-separator-item, $breadcrumbs-item-separator-item-rtl);
 
-      &:not(:last-child)::after {
-        position: relative;
-        margin: 0 $breadcrumbs-item-margin;
-        opacity: 1;
-        content: $separator;
-        color: $breadcrumbs-item-separator-color;
+      &:not(:last-child) {
+        &::after {
+          position: relative;
+          margin: 0 $breadcrumbs-item-margin;
+          opacity: 1;
+          content: $separator;
+          color: $breadcrumbs-item-separator-color;
+        }
       }
     }
     @else {
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_button-group.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_button-group.scss
index 6705e9c9e7..d3be6262a6 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_button-group.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_button-group.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -18,7 +18,7 @@ $buttongroup-spacing: 1px !default;
 /// @type String
 $buttongroup-child-selector: '.button' !default;
 
-/// Maximum number of buttons that can be in an even-width button group.
+/// Maximum number of buttons that can be in an even-width button group. (Only needed when $global-flexbox: false;)
 /// @type Number
 $buttongroup-expand-max: 6 !default;
 
@@ -38,8 +38,14 @@ $buttongroup-radius-on-each: true !default;
 
   @if $global-flexbox {
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     align-items: stretch;
+    flex-grow: 1;
+
+    &::before,
+    &::after {
+      display: none; // Disable clearfix
+    }
   }
   @else {
     font-size: 0;
@@ -72,7 +78,21 @@ $buttongroup-radius-on-each: true !default;
         border-bottom-#{$global-right}-radius: $button-radius;
       }
     }
+  }
+}
 
+/// Make buttons bonded without gap between them. Borders between buttons are merged
+/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+@mixin button-group-no-gaps(
+  $selector: $buttongroup-child-selector,
+  $border-width: $button-hollow-border-width
+) {
+  #{$selector} {
+    margin-#{$global-right}: rem-calc(-$border-width);
+
+    + #{$selector} {
+      border-#{$global-left}-color: transparent;
+    }
   }
 }
 
@@ -89,18 +109,21 @@ $buttongroup-radius-on-each: true !default;
 
     &::before,
     &::after {
-      display: none;
+      display: none; // Disable clearfix
     }
   }
 
   #{$selector} {
     @if $global-flexbox {
       flex: 1 1 0px; // sass-lint:disable-line zero-unit
+      margin-right: 0;
     }
     @else {
       // One child
-      &:first-child:last-child {
-        width: 100%;
+      &:first-child {
+        &:last-child {
+          width: calc(100% - #{$spacing});
+        }
       }
 
       // Two or more childreen
@@ -142,11 +165,10 @@ $buttongroup-radius-on-each: true !default;
       margin-bottom: 0;
     }
 
-
     @if not $buttongroup-radius-on-each {
       border-radius: 0;
 
-      &:first-child{
+      &:first-child {
         border-top-#{$global-left}-radius: $global-radius;
         border-top-#{$global-right}-radius: $global-radius;
       }
@@ -157,7 +179,6 @@ $buttongroup-radius-on-each: true !default;
         border-bottom-#{$global-right}-radius: $global-radius;
       }
     }
-
   }
 }
 
@@ -168,7 +189,7 @@ $buttongroup-radius-on-each: true !default;
 ) {
   #{$selector} {
     @if $global-flexbox {
-      flex: 1 1 0px; // sass-lint:disable-line zero-unit
+      flex: 0 0 auto;
     }
     @else {
       width: auto;
@@ -204,27 +225,46 @@ $buttongroup-radius-on-each: true !default;
     }
 
     // Even-width Group
-    &.expanded { @include button-group-expand; }
+    &.expanded {
+      @include button-group-expand;
+    }
 
-    // Colors
-    @each $name, $color in $foundation-palette {
-      @if $button-fill != hollow {
-        &.#{$name} #{$buttongroup-child-selector} {
-          @include button-style($color, auto, auto);
+    // Solid, hollow & clear styles
+    @each $filling in (solid hollow clear) {
+      $base-selector: if($button-fill == $filling, null, '.#{$filling}');
+
+      &#{$base-selector} {
+        // Do not generate button base styles for the default filling
+        @if($button-fill != $filling) {
+          #{$buttongroup-child-selector} {
+            @include button-fill($filling);
+            @include button-fill-style($filling);
+          }
         }
-      }
-      @else {
-        &.#{$name} #{$buttongroup-child-selector} {
-          @include button-hollow;
-          @include button-hollow-style($color);
+
+        @each $name, $color in $button-palette {
+          $individual-selector: if($button-fill == $filling, null, ' #{$buttongroup-child-selector}.#{$name}');
+
+          &.#{$name} #{$buttongroup-child-selector}, #{$individual-selector} {
+            @include button-fill-style($filling, $color, auto, auto);
+          }
         }
       }
+
+    }
+
+    &.no-gaps {
+      @include button-group-no-gaps;
     }
 
     &.stacked,
     &.stacked-for-small,
     &.stacked-for-medium {
       @include button-group-stack;
+
+      &.expanded {
+        @include button-group-expand;
+      }
     }
 
     &.stacked-for-small {
@@ -239,7 +279,7 @@ $buttongroup-radius-on-each: true !default;
       }
     }
 
-    &.stacked-for-small.expanded { // sass-lint:disable-line force-element-nesting
+    &.stacked-for-small.expanded {
       @include breakpoint(small only) {
         display: block;
 
@@ -249,5 +289,16 @@ $buttongroup-radius-on-each: true !default;
         }
       }
     }
+
+    &.stacked-for-medium.expanded {
+      @include breakpoint(medium down) {
+        display: block;
+
+        #{$buttongroup-child-selector} {
+          display: block;
+          margin-#{$global-right}: 0;
+        }
+      }
+    }
   }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_button.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_button.scss
index e71f264931..8e7a231b04 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_button.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_button.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -10,6 +10,11 @@
 /// @type Font
 $button-font-family: inherit !default;
 
+/// Font weight for button elements.
+/// Ignored if null (default)
+/// @type Font-Weight
+$button-font-weight: null !default;
+
 /// Padding inside buttons.
 /// @type List
 $button-padding: 0.85em 1em !default;
@@ -42,6 +47,10 @@ $button-color-alt: $black !default;
 /// @type Number
 $button-radius: $global-radius !default;
 
+/// Border for buttons, transparent by default
+/// @type List
+$button-border: 1px solid transparent !default;
+
 /// Border width for hollow outline buttons
 /// @type Number
 $button-hollow-border-width: 1px !default;
@@ -80,13 +89,16 @@ $button-hollow-hover-lightness: -50% !default;
 /// @type List
 $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;
 
+/// Additional responsive classes for .expanded
+/// @type Boolean
+$button-responsive-expanded: false !default;
+
 // TODO: Document button-base() mixin
 @mixin button-base {
   @include disable-mouse-outline;
   display: inline-block;
   vertical-align: middle;
   margin: $button-margin;
-  font-family: $button-font-family;
 
   @if (type-of($button-padding) == 'map') {
     @each $size, $padding in $button-padding {
@@ -99,12 +111,13 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
     padding: $button-padding;
   }
 
-  -webkit-appearance: none;
-  border: 1px solid transparent;
+  border: $button-border;
   border-radius: $button-radius;
   transition: $button-transition;
-
+  font-family: $button-font-family;
   font-size: map-get($button-sizes, default);
+  font-weight: $button-font-weight;
+  -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
   line-height: 1;
   text-align: center;
   cursor: pointer;
@@ -126,6 +139,43 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
   }
 }
 
+/// Sets the base styles of a hollow or clear button filling according to `$fill`.
+/// See mixin `button-fill-style` for the filling styles.
+/// @param {Keyword} $fill [$button-fill] - Type of filling between `hollow` and `clear`. `solid` has no effects.
+@mixin button-fill(
+  $fill: $button-fill
+) {
+  @if $fill == hollow {
+    @include button-hollow;
+  }
+  @else if $fill == clear {
+    @include button-clear;
+  }
+}
+
+/// Sets the visual styles of a solid/hollow/clear button filling according to `$fill`.
+/// See mixins `button-style`, `button-hollow-style` and `button-clear-style` for effects of visual styling parameters.
+/// @param {Keyword} $fill [$button-fill] - Type of filling between `hollow` and `clear`.
+/// @param {Color} $background [$button-background] - -
+/// @param {Color} $background-hover [$button-background-hover] - -
+/// @param {Color} $color [$button-color] - -
+@mixin button-fill-style(
+  $fill: $button-fill,
+  $background: $button-background,
+  $background-hover: $button-background-hover,
+  $color: $button-color
+) {
+  @if $fill == solid {
+    @include button-style($background, $background-hover, $color);
+  }
+  @else if $fill == hollow {
+    @include button-hollow-style($background);
+  }
+  @else if $fill == clear {
+    @include button-clear-style($background);
+  }
+}
+
 /// Sets the visual style of a button.
 /// @param {Color} $background [$button-background] - Background color of the button.
 /// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
@@ -144,8 +194,14 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
     $background-hover: scale-color($background, $lightness: $background-hover-lightness);
   }
 
-  background-color: $background;
-  color: $color;
+  // Default and disabled states
+  &,
+  &.disabled, &[disabled],
+  &.disabled:hover, &[disabled]:hover,
+  &.disabled:focus, &[disabled]:focus {
+    background-color: $background;
+    color: $color;
+  }
 
   &:hover, &:focus {
     background-color: $background-hover;
@@ -153,22 +209,20 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
   }
 }
 
-/// Removes background fill on hover and focus for hollow buttons.
+/// Sets the base styles of a hollow button.
+/// See mixin `button-hollow-style` for the filling styles.
 @mixin button-hollow {
-  &,
-  &:hover, &:focus {
-    background-color: transparent;
-  }
-
-  &.disabled,
-  &[disabled] {
-    &,
-    &:hover, &:focus {
+  &, &.disabled, &[disabled] {
+    &, &:hover, &:focus {
       background-color: transparent;
     }
   }
 }
 
+/// Sets the visual style of a hollow button.
+/// @param {Color} $color [$button-background] - Text and border color of the button.
+/// @param {Color} $hover-lightness [$button-hollow-hover-lightness] - Color lightness on hover.
+/// @param {Color} $border-width [$button-hollow-border-width] - Border width of the button.
 @mixin button-hollow-style(
   $color: $button-background,
   $hover-lightness: $button-hollow-hover-lightness,
@@ -176,38 +230,61 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 ) {
   $color-hover: scale-color($color, $lightness: $hover-lightness);
 
-  border: $border-width solid $color;
-  color: $color;
+  // Default and disabled states
+  &,
+  &.disabled, &[disabled],
+  &.disabled:hover, &[disabled]:hover,
+  &.disabled:focus, &[disabled]:focus {
+    border: $border-width solid $color;
+    color: $color;
+  }
 
   &:hover, &:focus {
     border-color: $color-hover;
     color: $color-hover;
-    &.disabled,
-    &[disabled] {
-      border: $border-width solid $color;
-      color: $color;
+  }
+}
+
+/// Sets the base styles of a clear button.
+/// See mixin `button-clear-style` for the filling styles.
+@mixin button-clear {
+  &, &.disabled, &[disabled] {
+    &, &:hover, &:focus {
+      border-color: transparent;
+      background-color: transparent;
     }
   }
 }
 
-/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
-/// @param [Color] $background [$button-background] - Background color of the disabled button.
-/// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.
-@mixin button-disabled(
-  $background: $button-background,
-  $color: $button-color
+/// Sets the visual style of a clear button.
+/// @param {Color} $color [$button-background] - Text color of the button.
+/// @param {Color} $hover-lightness [$button-hollow-hover-lightness] - Color lightness on hover.
+@mixin button-clear-style(
+  $color: $button-background,
+  $hover-lightness: $button-hollow-hover-lightness
 ) {
-  @if $color == auto {
-    $color: color-pick-contrast($background, ($button-color, $button-color-alt));
+  $color-hover: scale-color($color, $lightness: $hover-lightness);
+
+  // Default and disabled states
+  &,
+  &.disabled, &[disabled],
+  &.disabled:hover, &[disabled]:hover,
+  &.disabled:focus, &[disabled]:focus {
+    color: $color;
+  }
+
+  &:hover, &:focus {
+    color: $color-hover;
   }
+}
 
+/// Adds disabled styles to a button by fading the element and reseting the cursor.
+/// @param {Number} $opacity [$button-opacity-disabled] - Opacity of the disabled button.
+@mixin button-disabled(
+  $opacity: $button-opacity-disabled
+) {
   opacity: $button-opacity-disabled;
   cursor: not-allowed;
-
-  &, &:hover, &:focus {
-    background-color: $background;
-    color: $color;
-  }
 }
 
 /// Adds a dropdown arrow to a button.
@@ -244,14 +321,8 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
   $style: $button-fill
 ) {
   @include button-base;
-
-  @if $style == solid {
-    @include button-style($background, $background-hover, $color);
-  }
-  @else if $style == hollow {
-    @include button-hollow;
-    @include button-hollow-style($background);
-  }
+  @include button-fill($style);
+  @include button-fill-style($style, $background, $background-hover, $color);
 
   @if $expand {
     @include button-expand;
@@ -260,7 +331,7 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 
 @mixin foundation-button {
   .button {
-    @include button;
+    @include button($style: none);
 
     // Sizes
     @each $size, $value in map-remove($button-sizes, default) {
@@ -271,77 +342,48 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 
     &.expanded { @include button-expand; }
 
-    // Colors
-    @each $name, $color in $button-palette {
-      @if $button-fill != hollow {
-        &.#{$name} {
-          @include button-style($color, auto, auto);
-        }
-      }
-      @else {
-        &.#{$name} {
-          @include button-hollow-style($color);
+    @if $button-responsive-expanded {
+      @each $size in $breakpoint-classes {
+        @include breakpoint(#{$size} only) {
+          &.#{$size}-only-expanded {
+            @include button-expand;
+          }
         }
+        @if $size != $-zf-zero-breakpoint {
+          @include breakpoint(#{$size} down) {
+            &.#{$size}-down-expanded {
+              @include button-expand;
+            }
+          }
 
-        &.#{$name}.dropdown::after {
-          border-top-color: $color;
+          @include breakpoint(#{$size}) {
+            &.#{$size}-expanded {
+              @include button-expand;
+            }
+          }
         }
       }
     }
 
-    // Disabled style
-    &.disabled,
-    &[disabled] {
-      @include button-disabled;
+    // Solid, hollow & clear styles
+    @each $filling in (solid hollow clear) {
+      $selector: if($button-fill == $filling, null, '.#{$filling}');
 
-      @each $name, $color in $button-palette {
-        &.#{$name} {
-          @include button-disabled($color, auto);
-        }
-      }
-    }
-
-    // Hollow style
-    @if $button-fill != hollow {
-      &.hollow {
-        @include button-hollow;
-        @include button-hollow-style;
+      &#{$selector} {
+        @include button-fill($filling);
+        @include button-fill-style($filling);
 
         @each $name, $color in $button-palette {
           &.#{$name} {
-            @include button-hollow-style($color);
+            @include button-fill-style($filling, $color, auto, auto);
           }
         }
       }
     }
 
-    // Clear style
-    @if $button-fill != clear {
-      &.clear {
-        @include button-hollow;
-        @include button-hollow-style;
-
-        &, &:hover, &:focus {
-          &, &.disabled, &[disabled] {
-            border-color: transparent;
-          }
-        }
-
-        @each $name, $color in $button-palette {
-          &.#{$name} {
-            @include button-hollow-style($color);
-
-            &, &:hover,
-            &:focus {
-              &,
-              &.disabled,
-              &[disabled] {
-                border-color: transparent;
-              }
-            }
-          }
-        }
-      }
+    // Disabled state
+    &.disabled, &[disabled] {
+      @include button-disabled;
     }
 
     // Dropdown arrow
@@ -354,7 +396,7 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
         }
       }
 
-      &.hollow {
+      &.hollow, &.clear {
         &::after {
           border-top-color: $button-background;
         }
@@ -376,7 +418,8 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
       margin-#{$global-left}: 0;
     }
   }
-  a.button {
+
+  a.button { // sass-lint:disable-line no-qualifying-elements
     &:hover,
     &:focus {
       text-decoration: none;
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_callout.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_callout.scss
index 5a0842c41e..c8472c04a1 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_callout.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_callout.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -22,9 +22,13 @@ $callout-border: 1px solid rgba($black, 0.25) !default;
 /// @type Number
 $callout-margin: 0 0 1rem 0 !default;
 
-/// Default inner padding for callouts.
-/// @type Number
-$callout-padding: 1rem !default;
+/// Sizes for Callout paddings.
+/// @type Map
+$callout-sizes: (
+  small: 0.5rem,
+  default: 1rem,
+  large: 3rem,
+) !default;
 
 /// Default font color for callouts.
 /// @type Color
@@ -46,7 +50,7 @@ $callout-link-tint: 30% !default;
 @mixin callout-base() {
   position: relative;
   margin: $callout-margin;
-  padding: $callout-padding;
+  padding: map-get($callout-sizes, default);
 
   border: $callout-border;
   border-radius: $callout-radius;
@@ -95,12 +99,10 @@ $callout-link-tint: 30% !default;
       }
     }
 
-    &.small {
-      @include callout-size(0.5rem);
-    }
-
-    &.large {
-      @include callout-size(3rem);
+    @each $size, $padding in map-remove($callout-sizes, default) {
+      &.#{$size} {
+        @include callout-size($padding);
+      }
     }
   }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_card.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_card.scss
index d3ba77e500..809e18f7e0 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_card.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_card.scss
@@ -1,12 +1,12 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
 /// @group card
 ////
 
-/// Defualt background color.
+/// Default background color.
 /// @type Color
 $card-background: $white !default;
 
@@ -81,8 +81,8 @@ $card-margin-bottom: $global-margin !default;
   $padding: $card-padding
 ) {
   @if $global-flexbox {
-    flex: 0 1 auto;
     display: flex;
+    flex: 0 1 auto;
   }
 
   padding: $padding;
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_close-button.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_close-button.scss
index 927741f01b..37b501d14f 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_close-button.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_close-button.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -10,6 +10,17 @@
 /// @type List
 $closebutton-position: right top !default;
 
+/// Default z-index for a close button.
+/// @type Number
+$closebutton-z-index: 10 !default;
+
+/// Button size to use as default
+/// @type String
+/// @see $closebutton-size
+/// @see $closebutton-offset-horizontal
+/// @see $closebutton-offset-vertical
+$closebutton-default-size: medium !default;
+
 /// Right (or left) offset(s) for a close button.
 /// @type Number|Map
 $closebutton-offset-horizontal: (
@@ -24,7 +35,7 @@ $closebutton-offset-vertical: (
   medium: 0.5rem,
 ) !default;
 
-/// Default font size(s) of the close button.
+/// Size(s) of the close button. Used to generate sizing modifiers.
 /// @type Number|Map
 $closebutton-size: (
   small: 1.5em,
@@ -83,6 +94,7 @@ $closebutton-color-hover: $black !default;
 
   @include disable-mouse-outline;
   position: absolute;
+  z-index: $closebutton-z-index;
   color: $closebutton-color;
   cursor: pointer;
 
@@ -96,7 +108,20 @@ $closebutton-color-hover: $black !default;
   .close-button {
     @include close-button;
 
-    &.small { @include close-button-size(small) }
-    &, &.medium { @include close-button-size(medium) }
+    // Generate a placeholder and a class for each size
+    @each $name, $size in $closebutton-size {
+      @at-root {
+        %zf-close-button--#{$name} {
+          @include close-button-size($name);
+        }
+      }
+
+      &.#{$name} {
+        @extend %zf-close-button--#{$name};
+      }
+    }
+
+    // Use by default the placeholder of the default size
+    @extend %zf-close-button--#{$closebutton-default-size};
   }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_drilldown.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_drilldown.scss
index 1719080780..3dcdf327af 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_drilldown.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_drilldown.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -45,25 +45,26 @@ $drilldown-arrow-size: 6px !default;
 @mixin zf-drilldown-left-right-arrows {
   .is-drilldown-submenu-parent > a {
     position: relative;
+
     &::after {
+      @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
       position: absolute;
       top: 50%;
       margin-top: -1 * $drilldown-arrow-size;
       #{$global-right}: 1rem;
-      @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
     }
   }
 
   &.align-left .is-drilldown-submenu-parent > a::after {
-    left: auto;
-    right: 1rem;
     @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
+    right: 1rem;
+    left: auto;
   }
 
   &.align-right .is-drilldown-submenu-parent > a::after {
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
     right: auto;
     left: 1rem;
-    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
   }
 
 }
@@ -130,12 +131,9 @@ $drilldown-arrow-size: 6px !default;
 
       .js-drilldown-back > a::before {
         @include css-triangle($drilldown-arrow-size, $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
-
-        border-#{$global-left}-width: 0;
       }
     }
   }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_dropdown-menu.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_dropdown-menu.scss
index 463f78a9ba..3aa14cdd64 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_dropdown-menu.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_dropdown-menu.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -28,11 +28,11 @@ $dropdownmenu-min-width: 200px !default;
 
 /// Background color for top level items.
 /// @type Color
-$dropdownmenu-background: $white !default;
+$dropdownmenu-background: null !default;
 
 /// Background color for dropdowns.
 /// @type Color
-$dropdownmenu-submenu-background: $dropdownmenu-background !default;
+$dropdownmenu-submenu-background: $white !default;
 
 /// Padding for top level items.
 /// @type Number
@@ -69,9 +69,9 @@ $dropdown-menu-item-background-active: transparent !default;
   }
 
   &.opens-left > a::after {
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
     right: auto;
     left: 5px;
-    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
   }
 
   &.opens-right > a::after {
@@ -81,7 +81,7 @@ $dropdown-menu-item-background-active: transparent !default;
 
 @mixin dropdown-menu-direction($dir: horizontal) {
   @if $dir == horizontal {
-    > li.opens-left {
+    > li.opens-left { // sass-lint:disable-line no-qualifying-elements
       > .is-dropdown-submenu {
         top: 100%;
         right: 0;
@@ -89,7 +89,7 @@ $dropdown-menu-item-background-active: transparent !default;
       }
     }
 
-    > li.opens-right {
+    > li.opens-right { // sass-lint:disable-line no-qualifying-elements
       > .is-dropdown-submenu {
         top: 100%;
         right: auto;
@@ -98,12 +98,12 @@ $dropdown-menu-item-background-active: transparent !default;
     }
 
     @if $dropdownmenu-arrows {
-      > li.is-dropdown-submenu-parent > a {
+      > li.is-dropdown-submenu-parent > a { // sass-lint:disable-line no-qualifying-elements
         position: relative;
         padding-#{$global-right}: $dropdownmenu-arrow-padding;
       }
 
-      > li.is-dropdown-submenu-parent > a::after {
+      > li.is-dropdown-submenu-parent > a::after { // sass-lint:disable-line no-qualifying-elements
         @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
         #{$global-right}: 5px;
         #{$global-left}: auto;
@@ -119,9 +119,9 @@ $dropdown-menu-item-background-active: transparent !default;
 
       &.opens-left {
         > .is-dropdown-submenu {
+          top: 0;
           right: 100%;
           left: auto;
-          top: 0;
         }
       }
 
@@ -148,11 +148,16 @@ $dropdown-menu-item-background-active: transparent !default;
 
     a {
       @include disable-mouse-outline;
+    }
+
+    // Top-level item
+    > li > a {
+      background: $dropdownmenu-background;
       padding: $dropdownmenu-padding;
     }
 
-    // Active state
-    .is-active > a {
+    // Top-level item active state
+    > li.is-active > a {
       background: $dropdown-menu-item-background-active;
       color: $dropdown-menu-item-color-active;
     }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_dropdown.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_dropdown.scss
index 2d6366e943..974f9c630f 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_dropdown.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_dropdown.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -43,11 +43,12 @@ $dropdown-sizes: (
   position: absolute;
   z-index: 10;
 
+  display: none;
+
   width: $dropdown-width;
   padding: $dropdown-padding;
 
   visibility: hidden;
-  display: none;
   border: $dropdown-border;
   border-radius: $dropdown-radius;
   background-color: $dropdown-background;
@@ -61,8 +62,8 @@ $dropdown-sizes: (
   }
 
   &.is-open {
-    visibility: visible;
     display: block;
+    visibility: visible;
   }
 }
 
@@ -72,8 +73,10 @@ $dropdown-sizes: (
   }
 
   @each $name, $size in $dropdown-sizes {
-    .dropdown-pane.#{$name} {
-      width: $size;
+    .dropdown-pane {
+      &.#{$name} {
+        width: $size;
+      }
     }
   }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_flex.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_flex.scss
index 32b79ba581..7d46d079de 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_flex.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_flex.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -71,17 +71,19 @@ $flexbox-responsive-breakpoints: true !default;
 
 @mixin foundation-flex-classes {
   // Horizontal alignment using justify-content
-  @each $hdir, $prop in map-remove($-zf-flex-justify, 'left') {
+  @each $hdir, $prop in $-zf-flex-justify {
     .align-#{$hdir} {
       @include flex-align($x: $hdir);
     }
   }
   
   // Horizontal alignment Specifically for Vertical Menu
-  @each $hdir, $prop in map-remove($-zf-flex-justify, 'left', 'justify', 'spaced') {
+  @each $hdir, $prop in map-remove($-zf-flex-justify, 'justify', 'spaced') {
     .align-#{$hdir} {
-      &.vertical.menu > li > a { 
-        @include flex-align($x: $hdir);
+      &.vertical {
+        &.menu > li > a {
+          @include flex-align($x: $hdir);
+        }
       }
     }
   }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_float.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_float.scss
index 3f81f3d1a5..fb80032bd4 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_float.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_float.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_label.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_label.scss
index cf7cf7da4c..3ec8eed13a 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_label.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_label.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_media-object.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_media-object.scss
index 3c85f46f55..7f3170c878 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_media-object.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_media-object.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -26,6 +26,18 @@ $mediaobject-image-width-stacked: 100% !default;
   @if $global-flexbox {
     flex-wrap: nowrap;
   }
+
+  img {
+    max-width: none;
+  }
+
+  @if $global-flexbox {
+    &.stack-for-#{$-zf-zero-breakpoint} {
+      @include breakpoint($-zf-zero-breakpoint only) {
+        flex-wrap: wrap;
+      }
+    }
+  }
 }
 
 /// Adds styles for sections within a media object.
@@ -50,6 +62,27 @@ $mediaobject-image-width-stacked: 100% !default;
   > :last-child {
     margin-bottom: 0;
   }
+
+  .stack-for-#{$-zf-zero-breakpoint} & {
+    @include breakpoint($-zf-zero-breakpoint only) {
+      @include media-object-stack;
+    }
+  }
+
+  @if $global-flexbox {
+    &.main-section {
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
+    }
+  }
+  @else {
+    &.middle {
+      vertical-align: middle;
+    }
+
+    &.bottom {
+      vertical-align: bottom;
+    }
+  }
 }
 
 /// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
@@ -73,42 +106,9 @@ $mediaobject-image-width-stacked: 100% !default;
 @mixin foundation-media-object {
   .media-object {
     @include media-object-container;
-
-    img {
-      max-width: none;
-    }
-
-    @if $global-flexbox {
-      &.stack-for-#{$-zf-zero-breakpoint} {
-        @include breakpoint($-zf-zero-breakpoint only) {
-          flex-wrap: wrap;
-        }
-      }
-    }
-
-    &.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
-      @include breakpoint($-zf-zero-breakpoint only) {
-        @include media-object-stack;
-      }
-    }
   }
 
   .media-object-section {
     @include media-object-section;
-
-    @if $global-flexbox {
-      &.main-section {
-        flex: 1 1 0px; // sass-lint:disable-line zero-unit
-      }
-    }
-    @else {
-      &.middle {
-        vertical-align: middle;
-      }
-
-      &.bottom {
-        vertical-align: bottom;
-      }
-    }
   }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_menu.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_menu.scss
index fa100c6e6d..bdfa3358fd 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_menu.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_menu.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -26,6 +26,10 @@ $menu-simple-margin: 1rem !default;
 /// @type Color
 $menu-item-color-active: $white !default;
 
+/// Alternative text color of an active menu item..
+/// @type Color
+$menu-item-color-alt-active: $black !default;
+
 /// Background color of an active menu item.
 /// @type Color
 $menu-item-background-active: get-color(primary) !default;
@@ -34,10 +38,6 @@ $menu-item-background-active: get-color(primary) !default;
 /// @type Number
 $menu-icon-spacing: 0.25rem !default;
 
-/// Background color for an hovered menu item.
-/// @type Color
-$menu-item-background-hover: $light-gray !default;
-
 /// Backward compatibility for menu state. If true, this duplicate `active` with `is-active`. 
 /// But please note that `active` will be removed in upcoming versions.
 /// @type Boolean
@@ -354,7 +354,7 @@ $menu-icons-back-compat: true !default;
 
 @mixin menu-state-active {
   background: $menu-item-background-active;
-  color: $menu-item-color-active;
+  color: color-pick-contrast($menu-item-background-active, ($menu-item-color-active, $menu-item-color-alt-active));
 }
 
 @mixin foundation-menu {
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_off-canvas.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_off-canvas.scss
index 03a12155d0..e461a54d5d 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_off-canvas.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_off-canvas.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -362,9 +362,14 @@ $maincontent-class: 'off-canvas-content' !default;
 /// Sets the styles for the content container.
 @mixin off-canvas-content() {
   transform: none;
-  transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
   backface-visibility: hidden;
 
+  // Bind to has-transition-X class to prevent transition for transform:none
+  &.has-transition-overlap,
+  &.has-transition-push {
+    transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
+  }
+
   // Transform scope until the element is closed (makes sure transitionend gets triggered)
   &.has-transition-push {
     transform: translate(0, 0);
@@ -416,10 +421,10 @@ $breakpoint: small
   visibility: visible;
   height: auto;
   position: static;
-  background: inherit;
-  width: inherit;
-  overflow: inherit;
-  transition: inherit;
+  background: none;
+  width: auto;
+  overflow: visible;
+  transition: none;
 
   // Increase CSS specificity
   &.position-left,
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_orbit.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_orbit.scss
index 9b43fcdd45..06761cc470 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_orbit.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_orbit.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -67,6 +67,7 @@ $orbit-control-zindex: 10 !default;
 /// Adds styles for the individual slides of an Orbit slider. These styles are used on the `.orbit-slide` class.
 @mixin orbit-slide {
   width: 100%;
+  position: absolute;
 
   &.no-motionui {
     &.is-active {
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_pagination.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_pagination.scss
index d02ae03fa2..f8a8c14770 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_pagination.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_pagination.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -65,6 +65,14 @@ $pagination-mobile-current-item: false !default;
 /// @type Boolean
 $pagination-arrows: true !default;
 
+/// Content for the previous arrow when `$pagination-arrows` is `true`
+/// @type String
+$pagination-arrow-previous: '\00AB' !default;
+
+/// Content for the next arrow when `$pagination-arrows` is `true`
+/// @type String
+$pagination-arrow-next: '\00BB' !default;
+
 /// Adds styles for a pagination container. Apply this to a `<ul>`.
 @mixin pagination-container (
   $margin-bottom: $pagination-margin-bottom,
@@ -180,14 +188,14 @@ $pagination-arrows: true !default;
     .pagination-previous.disabled::before {
       display: inline-block;
       margin-#{$global-right}: 0.5rem;
-      content: '\00ab';
+      content: $pagination-arrow-previous;
     }
 
     .pagination-next a::after,
     .pagination-next.disabled::after {
       display: inline-block;
       margin-#{$global-left}: 0.5rem;
-      content: '\00bb';
+      content: $pagination-arrow-next;
     }
   }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_progress-bar.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_progress-bar.scss
index 342cfe6cbc..b2b891307c 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_progress-bar.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_progress-bar.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 /// Adds styles for a progress bar container.
@@ -26,7 +26,6 @@
 /// Adds styles for text in the progress meter.
 @mixin progress-meter-text {
   @include absolute-center;
-  position: absolute;
   margin: 0;
   font-size: 0.75rem;
   font-weight: bold;
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_responsive-embed.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_responsive-embed.scss
index 36cb11d0c3..e57619e438 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_responsive-embed.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_responsive-embed.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -17,9 +17,6 @@ $responsive-embed-ratios: (
   widescreen: 16 by 9,
 ) !default;
 
-// WARNING: Will be removed in version 6.4
-$responsive-embed-ratio: default;
-
 /// Creates a responsive embed container.
 /// @param {String|List} $ratio [default] - Ratio of the container. Can be a key from the `$responsive-embed-ratios` map or a list formatted as `x by y`.
 @mixin responsive-embed($ratio: default) {
@@ -58,13 +55,3 @@ $responsive-embed-ratio: default;
     }
   }
 }
-
-@mixin foundation-flex-video {
-  @warn 'This mixin is being replaced by foundation-responsive-embed(). foundation-flex-video() will be removed in Foundation 6.4.';
-  @include foundation-responsive-embed;
-}
-
-@mixin flex-video($ratio: $responsive-embed-ratio) {
-  @warn 'This mixin is being replaced by responsive-embed(). flex-video() will be removed in Foundation 6.4.';
-  @include responsive-embed($ratio);
-}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_reveal.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_reveal.scss
index b77de14273..182be77d50 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_reveal.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_reveal.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -41,6 +41,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 
 // Placeholder selector for medium-and-up modals
 // Prevents duplicate CSS when defining multiple Reveal sizes
+// This should be in the same breakpoint then `@mixin reveal-modal-width`
 @include breakpoint(medium) {
   %reveal-centered {
     right: auto;
@@ -62,7 +63,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 
   display: none;
   background-color: $background;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 /// Adds base styles for a modal.
@@ -101,8 +102,9 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   $width: $reveal-width,
   $max-width: $reveal-max-width
 ) {
+  // Extends must be made outside of breakpoints for compatibility with newer Sass versions (libsass v3.5)
+  @extend %reveal-centered;
   @include breakpoint(medium) {
-    @extend %reveal-centered;
     width: $width;
     max-width: $max-width;
   }
@@ -111,13 +113,14 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 /// Creates a full-screen modal, which stretches the full width and height of the window.
 @mixin reveal-modal-fullscreen {
   top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
 
   width: 100%;
   max-width: none;
   height: 100%;
-  height: 100vh; // sass-lint:disable-line no-duplicate-properties
-  min-height: 100vh;
+  min-height: 100%;
   margin-left: 0;
 
   border: 0;
@@ -125,18 +128,20 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 }
 
 @mixin foundation-reveal {
-  // [TODO] Is this necessary?
-  body.is-reveal-open { // sass-lint:disable-line no-qualifying-elements
-    overflow: hidden;
-  }
 
-  // html gets this class only in iOS
-  html.is-reveal-open,
-  html.is-reveal-open body {
-    min-height: 100%;
-    overflow: hidden;
+  /// Disables the scroll when Reveal is shown to prevent the background from shifting
+  html.is-reveal-open {
     position: fixed;
-    user-select: none;
+    width: 100%;
+    overflow-y: hidden;
+
+    &.zf-has-scroll {
+      overflow-y: scroll;
+    }
+
+    body { // sass-lint:disable-line no-qualifying-elements
+      overflow-y: hidden;
+    }
   }
 
   // Overlay
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_slider.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_slider.scss
index c32b228ca8..455af88dd4 100755
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_slider.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_slider.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 // [TODO] Check how plugin confirms disabled or vertical status
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_sticky.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_sticky.scss
index 378e0e216e..c2ca29daf1 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_sticky.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_sticky.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 @mixin foundation-sticky {
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_switch.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_switch.scss
index a2211c6e74..381703683f 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_switch.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_switch.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -54,6 +54,14 @@ $switch-paddle-radius: $global-radius !default;
 /// @type Number
 $switch-paddle-transition: all 0.25s ease-out !default;
 
+/// Opacity of a disabled switch.
+/// @type Number
+$switch-opacity-disabled: .5 !default;
+
+/// Cursor for a disabled switch.
+/// @type Cursor
+$switch-cursor-disabled: not-allowed !default;
+
 // make them variables
 // ask about accessibility on label
 // change class name for text
@@ -132,6 +140,12 @@ $switch-paddle-transition: all 0.25s ease-out !default;
     }
   }
 
+  // indicate a disabled switch
+  input:disabled ~ & {
+    cursor: $switch-cursor-disabled;
+    opacity: $switch-opacity-disabled;
+  }
+
   input:focus ~ & {
     @include disable-mouse-outline;
   }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_table.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_table.scss
index fc967df3da..1627f88296 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_table.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_table.scss
@@ -1,8 +1,8 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
-// sass-lint:disable force-element-nesting, no-qualifying-elements
+// sass-lint:disable no-qualifying-elements
 
 ////
 /// @group table
@@ -188,6 +188,7 @@ $table-stack-breakpoint: medium !default;
 
 /// 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.
+/// @param {Boolean} $nest [false] - Needed if you only want to apply this to a specific table.
 @mixin table(
   $stripe: $table-stripe,
   $nest: false
@@ -246,7 +247,7 @@ $table-stack-breakpoint: medium !default;
     }
 
     // Darkens the odd striped table rows.
-    @elseif($table-stripe == odd) {
+    @else if($table-stripe == odd) {
       &:not(.unstriped) tr:nth-of-type(odd):hover {
         background-color: $table-row-stripe-hover;
       }
@@ -262,7 +263,7 @@ $table-stack-breakpoint: medium !default;
     }
 
     // Darkens the odd striped table rows.
-    @elseif($table-stripe == odd) {
+    @else if($table-stripe == odd) {
       &.striped tr:nth-of-type(odd):hover {
         background-color: $table-row-stripe-hover;
       }
@@ -323,8 +324,5 @@ $table-stack-breakpoint: medium !default;
   .table-scroll {
     overflow-x: auto;
 
-    table {
-      width: auto;
-    }
   }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_tabs.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_tabs.scss
index 56d962dd73..f100b967c8 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_tabs.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_tabs.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -37,10 +37,6 @@ $tab-item-background-hover: $white !default;
 /// @type Number
 $tab-item-padding: 1.25rem 1.5rem !default;
 
-/// Maximum number of `expand-n` classes to include in the CSS.
-/// @type Number
-$tab-expand-max: 6 !default;
-
 /// Default background color of tab content.
 /// @type Color
 $tab-content-background: $white !default;
@@ -91,6 +87,7 @@ $tab-content-padding: 1rem !default;
   float: #{$global-left};
 
   > a {
+    @include disable-mouse-outline;
     display: block;
     padding: $padding;
     font-size: $font-size;
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_thumbnail.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_thumbnail.scss
index 2ce42b3115..100fd44bd9 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_thumbnail.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_thumbnail.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -8,7 +8,7 @@
 
 /// Border around thumbnail images.
 /// @type Border
-$thumbnail-border: solid 4px $white !default;
+$thumbnail-border: 4px solid $white !default;
 
 /// Bottom margin for thumbnail images.
 /// @type Length
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_title-bar.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_title-bar.scss
index e0f370c5f3..31e5fc97f9 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_title-bar.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_title-bar.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_tooltip.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_tooltip.scss
index 36dc1552a5..6df8fa2ed9 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_tooltip.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_tooltip.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_top-bar.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_top-bar.scss
index 2503a7fa70..83e01fc9a0 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_top-bar.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_top-bar.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_visibility.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_visibility.scss
index 8906f5977f..c1ef987b55 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_visibility.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/components/_visibility.scss
@@ -1,12 +1,15 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 /// Hide an element by default, only displaying it above a certain screen size.
 /// @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);
+  // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).
+  // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.
+  // See https://github.com/foundation/foundation-sites/issues/11313
+  $size: -zf-bp-to-em($size) - .00125;
 
   @include breakpoint($size down) {
     display: none !important;
@@ -20,7 +23,7 @@
   $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) - .00125;
   // test actual lower-bound-size, if 0 set it to 0em
   @if strip-unit($lower-bound-size) == 0 {
     $lower-bound: -zf-bp-to-em($lower-bound-size);
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_checkbox.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_checkbox.scss
index 60e8bfc14a..189808d4cf 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_checkbox.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_checkbox.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_error.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_error.scss
index 30e538913b..e9e90287a2 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_error.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_error.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -45,6 +45,7 @@ $input-error-font-weight: $global-weight-bold !default;
   &:not(:focus) {
     border-color: $background;
     background-color: mix($background, $white, $background-lighten);
+
     &::placeholder {
       color: $background;
     }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_fieldset.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_fieldset.scss
index 8611d5a33f..2f0db0144c 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_fieldset.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_fieldset.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_forms.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_forms.scss
index 1507fda3e4..8552a79ef5 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_forms.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_forms.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_help-text.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_help-text.scss
index 04e5237f90..f126e8bfe8 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_help-text.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_help-text.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_input-group.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_input-group.scss
index e26618a879..2d44c96719 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_input-group.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_input-group.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -22,7 +22,7 @@ $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);
+  $height: ($input-font-size * $input-line-height) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
 
   .input-group {
     display: if($global-flexbox, flex, table);
@@ -34,11 +34,13 @@ $input-prefix-padding: 1rem !default;
     }
 
     > :first-child {
-      border-radius: if($global-text-direction == rtl, 0 $input-radius $input-radius 0, $input-radius 0 0 $input-radius);
+      &, &.input-group-button > * {
+        border-radius: if($global-text-direction == rtl, 0 $input-radius $input-radius 0, $input-radius 0 0 $input-radius);
+      }
     }
 
     > :last-child {
-      > * {
+      &, &.input-group-button > * {
         border-radius: if($global-text-direction == rtl, $input-radius 0 0 $input-radius, 0 $input-radius $input-radius 0);
       }
     }
@@ -91,12 +93,8 @@ $input-prefix-padding: 1rem !default;
 
     @if $global-flexbox {
       flex: 1 1 0px; // sass-lint:disable-line zero-unit
-      height: auto;
       min-width: 0;
     }
-    @else {
-      height: $height;
-    }
   }
 
   .input-group-button {
@@ -121,8 +119,8 @@ $input-prefix-padding: 1rem !default;
       @extend %input-group-child;
 
       @if $global-flexbox {
-        height: auto;
         align-self: stretch;
+        height: auto;
       }
       @else {
         height: $height;
@@ -135,8 +133,10 @@ $input-prefix-padding: 1rem !default;
 
   // Specificity bump needed to prevent override by buttons
   @if not $global-flexbox {
-      .input-group .input-group-button {
-          display: table-cell;
+    .input-group {
+      .input-group-button {
+        display: table-cell;
       }
+    }
   }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_label.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_label.scss
index 1c388519d4..7f6557877c 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_label.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_label.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_meter.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_meter.scss
index c31b2f9e11..fd3498194b 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_meter.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_meter.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -42,8 +42,8 @@ $meter-fill-bad: $alert-color !default;
     // `-moz-appearance: none` as a prefix and neglecting the webkit.
     
     /*! autoprefixer: off */
-    -moz-appearance: none;
-         appearance: none;
+    -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+    appearance: none;
 
     @if has-value($meter-radius) {
       border-radius: $meter-radius;
@@ -101,15 +101,15 @@ $meter-fill-bad: $alert-color !default;
       }
     }
 
-    &:-moz-meter-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
+    &:-moz-meter-optimum::-moz-meter-bar {
       background: $meter-fill-good;
     }
 
-    &:-moz-meter-sub-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
+    &:-moz-meter-sub-optimum::-moz-meter-bar {
       background: $meter-fill-medium;
     }
 
-    &:-moz-meter-sub-sub-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
+    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
       background: $meter-fill-bad;
     }
   }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_progress.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_progress.scss
index 4dd37f1f35..396d0f16f2 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_progress.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_progress.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -35,7 +35,7 @@ $progress-radius: $global-radius !default;
 
     appearance: none;
 
-    @if hasvalue($progress-radius) {
+    @if has-value($progress-radius) {
       border-radius: $progress-radius;
     }
 
@@ -46,7 +46,7 @@ $progress-radius: $global-radius !default;
     &::-webkit-progress-bar {
       background: $progress-background;
 
-      @if hasvalue($progress-radius) {
+      @if has-value($progress-radius) {
         border-radius: $progress-radius;
       }
     }
@@ -54,7 +54,7 @@ $progress-radius: $global-radius !default;
     &::-webkit-progress-value {
       background: $progress-meter-background;
 
-      @if hasvalue($progress-radius) {
+      @if has-value($progress-radius) {
         border-radius: $progress-radius;
       }
     }
@@ -62,7 +62,7 @@ $progress-radius: $global-radius !default;
     &::-moz-progress-bar {
       background: $progress-meter-background;
 
-      @if hasvalue($progress-radius) {
+      @if has-value($progress-radius) {
         border-radius: $progress-radius;
       }
     }
@@ -83,8 +83,8 @@ $progress-radius: $global-radius !default;
     }
 
     // For IE and Edge
-    &::-ms-fill {
-      @if hasvalue($progress-radius) {
+    &::-ms-fill { // sass-lint:disable-line no-vendor-prefixes
+      @if has-value($progress-radius) {
         border-radius: $progress-radius;
       }
 
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_range.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_range.scss
index b5766419d5..99a283919c 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_range.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_range.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -39,7 +39,7 @@ $slider-opacity-disabled: 0.25 !default;
 $slider-radius: $global-radius !default;
 
 @mixin foundation-range-input {
-  input[type="range"] {  // sass-lint:disable-line no-qualifying-elements
+  input[type='range'] {  // sass-lint:disable-line no-qualifying-elements
     $margin: ($slider-handle-height - $slider-height) / 2;
 
     display: block;
@@ -73,12 +73,12 @@ $slider-radius: $global-radius !default;
       background: $slider-background;
     }
 
-    &::-webkit-slider-handle {
+    &::-webkit-slider-thumb {
       width: $slider-handle-width;
       height: $slider-handle-height;
       margin-top: -$margin;
 
-      -webkit-appearance: none;
+      -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
       background: $slider-handle-background;
 
       @if has-value($slider-radius) {
@@ -89,7 +89,7 @@ $slider-radius: $global-radius !default;
     // Firefox
     &::-moz-range-track {
       height: $slider-height;
-      -moz-appearance: none;
+      -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes
       background: $slider-background;
     }
 
@@ -98,7 +98,7 @@ $slider-radius: $global-radius !default;
       height: $slider-handle-height;
       margin-top: -$margin;
 
-      -moz-appearance: none;
+      -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes
       background: $slider-handle-background;
 
       @if has-value($slider-radius) {
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_select.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_select.scss
index 5f5097a077..f09419af89 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_select.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_select.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -77,6 +77,10 @@ $select-radius: $global-radius !default;
     height: auto;
     background-image: none;
   }
+  &:not([multiple]) {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
 }
 
 @mixin foundation-form-select {
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_text.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_text.scss
index b34b121ed2..5b67b5ceb6 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_text.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/forms/_text.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -139,11 +139,6 @@ $form-button-radius: $global-radius !default;
 
   input,
   textarea {
-    // Placeholder text
-    &::placeholder {
-      color: $input-placeholder-color;
-    }
-
     // Disabled/readonly state
     &:disabled,
     &[readonly] {
@@ -167,13 +162,18 @@ $form-button-radius: $global-radius !default;
   // Number input styles
   [type='number'] {
     @if not $input-number-spinners {
-      -moz-appearance: textfield; // sass-lint:disable-line no-vendor-prefix
+      -moz-appearance: textfield; // sass-lint:disable-line no-vendor-prefixes
 
       &::-webkit-inner-spin-button,
       &::-webkit-outer-spin-button {
-        -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefix
+        -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
         margin: 0;
       }
     }
   }
+
+  // Placeholder text
+  ::placeholder {
+    color: $input-placeholder-color;
+  }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/foundation.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/foundation.scss
index b32277a41f..3fa24d569b 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/foundation.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/foundation.scss
@@ -1,12 +1,12 @@
 /**
- * Foundation for Sites by ZURB
- * Version 6.4.3
- * foundation.zurb.com
+ * Foundation for Sites
+ * Version 6.6.3
+ * https://get.foundation
  * Licensed under MIT Open Source
  */
 
-// Dependencies
-@import '../_vendor/normalize-scss/sass/normalize';
+// --- Dependencies ---
+@import 'vendor/normalize';
 @import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';
 @import '../_vendor/sassy-lists/stylesheets/helpers/true';
 @import '../_vendor/sassy-lists/stylesheets/functions/contain';
@@ -15,67 +15,87 @@
 @import '../_vendor/sassy-lists/stylesheets/functions/replace';
 @import '../_vendor/sassy-lists/stylesheets/functions/to-list';
 
-// Settings
+// --- Settings ---
 // import your own `settings` here or
 // import and modify the default settings through
 // @import 'settings/settings';
 
-// Sass utilities
+// --- Components ---
+// Utilities
 @import 'util/util';
-
-// Global variables and styles
+// Global styles
 @import 'global';
+@import 'forms/forms';
+@import 'typography/typography';
 
-// Components
+// Grids
 @import 'grid/grid';
 @import 'xy-grid/xy-grid';
-@import 'typography/typography';
-@import 'forms/forms';
-@import 'components/visibility';
-@import 'components/float';
+// Generic components
 @import 'components/button';
 @import 'components/button-group';
-@import 'components/accordion-menu';
-@import 'components/accordion';
+@import 'components/close-button';
+@import 'components/label';
+@import 'components/progress-bar';
+@import 'components/slider';
+@import 'components/switch';
+@import 'components/table';
+// Basic components
 @import 'components/badge';
 @import 'components/breadcrumbs';
 @import 'components/callout';
 @import 'components/card';
-@import 'components/close-button';
-@import 'components/drilldown';
-@import 'components/dropdown-menu';
 @import 'components/dropdown';
-@import 'components/flex';
-@import 'components/responsive-embed';
-@import 'components/label';
+@import 'components/pagination';
+@import 'components/tooltip';
+
+// Containers
+@import 'components/accordion';
 @import 'components/media-object';
+@import 'components/orbit';
+@import 'components/responsive-embed';
+@import 'components/tabs';
+@import 'components/thumbnail';
+// Menu-based containers
 @import 'components/menu';
 @import 'components/menu-icon';
+@import 'components/accordion-menu';
+@import 'components/drilldown';
+@import 'components/dropdown-menu';
+
+// Layout components
 @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';
+
+// Helpers
+@import 'components/float';
+@import 'components/flex';
+@import 'components/visibility';
 @import 'prototype/prototype';
 
+
 @mixin foundation-everything(
   $flex: true,
-  $prototype: false
+  $prototype: false,
+  $xy-grid: $xy-grid
 ) {
   @if $flex {
     $global-flexbox: true !global;
   }
 
+  @if $xy-grid {
+    $xy-grid: true !global;
+  }
+
+  // Global styles
   @include foundation-global-styles;
+  @include foundation-forms;
+  @include foundation-typography;
+
+  // Grids
   @if not $flex {
     @include foundation-grid;
   }
@@ -87,47 +107,49 @@
       @include foundation-flex-grid;
     }
   }
-  @include foundation-typography;
-  @include foundation-forms;
+
+  // Generic components
   @include foundation-button;
-  @include foundation-accordion;
-  @include foundation-accordion-menu;
+  @include foundation-button-group;
+  @include foundation-close-button;
+  @include foundation-label;
+  @include foundation-progress-bar;
+  @include foundation-slider;
+  @include foundation-switch;
+  @include foundation-table;
+  // Basic components
   @include foundation-badge;
   @include foundation-breadcrumbs;
-  @include foundation-button-group;
   @include foundation-callout;
   @include foundation-card;
-  @include foundation-close-button;
+  @include foundation-dropdown;
+  @include foundation-pagination;
+  @include foundation-tooltip;
+
+  // Containers
+  @include foundation-accordion;
+  @include foundation-media-object;
+  @include foundation-orbit;
+  @include foundation-responsive-embed;
+  @include foundation-tabs;
+  @include foundation-thumbnail;
+  // Menu-based containers
   @include foundation-menu;
   @include foundation-menu-icon;
+  @include foundation-accordion-menu;
   @include foundation-drilldown-menu;
-  @include foundation-dropdown;
   @include foundation-dropdown-menu;
-  @include foundation-responsive-embed;
-  @include foundation-label;
-  @include foundation-media-object;
+
+  // Layout components
   @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-sticky;
   @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;
-  }
-
-  @if $prototype {
-    @include foundation-prototype-classes;
-  }
+  // Helpers
+  @include foundation-float-classes;
+  @if $flex { @include foundation-flex-classes; }
+  @include foundation-visibility-classes;
+  @if $prototype { @include foundation-prototype-classes; }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_classes.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_classes.scss
index 3bc26f5ab8..418ee9836a 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_classes.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_classes.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -106,20 +106,26 @@
 
       // Source ordering
       @if $i < $grid-column-count {
-        .#{$-zf-size}-#{$push}-#{$i} {
-          @include grid-col-pos($i);
+        @if $push {
+          .#{$-zf-size}-#{$push}-#{$i} {
+            @include grid-col-pos($i);
+          }
         }
 
-        .#{$-zf-size}-#{$pull}-#{$i} {
-          @include grid-col-pos(-$i);
+        @if $pull {
+          .#{$-zf-size}-#{$pull}-#{$i} {
+            @include grid-col-pos(-$i);
+          }
         }
       }
 
       // Offsets
       $o: $i - 1;
 
-      .#{$-zf-size}-#{$offset}-#{$o} {
-        @include grid-col-off($o);
+      @if $offset {
+        .#{$-zf-size}-#{$offset}-#{$o} {
+          @include grid-col-off($o);
+        }
       }
     }
 
@@ -150,15 +156,22 @@
     }
 
     // Positioning
-    .#{$-zf-size}-#{$center} {
-      @include grid-col-pos(center);
+    @if $center {
+      .#{$-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;
+    $-gutter-unpos-selector: (
+      if($uncenter, '.#{$-zf-size}-#{$uncenter}', null),
+      if($push, '.#{$-zf-size}-#{$push}-0', null),
+      if($pull, '.#{$-zf-size}-#{$pull}-0', null),
+    );
+    @if ($uncenter or $push or $pull) {
+      #{$-gutter-unpos-selector} {
+        @include grid-col-unpos;
+      }
     }
   }
 
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_column.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_column.scss
index 615e6fd2d9..be3c06dc9a 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_column.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_column.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -16,37 +16,7 @@
 ///
 /// @returns {Number} A calculated percentage value.
 @function grid-column($columns) {
-  $width: 0%;
-
-  // Parsing percents, decimals, and column counts
-  @if type-of($columns) == 'number' {
-    @if unit($columns) == '%' {
-      $width: $columns;
-    }
-    @else if $columns < 1 {
-      $width: percentage($columns);
-    }
-    @else {
-      $width: percentage($columns / $grid-column-count);
-    }
-  }
-
-  // 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".';
-    }
-    @else {
-      $width: percentage(nth($columns, 1) / nth($columns, 3));
-    }
-  }
-
-  // Anything else is incorrect
-  @else {
-    @error 'Wrong syntax for grid-column(). Use a number, decimal, percentage, or "n of n".';
-  }
-
-  @return $width;
+  @return fraction-to-percentage($columns, $denominator: $grid-column-count);
 }
 
 /// Creates a grid column.
@@ -63,12 +33,8 @@
   // Gutters
   @include grid-column-gutter($gutters: $gutters);
 
-  // Last column alignment
-  @if $grid-column-align-edge {
-    &:last-child:not(:first-child) {
-      float: $global-right;
-    }
-  }
+  // Position
+  @include grid-col-pos(auto);
 }
 
 /// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element.
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_flex-grid.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_flex-grid.scss
index 61a6d2daeb..06585d5e8a 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_flex-grid.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_flex-grid.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -13,6 +13,7 @@
 /// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.
 /// @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 {Boolean} $wrap [true] - Set to `false` to have row wrapping behavior set to nowrap
 /// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins, in case the row is nested. Responsive gutter settings by default.
 @mixin flex-grid-row(
   $behavior: null,
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_grid.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_grid.scss
index 34b2b5033b..d8a7eaf619 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_grid.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_grid.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_gutter.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_gutter.scss
index 745182fcd7..c7b5fb368f 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_gutter.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_gutter.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -30,14 +30,6 @@
   @include grid-column-gutter(0);
 }
 
-/// Un-collapse the gutters on a column by re-adding the padding.
-///
-/// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns.
-@mixin grid-column-uncollapse($gutter: $grid-column-gutter) {
-  @warn 'This mixin is being replaced by grid-column-gutter(). grid-column-uncollapse() will be removed in Foundation 6.4.';
-  @include grid-column-gutter($gutters: $gutter);
-}
-
 /// Shorthand for `grid-column-gutter()`.
 /// @alias grid-column-gutter
 @mixin grid-col-gutter(
@@ -53,13 +45,6 @@
   @include grid-column-collapse;
 }
 
-/// Shorthand for `grid-column-uncollapse()`.
-/// @alias grid-column-uncollapse
-@mixin grid-col-uncollapse($gutter: $grid-column-gutter) {
-  @warn 'This mixin is being replaced by grid-col-gutter(). grid-col-uncollapse() will be removed in Foundation 6.4.';
-  @include grid-column-uncollapse($gutter);
-}
-
 /// Sets bottom margin on grid columns to match gutters
 /// @param {Number|Keyword} $margin [auto]
 ///   The bottom margin on grid columns, accepts multiple values:
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_layout.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_layout.scss
index 1e0879113e..dde2083ed0 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_layout.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_layout.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_position.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_position.scss
index 3dcd29d69f..56f6f7e1fb 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_position.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_position.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -8,14 +8,37 @@
 
 /// Reposition a column.
 ///
-/// @param {Number|Keyword} $position - Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left. Set to center to center the column.
+/// @param {Number|Keyword} $position - It can be:
+///   * A number: The column will move equal to the width of the column count
+///     specified. A positive number will push the column to the right, while
+///     a negative number will pull it to the left.
+///   * `center`: Column will be centered
+///   * `auto`: Column will be pushed to the left (or to the right for the last column).
 @mixin grid-column-position($position) {
-  @if type-of($position) == 'number' {
+  // Auto positioning
+  @if $position == auto {
+    &, &:last-child:not(:first-child) {
+      float: $global-left;
+      clear: none;
+    }
+
+    // Last column alignment
+    @if $grid-column-align-edge {
+      &:last-child:not(:first-child) {
+        float: $global-right;
+      }
+    }
+  }
+
+  // Push/pull
+  @else if type-of($position) == 'number' {
     $offset: percentage($position / $grid-column-count);
 
     position: relative;
     #{$global-left}: $offset;
   }
+
+  // Center positioning
   @else if $position == center {
     &, &:last-child:not(:first-child) {
       float: none;
@@ -24,15 +47,16 @@
     margin-right: auto;
     margin-left: auto;
   }
+
   @else {
-    @warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, or center.';
+    @warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, "center" or "auto".';
   }
 }
 
 /// Reset a position definition.
 @mixin grid-column-unposition {
+  @include grid-column-position(auto);
   position: static;
-  float: $global-left;
   margin-right: 0;
   margin-left: 0;
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_row.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_row.scss
index e9718550ea..9356fb25ef 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_row.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_row.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_size.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_size.scss
index c01c8cab43..4978c1a1b1 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_size.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/grid/_size.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_arrow.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_arrow.scss
index 3ba57c28b7..2b467a61e9 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_arrow.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_arrow.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_border-box.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_border-box.scss
index e04b5f021b..59ce297adf 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_border-box.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_border-box.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_border-none.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_border-none.scss
index 54080384e6..9a561eedeb 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_border-none.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_border-none.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_bordered.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_bordered.scss
index 2d4d6ae8fb..c518d21499 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_bordered.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_bordered.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_box.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_box.scss
index 0d4cf8eaef..c34feb249b 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_box.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_box.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_display.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_display.scss
index 23f8b5ccad..b971a8fbaf 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_display.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_display.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_font-styling.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_font-styling.scss
index cf6f570b37..191d4a8885 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_font-styling.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_font-styling.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_list-style-type.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_list-style-type.scss
index c9678c40b3..c1fc11d6de 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_list-style-type.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_list-style-type.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_overflow.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_overflow.scss
index 8ac43d5644..1145ed6217 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_overflow.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_overflow.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_position.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_position.scss
index db0150753c..bc00910807 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_position.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_position.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_prototype.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_prototype.scss
index c0189db78c..6a22a0609c 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_prototype.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_prototype.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_relation.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_relation.scss
index dad7a45de1..87a3b35804 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_relation.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_relation.scss
@@ -91,7 +91,7 @@
   }
 }
 
-/// Will only select the child if it’s unique. That means that if there are at least 2 children, the style will not be applied.
+/// Will only select the child if it's unique. That means that if there are at least 2 children, the style will not be applied.
 @mixin unique {
   &:only-child {
     @content;
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_rotate.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_rotate.scss
index 8231db8405..8e13a7de31 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_rotate.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_rotate.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_rounded.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_rounded.scss
index 7e372110eb..0bcb96e8fc 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_rounded.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_rounded.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -30,6 +30,13 @@ $prototype-border-radius: rem-calc(3) !default;
 @mixin foundation-prototype-rounded {
   .rounded {
     @include border-rounded;
+
+    .switch-paddle {
+      @include border-rounded;
+      &:after {
+        border-radius: 50%; // For switches
+      }
+    }
   }
 
   .radius {
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_separator.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_separator.scss
index 9baf12169f..ec83aec000 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_separator.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_separator.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_shadow.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_shadow.scss
index abb44a5cb6..3f571f847a 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_shadow.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_shadow.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_sizing.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_sizing.scss
index 9b48d48f82..0196fa68bd 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_sizing.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_sizing.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_spacing.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_spacing.scss
index 19108d3b61..f0887c3cc3 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_spacing.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_spacing.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -64,137 +64,112 @@ $prototype-spacers-count: 3 !default;
   }
 }
 
-@mixin foundation-prototype-spacing {
-  @for $spacer from 0 through $prototype-spacers-count {
-    // All Sides
-    .margin-#{$spacer} {
-      @include margin($spacer, $spacer, $spacer, $spacer);
-    }
-
-    .padding-#{$spacer} {
-      @include padding($spacer, $spacer, $spacer, $spacer);
-    }
-
-    // Top Side
-    .margin-top-#{$spacer} {
-      @include margin($spacer, null, null, null);
-    }
-
-    .padding-top-#{$spacer} {
-      @include padding($spacer, null, null, null);
-    }
-
-    // Right Side
-    .margin-right-#{$spacer} {
-      @include margin(null, $spacer, null, null);
-    }
-
-    .padding-right-#{$spacer} {
-      @include padding(null, $spacer, null, null);
-    }
-
-    // Bottom Side
-    .margin-bottom-#{$spacer} {
-      @include margin(null, null, $spacer, null);
-    }
-
-    .padding-bottom-#{$spacer} {
-      @include padding(null, null, $spacer, null);
-    }
-
-    // Left Side
-    .margin-left-#{$spacer} {
-      @include margin(null, null, null, $spacer);
-    }
-
-    .padding-left-#{$spacer} {
-      @include padding(null, null, null, $spacer);
-    }
-
-    // Horizontal Axes
-    .margin-horizontal-#{$spacer} {
-      @include margin(null, $spacer, null, $spacer);
-    }
+/// Margin classes for specific direction properties
+/// @param {String} $dir [] Direction
+/// @param {Number} $spacer [] Spacer
+@mixin margin-direction($dir, $spacer) {
+  @if ($dir == top) { 
+    @include margin($top: $spacer); 
+  }
+  @else if ($dir == right) { 
+    @include margin($right: $spacer); 
+  }
+  @else if ($dir == bottom) { 
+    @include margin($bottom: $spacer); 
+  }
+  @else if ($dir == left) { 
+    @include margin($left: $spacer); 
+  }
+  @else if ($dir == horizontal) { 
+    @include margin($right: $spacer, $left: $spacer); 
+  }
+  @else if ($dir == vertical) { 
+    @include margin($top: $spacer, $bottom: $spacer); 
+  }
+}
 
-    .padding-horizontal-#{$spacer} {
-      @include padding(null, $spacer, null, $spacer);
-    }
+/// Padding classes for specific direction properties
+/// @param {String} $dir [] Direction
+/// @param {Number} $spacer [] Spacer
+@mixin padding-direction($dir, $spacer) {
+  @if ($dir == top) { 
+    @include padding($top: $spacer); 
+  }
+  @else if ($dir == right) { 
+    @include padding($right: $spacer); 
+  }
+  @else if ($dir == bottom) { 
+    @include padding($bottom: $spacer); 
+  }
+  @else if ($dir == left) { 
+    @include padding($left: $spacer); 
+  }
+  @else if ($dir == horizontal) { 
+    @include padding($right: $spacer, $left: $spacer); 
+  }
+  @else if ($dir == vertical) { 
+    @include padding($top: $spacer, $bottom: $spacer); 
+  }
+}
 
-    // Vertical Axes
-    .margin-vertical-#{$spacer} {
-      @include margin($spacer, null, $spacer, null)
-    }
+@mixin foundation-prototype-spacing {
+  @for $spacer from 0 through $prototype-spacers-count {
+    
+    @each $prop in (margin, padding) {
+      // All Sides
+      .#{$prop}-#{$spacer} {
+        @if ($prop == margin) { 
+          margin: $spacer * $global-margin !important;
+        }
+        @else if ($prop == padding) { 
+          padding: $spacer * $global-padding !important;
+        }
+      }
 
-    .padding-vertical-#{$spacer} {
-      @include padding($spacer, null, $spacer, null)
+      @each $dir in (top, right, bottom, left, horizontal, vertical) {
+        // Top Side
+        .#{$prop}-#{$dir}-#{$spacer} {
+          @if ($prop == margin) { 
+            @include margin-direction($dir, $spacer);
+          }
+          @else if ($prop == padding) {
+            @include padding-direction($dir, $spacer);
+          }
+        }
+      }
     }
+  }
 
-    @if ($prototype-spacing-breakpoints) {
+  @if ($prototype-spacing-breakpoints) {
+    @for $spacer from 0 through $prototype-spacers-count {
     // Loop through Responsive Breakpoints
       @each $size in $breakpoint-classes {
         @include breakpoint($size) {
           @if $size != $-zf-zero-breakpoint {
-            // All Sides
-            .#{$size}-margin-#{$spacer} {
-              @include margin($spacer, $spacer, $spacer, $spacer);
-            }
-
-            .#{$size}-padding-#{$spacer} {
-              @include padding($spacer, $spacer, $spacer, $spacer);
-            }
-
-            // Top Side
-            .#{$size}-margin-top-#{$spacer} {
-              @include margin($spacer, null, null, null);
-            }
-
-            .#{$size}-padding-top-#{$spacer} {
-              @include padding($spacer, null, null, null);
-            }
-
-            // Right Side
-            .#{$size}-margin-right-#{$spacer} {
-              @include margin(null, $spacer, null, null);
-            }
-
-            .#{$size}-padding-right-#{$spacer} {
-              @include padding(null, $spacer, null, null);
-            }
-
-            // Bottom Side
-            .#{$size}-margin-bottom-#{$spacer} {
-              @include margin(null, null, $spacer, null);
-            }
-
-            .#{$size}-padding-bottom-#{$spacer} {
-              @include padding(null, null, $spacer, null);
-            }
-
-            // Left Side
-            .#{$size}-margin-left-#{$spacer} {
-              @include margin(null, null, null, $spacer);
-            }
-
-            .#{$size}-padding-left-#{$spacer} {
-              @include padding(null, null, null, $spacer);
-            }
-
-            // Horizontal Axes
-            .#{$size}-margin-horizontal-#{$spacer} {
-              @include margin(null, $spacer, null, $spacer);
-            }
-
-            .#{$size}-padding-horizontal-#{$spacer} {
-              @include padding(null, $spacer, null, $spacer);
-            }
-
-            // Vertical Axes
-            .#{$size}-margin-vertical-#{$spacer} {
-              @include margin($spacer, null, $spacer, null)
-            }
-
-            .#{$size}-padding-vertical-#{$spacer} {
-              @include padding($spacer, null, $spacer, null)
+            .#{$size} {
+              @each $prop in (margin, padding) {
+                // All Sides
+                &-#{$prop}-#{$spacer} {
+                  @if ($prop == margin) { 
+                    margin: $spacer * $global-margin !important;
+                  }
+                  @else if ($prop == padding) { 
+                    padding: $spacer * $global-padding !important;
+                  }
+                }
+
+                @each $dir in (top, right, bottom, left, horizontal, vertical) {
+                  // Top Side
+                  &-#{$prop}-#{$dir}-#{$spacer} {
+                    @if ($prop == margin) { 
+                      @include margin-direction($dir, $spacer);
+                    }
+                    @else if ($prop == padding) { 
+                      @include padding-direction($dir, $spacer);
+                    }
+                  }
+                }
+              }
             }
           }
         }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_text-decoration.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_text-decoration.scss
index 8f3c913500..255f5594dc 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_text-decoration.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_text-decoration.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_text-transformation.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_text-transformation.scss
index ca9c2e4491..48532bf3ec 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_text-transformation.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_text-transformation.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_text-utilities.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_text-utilities.scss
index 8c327a2fc5..09ffd43b53 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_text-utilities.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/prototype/_text-utilities.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/settings/_settings.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/settings/_settings.scss
index 26f74f9494..8a9ab56a19 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/settings/_settings.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/settings/_settings.scss
@@ -98,6 +98,7 @@ $global-prototype-breakpoints: false;
 $global-button-cursor: auto;
 $global-color-pick-contrast-tolerance: 0;
 $print-transparent-backgrounds: true;
+$print-hrefs: true;
 
 @include add-foundation-colors;
 
@@ -111,6 +112,13 @@ $breakpoints: (
   xlarge: 1200px,
   xxlarge: 1440px,
 );
+$breakpoints-hidpi: (
+  hidpi-1: 1,
+  hidpi-1-5: 1.5,
+  hidpi-2: 2,
+  retina: 2,
+  hidpi-3: 3
+);
 $print-breakpoint: large;
 $breakpoint-classes: (small medium large);
 
@@ -161,12 +169,7 @@ $header-small-font-color: $medium-gray;
 $paragraph-lineheight: 1.6;
 $paragraph-margin-bottom: 1rem;
 $paragraph-text-rendering: optimizeLegibility;
-$code-color: $black;
-$code-font-family: $font-family-monospace;
-$code-font-weight: $global-weight-normal;
-$code-background: $light-gray;
-$code-border: 1px solid $medium-gray;
-$code-padding: rem-calc(2 5 1);
+$enable-code-inline: true;
 $anchor-color: $primary-color;
 $anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
 $anchor-text-decoration: none;
@@ -186,9 +189,7 @@ $defnlist-term-margin-bottom: 0.3rem;
 $blockquote-color: $dark-gray;
 $blockquote-padding: rem-calc(9 20 0 19);
 $blockquote-border: 1px solid $medium-gray;
-$cite-font-size: rem-calc(13);
-$cite-color: $dark-gray;
-$cite-pseudo-content: '\2014 \0020';
+$enable-cite-block: true;
 $keystroke-font: $font-family-monospace;
 $keystroke-color: $black;
 $keystroke-background: $light-gray;
@@ -207,6 +208,17 @@ $subheader-font-weight: $global-weight-normal;
 $subheader-margin-top: 0.2rem;
 $subheader-margin-bottom: 0.5rem;
 $stat-font-size: 2.5rem;
+$cite-color: $dark-gray;
+$cite-font-size: rem-calc(13);
+$cite-pseudo-content: '\2014 \0020';
+$code-color: $black;
+$code-font-family: $font-family-monospace;
+$code-font-weight: $global-weight-normal;
+$code-background: $light-gray;
+$code-border: 1px solid $medium-gray;
+$code-padding: rem-calc(2 5 1);
+$code-block-padding: 1rem;
+$code-block-margin-bottom: 1.5rem;
 
 // 6. Abide
 // --------
@@ -224,6 +236,8 @@ $input-error-font-weight: $global-weight-bold;
 
 $accordion-background: $white;
 $accordion-plusminus: true;
+$accordion-plus-content: '\002B';
+$accordion-minus-content: '\2013';
 $accordion-title-font-size: rem-calc(12);
 $accordion-item-color: $primary-color;
 $accordion-item-background-hover: $light-gray;
@@ -279,6 +293,7 @@ $breadcrumbs-item-separator-color: $medium-gray;
 // ----------
 
 $button-font-family: inherit;
+$button-font-weight: null;
 $button-padding: 0.85em 1em;
 $button-margin: 0 0 $global-margin 0;
 $button-fill: solid;
@@ -287,6 +302,7 @@ $button-background-hover: scale-color($button-background, $lightness: -15%);
 $button-color: $white;
 $button-color-alt: $black;
 $button-radius: $global-radius;
+$button-border: 1px solid transparent;
 $button-hollow-border-width: 1px;
 $button-sizes: (
   tiny: 0.6rem,
@@ -299,6 +315,7 @@ $button-opacity-disabled: 0.25;
 $button-background-hover-lightness: -20%;
 $button-hollow-hover-lightness: -50%;
 $button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
+$button-responsive-expanded: false;
 
 // 12. Button Group
 // ----------------
@@ -316,7 +333,11 @@ $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-sizes: (
+  small: 0.5rem,
+  default: 1rem,
+  large: 3rem,
+);
 $callout-font-color: $body-font-color;
 $callout-font-color-alt: $body-background;
 $callout-radius: $global-radius;
@@ -338,6 +359,8 @@ $card-margin-bottom: $global-margin;
 // ----------------
 
 $closebutton-position: right top;
+$closebutton-z-index: 10;
+$closebutton-default-size: medium;
 $closebutton-offset-horizontal: (
   small: 0.66rem,
   medium: 1rem,
@@ -390,8 +413,8 @@ $dropdownmenu-arrow-color: $anchor-color;
 $dropdownmenu-arrow-size: 6px;
 $dropdownmenu-arrow-padding: 1.5rem;
 $dropdownmenu-min-width: 200px;
-$dropdownmenu-background: $white;
-$dropdownmenu-submenu-background: $dropdownmenu-background;
+$dropdownmenu-background: null;
+$dropdownmenu-submenu-background: $white;
 $dropdownmenu-padding: $global-menu-padding;
 $dropdownmenu-nested-margin: 0;
 $dropdownmenu-submenu-padding: $dropdownmenu-padding;
@@ -473,9 +496,9 @@ $menu-nested-margin: $global-menu-nested-margin;
 $menu-items-padding: $global-menu-padding;
 $menu-simple-margin: 1rem;
 $menu-item-color-active: $white;
+$menu-item-color-alt-active: $black;
 $menu-item-background-active: get-color(primary);
 $menu-icon-spacing: 0.25rem;
-$menu-item-background-hover: $light-gray;
 $menu-state-back-compat: true;
 $menu-centered-back-compat: true;
 $menu-icons-back-compat: true;
@@ -545,6 +568,8 @@ $pagination-ellipsis-color: $black;
 $pagination-mobile-items: false;
 $pagination-mobile-current-item: false;
 $pagination-arrows: true;
+$pagination-arrow-previous: '\00AB';
+$pagination-arrow-next: '\00BB';
 
 // 28. Progress Bar
 // ----------------
@@ -766,6 +791,8 @@ $switch-paddle-background: $white;
 $switch-paddle-offset: 0.25rem;
 $switch-paddle-radius: $global-radius;
 $switch-paddle-transition: all 0.25s ease-out;
+$switch-opacity-disabled: .5;
+$switch-cursor-disabled: not-allowed;
 
 // 50. Table
 // ---------
@@ -800,7 +827,6 @@ $tab-active-color: $primary-color;
 $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: $body-font-color;
@@ -809,7 +835,7 @@ $tab-content-padding: 1rem;
 // 52. Thumbnail
 // -------------
 
-$thumbnail-border: solid 4px $white;
+$thumbnail-border: 4px solid $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);
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_alignment.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_alignment.scss
index 77ffd61741..4ce45fcda4 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_alignment.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_alignment.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 @mixin foundation-text-alignment {
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_base.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_base.scss
index 000bd33544..050b119d0e 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_base.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_base.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -79,7 +79,7 @@ $header-styles: (
   @each $size, $headers in $header-sizes {
     $header-map: ();
     @each $header, $font-size in $headers {
-      $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));  
+      $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));
     }
     $header-styles: map-merge($header-styles, ($size: $header-map));
   }
@@ -115,29 +115,9 @@ $paragraph-margin-bottom: 1rem !default;
 /// @type String
 $paragraph-text-rendering: optimizeLegibility !default;
 
-/// Text color of code samples.
-/// @type Color
-$code-color: $black !default;
-
-/// Font family of code samples.
-/// @type String | List
-$code-font-family: $font-family-monospace !default;
-
-/// Font weight of text in code samples.
-/// @type String
-$code-font-weight: $global-weight-normal !default;
-
-/// Background color of code samples.
-/// @type Color
-$code-background: $light-gray !default;
-
-/// Border around code samples.
-/// @type List
-$code-border: 1px solid $medium-gray !default;
-
-/// Padding around text of code samples.
-/// @type Number | List
-$code-padding: rem-calc(2 5 1) !default;
+/// Use the `.code-inline` component as default for `<code>` elements.
+/// @type Boolean
+$enable-code-inline: true;
 
 /// Default color for links.
 /// @type Color
@@ -215,17 +195,9 @@ $blockquote-padding: rem-calc(9 20 0 19) !default;
 /// @type List
 $blockquote-border: 1px solid $medium-gray !default;
 
-/// Font size for `<cite>` elements.
-/// @type Number
-$cite-font-size: rem-calc(13) !default;
-
-/// Text color for `<cite>` elements.
-/// @type Color
-$cite-color: $dark-gray !default;
-
-/// Pseudo content for `<cite>` elements.
-/// @type String
-$cite-pseudo-content: '\2014 \0020' !default;
+/// Use the `.cite-block` component as default for `<cite>` elements.
+/// @type Boolean
+$enable-cite-block: true;
 
 /// Font family for `<kbd>` elements.
 /// @type String | List
@@ -457,14 +429,12 @@ $abbr-underline: 1px dotted $black !default;
     }
   }
 
-  // Citations
-  cite {
-    display: block;
-    font-size: $cite-font-size;
-    color: $cite-color;
-
-    &:before {
-      content: $cite-pseudo-content;
+  // Inline Citations
+  @if ($enable-cite-block == true) {
+    cite {
+      // Extending a class is not recommended.
+      // TODO: Break the typography-base/typography-helpers separation
+      @extend .cite-block;
     }
   }
 
@@ -479,17 +449,12 @@ $abbr-underline: 1px dotted $black !default;
   figure {
     margin: 0;
   }
-  
-  // Code
-  code {
-    padding: $code-padding;
-
-    border: $code-border;
-    background-color: $code-background;
 
-    font-family: $code-font-family;
-    font-weight: $code-font-weight;
-    color: $code-color;
+  // Code
+  @if ($enable-code-inline == true) {
+    code {
+      @extend .code-inline;
+    }
   }
 
   // Keystrokes
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_helpers.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_helpers.scss
index f34ac03ac4..323b285ce0 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_helpers.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_helpers.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -26,7 +26,7 @@ $subheader-color: $dark-gray !default;
 /// @type String
 $subheader-font-weight: $global-weight-normal !default;
 
-/// Default top margin for subhheaders.
+/// Default top margin for subheaders.
 /// @type Number
 $subheader-margin-top: 0.2rem !default;
 
@@ -38,6 +38,92 @@ $subheader-margin-bottom: 0.5rem !default;
 /// @type Number
 $stat-font-size: 2.5rem !default;
 
+/// Text color for `.cite-block` component.
+/// @type Color
+$cite-color: $dark-gray !default;
+
+/// Font size for `.cite-block` component.
+/// @type Number
+$cite-font-size: rem-calc(13) !default;
+
+/// Pseudo content for `.cite-block` component.
+/// @type String
+$cite-pseudo-content: '\2014 \0020' !default;
+
+/// Text color of `.code-inline` and `.code-block` components.
+/// @type Color
+$code-color: $black !default;
+
+/// Font family of `.code-inline` and `.code-block` components.
+/// @type String | List
+$code-font-family: $font-family-monospace !default;
+
+/// Font weight of text in `.code-inline` and `.code-block` components.
+/// @type String
+$code-font-weight: $global-weight-normal !default;
+
+/// Background color of `.code-inline` and `.code-block` components.
+/// @type Color
+$code-background: $light-gray !default;
+
+/// Border around `.code-inline` and `.code-block` components.
+/// @type List
+$code-border: 1px solid $medium-gray !default;
+
+/// Padding around text of the `.code-inline` component.
+/// @type Number | List
+$code-padding: rem-calc(2 5 1) !default;
+
+/// Padding around text of the `.code-block` component.
+/// @type Number | List
+$code-block-padding: 1rem !default;
+
+/// Margin under the `.code-block` component.
+/// @type Number
+$code-block-margin-bottom: 1.5rem !default;
+
+@mixin cite-block {
+  display: block;
+  color: $cite-color;
+  font-size: $cite-font-size;
+
+  &:before {
+    content: $cite-pseudo-content;
+  }
+}
+
+/// Add basic styles for a code helper.
+/// See `code-inline` and `code-block` mixins.
+@mixin code-style {
+  border: $code-border;
+  background-color: $code-background;
+
+  font-family: $code-font-family;
+  font-weight: $code-font-weight;
+  color: $code-color;
+}
+
+/// Make code helper from the `code-style` mixin inline.
+/// Used to generate `.code-inline`
+@mixin code-inline {
+  display: inline;
+  max-width: 100%;
+  word-wrap: break-word;
+
+  padding: $code-padding;
+}
+
+/// Make code helper from the `code-style` mixin a block.
+/// Used to generate `.code-block`
+@mixin code-block {
+  display: block;
+  overflow: auto;
+  white-space: pre;
+
+  padding: $code-block-padding;
+  margin-bottom: $code-block-margin-bottom;
+}
+
 @mixin foundation-typography-helpers {
   // Use to create a subheading under a main header
   // Make sure you pair the two elements in a <header> element, like this:
@@ -77,4 +163,18 @@ $stat-font-size: 2.5rem !default;
       list-style: none;
     }
   }
+
+  .cite-block {
+    @include cite-block;
+  }
+
+  .code-inline {
+    @include code-style;
+    @include code-inline;
+  }
+
+  .code-block {
+    @include code-style;
+    @include code-block;
+  }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_print.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_print.scss
index 25255b8543..716b2c9f99 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_print.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_print.scss
@@ -1,11 +1,15 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 /// If `true`, all elements will have transparent backgrounds when printed, to save on ink.
 /// @type Boolean
 /// @group global
 $print-transparent-backgrounds: true !default;
+
+/// If `true`, displays next to all links their "href" when printed.
+/// @type Boolean
+/// @group global
 $print-hrefs: true !default;
 
 // sass-lint:disable-all
@@ -15,13 +19,19 @@ $print-hrefs: true !default;
 
   @media print {
     * {
+      // Ensure a "black-on-white" print by removing backgrounds,
+      // using black text everywhere and forcing the browser to economize ink.
       @if $print-transparent-backgrounds {
         background: transparent !important;
+        color: black !important; // Black prints faster: h5bp.com/s
+        color-adjust: economy;
+      }
+      // Otherwise, prevent any economy by the browser.
+      @else {
+        color-adjust: exact;
       }
 
       box-shadow: none !important;
-
-      color: black !important; // Black prints faster: h5bp.com/s
       text-shadow: none !important;
     }
 
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_typography.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_typography.scss
index c794126adf..bba6db6534 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_typography.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_typography.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_breakpoint.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_breakpoint.scss
index dbfae8c4bc..9c3e379279 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_breakpoint.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_breakpoint.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -16,6 +16,17 @@ $breakpoints: (
   xxlarge: 1440px,
 ) !default;
 
+/// A list of named HiDPI breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries for resolutions.
+/// Values must represent the device pixels / web pixels ration and be unitless or in DPPX.
+/// @type Map
+$breakpoints-hidpi: (
+  hidpi-1: 1,
+  hidpi-1-5: 1.5,
+  hidpi-2: 2,
+  retina: 2,
+  hidpi-3: 3
+) !default;
+
 /// The largest named breakpoint in which to include print as a media type
 /// @type Keyword
 $print-breakpoint: large !default;
@@ -25,7 +36,7 @@ $-zf-zero-breakpoint: small !default;
 $-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');
 
 @if nth(map-values($breakpoints), 1) != 0 {
-  @error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
+  @error 'The first key in the $breakpoints map must have a value of "0".';
 }
 @else {
   $-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);
@@ -39,148 +50,146 @@ $breakpoint-classes: (small medium large) !default;
 ///
 /// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
 @function breakpoint($val: $-zf-zero-breakpoint) {
+  // Web standard Pixels per inch. (1ddpx / $std-web-dpi) = 1dpi
+  // See https://www.w3.org/TR/css-values-3/#absolute-lengths
+  $std-web-dpi: 96;
+
   // Size or keyword
   $bp: nth($val, 1);
+  // Value of the following breakpoint
+  $bp-next: null;
   // Value for max-width media queries
-  $bp-max: 0;
+  $bp-min: null;
+  // Value for min-width media queries
+  $bp-max: null;
   // Direction of media query (up, down, or only)
   $dir: if(length($val) > 1, nth($val, 2), up);
-  // Eventual output
-  $str: '';
-  // Is it a named media query?
-  $named: false;
+  // If named, name of the breakpoint
+  $name: null;
+  // If the breakpoint is a HiDPI breakpoint
+  $hidpi: false;
 
   // Orientation media queries have a unique syntax
   @if $bp == 'landscape' or $bp == 'portrait' {
     @return '(orientation: #{$bp})';
   }
-  @else if $bp == 'retina' {
-    @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
-  }
 
-  // Try to pull a named breakpoint out of the $breakpoints map
+  // If a breakpoint name is given, get its value from the $breakpoints/$breakpoints-hidpi map.
   @if type-of($bp) == 'string' {
     @if map-has-key($breakpoints, $bp) {
-      @if $dir == 'only' or $dir == 'down' {
-        $bp-max: -zf-map-next($breakpoints, $bp);
-      }
-
-      $bp: map-get($breakpoints, $bp);
-      $named: true;
+      $name: $bp;
+      $bp: map-get($breakpoints, $name);
+      $bp-next: -zf-map-next($breakpoints, $name);
+    }
+    @else if map-has-key($breakpoints-hidpi, $bp) {
+      $name: $bp;
+      $bp: map-get($breakpoints-hidpi, $name);
+      $bp-next: -zf-map-next-number($breakpoints-hidpi, $bp);
+      $hidpi: true;
     }
     @else {
       $bp: 0;
-      @warn 'breakpoint(): "#{$val}" is not defined in your $breakpoints setting.';
+      @warn 'breakpoint(): "#{$val}" is not defined in your `$breakpoints` or `$breakpoints-hidpi` setting.';
     }
   }
 
-  // Convert any pixel, rem, or unitless value to em
-  $bp: -zf-bp-to-em($bp);
-  @if $bp-max {
-    $bp-max: -zf-bp-to-em($bp-max) - (1/16);
+  @if not $name and $dir == 'only' {
+    @warn 'breakpoint(): Only named media queries can have an `only` range.';
+    @return null;
   }
 
-  // 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 {
-        // 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 + '(max-width: #{$bp-max})';
-        }
-      }
-      @else {
-        @warn 'breakpoint(): Only named media queries can have an `only` range.';
-      }
-    }
-
-    // `down` ranges use the format `(max-width: n)`
-    @else if $dir == 'down' {
-      $max: if($named, $bp-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})';
-        }
-      }
+  // Only 'only' and 'up' have a min limit.
+  @if $dir == 'only' or $dir == 'up' {
+    $bp-min: if($hidpi, strip-unit($bp), -zf-bp-to-em($bp));
+  }
+  // Only 'only' and 'down' have a max limit.
+  @if $dir == 'only' or $dir == 'down' {
+    // If the breakpoint is a value, use it as max limit.
+    @if not $name {
+      $bp-max: if($hidpi, strip-unit($bp), -zf-bp-to-em($bp));
     }
-
-    // `up` ranges use the format `(min-width: n)`
-    @else if $bp > 0em {
-      $str: $str + '(min-width: #{$bp})';
+    // If the breakpoint is named, the max limit is the following breakpoint - 1px.
+    @else if $bp-next {
+      // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).
+      // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.
+      // See https://github.com/foundation/foundation-sites/issues/11313
+      $bp-max: if($hidpi, $bp-next - (1/$std-web-dpi), -zf-bp-to-em($bp-next) - 0.00125);
     }
   }
 
-  @return $str;
+  // Generate the media query string from min and max limits.
+  @if $hidpi {
+    // Generate values in DPI instead of DPPX for an IE9-11/Opera mini compatibility.
+    // See https://caniuse.com/#feat=css-media-resolution
+    $bp-min-dpi: if($bp-min, $bp-min * $std-web-dpi * 1dpi, $bp-min);
+    $bp-max-dpi: if($bp-max, $bp-max * $std-web-dpi * 1dpi, $bp-max);
+    @return zf-str-join(
+      -zf-bp-join($bp-min, $bp-max, '-webkit-min-device-pixel-ratio', '-webkit-max-device-pixel-ratio'),
+      -zf-bp-join($bp-min-dpi, $bp-max-dpi, 'min-resolution', 'max-resolution'),
+      ', ');
+  }
+  @else {
+    @return -zf-bp-join($bp-min, $bp-max);
+  }
 }
 
 /// 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 string is passed, the mixin will look for it in the `$breakpoints` and `$breakpoints-hidpi` maps, and use a media query there.
 ///  - 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.
 ///
-/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.
+/// If multiple values are passed, the mixin will generate a media query for each of them as described above.
+/// Since the content is duplicated for each breakpoint, this mixin should only be used with properties that
+/// change across breakpoints.
+///
+/// @param {Keyword|Number} $values... - Breakpoint name or px/rem/em value to process.
 ///
 /// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.
-@mixin breakpoint($value) {
-  $str: breakpoint($value);
-  $bp: index($-zf-breakpoints-keys, $value);
-  $pbp: index($-zf-breakpoints-keys, $print-breakpoint);
-
-  $old-zf-size: null;
-
-  // Make breakpoint size available as a variable
-  @if global-variable-exists(-zf-size) {
-    $old-zf-size: $-zf-size;
-  }
-  $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
-
-  // If $str is still an empty string, no media query is needed
-  @if $str == '' {
-    @content;
-  }
+@mixin breakpoint($values...) {
+  @for $i from 1 through length($values) {
+    $value: nth($values, $i);
+    $str: breakpoint($value);
+    $bp: index($-zf-breakpoints-keys, nth($value, 1));
+    $pbp: index($-zf-breakpoints-keys, $print-breakpoint);
+    // Direction of media query (up, down, or only)
+    $dir: if(length($value) > 1, nth($value, 2), up);
+
+    $old-zf-size: null;
+
+    // Make breakpoint size available as a variable
+    @if global-variable-exists(-zf-size) {
+      $old-zf-size: $-zf-size;
+    }
+    $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
 
-  // Otherwise, wrap the content in a media query
-  @else {
-    // For named breakpoints less than or equal to $print-breakpoint, add print to the media types
-    @if $bp != null and $bp <= $pbp {
-      @media print, screen and #{$str} {
-        @content;
-       }
+    // If $str is still an empty string, no media query is needed
+    @if $str == '' {
+      @content;
     }
+
+    // Otherwise, wrap the content in a media query
     @else {
-      @media screen and #{$str} {
-        @content;
+      // For named breakpoints less than or equal to $print-breakpoint, add print to the media types
+      // generate print if the breakpoint affects the print-breakpoint (or smaller).
+      // This means the current condition only needs to be extended so 'down' always generates print.
+      @if $bp != null and ($bp <= $pbp or $dir == down) {
+        @media print, screen and #{$str} {
+          @content;
+        }
+      }
+      @else {
+        @media screen and #{$str} {
+          @content;
+        }
       }
     }
-  }
 
-  @if $old-zf-size != null {
-    // Restore the old breakpoint size
     $-zf-size: $old-zf-size !global;
-  } @else {
-    $-zf-size: null !global;
   }
 }
 
-/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `<meta>` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.
+/// Converts the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `<meta>` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.
 /// @access private
 ///
 /// @param {Map} $map - Map to convert.
@@ -226,6 +235,26 @@ $breakpoint-classes: (small medium large) !default;
 
 }
 
+/// Find the next number in a map.
+/// @access private
+///
+/// @param {Map} $map - Map to traverse.
+/// @param {Mixed} $number - Number to use as a starting point.
+///
+/// @returns {Mixed} The number following `$number`, if `$number` was found. If `$number` was not found, or `$number` was the biggest number in the map, returns `null`.
+@function -zf-map-next-number($map, $number) {
+
+  $next_number: null;
+
+  @each $k, $v in $map {
+    @if type-of($v) == 'number' and $v > $number and ($next_number == null or $v < $next_number) {
+      $next_number: $v;
+    }
+  }
+
+  @return $next_number;
+}
+
 /// Return a list of our named breakpoints less than $key. Useful for dealing with
 /// responsive gutters for the grid.
 /// @access private
@@ -252,7 +281,7 @@ $breakpoint-classes: (small medium large) !default;
 /// responsive gutters for the grid.
 /// @access private
 ///
-/// @param {String} $breakpoing - a named or non-named breakpoing.
+/// @param {String} $breakpoint - a named or non-named breakpoint.
 ///
 /// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero
 @function -zf-closest-named-breakpoint($breakpoint) {
@@ -323,26 +352,84 @@ $breakpoint-classes: (small medium large) !default;
   }
 }
 
+/// Return the best breakpoint to use according to the calling context. It returns in order:
+/// 1. the given `$value` argument if it is not null.
+/// 2. the global breakpoint context `$-zf-size` if it is not null (like if called inside then `breakpoint()` mixin)
+/// 3. the given `$default` argument.
+/// @access private
+///
+/// @param {Keyword} $value [null] - Breakpoint to use in priority if non-null.
+/// @param {Keyword} $default [null] - Breakpoint to use by default if no other value can be used.
+///
+/// @return {Keyword} The resolved breakpoint.
+@function -zf-current-breakpoint($value: null, $default: null) {
+  @if ($value != null) {
+    @return $value;
+  }
+  @else if (variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
+    @return $-zf-size;
+  }
+  @else {
+    @return $default;
+  }
+}
+
+/// Return media query string from the given min and/or max limits.
+/// If a limit is equal to `null` or `0`, it is ignored.
+/// @access private
+///
+/// @param {Number} $min [0] - Min media query limit.
+/// @param {Number} $max [0] - Max media query limit.
+/// @param {String} $min-name ['min-width'] - Name of the min media query limit.
+/// @param {String} $delimiter ['max-width'] - Name of the max media query limit.
+///
+/// @returns {String} Media Query string.
+@function -zf-bp-join(
+  $min: 0,
+  $max: 0,
+  $min-name: 'min-width',
+  $max-name: 'max-width'
+) {
+  @return zf-str-join(
+    if($min and $min > 0, '(#{$min-name}: #{$min})', null),
+    if($max and $max > 0, '(#{$max-name}: #{$max})', null),
+    ' and ');
+}
+
+$small-up: '';
+$small-only: '';
+
 @if map-has-key($breakpoints, small) {
   $small-up: screen;
   $small-only: unquote('screen and #{breakpoint(small only)}');
 }
 
+$medium-up: '';
+$medium-only: '';
+
 @if map-has-key($breakpoints, medium) {
   $medium-up: unquote('screen and #{breakpoint(medium)}');
   $medium-only: unquote('screen and #{breakpoint(medium only)}');
 }
 
+$large-up: '';
+$large-only: '';
+
 @if map-has-key($breakpoints, large) {
   $large-up: unquote('screen and #{breakpoint(large)}');
   $large-only: unquote('screen and #{breakpoint(large only)}');
 }
 
+$xlarge-up: '';
+$xlarge-only: '';
+
 @if map-has-key($breakpoints, xlarge) {
   $xlarge-up: unquote('screen and #{breakpoint(xlarge)}');
   $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');
 }
 
+$xxlarge-up: '';
+
 @if map-has-key($breakpoints, xxlarge) {
   $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_color.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_color.scss
index 11a04d9f41..da2ad51e8b 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_color.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_color.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 @import 'math';
@@ -109,21 +109,31 @@ $contrast-warnings: true !default;
   }
 }
 
-/// Transfers the colors in the `$foundation-palette`map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.
+/// Transfers the colors in the `$foundation-palette` map into 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;
+  } @else {
+    $primary-color: #1779ba !global;
   }
   @if map-has-key($foundation-palette, secondary) {
     $secondary-color: map-get($foundation-palette, secondary) !global;
+  } @else {
+    $secondary-color: #767676 !global;
   }
   @if map-has-key($foundation-palette, success) {
     $success-color: map-get($foundation-palette, success) !global;
+  } @else {
+    $success-color: #3adb76 !global;
   }
   @if map-has-key($foundation-palette, warning) {
     $warning-color: map-get($foundation-palette, warning) !global;
+  } @else {
+    $warning-color: #ffae00 !global;
   }
   @if map-has-key($foundation-palette, alert) {
     $alert-color: map-get($foundation-palette, alert) !global;
+  } @else {
+    $alert-color: #cc4b37 !global;
   }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_direction.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_direction.scss
index 98a868aa0d..8241e8da1f 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_direction.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_direction.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -21,7 +21,7 @@
     @return null;
   }
 
-  // Calcul the opposite place in a circle, with a starting index of 1
+  // Calculate the opposite place in a circle, with a starting index of 1
   $length: length($dirs);
   $demi: $length / 2;
   $opposite-place: (($place + $demi - 1) % $length) + 1;
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_flex.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_flex.scss
index cd24dd7197..2a48b6dbdb 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_flex.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_flex.scss
@@ -1,10 +1,15 @@
-$-zf-flex-justify: (
-  'left': flex-start,
-  'right': flex-end,
-  'center': center,
-  'justify': space-between,
-  'spaced': space-around,
-);
+@function -zf-flex-justify($text-direction){
+  $-zf-flex-justify: (
+    'left': if($text-direction == rtl, flex-end, flex-start),
+    'right': if($text-direction == rtl, flex-start, flex-end),
+    'center': center,
+    'justify': space-between,
+    'spaced': space-around,
+  );
+
+  @return $-zf-flex-justify;
+}
+
 
 $-zf-flex-align: (
   'top': flex-start,
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_math.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_math.scss
index e3d1908864..c94b2c9c47 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_math.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_math.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -70,3 +70,78 @@
   $h: nth($ratio, 3);
   @return $h / $w * 100%;
 }
+
+/// Parse the given `$fraction` to numerators and denumerators.
+///
+/// @param {*} $fraction - Value representing a fraction to parse. It can be formatted as `50%`, `1 of 2`, `1/2` or `50` (no denominator would be returned).
+///
+/// @return {List} List of parsed values with numerator at first position and denumerator as second. These values may be null.
+@function zf-parse-fraction($fraction) {
+
+  @if type-of($fraction) == 'number' {
+    // "50%"
+    @if unit($fraction) == '%' {
+      @return (strip-unit($fraction), 100);
+    }
+    @else if (unit($fraction) == '') {
+      // "0.5"
+      @if $fraction < 1 {
+        @return ($fraction * 100, 100);
+      }
+      // "50"
+      @else {
+        @return ($fraction, null);
+      }
+    }
+  }
+
+  @else if type-of($fraction) == 'list' {
+    // "50 of 100", "50/100"...
+    @if length($fraction) == 3
+      and type-of(nth($fraction, 1) == 'number')
+      and type-of(nth($fraction, 3) == 'number') {
+      @return (nth($fraction, 1), nth($fraction, 3));
+    }
+  }
+
+  @return (null, null);
+}
+
+/// Returns whether the given `$value` represents a fraction. Supports formats like `50%`, `1 of 2`, `1 per 2` or `1/2`.
+///
+/// @param {*} $value - Value to test.
+/// @param {Boolean} $allow-no-denominator [false] - If `true`, simple numbers without denominators like `50` are supported.
+///
+/// @return {Boolean} `true` if `$value` represents a fraction, `false` otherwise.
+@function zf-is-fraction($value, $allow-no-denominator: false) {
+  $parsed: zf-parse-fraction($value);
+  @return not(nth($parsed, 1) == null
+    or (nth($parsed, 2) == null and $allow-no-denominator == false));
+}
+
+/// Calculate a percentage from a given fraction.
+///
+/// @param {Number|List} $fraction - Value representing a fraction to use to calculate the percentage, formatted as `50` (relative to `$denominator`), `50%`, `1 of 2` or `1/2`.
+/// @param {Number|List} $denominator - Default value to use as denominator when `$fraction` represents an absolute value.
+@function fraction-to-percentage(
+  $fraction,
+  $denominator: null
+) {
+  $parsed: zf-parse-fraction($fraction);
+  $parsed-nominator: nth($parsed, 1);
+  $parsed-denominator: nth($parsed, 2);
+
+  @if $parsed-nominator == null {
+    @error 'Wrong syntax for "fraction-to-percentage()". Use a number, decimal, percentage, or "n of n" / "n/n".';
+  }
+  @if $parsed-denominator == null {
+    @if type-of($denominator) == 'number' {
+      $parsed-denominator: $denominator;
+    }
+    @else {
+      @error 'Error with "fraction-to-percentage()". A default "$denominator" is required to support absolute values';
+    }
+  }
+
+  @return percentage($parsed-nominator / $parsed-denominator);
+}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_mixins.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_mixins.scss
index d5dbfdb656..af615ddec4 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_mixins.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_mixins.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -7,7 +7,7 @@
 ////
 
 /// Creates an inner box-shadow for only one side
-/// 
+///
 /// @param {Keyword} $side - Side the shadow is supposed to appear. Can be `top`, `left`, `right` or `bottom`.
 /// @param {Number} $size - Width for the target side.
 /// @param {Color} $color - Color of the shadow.
@@ -207,27 +207,36 @@
 /// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
 /// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility
 /// @link http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
-@mixin element-invisible {
-  position: absolute !important;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  clip-path: inset(50%);
-  border: 0;
+///
+/// @param {Boolean} $enforce - If `true`, use `!important` on applied properties
+@mixin element-invisible(
+  $enforce: true
+) {
+  $important: if($enforce, '!important', null);
+
+  position: absolute #{$important};
+  width: 1px #{$important};
+  height: 1px #{$important};
+  padding: 0 #{$important};
+  overflow: hidden #{$important};
+  clip: rect(0,0,0,0) #{$important};
+  white-space: nowrap #{$important};
+  border: 0 #{$important};
 }
 
 /// Reverses the CSS output created by the `element-invisible()` mixin.
-@mixin element-invisible-off {
-  position: static !important;
-  width: auto;
-  height: auto;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
-  clip-path: none;
+/// @param {Boolean} $enforce - If `true`, use `!important` on applied properties
+@mixin element-invisible-off(
+  $enforce: true
+) {
+  $important: if($enforce, '!important', null);
+
+  position: static #{$important};
+  width: auto #{$important};
+  height: auto #{$important};
+  overflow: visible #{$important};
+  clip: auto #{$important};
+  white-space: normal #{$important};
 }
 
 /// Vertically centers the element inside of its first non-static parent,
@@ -259,24 +268,72 @@
 ///
 /// @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.
 /// @param {Boolean} $auto-insert-breakpoints [true] - If `false`, the mixin will iterate over breakpoints without doing the media query itself. Useful for more complex media query generation as in the margin grid.
-@mixin -zf-each-breakpoint($small: true, $auto-insert-breakpoints: true) {
-  $list: $breakpoint-classes;
+@mixin -zf-each-breakpoint(
+  $small: true,
+  $auto-insert-breakpoints: true
+) {
+  @include -zf-each-breakpoint-in(auto, -zf-bool($small), -zf-bool($auto-insert-breakpoints)) {
+    @content
+  };
+}
+
+/// Iterates with `@content` through the given list of breakpoints `$breakpoints`.
+///
+/// @access private
+///
+/// @param {Keyword|List} $breakpoints [auto] - Breakpoints to iterates on. It can be a breakpoint name, list of breakpoints or `auto` for all breakpoints.
+/// @param {Boolean|Null} $zero-breakpoint [null] - Whether the zero-breakpoint (often `small`) must be included. If `true`, it will always be added to the list if not already there. If `false`, it will always be removed. Does nothing by default.
+/// @param {Boolean|Keyword} $media-queries [true] - Whether media-queries must be generated. If `for-lists`, only generate media-queries when `$breakpoints` is a list.
+@mixin -zf-each-breakpoint-in(
+  $breakpoints: auto,
+  $zero-breakpoint: null,
+  $media-queries: true
+) {
+  $-list: ();
+  $-breakpoints-is-a-list: true;
 
-  @if not $small {
-    $list: sl-remove($list, $-zf-zero-breakpoint);
+  // Retrieve the list of breakpoint(s) to iterate on.
+  @if $breakpoints == auto {
+    $-list: $breakpoint-classes;
+  }
+  @else if type-of($breakpoints) == 'list' {
+    $-list: $breakpoints;
+  }
+  @else if type-of($breakpoints) == 'string' {
+    $-list: ($breakpoints);
+    $-breakpoints-is-a-list: false;
+  }
+  @else {
+    @error 'Wrong syntax for "$breakpoints" in "-zf-each-breakpoint-in()". Got "#{$breakpoints}" (#{type-of($breakpoints)}). Expected a breakpoint name, a list of breakpoints or "auto"';
+  }
+
+  // Add or remove the zero breakpoint according to `$zero-breakpoint`
+  @if $zero-breakpoint == true {
+    $-list: join(($-zf-zero-breakpoint), sl-remove($-list, $-zf-zero-breakpoint));
+  }
+  @else if $zero-breakpoint == false {
+    $-list: sl-remove($-list, $-zf-zero-breakpoint);
   }
 
-  @each $name in $list {
-    $-zf-size: $name !global;
+  // Iterate on breakpoint(s)
+  @each $bp in $-list {
+    $old-zf-size: null;
+    @if global-variable-exists(-zf-size) {
+      $old-zf-size: $-zf-size;
+    }
+    $-zf-size: $bp !global;
 
-    @if $auto-insert-breakpoints {
-      @include breakpoint($name) {
+    @if ($media-queries == true
+      or ($media-queries == 'for-lists' and $-breakpoints-is-a-list)) {
+      @include breakpoint($bp) {
         @content;
       }
     }
     @else {
       @content;
     }
+
+    $-zf-size: $old-zf-size !global;
   }
 }
 
@@ -303,7 +360,10 @@
   @else {
     // breakpoint name
     @if type-of($name) == 'string' {
-      $name: -zf-get-bp-val($map, $name);
+      $bp-value: -zf-get-bp-val($map, $name);
+      @if $bp-value != null {
+        $name: $bp-value;
+      }
     }
 
     // breakpoint value
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_selector.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_selector.scss
index 2c79c04112..626f86c4e9 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_selector.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_selector.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_typography.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_typography.scss
index adff086aea..19e253eb77 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_typography.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_typography.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_unit.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_unit.scss
index 6d60f38543..beebcdf53c 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_unit.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_unit.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -20,7 +20,7 @@ $global-font-size: 100% !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 [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.
+/// @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 `$global-font-size` variable as the base.
 ///
 /// @returns {List} A list of converted values.
 @function rem-calc($values, $base: null) {
@@ -125,7 +125,7 @@ $global-font-size: 100% !default;
     $base: strip-unit($base) * 16px;
   }
 
-  // Now lets convert our value to pixels too
+  // Now let's convert our value to pixels too
   @if unit($value) == '%' {
     $value: ($value / 100%) * $base;
   }
@@ -143,7 +143,7 @@ $global-font-size: 100% !default;
     @return strip-unit($value) / strip-unit($base);
   }
 
-  // assume that line-heights greatern then 10 are meant to be absolute in 'px'
+  // assume that line-heights greater than 10 are meant to be absolute in 'px'
   @if unitless($value) and ($value > 10) {
     @return $value / strip-unit($base);
   }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_util.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_util.scss
index ddcb59eb06..e50fd7b5b2 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_util.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_util.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 @import 'math';
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_value.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_value.scss
index a063a82af6..d7605bd81b 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_value.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_value.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -139,6 +139,35 @@
 
 }
 
+/// Return a join of the two given strings `$str1` and `$str2`.
+/// If the two strings are not empty, they are separated by `$delimiter`.
+///
+/// @param {String} $str1 [null] - First string to join.
+/// @param {String} $str1 [null] - Second string to join.
+/// @param {String} $delimiter [null] - Delimieter between `$str1` and `$str2`.
+///
+/// @returns {String} Join of `$str1`, `$delimiter` and `$str2`.
+@function zf-str-join(
+  $str1: null,
+  $str2: null,
+  $delimiter: null
+) {
+  $ret: '';
+
+  @if $str1 and str-length($str1) > 0 {
+    $ret: $ret + $str1;
+
+    @if $delimiter and str-length($delimiter) > 0 and $str2 and str-length($str2) > 0 {
+      $ret: $ret + $delimiter;
+    }
+  }
+  @if $str2 and str-length($str2) > 0 {
+    $ret: $ret + $str2;
+  }
+
+  @return $ret;
+}
+
 /// Safely return a value from a map.
 ///
 /// @param {Map} $map - Map to retrieve a value from.
@@ -158,3 +187,14 @@
     @error '`#{$map}` is not a valid map';
   }
 }
+
+/// Convert the given `$val` to a Boolean. Empty values are considered as false.
+////
+/// @access private
+///
+/// @param {*} $val - Value to convert.
+///
+/// @returns {Boolean} Converted Boolean value.
+@function -zf-bool($val) {
+  @return $val != false and has-value($val);
+}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/vendor/normalize.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/vendor/normalize.scss
new file mode 100644
index 0000000000..1023303a0b
--- /dev/null
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/vendor/normalize.scss
@@ -0,0 +1,281 @@
+@mixin foundation-normalize() {
+  /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+  // Document
+  // ==========================================================================
+
+  // 1. Correct the line height in all browsers.
+  // 2. Prevent adjustments of font size after orientation changes in iOS.
+
+  html {
+    line-height: 1.15; // 1
+    -webkit-text-size-adjust: 100%; // 2
+  }
+
+  // Sections
+  // ==========================================================================
+
+  // Remove the margin in all browsers.
+
+  body {
+    margin: 0;
+  }
+
+  // Correct the font size and margin on `h1` elements within `section` and
+  // `article` contexts in Chrome, Firefox, and Safari.
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+  // Grouping content
+  // ==========================================================================
+
+  // 1. Add the correct box sizing in Firefox.
+  // 2. Show the overflow in Edge and IE.
+
+  hr {
+    box-sizing: content-box; // 1
+    height: 0; // 1
+    overflow: visible; // 2
+  }
+
+  // 1. Correct the inheritance and scaling of font size in all browsers.
+  // 2. Correct the odd `em` font sizing in all browsers.
+
+  pre {
+    font-family: monospace, monospace; // 1
+    font-size: 1em; // 2
+  }
+
+  // Text-level semantics
+  // ==========================================================================
+
+  // Remove the gray background on active links in IE 10.
+
+  a {
+    background-color: transparent;
+  }
+
+  // 1. Remove the bottom border in Chrome 57-
+  // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+
+  abbr[title] {
+    border-bottom: none; // 1
+    text-decoration: underline; // 2
+    text-decoration: underline dotted; // 2
+  }
+
+  // Add the correct font weight in Chrome, Edge, and Safari.
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  // 1. Correct the inheritance and scaling of font size in all browsers.
+  // 2. Correct the odd `em` font sizing in all browsers.
+
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; // 1
+    font-size: 1em; // 2
+  }
+
+  // Add the correct font size in all browsers.
+
+  small {
+    font-size: 80%;
+  }
+
+  // Prevent `sub` and `sup` elements from affecting the line height in
+  // all browsers.
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  // Embedded content
+  // ==========================================================================
+
+  // Remove the border on images inside links in IE 10.
+
+  img {
+    border-style: none;
+  }
+
+  // Forms
+  // ==========================================================================
+
+  // 1. Change the font styles in all browsers.
+  // 2. Remove the margin in Firefox and Safari.
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; // 1
+    font-size: 100%; // 1
+    line-height: 1.15; // 1
+    margin: 0; // 2
+  }
+
+  // Show the overflow in IE.
+  // 1. Show the overflow in Edge.
+
+  button,
+  input { // 1
+    overflow: visible;
+  }
+
+  // Remove the inheritance of text transform in Edge, Firefox, and IE.
+  // 1. Remove the inheritance of text transform in Firefox.
+
+  button,
+  select { // 1
+    text-transform: none;
+  }
+
+  // Correct the inability to style clickable types in iOS and Safari.
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+
+  // Remove the inner border and padding in Firefox.
+
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  // Restore the focus styles unset by the previous rule.
+
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  // Correct the padding in Firefox.
+
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  // 1. Correct the text wrapping in Edge and IE.
+  // 2. Correct the color inheritance from `fieldset` elements in IE.
+  // 3. Remove the padding so developers are not caught out when they zero out
+  //    `fieldset` elements in all browsers.
+
+  legend {
+    box-sizing: border-box; // 1
+    color: inherit; // 2
+    display: table; // 1
+    max-width: 100%; // 1
+    padding: 0; // 3
+    white-space: normal; // 1
+  }
+
+  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  // Remove the default vertical scrollbar in IE 10+.
+
+  textarea {
+    overflow: auto;
+  }
+
+  // 1. Add the correct box sizing in IE 10.
+  // 2. Remove the padding in IE 10.
+
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; // 1
+    padding: 0; // 2
+  }
+
+  // Correct the cursor style of increment and decrement buttons in Chrome.
+
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  // 1. Correct the odd appearance in Chrome and Safari.
+  // 2. Correct the outline style in Safari.
+
+  [type="search"] {
+    -webkit-appearance: textfield; // 1
+    outline-offset: -2px; // 2
+  }
+
+  // Remove the inner padding in Chrome and Safari on macOS.
+
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  // 1. Correct the inability to style clickable types in iOS and Safari.
+  // 2. Change font properties to `inherit` in Safari.
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; // 1
+    font: inherit; // 2
+  }
+
+  // Interactive
+  // ==========================================================================
+
+  // Add the correct display in Edge, IE 10+, and Firefox.
+
+  details {
+    display: block;
+  }
+
+  // Add the correct display in all browsers.
+
+  summary {
+    display: list-item;
+  }
+
+  // Misc
+  // ==========================================================================
+
+  // Add the correct display in IE 10+.
+
+  template {
+    display: none;
+  }
+
+  // Add the correct display in IE 10.
+
+  [hidden] {
+    display: none;
+  }
+}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_cell.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_cell.scss
index 10f70a64a5..94d1b05a66 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_cell.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_cell.scss
@@ -1,143 +1,250 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
 /// @group xy-grid
 ////
 
-/// Calculate the percentage size of a cell.
+/// Returns the appropriate CSS flex value for a cell base.
 ///
-/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3.
+/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink`, `grow`, or any other value representing a cell size (it will be treated as `shrink`).
+///
+/// @returns {List} The cell flex property value.
+@function xy-cell-base($size: full) {
+  @if ($size == 'auto') {
+    @return 1 1 0px;
+  }
+  @else if ($size == 'grow') {
+    @return 1 0 auto;
+  }
+  @else if ($size == 'shrink' or $size == 'full' or zf-is-fraction($size, $allow-no-denominator: true)) {
+    @return 0 0 auto;
+  }
+  @return null;
+}
+
+/// Calculate the size of a cell gutters.
+///
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, returns the responsive gutters map `$gutters`. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+///
+/// @returns {Number|Map} The cell gutter size or the responsive gutters map.
+@function xy-cell-gutters(
+  $gutters: $grid-margin-gutters,
+  $breakpoint: null
+) {
+  // For `auto`, returns the responsive map `$gutters`.
+  @if ($breakpoint == 'auto') {
+    @return $gutters;
+  }
+
+  // Use the contextual breakpoint by default.
+  $breakpoint: -zf-current-breakpoint($breakpoint);
+
+  @if ($breakpoint) {
+    @return -zf-get-bp-val($gutters, $breakpoint);
+  }
+  @else {
+    @return -zf-get-bp-val($gutters, $-zf-zero-breakpoint) or 0;
+  }
+}
+
+/// Returns the percentage size of a cell.
+///
+/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2` or `1/3`.
+///
+/// @returns {Number} Size of the cell (in percent).
 @function xy-cell-size(
   $size: $grid-columns
 ) {
-  // Parsing percents, decimals, n of n and number counts
-  @if type-of($size) == 'number' {
-    @if unit($size) == '%' {
-      $size: $size;
-    }
-    @else if $size < 1 {
-      $size: percentage($size);
-    }
-    @else {
-      $size: percentage($size / $grid-columns);
-    }
+  @return fraction-to-percentage($size, $denominator: $grid-columns);
+}
+
+/// Returns the appropriate CSS value for a cell size.
+///
+/// Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.
+///
+/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full`, `auto`, `shrink` or any fraction like `6`, `50%`, `1 of 2` or `1/2`.
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, returns a map of sizes adapted to responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+///
+/// @returns {Number|String|Map} The cell sizing property value, or a responsive map of them.
+@function xy-cell-size-css(
+  $size: full,
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $breakpoint: null
+) {
+  $margin-gutter: 0;
+
+  @if ($size == 'auto' or $size == 'shrink') {
+    @return auto;
   }
 
-  // Parsing "n of n" or "n/n" expressions
-  @elseif type-of($size) == 'list' {
-    @if length($size) != 3 {
-      @error 'Wrong syntax for xy-cell-size(). Use the format "n of n" or "n/n".';
+  // For cells with margin gutters, the gutter is included in the width.
+  @if ($gutter-type == 'margin') {
+    $margin-gutter: xy-cell-gutters($gutters, $breakpoint);
+    @if ($margin-gutter == null) {
+      @error 'xy-cell-size: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}"';
     }
-    @else {
-      $size: percentage(nth($size, 1) / nth($size, 3));
+  }
+
+  // Calculate the cell size (number)
+  $size-raw: if($size == 'full', 100%, xy-cell-size($size));
+
+  // Calculate the cell CSS size including gutters (string)
+  // If the cell has responsive margin gutters, return a responsive map of sizes.
+  @if type-of($margin-gutter) == 'map' {
+    $responsive-css-sizes: ();
+
+    @each $bp, $mg in $margin-gutter {
+      $size-css: if($mg == 0, $size-raw, calc(#{$size-raw} - #{rem-calc($mg)}));
+      $responsive-css-sizes: map-merge($responsive-css-sizes, ($bp: $size-css));
     }
+
+    @return $responsive-css-sizes;
   }
-  // Anything else is incorrect
+  // Otherwise, return a single CSS size.
   @else {
-    @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".';
+    $css-size: if($margin-gutter == 0, $size-raw, calc(#{$size-raw} - #{rem-calc($margin-gutter)}));
+    @return $css-size;
   }
-
-  @return $size;
 }
 
 /// Sets base flex properties for cells.
 ///
-/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto` or `shrink`.
+/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink`, `grow`, or any other value representing a cell size (it will be treated as `shrink`).
 @mixin xy-cell-base($size: full) {
+  $base: xy-cell-base($size);
+
+  flex: #{$base};
+
+  // Set base styles for "full" only
   @if($size == 'full') {
-    // This is the base style, all others inherit from it
-    flex: 0 0 auto;
     min-height: 0px;
     min-width: 0px;
   }
-  @elseif ($size == 'auto') {
-    flex: 1 1 0px; // sass-lint:disable-line zero-unit
-  }
-  @elseif ($size == 'shrink') {
-    flex: 0 0 auto;
-  }
 }
 
 /// Resets a cells width (or height if vertical is true) as well as strips its gutters.
 ///
 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
 @mixin xy-cell-reset($vertical: true) {
-  $direction: if($vertical == true, width, height);
+  $direction: if($vertical == true, height, width);
   #{$direction}: auto;
+  max-#{$direction}: none;
 }
 
-// Sets our cell widths or heights depending on gutter type.
-@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {
+/// Sets sizing properties for cells.
+///
+/// Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.
+///
+/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates sizes adapted for responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+@mixin xy-cell-size(
+  $size: full,
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $breakpoint: null,
+  $vertical: false
+) {
+  $sizes: xy-cell-size-css($size, $gutters, $gutter-type, $breakpoint);
   $direction: if($vertical == true, height, width);
-  @if($size == 'full') {
-    $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
-    #{$direction}: $val;
+
+  @if (type-of($sizes) == 'map') {
+    @include -zf-breakpoint-value(auto, $sizes) {
+      #{$direction}: $-zf-bp-value;
+    }
   }
-  @elseif ($size == 'auto') {
-    #{$direction}: auto;
-    $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
+  @else {
+    #{$direction}: $sizes;
+  }
+}
+
+/// Sets gutters properties for cells.
+///
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+/// @param {Boolean} $vertical [false] - Direction of the gutters to output. See `$gutter-position`.
+@mixin xy-cell-gutters(
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $gutter-position: null,
+  $breakpoint: null,
+  $vertical: false
+) {
+  // Get the default gutter position according to cell direction
+  @if($gutter-position == null) {
+    $gutter-position: if($vertical == true, top bottom, left right);
   }
-  @elseif ($size == 'shrink') {
-    #{$direction}: auto;
+
+  // Get the gutter width for this breakpoint
+  $gutter-width: xy-cell-gutters($gutters, $breakpoint);
+  @if ($gutter-width == null) {
+    @error 'xy-cell-gutters: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}"';
   }
-  @else {
-    $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));
-    #{$direction}: $val;
+
+  @if ($gutter-type and $gutter-type != none) {
+    @include xy-gutters($gutter-width, $gutter-type, $gutter-position);
   }
 }
 
 /// Creates a cell for your grid.
 ///
-/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
-/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
+/// @param {Boolean} $gutter-output [null] - [DEPRECATED] Whether or not to output gutters.
 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
-/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
-/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
-/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+/// @param {List} $output [(base size gutters)] - Cell parts to output. You will need to generate others parts of the cell seperately, it may not work properly otherwise.
 @mixin xy-cell(
   $size: full,
-  $gutter-output: true,
+  $gutter-output: null,
   $gutters: $grid-margin-gutters,
   $gutter-type: margin,
-  $gutter-position: right left,
+  $gutter-position: null,
   $breakpoint: null,
-  $vertical: false
+  $vertical: false,
+  $output: (base size gutters)
 ) {
-  @if($breakpoint == null) {
-    // If `$bp-size` is available then use this, otherwise revert to the smallest bp.
-    @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
-      $breakpoint: $-zf-size;
-    }
-    @else {
-      $breakpoint: $-zf-zero-breakpoint;
+  // Default for $gutter-output
+  @if ($gutter-output != null) {
+    @warn 'xy-cell: $gutter-output is deprecated and will be removed. See migration notes at https://git.io/foundation-6-6-0';
+    @if ($gutter-output == false) {
+      $output: sl-remove($output, gutters);
     }
   }
 
-  // Get our gutters from map if available, if not map just return the value.
-  $gutter: -zf-get-bp-val($gutters, $breakpoint);
-
-  // Base flex properties
-  @include xy-cell-base($size);
-
-  @if($gutter-type == 'margin') {
-    @include -xy-cell-properties($size, $gutter, $vertical);
+  @if (index($output, base)) {
+    @include xy-cell-base($size);
   }
-  @else {
-    @include -xy-cell-properties($size, 0, $vertical);
+  @if (index($output, size)) {
+    @include xy-cell-size($size, $gutters, $gutter-type, $breakpoint, $vertical);
   }
-
-  @if $gutter-output {
-    @include xy-gutters($gutter, $gutter-type, $gutter-position);
+  @if (index($output, gutters)) {
+    @include xy-cell-gutters($gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
   }
 }
 
 /// Creates a single breakpoint sized grid. Used to generate our grid classes.
 ///
-/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
-/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+/// `xy-cell-static()` is deprecated and will be removed.
+/// Use `xy-cell()` instead with `$output: (size gutters)` to not generate the cell base.
+/// See migration notes at https://git.io/foundation-6-6-0
+///
+/// @deprecated v6.6.0
+///
+/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
+/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters. Always `true` for margin gutters.
 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
 /// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
 /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
@@ -150,20 +257,16 @@
   $breakpoint: $-zf-zero-breakpoint,
   $vertical: false
 ) {
+  @warn 'xy-cell-static() mixin is deprecated and will be removed. Use "xy-cell()" instead. See migration notes at https://git.io/foundation-6-6-0';
 
   $gutter: -zf-get-bp-val($gutters, $breakpoint);
   $gutter-position: if($vertical == true, top bottom, left right);
 
-  @if($gutter-type == 'margin') {
-    @include -xy-cell-properties($size, $gutter, $vertical);
-  }
-  @else {
-    @include -xy-cell-properties($size, 0, $vertical);
-  }
+  $-gutter-output: if($gutter-type == 'margin', true, $gutter-output);
+  $-gutter-margin: if($gutter-type == 'margin', $gutter, 0);
 
-  // If we want to output the gutters
-  @if($gutter-output) {
-    // TODO: Figure out if we need to pass breakpoint in here too.
+  @include -xy-cell-properties($size, $-gutter-margin, $vertical);
+  @if ($-gutter-output) {
     @include xy-gutters($gutter, $gutter-type, $gutter-position);
   }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_classes.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_classes.scss
index ab8b577800..29477068b0 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_classes.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_classes.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -28,8 +28,7 @@
   }
 
   .cell {
-    @include xy-cell-base();
-    @include xy-cell-static($grid-columns, false, $gutter-type: padding);
+    @include xy-cell(full, $gutter-type: none);
 
     &.auto {
       @include xy-cell-base(auto);
@@ -42,20 +41,20 @@
   }
   .grid-x {
     > .auto {
-      @include xy-cell-static(auto, false);
+      @include xy-cell-size(auto, $gutter-type: none);
     }
 
     > .shrink {
-      @include xy-cell-static(shrink, false);
+      @include xy-cell-size(shrink, $gutter-type: none);
     }
   }
 
   // Auto width
   @include -zf-each-breakpoint() {
     // This is a bit of a hack/workaround, see these issues & PRs for the backstory:
-    // https://github.com/zurb/foundation-sites/issues/10244
-    // https://github.com/zurb/foundation-sites/pull/10222 and
-    // https://github.com/zurb/foundation-sites/pull/10164
+    // https://github.com/foundation/foundation-sites/issues/10244
+    // https://github.com/foundation/foundation-sites/pull/10222 and
+    // https://github.com/foundation/foundation-sites/pull/10164
     .grid-x {
       $str: "> .#{$-zf-size}-shrink, > .#{$-zf-size}-full";
       @for $i from 1 through $grid-columns {
@@ -68,22 +67,31 @@
   }
 
   @include -zf-each-breakpoint() {
-    @if not($-zf-size == small) {
+    // Responsive "auto" modifier
+    @if not($-zf-size == $-zf-zero-breakpoint) {
       .grid-x > .#{$-zf-size}-auto {
-        @include xy-cell-base(auto);
-        @include xy-cell-static(auto, false);
+        @include xy-cell(auto, $gutter-type: none);
       }
+    }
+
+    %-xy-cell-base-shrink-horizontal-#{$-zf-size} {
+      @include xy-cell-base(shrink);
+    }
 
+    // Responsive "shrink" modifier
+    @if not($-zf-size == $-zf-zero-breakpoint) {
       .grid-x > .#{$-zf-size}-shrink {
-        @include xy-cell-base(shrink);
-        @include xy-cell-static(shrink, false);
+        @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};
+        @include xy-cell-size(shrink, $gutter-type: none);
       }
     }
 
+    // Responsive width modifiers
     @for $i from 1 through $grid-columns {
       // Sizing (percentage)
       .grid-x > .#{$-zf-size}-#{$i} {
-        @include xy-cell-static($i, false, $gutter-type: padding);
+        @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};
+        @include xy-cell-size($i, $gutter-type: none);
       }
     }
   }
@@ -102,11 +110,11 @@
 @mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {
   $prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');
   > .#{$prefix}auto {
-    @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+    @include xy-cell-size(auto, $vertical: $vertical);
   }
 
   > .#{$prefix}shrink {
-    @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+    @include xy-cell-size(shrink, $vertical: $vertical);
   }
 
   @for $i from 1 through $grid-columns {
@@ -114,7 +122,7 @@
     $classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}');
 
     > #{$classname} {
-      @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+      @include xy-cell-size($i, $vertical: $vertical);
     }
   }
 }
@@ -130,14 +138,14 @@
 
     // Base cell styles
     > .cell {
-      @include xy-cell-static($vertical: $vertical);
+      @include xy-cell($vertical: $vertical, $output: (size gutters));
     }
 
     // base styles need to all be before the auto and shrink styles
     @include -zf-each-breakpoint() {
       @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {
         > .cell {
-          @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);
+          @include xy-cell($vertical: $vertical, $output: (size gutters));
         }
       }
     }
@@ -145,12 +153,12 @@
     @include -zf-each-breakpoint() {
 
       // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)
-      // for prior breakpoints based on the responsive gutter.
+      // for all prior breakpoints.
+      // As their gutter is defined with their width/height, even breakpoint without a new margin must be
+      // generated to not having their width/height overrided by re-adjusted smaller breakpoints.
       @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
         @each $bp in -zf-breakpoints-less-than($-zf-size) {
-          @if(map-has-key($grid-margin-gutters, $bp)) {
-            @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
-          }
+          @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
         }
       }
 
@@ -187,7 +195,7 @@
     @include -zf-each-breakpoint {
       @for $i from 1 through $xy-block-grid-max {
         .#{$-zf-size}-up-#{$i} {
-          @include xy-grid-layout($i, '.cell', false, $gutter-type: padding);
+          @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: padding, $output: (size));
         }
       }
     }
@@ -202,7 +210,7 @@
           @each $bp in -zf-breakpoints-less-than($-zf-size) {
             @if(map-has-key($grid-margin-gutters, $bp)) {
               .grid-margin-x.#{$bp}-up-#{$i} {
-                @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $bp);
+                @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: margin, $output: (size));
               }
             }
           }
@@ -210,7 +218,7 @@
       }
       @for $i from 1 through $xy-block-grid-max {
         .grid-margin-x.#{$-zf-size}-up-#{$i} {
-          @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $-zf-size);
+          @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: margin, $output: (size));
         }
       }
     }
@@ -242,11 +250,11 @@
       $o: $i - 1;
 
       .#{$-zf-size}-offset-#{$o} {
-        @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);
+        @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding);
       }
 
       .grid-margin-x > .#{$-zf-size}-offset-#{$o} {
-        @include xy-cell-offset($o, $breakpoint: $-zf-size);
+        @include xy-cell-offset($o);
       }
     }
   }
@@ -259,7 +267,7 @@
 ) {
 
   @include -zf-each-breakpoint() {
-    @if not($-zf-size == small) {
+    @if not($-zf-size == $-zf-zero-breakpoint) {
     }
   }
 
@@ -272,19 +280,19 @@
     }
 
     > .auto {
-      @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+      @include xy-cell-size(auto, $gutter-type: none, $vertical: true);
     }
 
     > .shrink {
-      @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+      @include xy-cell-size(shrink, $gutter-type: none, $vertical: true);
     }
 
 
     @include -zf-each-breakpoint() {
       // This is a bit of a hack/workaround, see these issues and PRs for the backstory:
-      // https://github.com/zurb/foundation-sites/issues/10244
-      // https://github.com/zurb/foundation-sites/pull/10222 and
-      // https://github.com/zurb/foundation-sites/pull/10164
+      // https://github.com/foundation/foundation-sites/issues/10244
+      // https://github.com/foundation/foundation-sites/pull/10222 and
+      // https://github.com/foundation/foundation-sites/pull/10164
       $str: "> .#{$-zf-size}-shrink, > .#{$-zf-size}-full";
       @for $i from 1 through $grid-columns {
         $str: $str + ", > .#{$-zf-size}-#{$i}"
@@ -295,22 +303,31 @@
     }
 
     @include -zf-each-breakpoint() {
-      @if not($-zf-size == small) {
+      // Responsive "auto" modifier
+      @if not($-zf-size == $-zf-zero-breakpoint) {
         > .#{$-zf-size}-auto {
-          @include xy-cell-base(auto);
-          @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+          @include xy-cell(auto, $gutter-type: none, $vertical: true);
         }
+      }
 
+      %-xy-cell-base-shrink-vertical-#{$-zf-size} {
+        @include xy-cell-base(shrink);
+      }
+
+      // Responsive "shrink" modifier
+      @if not($-zf-size == $-zf-zero-breakpoint) {
         > .#{$-zf-size}-shrink {
-          @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+          @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};
+          @include xy-cell-size(shrink, $gutter-type: none, $vertical: true);
         }
-
       }
 
+      // Responsive width modifiers
       @for $i from 1 through $grid-columns {
         // Sizing (percentage)
         > .#{$-zf-size}-#{$i} {
-          @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);
+          @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};
+          @include xy-cell-size($i, $gutter-type: none, $vertical: true);
         }
       }
 
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_collapse.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_collapse.scss
index d9029370dd..d765f179ce 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_collapse.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_collapse.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -11,6 +11,7 @@
 /// @param {String} $selector [.cell] - The child element to remove the gutter from.
 /// @param {Keyword} $gutter-type [margin] - The type of gutter to remove.
 /// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination.
+/// @param {Keyword} $min-breakpoint [$-zf-zero-breakpoint] - Minimum breakpoint in `$breakpoint-classes` for which to collapse the gutter.
 @mixin xy-grid-collapse(
   $selector: '.cell',
   $gutter-type: margin,
@@ -41,7 +42,7 @@
           @for $i from 1 through $grid-columns {
             // Sizing (percentage)
             > .#{$bp}-#{$i} {
-              @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+              @include xy-cell-size($i, $gutter-type: none);
             }
           }
         }
@@ -50,11 +51,11 @@
           @for $i from 1 through $grid-columns {
             // Sizing (percentage)
             > .#{$bp}-#{$i} {
-              @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+              @include xy-cell-size($i, $gutter-type: none);
             }
           }
         }
-      } 
+      }
     }
   }
   @else {
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_frame.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_frame.scss
index 76c61e5ca2..9bd1d11e29 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_frame.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_frame.scss
@@ -61,13 +61,14 @@
   @if $vertical == true {
     overflow-y: auto;
     max-height: 100%;
+    min-height: 100%;
   } @else {
     overflow-x: auto;
     max-width: 100%;
   }
 
   -webkit-overflow-scrolling: touch;
-  -ms-overflow-stype: -ms-autohiding-scrollbar;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 
 /// Container for inside a grid frame containing multiple blocks. Typically used
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_grid.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_grid.scss
index 44186ea76e..3fdf474256 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_grid.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_grid.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -9,6 +9,7 @@
 /// Creates a max width container, designed to house your grid content.
 ///
 /// @param {Number} $width [$grid-container] - a width to limit the container to.
+/// @param {Number} $padding [$grid-container-padding] - paddings of the container.
 @mixin xy-grid-container(
   $width: $grid-container,
   $padding: $grid-container-padding
@@ -16,7 +17,8 @@
   @include xy-gutters($gutters: $padding, $gutter-type: padding);
 
   max-width: $width;
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 /// Creates a container for your flex cells.
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_gutters.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_gutters.scss
index 3ab987ea13..ff3ea3c90f 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_gutters.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_gutters.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -30,16 +30,16 @@
 
       // Loop through each gutter position
       @each $value in $gutter-position {
-        #{$gutter-type}-#{$value}: #{$operator}$gutter;
+        #{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
       }
     }
   }
-  @elseif (type-of($gutters) == 'number') {
+  @else if (type-of($gutters) == 'number') {
     $gutter: rem-calc($gutters) / 2;
 
     // Loop through each gutter position
     @each $value in $gutter-position {
-      #{$gutter-type}-#{$value}: #{$operator}$gutter;
+      #{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
     }
   }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_layout.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_layout.scss
index 3b7650e321..d087825acb 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_layout.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_layout.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -10,24 +10,27 @@
 ///
 /// @param {Number} $n - Number of elements to display per row.
 /// @param {String} $selector ['.cell'] - Selector(s) to use for child elements.
-/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+/// @param {Boolean} $gutter-output [null] - [DEPRECATED] Whether or not to output gutters.
 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
-/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`.
-/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
+/// @param {String} $breakpoint [null] - The breakpoint to use for the cell generation. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+/// @param {List} $output [(base size gutters)] - Cell parts to output. You will need to generate others parts of the cell seperately, it may not work correctly otherwise.
 @mixin xy-grid-layout(
   $n,
   $selector: '.cell',
-  $gutter-output: true,
+  $gutter-output: null,
   $gutters: $grid-margin-gutters,
   $gutter-type: margin,
-  $gutter-position: right left,
-  $breakpoint: $-zf-zero-breakpoint,
-  $vertical: false
+  $gutter-position: null,
+  $breakpoint: null,
+  $vertical: false,
+  $output: (base size gutters)
 ) {
   $size: percentage(1/$n);
 
   & > #{$selector} {
-    @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
+    @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical, $output);
   }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_position.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_position.scss
index c9c85fffa1..414f5bb77f 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_position.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_position.scss
@@ -1,28 +1,55 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
 /// @group xy-grid
 ////
 
+/// Returns the appropriate CSS value to offset a cell.
+///
+/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `xy-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
+/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.
+/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+///
+/// @returns {Number|String} The cell offset property value.
+@function xy-cell-offset(
+  $n,
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $breakpoint: null
+) {
+  $breakpoint: -zf-current-breakpoint($breakpoint, $default: $-zf-zero-breakpoint);
+  $size: xy-cell-size($n);
+
+  $offset: $size;
+  @if ($gutter-type == 'margin') {
+    $gutter: rem-calc(xy-cell-gutters($gutters, $breakpoint) / 2);
+    $offset: if($gutter == 0, $size, calc(#{$size} + #{$gutter}));
+  }
+  @return $offset;
+}
+
 /// Offsets a column to the right/bottom by `$n` columns.
 ///
-/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
+/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `xy-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
+/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.
+/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`
+/// @param {Number|Array|Keyword} $breakpoint [null] - Breakpoint to use for `$gutters`. It can be a breakpoint name, list of breakpoints or `auto` for all breakpoints. If a list is given, media-queries will be generated. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
 /// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.
 @mixin xy-cell-offset(
  $n,
  $gutters: $grid-margin-gutters,
  $gutter-type: margin,
- $breakpoint: $-zf-zero-breakpoint,
+ $breakpoint: null,
  $vertical: false
 ) {
+  $breakpoint: -zf-current-breakpoint($breakpoint, $default: $-zf-zero-breakpoint);
   $direction: if($vertical, 'top', $global-left);
 
-  @include -zf-breakpoint-value($breakpoint, $gutters) {
-    $gutter: rem-calc($-zf-bp-value) / 2;
-    $size: if($gutter-type == 'margin', calc(#{xy-cell-size($n)} + #{$gutter}), #{xy-cell-size($n)});
-
-    margin-#{$direction}: #{$size};
+  @include -zf-each-breakpoint-in($breakpoint, $media-queries: 'for-lists') {
+    $offset: xy-cell-offset($n, $gutters, $gutter-type);
+    margin-#{$direction}: #{$offset};
   }
 }
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_xy-grid.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_xy-grid.scss
index aa077c65e1..1699697d88 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_xy-grid.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_xy-grid.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////

From 61cf198fc023b7656a6fe446f8f1545266ad57f9 Mon Sep 17 00:00:00 2001
From: Karan Khanna <karan@khanna.io>
Date: Wed, 18 Nov 2020 12:23:30 +0530
Subject: [PATCH 3/5] refactor:change foundation and jquery version number

---
 .../{{cookiecutter.project_slug}}/templates/base.html       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html
index cc8b9de742..09736fba88 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html
@@ -122,10 +122,10 @@ <h3>Here's my footer</h3>
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     {% block javascript %}
-      <!-- Required by Foundation 6.4.3 -->
-      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+      <!-- Required by Foundation 6.6.3 -->
+      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
       <script src="{% static 'libs/what-input/what-input.min.js' %}"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/foundation.min.js"></script>
 
       <!-- place project specific Javascript in this file -->
       {% compress js %}

From 39ce548325432c605abd1b3d2daedaefd3a4ac51 Mon Sep 17 00:00:00 2001
From: Karan Khanna <35102253+kskhannaio@users.noreply.github.com>
Date: Wed, 18 Nov 2020 12:33:02 +0530
Subject: [PATCH 4/5] refactor:change foundation version number in template

---
 .../{{cookiecutter.project_slug}}/templates/base.html           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html
index 09736fba88..e652e26dbe 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html
@@ -89,7 +89,7 @@
     {% block content %}
     <div class="grid-y medium-grid-frame">
       <div class="cell shrink header medium-cell-block-container">
-        <h1>XY grid example with Grid Frame (Foundation 6.4!!!)</h1>
+        <h1>XY grid example with Grid Frame (Foundation 6.6.3!!!)</h1>
       </div>
       <div class="cell medium-auto medium-cell-block-container">
         <div class="grid-x grid-padding-x">

From 522c815ff65668059f20ca10115d2c4d8bb8261c Mon Sep 17 00:00:00 2001
From: Karan Khanna <35102253+kskhannaio@users.noreply.github.com>
Date: Wed, 18 Nov 2020 15:29:15 +0530
Subject: [PATCH 5/5] refactor:Sandeeps changes

---
 .../static/sass/_settings.scss                | 12 ++--
 .../static/sass/app.scss                      | 66 +++++++++++--------
 2 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/sass/_settings.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/sass/_settings.scss
index 7a5b6a42c9..8467fa61a9 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/sass/_settings.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/sass/_settings.scss
@@ -100,6 +100,7 @@ $global-color-pick-contrast-tolerance: 0;
 $print-transparent-backgrounds: true;
 
 @include add-foundation-colors;
+$print-hrefs: true;
 
 // 2. Breakpoints
 // --------------
@@ -299,6 +300,7 @@ $button-opacity-disabled: 0.25;
 $button-background-hover-lightness: -20%;
 $button-hollow-hover-lightness: -50%;
 $button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
+$button-responsive-expanded: false;
 
 // 12. Button Group
 // ----------------
@@ -390,8 +392,8 @@ $dropdownmenu-arrow-color: $anchor-color;
 $dropdownmenu-arrow-size: 6px;
 $dropdownmenu-arrow-padding: 1.5rem;
 $dropdownmenu-min-width: 200px;
-$dropdownmenu-background: $white;
-$dropdownmenu-submenu-background: $dropdownmenu-background;
+$dropdownmenu-background: null;
+$dropdownmenu-submenu-background: $white;
 $dropdownmenu-padding: $global-menu-padding;
 $dropdownmenu-nested-margin: 0;
 $dropdownmenu-submenu-padding: $dropdownmenu-padding;
@@ -475,7 +477,6 @@ $menu-simple-margin: 1rem;
 $menu-item-color-active: $white;
 $menu-item-background-active: get-color(primary);
 $menu-icon-spacing: 0.25rem;
-$menu-item-background-hover: $light-gray;
 $menu-state-back-compat: true;
 $menu-centered-back-compat: true;
 $menu-icons-back-compat: true;
@@ -800,7 +801,6 @@ $tab-active-color: $primary-color;
 $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: $body-font-color;
@@ -809,7 +809,7 @@ $tab-content-padding: 1rem;
 // 52. Thumbnail
 // -------------
 
-$thumbnail-border: solid 4px $white;
+$thumbnail-border: 4px solid $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);
@@ -846,7 +846,7 @@ $tooltip-radius: $global-radius;
 // -----------
 
 $topbar-padding: 0.5rem;
-$topbar-background: $primary-color;
+$topbar-background: $light-gray;
 $topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
 $topbar-input-width: 200px;
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/sass/app.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/sass/app.scss
index 5922c909f5..4e50c9baf9 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/sass/app.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/sass/app.scss
@@ -1,57 +1,67 @@
 @charset 'utf-8';
 
-@import 'sass/settings';
+@import 'settings';
 @import 'libs/foundation-sites/scss/foundation';
 
+// Global styles
 @include foundation-global-styles;
-@include foundation-grid;
-// @include foundation-flex-grid;
-@include foundation-xy-grid-classes;
+@include foundation-forms;
 @include foundation-typography;
+
+// Grids (choose one)
+@include foundation-xy-grid-classes;
+// @include foundation-grid;
+// @include foundation-flex-grid;
+
+// Generic components
 @include foundation-button;
-@include foundation-forms;
-// @include foundation-range-input;
-@include foundation-accordion;
-@include foundation-accordion-menu;
+@include foundation-button-group;
+@include foundation-close-button;
+@include foundation-label;
+@include foundation-progress-bar;
+@include foundation-slider;
+@include foundation-switch;
+@include foundation-table;
+// Basic components
 @include foundation-badge;
 @include foundation-breadcrumbs;
-@include foundation-button-group;
 @include foundation-callout;
 @include foundation-card;
-@include foundation-close-button;
+@include foundation-dropdown;
+@include foundation-pagination;
+@include foundation-tooltip;
+
+// Containers
+@include foundation-accordion;
+@include foundation-media-object;
+@include foundation-orbit;
+@include foundation-responsive-embed;
+@include foundation-tabs;
+@include foundation-thumbnail;
+// Menu-based containers
 @include foundation-menu;
 @include foundation-menu-icon;
+@include foundation-accordion-menu;
 @include foundation-drilldown-menu;
-@include foundation-dropdown;
 @include foundation-dropdown-menu;
-@include foundation-responsive-embed;
-@include foundation-label;
-@include foundation-media-object;
+
+// Layout components
 @include foundation-off-canvas;
-@include foundation-orbit;
-@include foundation-pagination;
-@include foundation-progress-bar;
-// @include foundation-progress-element;
-// @include foundation-progress-element;
-// @include foundation-meter-element;
-@include foundation-slider;
-@include foundation-sticky;
 @include foundation-reveal;
-@include foundation-switch;
-@include foundation-table;
-@include foundation-tabs;
-@include foundation-thumbnail;
+@include foundation-sticky;
 @include foundation-title-bar;
-@include foundation-tooltip;
 @include foundation-top-bar;
-@include foundation-visibility-classes;
+
+// Helpers
 @include foundation-float-classes;
 @include foundation-flex-classes;
+@include foundation-visibility-classes;
 // @include foundation-prototype-classes;
 
 
 /********* Project Scss **************/
 
+
 .top-bar
 {
   li.menu-text{color: $white;}