diff --git a/.babelrc b/.babelrc
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,4 @@
 {
-    "presets": ["es2015"],
-    "compact": false
-}
+  "presets": [ "@babel/preset-env" ],
+  "compact": false
+}
\ No newline at end of file
diff --git a/.bowerrc b/.bowerrc
deleted file mode 100644
--- a/.bowerrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "directory": "bower_components"
-}
diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,5 @@
+# Browsers that we support
+last 2 versions
+ie >= 9
+ios >= 7
+android >= 4.4
diff --git a/.gitignore b/.gitignore
--- a/.gitignore
+++ b/.gitignore
@@ -4,7 +4,7 @@
 # Node artifacts
 node_modules
 npm-debug.log
-bower_components
+yarn.lock
 
 # Released version
 dist
diff --git a/CHANGELOG.md b/CHANGELOG.md
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [semantic versioning](http://semver.org/).
 
+## [0.2.0] - 2018-10-12
+### Changed
+- Update site builder to use ZURB WebApp Template at 0ce53ed.
+- Migrate Foundation icons font from Bower to a Node module.
+
 ## [0.1.0] - 2016-07-24
 ### Added
 - Motion UI animations.
diff --git a/bower.json b/bower.json
deleted file mode 100644
--- a/bower.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "daeghrefn-www",
-  "version": "0.1.0",
-  "authors": [
-    "Sébastien Santoro aka Dereckson <dereckson@espace-win.org>"
-  ],
-  "description": "Website for Dæghrefn.",
-  "main": "gulpfile.js",
-  "license": "CC-BY-4.0",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ],
-  "dependencies": {
-    "foundation-sites": "~6.2.3",
-    "motion-ui": "~1.2.2",
-    "foundation-icon-fonts": "*"
-  },
-  "private": true
-}
diff --git a/config.yml b/config.yml
--- a/config.yml
+++ b/config.yml
@@ -5,11 +5,13 @@
 COMPATIBILITY:
   - "last 2 versions"
   - "ie >= 9"
+  - "ios >= 7"
 
 # UnCSS will use these settings
 UNCSS_OPTIONS:
   html:
-    - "src/**/*.html"
+    # Search for used CSS classes in generated HTML files
+    - "dist/**/*.html"
   ignore:
     - !!js/regexp .foundation-mq
     - !!js/regexp ^\.is-.*
@@ -17,7 +19,7 @@
 # Gulp will reference these paths when it copies files
 PATHS:
   # Path to dist folder
-  dist: "dist"  
+  dist: "dist"
   # Paths to static assets that aren't images, CSS, or JavaScript
   assets:
     - "src/assets/**/*"
@@ -25,38 +27,8 @@
     - "!src/assets/{img,js,scss}/**/*"
   # Paths to Sass libraries, which can then be loaded with @import
   sass:
-    - "bower_components/foundation-sites/scss"
-    - "bower_components/motion-ui/src"
-    - "bower_components/foundation-icon-fonts"
-  # Paths to JavaScript libraries, which are compined into one file
-  javascript:
-    # Libraries requried by Foundation
-    - "bower_components/jquery/dist/jquery.js"
-    - "bower_components/what-input/what-input.js"
-    # Core Foundation files
-    - "bower_components/foundation-sites/js/foundation.core.js"
-    - "bower_components/foundation-sites/js/foundation.util.*.js"
-    # Individual Foundation components
-    # If you aren't using a component, just remove it from the list
-    - "bower_components/foundation-sites/js/foundation.abide.js"
-    - "bower_components/foundation-sites/js/foundation.accordion.js"
-    - "bower_components/foundation-sites/js/foundation.accordionMenu.js"
-    - "bower_components/foundation-sites/js/foundation.drilldown.js"
-    - "bower_components/foundation-sites/js/foundation.dropdown.js"
-    - "bower_components/foundation-sites/js/foundation.dropdownMenu.js"
-    - "bower_components/foundation-sites/js/foundation.equalizer.js"
-    - "bower_components/foundation-sites/js/foundation.interchange.js"
-    - "bower_components/foundation-sites/js/foundation.magellan.js"
-    - "bower_components/foundation-sites/js/foundation.offcanvas.js"
-    - "bower_components/foundation-sites/js/foundation.orbit.js"
-    - "bower_components/foundation-sites/js/foundation.responsiveMenu.js"
-    - "bower_components/foundation-sites/js/foundation.responsiveToggle.js"
-    - "bower_components/foundation-sites/js/foundation.reveal.js"
-    - "bower_components/foundation-sites/js/foundation.slider.js"
-    - "bower_components/foundation-sites/js/foundation.sticky.js"
-    - "bower_components/foundation-sites/js/foundation.tabs.js"
-    - "bower_components/foundation-sites/js/foundation.toggler.js"
-    - "bower_components/foundation-sites/js/foundation.tooltip.js"
-    # Paths to your own project code are here
-    - "src/assets/js/!(app).js"
+    - "node_modules/foundation-sites/scss"
+    - "node_modules/motion-ui/src"
+  # Paths to JavaScript entry points for webpack to bundle modules
+  entries:
     - "src/assets/js/app.js"
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -1,14 +1,18 @@
 'use strict';
 
-import plugins  from 'gulp-load-plugins';
-import yargs    from 'yargs';
-import browser  from 'browser-sync';
-import gulp     from 'gulp';
-import panini   from 'panini';
-import rimraf   from 'rimraf';
-import sherpa   from 'style-sherpa';
-import yaml     from 'js-yaml';
-import fs       from 'fs';
+import plugins       from 'gulp-load-plugins';
+import yargs         from 'yargs';
+import browser       from 'browser-sync';
+import gulp          from 'gulp';
+import panini        from 'panini';
+import rimraf        from 'rimraf';
+import yaml          from 'js-yaml';
+import fs            from 'fs';
+import webpackStream from 'webpack-stream';
+import webpack2      from 'webpack';
+import named         from 'vinyl-named';
+import uncss         from 'uncss';
+import autoprefixer  from 'autoprefixer';
 
 // Load all Gulp plugins into one variable
 const $ = plugins();
@@ -25,12 +29,9 @@
 }
 
 // Build the "dist" folder by running all of the below tasks
+// Sass must be run later so UnCSS can search for used classes in the others assets.
 gulp.task('build',
- gulp.series(
-     clean,
-     gulp.parallel(pages, sass, javascript, images, cssfonts, copy)
- )
-);
+ gulp.series(clean, gulp.parallel(pages, javascript, images, fonts, copy), sass));
 
 // Build the site, run the server, and watch for file changes
 gulp.task('default',
@@ -71,30 +72,54 @@
 // Compile Sass into CSS
 // In production, the CSS is compressed
 function sass() {
+
+  const postCssPlugins = [
+    // Autoprefixer
+    autoprefixer({ browsers: COMPATIBILITY }),
+
+    // UnCSS - Uncomment to remove unused styles in production
+    // PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
+  ].filter(Boolean);
+
   return gulp.src('src/assets/scss/app.scss')
     .pipe($.sourcemaps.init())
     .pipe($.sass({
       includePaths: PATHS.sass
     })
       .on('error', $.sass.logError))
-    .pipe($.autoprefixer({
-      browsers: COMPATIBILITY
-    }))
-    // Comment in the pipe below to run UnCSS in production
-    //.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
-    .pipe($.if(PRODUCTION, $.cssnano()))
+    .pipe($.postcss(postCssPlugins))
+    .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
     .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
     .pipe(gulp.dest(PATHS.dist + '/assets/css'))
     .pipe(browser.reload({ stream: true }));
 }
 
+let webpackConfig = {
+  mode: (PRODUCTION ? 'production' : 'development'),
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [ "@babel/preset-env" ],
+            compact: false
+          }
+        }
+      }
+    ]
+  },
+  devtool: !PRODUCTION && 'source-map'
+}
+
 // Combine JavaScript into one file
 // In production, the file is minified
 function javascript() {
-  return gulp.src(PATHS.javascript)
+  return gulp.src(PATHS.entries)
+    .pipe(named())
     .pipe($.sourcemaps.init())
-    .pipe($.babel())
-    .pipe($.concat('app.js'))
+    .pipe(webpackStream(webpackConfig, webpack2))
     .pipe($.if(PRODUCTION, $.uglify()
       .on('error', e => { console.log(e); })
     ))
@@ -106,15 +131,15 @@
 // In production, the images are compressed
 function images() {
   return gulp.src('src/assets/img/**/*')
-    .pipe($.if(PRODUCTION, $.imagemin({
-      progressive: true
-    })))
+    .pipe($.if(PRODUCTION, $.imagemin([
+      $.imagemin.jpegtran({ progressive: true }),
+    ])))
     .pipe(gulp.dest(PATHS.dist + '/assets/img'));
 }
 
 // Copy fonts used in CSS to the "dist" folder
-function cssfonts() {
-    return gulp.src('./bower_components/foundation-icon-fonts/*.{ttf,woff,eot,svg}')
+function fonts() {
+    return gulp.src('./node_modules/foundation-icon-fonts/*.{ttf,woff,eot,svg}')
         .pipe(gulp.dest(PATHS.dist + '/assets/fonts'));
 }
 
@@ -122,8 +147,7 @@
 function server(done) {
   browser.init({
     server: PATHS.dist, port: PORT
-  });
-  done();
+  }, done);
 }
 
 // Reload the browser with BrowserSync
@@ -135,9 +159,11 @@
 // Watch for changes to static assets, pages, Sass, and JavaScript
 function watch() {
   gulp.watch(PATHS.assets, copy);
-  gulp.watch('src/pages/**/*.html').on('change', gulp.series(pages, browser.reload));
-  gulp.watch('src/{layouts,partials}/**/*.html').on('change', gulp.series(resetPages, pages, browser.reload));
-  gulp.watch('src/assets/scss/**/*.scss', sass);
-  gulp.watch('src/assets/js/**/*.js').on('change', gulp.series(javascript, browser.reload));
-  gulp.watch('src/assets/img/**/*').on('change', gulp.series(images, browser.reload));
+  gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
+  gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
+  gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
+  gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload));
+  gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
+  gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
+  gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
 }
diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "daeghrefn-www",
   "version": "0.1.0",
   "description": "Website for Dæghrefn.",
-  "main": "gulpfile.js",
+  "main": "gulpfile.babel.js",
   "scripts": {
     "start": "gulp",
     "build": "gulp build --production"
@@ -10,30 +10,48 @@
   "author": "Sébastien Santoro aka Dereckson <dereckson@espace-win.org>",
   "homepage": "https://daeghrefn.nasqueron.org/",
   "license": "CC-BY-4.0",
-  "keywords": ["www"],
+  "keywords": [
+    "www"
+  ],
+  "dependencies": {
+    "foundation-icon-fonts": "^0.1.1",
+    "foundation-sites": "~6.4.1",
+    "jquery": "^3.2.1",
+    "motion-ui": "^2.0.3",
+    "slick-carousel": "^1.8.1",
+    "svg-injector-2": "^2.1.3",
+    "tablesaw": "^3.0.5",
+    "what-input": "^5.1.2"
+  },
   "devDependencies": {
-    "babel-preset-es2015": "^6.3.13",
-    "babel-register": "^6.7.2",
+    "@babel/core": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/register": "^7.0.0",
+    "autoprefixer": "^9.1.5",
+    "babel-loader": "^8.0.4",
     "browser-sync": "^2.10.0",
-    "gulp": "gulpjs/gulp#4.0",
-    "gulp-autoprefixer": "^3.1.0",
-    "gulp-babel": "^6.1.2",
-    "gulp-cli": "^1.2.1",
+    "gulp": "^4.0.0",
+    "gulp-babel": "^8.0.0",
+    "gulp-clean-css": "^3.3.1",
+    "gulp-cli": "^2.0.1",
     "gulp-concat": "^2.5.2",
-    "gulp-cssnano": "^2.1.0",
     "gulp-extname": "^0.2.0",
     "gulp-if": "^2.0.0",
-    "gulp-imagemin": "^2.2.1",
+    "gulp-imagemin": "^4.1.0",
     "gulp-load-plugins": "^1.1.0",
-    "gulp-sass": "^2.1.0",
-    "gulp-sourcemaps": "^1.6.0",
-    "gulp-uglify": "^1.2.0",
-    "gulp-uncss": "^1.0.1",
+    "gulp-postcss": "^8.0.0",
+    "gulp-sass": "^4.0.1",
+    "gulp-sourcemaps": "^2.6.4",
+    "gulp-uglify": "^3.0.1",
     "js-yaml": "^3.4.6",
     "panini": "^1.3.0",
     "rimraf": "^2.4.3",
     "style-sherpa": "^1.0.0",
-    "yargs": "^3.8.0"
+    "uncss": "^0.16.2",
+    "vinyl-named": "^1.1.0",
+    "webpack": "^4.20.2",
+    "webpack-stream": "^5.1.1",
+    "yargs": "^12.0.2"
   },
   "repository": {
     "type": "git",
@@ -42,8 +60,5 @@
   "bugs": {
     "url": "https://devcentral.nasqueron.org/project/view/9/"
   },
-  "babel": {
-    "presets": ["es2015"]
-  },
   "private": true
 }
diff --git a/readme.md b/readme.md
--- a/readme.md
+++ b/readme.md
@@ -43,19 +43,18 @@
 
 To manually set up the repository, first download it with Git:
 
-```bash
-git clone https://github.com/nasqueron/daeghrefn-www daeghrefn-www
+```
+$ git clone https://github.com/nasqueron/daeghrefn-www daeghrefn-www
 ```
 
 Then open the folder in your command line, and install the needed dependencies:
 
-```bash
-cd daeghrefn-www
-npm install
-bower install
+```
+$ cd daeghrefn-www
+$ yarn
 ```
 
-Finally, run `npm start` to run Gulp. The finished site will be created in a folder called `dist`, viewable at this URL:
+Finally, run `yarn start` to run Gulp. The finished site will be created in a folder called `dist`, viewable at this URL:
 
 ```
 http://localhost:8000
@@ -63,4 +62,4 @@
 
 ### Create locally a production-ready version
 
-To create compressed, production-ready assets, run `npm run build`.
+To create compressed, production-ready assets, run `yarn run build`.
diff --git a/src/assets/js/app.js b/src/assets/js/app.js
--- a/src/assets/js/app.js
+++ b/src/assets/js/app.js
@@ -8,6 +8,13 @@
     Licence:        CC-BY 4.0, MIT, BSD-2-Clause (multi-licensing)
     -------------------------------------------------------------    */
 
+import $ from 'jquery';
+import whatInput from 'what-input';
+
+window.$ = $;
+
+import Foundation from 'foundation-sites';
+
 /*  -------------------------------------------------------------
      Table of contents
     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
diff --git a/src/assets/js/lib/foundation-explicit-pieces.js b/src/assets/js/lib/foundation-explicit-pieces.js
new file mode 100644
--- /dev/null
+++ b/src/assets/js/lib/foundation-explicit-pieces.js
@@ -0,0 +1,103 @@
+import $ from 'jquery';
+import { Foundation } from 'foundation-sites/js/foundation.core';
+import { rtl, GetYoDigits, transitionend } from 'foundation-sites/js/foundation.util.core';
+import { Box } from 'foundation-sites/js/foundation.util.box'
+import { onImagesLoaded } from 'foundation-sites/js/foundation.util.imageLoader';
+import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard';
+import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
+import { Motion, Move } from 'foundation-sites/js/foundation.util.motion';
+import { Nest } from 'foundation-sites/js/foundation.util.nest';
+import { Timer } from 'foundation-sites/js/foundation.util.timer';
+import { Touch } from 'foundation-sites/js/foundation.util.touch';
+import { Triggers } from 'foundation-sites/js/foundation.util.triggers';
+import { Abide } from 'foundation-sites/js/foundation.abide';
+import { Accordion } from 'foundation-sites/js/foundation.accordion';
+import { AccordionMenu } from 'foundation-sites/js/foundation.accordionMenu';
+import { Drilldown } from 'foundation-sites/js/foundation.drilldown';
+import { Dropdown } from 'foundation-sites/js/foundation.dropdown';
+import { DropdownMenu } from 'foundation-sites/js/foundation.dropdownMenu';
+import { Equalizer } from 'foundation-sites/js/foundation.equalizer';
+import { Interchange } from 'foundation-sites/js/foundation.interchange';
+import { Magellan } from 'foundation-sites/js/foundation.magellan';
+import { OffCanvas } from 'foundation-sites/js/foundation.offcanvas';
+import { Orbit } from 'foundation-sites/js/foundation.orbit';
+import { ResponsiveMenu } from 'foundation-sites/js/foundation.responsiveMenu';
+import { ResponsiveToggle } from 'foundation-sites/js/foundation.responsiveToggle';
+import { Reveal } from 'foundation-sites/js/foundation.reveal';
+import { Slider } from 'foundation-sites/js/foundation.slider';
+import { SmoothScroll } from 'foundation-sites/js/foundation.smoothScroll';
+import { Sticky } from 'foundation-sites/js/foundation.sticky';
+import { Tabs } from 'foundation-sites/js/foundation.tabs';
+import { Toggler } from 'foundation-sites/js/foundation.toggler';
+import { Tooltip } from 'foundation-sites/js/foundation.tooltip';
+import { ResponsiveAccordionTabs } from 'foundation-sites/js/foundation.responsiveAccordionTabs';
+
+
+Foundation.addToJquery($);
+
+// Add Foundation Utils to Foundation global namespace for backwards
+// compatibility.
+
+Foundation.rtl = rtl;
+Foundation.GetYoDigits = GetYoDigits;
+Foundation.transitionend = transitionend;
+
+Foundation.Box = Box;
+Foundation.onImagesLoaded = onImagesLoaded;
+Foundation.Keyboard = Keyboard;
+Foundation.MediaQuery = MediaQuery;
+Foundation.Motion = Motion;
+Foundation.Move = Move;
+Foundation.Nest = Nest;
+Foundation.Timer = Timer;
+
+// Touch and Triggers previously were almost purely sede effect driven,
+// so no // need to add it to Foundation, just init them.
+
+Touch.init($);
+
+Triggers.init($, Foundation);
+
+Foundation.plugin(Abide, 'Abide');
+
+Foundation.plugin(Accordion, 'Accordion');
+
+Foundation.plugin(AccordionMenu, 'AccordionMenu');
+
+Foundation.plugin(Drilldown, 'Drilldown');
+
+Foundation.plugin(Dropdown, 'Dropdown');
+
+Foundation.plugin(DropdownMenu, 'DropdownMenu');
+
+Foundation.plugin(Equalizer, 'Equalizer');
+
+Foundation.plugin(Interchange, 'Interchange');
+
+Foundation.plugin(Magellan, 'Magellan');
+
+Foundation.plugin(OffCanvas, 'OffCanvas');
+
+Foundation.plugin(Orbit, 'Orbit');
+
+Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
+
+Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
+
+Foundation.plugin(Reveal, 'Reveal');
+
+Foundation.plugin(Slider, 'Slider');
+
+Foundation.plugin(SmoothScroll, 'SmoothScroll');
+
+Foundation.plugin(Sticky, 'Sticky');
+
+Foundation.plugin(Tabs, 'Tabs');
+
+Foundation.plugin(Toggler, 'Toggler');
+
+Foundation.plugin(Tooltip, 'Tooltip');
+
+Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs');
+
+export {Foundation};
diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss
--- a/src/assets/scss/_settings.scss
+++ b/src/assets/scss/_settings.scss
@@ -31,31 +31,50 @@
     :: 11. Button
     :: 12. Button Group
     :: 13. Callout
-    :: 14. Close Button
-    :: 15. Drilldown
-    :: 16. Dropdown
-    :: 17. Dropdown Menu
-    :: 18. Flex Video
-    :: 19. Forms
-    :: 20. Label
-    :: 21. Media Object
-    :: 22. Menu
-    :: 23. Meter
-    :: 24. Off-canvas
-    :: 25. Orbit
-    :: 26. Pagination
-    :: 27. Progress Bar
-    :: 28. Reveal
-    :: 29. Slider
-    :: 30. Switch
-    :: 31. Table
-    :: 32. Tabs
-    :: 33. Thumbnail
-    :: 34. Title Bar
-    :: 35. Tooltip
-    :: 36. Top Bar
-
-    :: 37. Path for fonts
+    :: 14. Card
+    :: 15. Close Button
+    :: 16. Drilldown
+    :: 17. Dropdown
+    :: 18. Dropdown Menu
+    :: 19. Flexbox Utilities
+    :: 20. Forms
+    :: 21. Label
+    :: 22. Media Object
+    :: 23. Menu
+    :: 24. Meter
+    :: 25. Off-canvas
+    :: 26. Orbit
+    :: 27. Pagination
+    :: 28. Progress Bar
+    :: 29. Prototype Arrow
+    :: 30. Prototype Border-Box
+    :: 31. Prototype Border-None
+    :: 32. Prototype Bordered
+    :: 33. Prototype Display
+    :: 34. Prototype Font-Styling
+    :: 35. Prototype List-Style-Type
+    :: 36. Prototype Overflow
+    :: 37. Prototype Position
+    :: 38. Prototype Rounded
+    :: 39. Prototype Separator
+    :: 40. Prototype Shadow
+    :: 41. Prototype Sizing
+    :: 42. Prototype Spacing
+    :: 43. Prototype Text-Decoration
+    :: 44. Prototype Text-Transformation
+    :: 45. Prototype Text-Utilities
+    :: 46. Responsive Embed
+    :: 47. Reveal
+    :: 48. Slider
+    :: 49. Switch
+    :: 50. Table
+    :: 51. Tabs
+    :: 52. Thumbnail
+    :: 53. Title Bar
+    :: 54. Tooltip
+    :: 55. Top Bar
+    :: 56. Xy Grid
+    :: 57. Path for fonts
 
 */
 
@@ -86,8 +105,13 @@
 $global-weight-normal: normal;
 $global-weight-bold: bold;
 $global-radius: 0;
+$global-menu-padding: 0.7rem 1rem;
+$global-menu-nested-margin: 1rem;
 $global-text-direction: ltr;
 $global-flexbox: false;
+$global-prototype-breakpoints: false;
+$global-button-cursor: pointer;
+$global-color-pick-contrast-tolerance: 0;
 $print-transparent-backgrounds: true;
 
 @include add-foundation-colors;
@@ -102,6 +126,7 @@
   xlarge: 1200px,
   xxlarge: 1440px,
 );
+$print-breakpoint: large;
 $breakpoint-classes: (small medium large);
 
 // 3. The Grid
@@ -110,10 +135,11 @@
 $grid-row-width: $global-width;
 $grid-column-count: 12;
 $grid-column-gutter: (
-  small: 20px,
-  medium: 30px,
+        small: 20px,
+        medium: 30px,
 );
 $grid-column-align-edge: true;
+$grid-column-alias: 'columns';
 $block-grid-max: 8;
 
 // 4. Base Typography
@@ -123,27 +149,27 @@
 $header-font-weight: $global-weight-normal;
 $header-font-style: normal;
 $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
-$header-sizes: (
-  small: (
-    'h1': 24,
-    'h2': 20,
-    'h3': 19,
-    'h4': 18,
-    'h5': 17,
-    'h6': 16,
-  ),
-  medium: (
-    'h1': 64,
-    'h2': 48,
-    'h3': 42,
-    'h4': 36,
-    'h5': 24,
-    'h6': 18,
-  ),
-);
 $header-color: inherit;
 $header-lineheight: 1.4;
 $header-margin-bottom: 0.5rem;
+$header-styles: (
+        small: (
+                'h1': ('font-size': 24),
+                'h2': ('font-size': 20),
+                'h3': ('font-size': 19),
+                'h4': ('font-size': 18),
+                'h5': ('font-size': 17),
+                'h6': ('font-size': 16),
+        ),
+        medium: (
+                'h1': ('font-size': 64),
+                'h2': ('font-size': 48),
+                'h3': ('font-size': 42),
+                'h4': ('font-size': 36),
+                'h5': ('font-size': 24),
+                'h6': ('font-size': 18),
+        ),
+);
 $header-text-rendering: optimizeLegibility;
 $small-font-size: 80%;
 $header-small-font-color: $medium-gray;
@@ -177,6 +203,7 @@
 $blockquote-border: 1px solid $medium-gray;
 $cite-font-size: rem-calc(13);
 $cite-color: $dark-gray;
+$cite-pseudo-content: '\2014 \0020';
 $keystroke-font: $font-family-monospace;
 $keystroke-color: $black;
 $keystroke-background: $light-gray;
@@ -201,9 +228,9 @@
 
 $abide-inputs: true;
 $abide-labels: true;
-$input-background-invalid: map-get($foundation-palette, alert);
-$form-label-color-invalid: map-get($foundation-palette, alert);
-$input-error-color: map-get($foundation-palette, alert);
+$input-background-invalid: get-color(alert);
+$form-label-color-invalid: get-color(alert);
+$input-error-color: get-color(alert);
 $input-error-font-size: rem-calc(12);
 $input-error-font-weight: $global-weight-bold;
 
@@ -212,25 +239,38 @@
 
 $accordion-background: $white;
 $accordion-plusminus: true;
-$accordion-item-color: foreground($accordion-background, $primary-color);
+$accordion-title-font-size: rem-calc(12);
+$accordion-item-color: $primary-color;
 $accordion-item-background-hover: $light-gray;
 $accordion-item-padding: 1.25rem 1rem;
 $accordion-content-background: $white;
 $accordion-content-border: 1px solid $light-gray;
-$accordion-content-color: foreground($accordion-background, $primary-color);
+$accordion-content-color: $body-font-color;
 $accordion-content-padding: 1rem;
 
 // 8. Accordion Menu
 // -----------------
 
+$accordionmenu-padding: $global-menu-padding;
+$accordionmenu-nested-margin: $global-menu-nested-margin;
+$accordionmenu-submenu-padding: $accordionmenu-padding;
 $accordionmenu-arrows: true;
 $accordionmenu-arrow-color: $primary-color;
+$accordionmenu-item-background: null;
+$accordionmenu-border: null;
+$accordionmenu-submenu-toggle-background: null;
+$accordion-submenu-toggle-border: $accordionmenu-border;
+$accordionmenu-submenu-toggle-width: 40px;
+$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
+$accordionmenu-arrow-size: 6px;
 
 // 9. Badge
 // --------
 
 $badge-background: $primary-color;
-$badge-color: foreground($badge-background);
+$badge-color: $white;
+$badge-color-alt: $black;
+$badge-palette: $foundation-palette;
 $badge-padding: 0.3em;
 $badge-minwidth: 2.1em;
 $badge-font-size: 0.6rem;
@@ -245,26 +285,35 @@
 $breadcrumbs-item-color-disabled: $medium-gray;
 $breadcrumbs-item-margin: 0.75rem;
 $breadcrumbs-item-uppercase: true;
-$breadcrumbs-item-slash: true;
+$breadcrumbs-item-separator: true;
+$breadcrumbs-item-separator-item: '/';
+$breadcrumbs-item-separator-item-rtl: '\\';
+$breadcrumbs-item-separator-color: $medium-gray;
 
 // 11. Button
 // ----------
 
+$button-font-family: inherit;
 $button-padding: 0.85em 1em;
 $button-margin: 0 0 $global-margin 0;
 $button-fill: solid;
-$button-background: $secondary-color;
+$button-background: $primary-color;
 $button-background-hover: scale-color($button-background, $lightness: -15%);
-$button-color: $black;
+$button-color: $white;
 $button-color-alt: $black;
 $button-radius: $global-radius;
+$button-hollow-border-width: 1px;
 $button-sizes: (
-  tiny: 0.6rem,
-  small: 0.75rem,
-  default: 0.9rem,
-  large: 1.25rem,
+        tiny: 0.6rem,
+        small: 0.75rem,
+        default: 0.9rem,
+        large: 1.25rem,
 );
+$button-palette: $foundation-palette;
 $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;
 
 // 12. Button Group
 // ----------------
@@ -273,6 +322,7 @@
 $buttongroup-spacing: 1px;
 $buttongroup-child-selector: '.button';
 $buttongroup-expand-max: 6;
+$buttongroup-radius-on-each: true;
 
 // 13. Callout
 // -----------
@@ -287,56 +337,90 @@
 $callout-radius: $global-radius;
 $callout-link-tint: 30%;
 
-// 14. Close Button
+// 14. Card
+// --------
+
+$card-background: $white;
+$card-font-color: $body-font-color;
+$card-divider-background: $light-gray;
+$card-border: 1px solid $light-gray;
+$card-shadow: none;
+$card-border-radius: $global-radius;
+$card-padding: $global-padding;
+$card-margin-bottom: $global-margin;
+
+// 15. Close Button
 // ----------------
 
 $closebutton-position: right top;
-$closebutton-offset-horizontal: 1rem;
-$closebutton-offset-vertical: 0.5rem;
-$closebutton-size: 2em;
+$closebutton-offset-horizontal: (
+        small: 0.66rem,
+        medium: 1rem,
+);
+$closebutton-offset-vertical: (
+        small: 0.33em,
+        medium: 0.5rem,
+);
+$closebutton-size: (
+        small: 1.5em,
+        medium: 2em,
+);
 $closebutton-lineheight: 1;
 $closebutton-color: $dark-gray;
 $closebutton-color-hover: $black;
 
-// 15. Drilldown
+// 16. Drilldown
 // -------------
 
 $drilldown-transition: transform 0.15s linear;
 $drilldown-arrows: true;
-$drilldown-arrow-color: $primary-color;
+$drilldown-padding: $global-menu-padding;
+$drilldown-nested-margin: 0;
 $drilldown-background: $white;
+$drilldown-submenu-padding: $drilldown-padding;
+$drilldown-submenu-background: $white;
+$drilldown-arrow-color: $primary-color;
+$drilldown-arrow-size: 6px;
 
-// 16. Dropdown
+// 17. Dropdown
 // ------------
 
 $dropdown-padding: 1rem;
+$dropdown-background: $body-background;
 $dropdown-border: 1px solid $medium-gray;
 $dropdown-font-size: 1rem;
 $dropdown-width: 300px;
 $dropdown-radius: $global-radius;
 $dropdown-sizes: (
-  tiny: 100px,
-  small: 200px,
-  large: 400px,
+        tiny: 100px,
+        small: 200px,
+        large: 400px,
 );
 
-// 17. Dropdown Menu
+// 18. Dropdown Menu
 // -----------------
 
 $dropdownmenu-arrows: true;
 $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-padding: $global-menu-padding;
+$dropdownmenu-nested-margin: 0;
+$dropdownmenu-submenu-padding: $dropdownmenu-padding;
 $dropdownmenu-border: 1px solid $medium-gray;
+$dropdown-menu-item-color-active: get-color(primary);
+$dropdown-menu-item-background-active: transparent;
 
-// 18. Flex Video
-// --------------
+// 19. Flexbox Utilities
+// ---------------------
 
-$flexvideo-margin-bottom: rem-calc(16);
-$flexvideo-ratio: 4 by 3;
-$flexvideo-ratio-widescreen: 16 by 9;
+$flex-source-ordering-count: 6;
+$flexbox-responsive-breakpoints: true;
 
-// 19. Forms
+// 20. Forms
 // ---------
 
 $fieldset-border: 1px solid $medium-gray;
@@ -362,45 +446,57 @@
 $input-placeholder-color: $medium-gray;
 $input-font-family: inherit;
 $input-font-size: rem-calc(16);
+$input-font-weight: $global-weight-normal;
+$input-line-height: $global-lineheight;
 $input-background: $white;
 $input-background-focus: $white;
 $input-background-disabled: $light-gray;
 $input-border: 1px solid $medium-gray;
 $input-border-focus: 1px solid $dark-gray;
+$input-padding: $form-spacing / 2;
 $input-shadow: inset 0 1px 2px rgba($black, 0.1);
 $input-shadow-focus: 0 0 5px $medium-gray;
-$input-cursor-disabled: default;
+$input-cursor-disabled: not-allowed;
 $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
 $input-number-spinners: true;
 $input-radius: $global-radius;
+$form-button-radius: $global-radius;
 
-// 20. Label
+// 21. Label
 // ---------
 
 $label-background: $primary-color;
-$label-color: foreground($label-background);
+$label-color: $white;
+$label-color-alt: $black;
+$label-palette: $foundation-palette;
 $label-font-size: 0.8rem;
 $label-padding: 0.33333rem 0.5rem;
 $label-radius: $global-radius;
 
-// 21. Media Object
+// 22. Media Object
 // ----------------
 
 $mediaobject-margin-bottom: $global-margin;
 $mediaobject-section-padding: $global-padding;
 $mediaobject-image-width-stacked: 100%;
 
-// 22. Menu
+// 23. Menu
 // --------
 
 $menu-margin: 0;
-$menu-margin-nested: 1rem;
-$menu-item-padding: 0.7rem 1rem;
+$menu-nested-margin: $global-menu-nested-margin;
+$menu-items-padding: $global-menu-padding;
+$menu-simple-margin: 1rem;
 $menu-item-color-active: $white;
-$menu-item-background-active: map-get($foundation-palette, primary);
+$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;
 
-// 23. Meter
+// 24. Meter
 // ---------
 
 $meter-height: 1rem;
@@ -410,20 +506,30 @@
 $meter-fill-medium: $warning-color;
 $meter-fill-bad: $alert-color;
 
-// 24. Off-canvas
+// 25. Off-canvas
 // --------------
 
-$offcanvas-size: 250px;
+$offcanvas-sizes: (
+        small: 250px,
+);
+$offcanvas-vertical-sizes: (
+        small: 250px,
+);
 $offcanvas-background: $light-gray;
-$offcanvas-zindex: -1;
+$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
+$offcanvas-inner-shadow-size: 20px;
+$offcanvas-inner-shadow-color: rgba($black, 0.25);
+$offcanvas-overlay-zindex: 11;
+$offcanvas-push-zindex: 12;
+$offcanvas-overlap-zindex: 13;
+$offcanvas-reveal-zindex: 12;
 $offcanvas-transition-length: 0.5s;
 $offcanvas-transition-timing: ease;
 $offcanvas-fixed-reveal: true;
 $offcanvas-exit-background: rgba($white, 0.25);
 $maincontent-class: 'off-canvas-content';
-$maincontent-shadow: 0 0 10px rgba($black, 0.5);
 
-// 25. Orbit
+// 26. Orbit
 // ---------
 
 $orbit-bullet-background: $medium-gray;
@@ -438,7 +544,7 @@
 $orbit-control-padding: 1rem;
 $orbit-control-zindex: 10;
 
-// 26. Pagination
+// 27. Pagination
 // --------------
 
 $pagination-font-size: rem-calc(14);
@@ -449,13 +555,14 @@
 $pagination-radius: $global-radius;
 $pagination-item-background-hover: $light-gray;
 $pagination-item-background-current: $primary-color;
-$pagination-item-color-current: foreground($pagination-item-background-current);
+$pagination-item-color-current: $white;
 $pagination-item-color-disabled: $medium-gray;
 $pagination-ellipsis-color: $black;
 $pagination-mobile-items: false;
+$pagination-mobile-current-item: false;
 $pagination-arrows: true;
 
-// 27. Progress Bar
+// 28. Progress Bar
 // ----------------
 
 $progress-height: 1rem;
@@ -464,7 +571,177 @@
 $progress-meter-background: $primary-color;
 $progress-radius: $global-radius;
 
-// 28. Reveal
+// 29. Prototype Arrow
+// -------------------
+
+$prototype-arrow-directions: (
+        down,
+        up,
+        right,
+        left
+);
+$prototype-arrow-size: 0.4375rem;
+$prototype-arrow-color: $black;
+
+// 30. Prototype Border-Box
+// ------------------------
+
+$prototype-border-box-breakpoints: $global-prototype-breakpoints;
+
+// 31. Prototype Border-None
+// -------------------------
+
+$prototype-border-none-breakpoints: $global-prototype-breakpoints;
+
+// 32. Prototype Bordered
+// ----------------------
+
+$prototype-bordered-breakpoints: $global-prototype-breakpoints;
+$prototype-border-width: rem-calc(1);
+$prototype-border-type: solid;
+$prototype-border-color: $medium-gray;
+
+// 33. Prototype Display
+// ---------------------
+
+$prototype-display-breakpoints: $global-prototype-breakpoints;
+$prototype-display: (
+        inline,
+        inline-block,
+        block,
+        table,
+        table-cell
+);
+
+// 34. Prototype Font-Styling
+// --------------------------
+
+$prototype-font-breakpoints: $global-prototype-breakpoints;
+$prototype-wide-letter-spacing: rem-calc(4);
+$prototype-font-normal: $global-weight-normal;
+$prototype-font-bold: $global-weight-bold;
+
+// 35. Prototype List-Style-Type
+// -----------------------------
+
+$prototype-list-breakpoints: $global-prototype-breakpoints;
+$prototype-style-type-unordered: (
+        disc,
+        circle,
+        square
+);
+$prototype-style-type-ordered: (
+        decimal,
+        lower-alpha,
+        lower-latin,
+        lower-roman,
+        upper-alpha,
+        upper-latin,
+        upper-roman
+);
+
+// 36. Prototype Overflow
+// ----------------------
+
+$prototype-overflow-breakpoints: $global-prototype-breakpoints;
+$prototype-overflow: (
+        visible,
+        hidden,
+        scroll
+);
+
+// 37. Prototype Position
+// ----------------------
+
+$prototype-position-breakpoints: $global-prototype-breakpoints;
+$prototype-position: (
+        static,
+        relative,
+        absolute,
+        fixed
+);
+$prototype-position-z-index: 975;
+
+// 38. Prototype Rounded
+// ---------------------
+
+$prototype-rounded-breakpoints: $global-prototype-breakpoints;
+$prototype-border-radius: rem-calc(3);
+
+// 39. Prototype Separator
+// -----------------------
+
+$prototype-separator-breakpoints: $global-prototype-breakpoints;
+$prototype-separator-align: center;
+$prototype-separator-height: rem-calc(2);
+$prototype-separator-width: 3rem;
+$prototype-separator-background: $primary-color;
+$prototype-separator-margin-top: $global-margin;
+
+// 40. Prototype Shadow
+// --------------------
+
+$prototype-shadow-breakpoints: $global-prototype-breakpoints;
+$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
+0 2px 10px 0 rgba(0,0,0,.12);
+
+// 41. Prototype Sizing
+// --------------------
+
+$prototype-sizing-breakpoints: $global-prototype-breakpoints;
+$prototype-sizing: (
+        width,
+        height
+);
+$prototype-sizes: (
+        25: 25%,
+        50: 50%,
+        75: 75%,
+        100: 100%
+);
+
+// 42. Prototype Spacing
+// ---------------------
+
+$prototype-spacing-breakpoints: $global-prototype-breakpoints;
+$prototype-spacers-count: 3;
+
+// 43. Prototype Text-Decoration
+// -----------------------------
+
+$prototype-decoration-breakpoints: $global-prototype-breakpoints;
+$prototype-text-decoration: (
+        overline,
+        underline,
+        line-through,
+);
+
+// 44. Prototype Text-Transformation
+// ---------------------------------
+
+$prototype-transformation-breakpoints: $global-prototype-breakpoints;
+$prototype-text-transformation: (
+        lowercase,
+        uppercase,
+        capitalize
+);
+
+// 45. Prototype Text-Utilities
+// ----------------------------
+
+$prototype-utilities-breakpoints: $global-prototype-breakpoints;
+$prototype-text-overflow: ellipsis;
+
+// 46. Responsive Embed
+// --------------------
+
+$responsive-embed-margin-bottom: rem-calc(16);
+$responsive-embed-ratios: (
+        default: 4 by 3,
+        widescreen: 16 by 9,
+);
+
+// 47. Reveal
 // ----------
 
 $reveal-background: $white;
@@ -476,7 +753,7 @@
 $reveal-zindex: 1005;
 $reveal-overlay-background: rgba($black, 0.45);
 
-// 29. Slider
+// 48. Slider
 // ----------
 
 $slider-width-vertical: 0.5rem;
@@ -490,7 +767,7 @@
 $slider-opacity-disabled: 0.25;
 $slider-radius: $global-radius;
 
-// 30. Switch
+// 49. Switch
 // ----------
 
 $switch-background: $medium-gray;
@@ -506,7 +783,7 @@
 $switch-paddle-radius: $global-radius;
 $switch-paddle-transition: all 0.25s ease-out;
 
-// 31. Table
+// 50. Table
 // ---------
 
 $table-background: $white;
@@ -516,29 +793,35 @@
 $table-hover-scale: 2%;
 $table-row-hover: darken($table-background, $table-hover-scale);
 $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-is-striped: true;
 $table-striped-background: smart-scale($table-background, $table-color-scale);
 $table-stripe: even;
 $table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-head-row-hover: darken($table-head-background, $table-hover-scale);
 $table-foot-background: smart-scale($table-background, $table-color-scale);
+$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
 $table-head-font-color: $body-font-color;
+$table-foot-font-color: $body-font-color;
 $show-header-for-stacked: false;
+$table-stack-breakpoint: medium;
 
-// 32. Tabs
+// 51. Tabs
 // --------
 
 $tab-margin: 0;
 $tab-background: $white;
+$tab-color: $primary-color;
 $tab-background-active: $light-gray;
+$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: foreground($tab-background, $primary-color);
+$tab-content-color: $body-font-color;
 $tab-content-padding: 1rem;
 
-// 33. Thumbnail
+// 52. Thumbnail
 // -------------
 
 $thumbnail-border: solid 4px $white;
@@ -548,7 +831,7 @@
 $thumbnail-transition: box-shadow 200ms ease-out;
 $thumbnail-radius: $global-radius;
 
-// 34. Title Bar
+// 53. Title Bar
 // -------------
 
 $titlebar-background: $black;
@@ -559,30 +842,47 @@
 $titlebar-icon-color-hover: $medium-gray;
 $titlebar-icon-spacing: 0.25rem;
 
-// 35. Tooltip
+// 54. Tooltip
 // -----------
 
+$has-tip-cursor: help;
 $has-tip-font-weight: $global-weight-bold;
 $has-tip-border-bottom: dotted 1px $dark-gray;
 $tooltip-background-color: $black;
 $tooltip-color: $white;
 $tooltip-padding: 0.75rem;
+$tooltip-max-width: 10rem;
 $tooltip-font-size: $small-font-size;
 $tooltip-pip-width: 0.75rem;
 $tooltip-pip-height: $tooltip-pip-width * 0.866;
 $tooltip-radius: $global-radius;
 
-// 36. Top Bar
+// 55. Top Bar
 // -----------
 
 $topbar-padding: 0.5rem;
 $topbar-background: $light-gray;
 $topbar-submenu-background: $topbar-background;
-$topbar-title-spacing: 1rem;
+$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
 $topbar-input-width: 200px;
 $topbar-unstack-breakpoint: medium;
 
-// 37. Path for fonts
+// 56. Xy Grid
+// -----------
+
+$xy-grid: true;
+$grid-container: $global-width;
+$grid-columns: 12;
+$grid-margin-gutters: (
+        small: 20px,
+        medium: 30px
+);
+$grid-padding-gutters: $grid-margin-gutters;
+$grid-container-padding: $grid-padding-gutters;
+$grid-container-max: $global-width;
+$xy-block-grid-max: 8;
+
+// 57. Path for fonts
 // ------------------
 
 $fi-path: "../fonts";
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -31,7 +31,7 @@
 
 @import 'foundation';
 @import 'motion-ui';
-@import '_foundation-icons';
+@import 'node_modules/foundation-icon-fonts/_foundation-icons';
 
 @include foundation-global-styles;
 @include foundation-grid;