Initial public release.

src/_vendor/sassy-lists/stylesheets/functions/_contain.scss

@@ -0,0 +1,31 @@
+///
+/// Returns whether `$list` contains `$value`.
+///
+/// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-contain
+///
+/// @param {List}    $list  - list to check
+/// @param {*}       $value - value to look for
+///
+/// @example
+/// sl-contain(a b c, a)
+/// // true
+///
+/// @example
+/// sl-contain(a b c, z)
+/// // false
+///
+/// @return {Bool}
+///
+
+@function sl-contain($list, $value) {
+  @return not not index($list, $value);
+}
+
+///
+/// @requires sl-contain
+/// @alias sl-contain
+///
+ 
+@function sl-include($list, $value) {
+  @return sl-contain($list, $value);
+}

src/_vendor/sassy-lists/stylesheets/functions/_purge.scss

@@ -0,0 +1,38 @@
+/// Removes all false and null values from `$list`.
+///
+/// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-purge
+///
+/// @requires sl-is-true
+/// @requires sl-to-list
+///
+/// @param {List} $list - list to purge
+///
+/// @example
+/// sl-purge(null a false b)
+/// // a b
+///
+/// @return {List}
+///
+
+@function sl-purge($list) {
+  $_: sl-missing-dependencies('sl-is-true', 'sl-to-list');
+  
+  $result: ();
+
+  @each $item in $list {
+    @if sl-is-true($item) {
+      $result: append($result, $item, list-separator($list));
+    }
+  }
+
+  @return sl-to-list($result);
+}
+
+///
+/// @requires sl-purge
+/// @alias sl-purge
+///
+ 
+@function sl-clean($list) {
+  @return sl-purge($list);
+}

src/_vendor/sassy-lists/stylesheets/functions/_remove.scss

@@ -0,0 +1,31 @@
+///
+/// Removes value(s) `$value` from `$list`.
+///
+/// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-remove
+///
+/// @requires sl-replace
+///
+/// @param {List}    $list      - list to update
+/// @param {*}       $value     - value to remove
+///
+/// @example
+/// sl-remove(a b c, a)
+/// // b c
+///
+/// @return {List}
+///
+
+@function sl-remove($list, $value) {
+  $_: sl-missing-dependencies('sl-replace');
+
+  @return sl-replace($list, $value, null);
+}
+
+///
+/// @requires sl-remove
+/// @alias sl-remove
+///
+
+@function sl-without($list, $value) {
+  @return sl-remove($list, $value);
+}

src/_vendor/sassy-lists/stylesheets/functions/_replace.scss

@@ -0,0 +1,46 @@
+///
+/// Replaces `$old` by `$new` in `$list`.
+///
+/// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-replace
+///
+/// @requires sl-is-true
+/// @requires sl-purge
+/// @requires sl-to-list
+///
+/// @param {List}    $list  - list to update
+/// @param {*}       $old   - value to replace
+/// @param {*}       $value - new value for $old
+///
+/// @example
+/// sl-replace(a b c, b, z)
+/// // a z c
+///
+/// @example
+/// sl-replace(a b c, y, z)
+/// // a b c
+/// 
+/// @return {List}
+///
+ 
+@function sl-replace($list, $old, $value) {
+  $_: sl-missing-dependencies('sl-is-true', 'sl-purge', 'sl-to-list');
+
+  $running: true;
+
+  @while $running {
+    $index: index($list, $old);
+
+    @if not $index {
+      $running: false;
+    }
+
+    @else {
+      $list: set-nth($list, $index, $value);
+    }
+
+  }
+
+  $list: if(sl-is-true($value), $list, sl-purge($list));
+  
+  @return sl-to-list($list);
+}

src/_vendor/sassy-lists/stylesheets/functions/_to-list.scss

@@ -0,0 +1,27 @@
+///
+/// Casts `$value` into a list.
+///
+/// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-to-list
+///
+/// @param {*} $value - value to cast to list
+/// @param {String} $separator [space] - separator to use
+///
+/// @example
+/// sl-to-list(a b c, comma)
+/// // a, b, c
+/// 
+/// @return {List}
+///
+
+@function sl-to-list($value, $separator: list-separator($value)) {
+  @return join((), $value, $separator);
+}
+
+///
+/// @requires sl-to-list
+/// @alias sl-to-list
+///
+
+@function sl-listify($value) {
+  @return sl-to-list($value);
+}

src/_vendor/sassy-lists/stylesheets/helpers/_missing-dependencies.scss

@@ -0,0 +1,25 @@
+///
+/// Checks whether `$functions` exist in global scope.
+///
+/// @access private
+///
+/// @param {ArgList} $functions - list of functions to check for
+///
+/// @return {Bool} Whether or not there are missing dependencies
+///
+ 
+@function sl-missing-dependencies($functions...) {
+  $missing-dependencies: ();
+  
+  @each $function in $functions {
+    @if not function-exists($function) {
+      $missing-dependencies: append($missing-dependencies, $function, comma);
+    }
+  }
+  
+  @if length($missing-dependencies) > 0 {
+    @error 'Unmet dependencies! The following functions are required: #{$missing-dependencies}.';
+  }
+
+  @return length($missing-dependencies) > 0;
+}

src/_vendor/sassy-lists/stylesheets/helpers/_true.scss

@@ -0,0 +1,13 @@
+///
+/// Returns truthiness of `$value`.
+///
+/// @access private
+///
+/// @param {*} $value - value to check
+///
+/// @return {Bool}
+///
+ 
+@function sl-is-true($value) {
+  @return if($value == null, false, $value and $value != null and $value != '' and $value != ());
+}

src/components/app/App.jsx

@@ -0,0 +1,86 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import React, { Fragment } from 'react'
+import { connect } from 'react-redux'
+
+import Board from '../farm/Board.jsx'
+import MessagePanel from '../farm/MessagePanel.jsx'
+import CreateOrJoin from '../create-or-join/CreateOrJoin.jsx'
+import NewGame from '../new-game/NewGame.jsx'
+import JoinGame from '../join-game/JoinGame.jsx'
+import Welcome from '../welcome/Welcome.jsx'
+import Tractor from '../tractor/Tractor.jsx'
+
+import { SCREENS, messagePanelId } from '../../constants.js'
+import { play } from './actions.js'
+
+class Chrome extends React.Component {
+    render() {
+        return (
+            <div className='flex-fullcenter'>
+              <div className='background-heading'><h1>Alpha Centauri Farming</h1></div>
+              {this.props.children}
+              <Tractor spikes={this.props.spikes} className={this.props.tractorClass} />
+            </div>
+        );
+    }
+}
+
+class App extends React.Component {
+    render() {
+        let view;
+        switch (this.props.screen) {
+        case SCREENS.intro:
+            view = (<Chrome spikes={true} tractorClass='intro'><Welcome /></Chrome>);
+            break;
+        case SCREENS.start:
+            view = (<Chrome><CreateOrJoin /></Chrome>);
+            break;
+        case SCREENS.newGame:
+            view = (<Chrome>
+                    <div className='view-container'>
+                    <NewGame colors={['green', 'red', 'blue', 'yellow', 'black']}
+                             button={'Start'}
+                             title={'New Game'}
+                             type={'new-game'}
+                    showGameName={true} />
+                    </div>
+                    </Chrome>);
+            break;
+        case SCREENS.joinGame:
+            view = (<Chrome><div className='view-container'><JoinGame /></div></Chrome>);
+            break;
+        case SCREENS.play:
+            view = (<Board />);
+            break;
+        }
+        return (
+            <Fragment>
+              {view}
+              <div id={messagePanelId}><MessagePanel /></div>
+            </Fragment>
+        );
+    }
+}
+
+export default connect(
+    state => state.app,
+    null
+)(App);
+

src/components/app/actionTypes.js

@@ -0,0 +1,22 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+export const START = 'start';
+export const PLAY = 'play';
+export const SHOW_NEW_GAME = 'show-new-game';
+export const SHOW_JOIN_GAME = 'show-join-game';

src/components/app/actions.js

@@ -0,0 +1,37 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import { START, PLAY, SHOW_NEW_GAME, SHOW_JOIN_GAME } from './actionTypes.js'
+
+export { start, play, showNewGame, showJoinGame }
+
+function start() {
+    return { type: START };
+}
+
+function play() {
+    return { type: PLAY };
+}
+
+function showNewGame() {
+    return { type: SHOW_NEW_GAME };
+}
+
+function showJoinGame() {
+    return { type: SHOW_JOIN_GAME };
+}

src/components/app/reducers.js

@@ -0,0 +1,40 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import { PLAY, SHOW_NEW_GAME, SHOW_JOIN_GAME, START } from './actionTypes.js'
+import { SCREENS } from '../../constants.js'
+
+const initialState = {
+    screen: SCREENS.intro
+};
+
+export default function(state = initialState, action) {
+    switch (action.type) {
+    case START:
+        return { ...state, screen: SCREENS.start };
+    case PLAY:
+        return { ...state, screen: SCREENS.play };
+    case SHOW_NEW_GAME:
+        return { ...state, screen: SCREENS.newGame };
+    case SHOW_JOIN_GAME:
+        return { ...state, screen: SCREENS.joinGame };
+    default:
+        return state;
+    }
+}
+

src/components/create-or-join/CreateOrJoin.jsx

@@ -0,0 +1,45 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import React, { Fragment } from 'react'
+import { connect } from 'react-redux'
+
+import { GroupBox, Row, Col, Button } from '../widgets.jsx'
+import { showNewGame, showJoinGame } from '../app/actions.js'
+
+class CreateOrJoin extends React.Component {
+    render() {
+        return (
+            <Fragment>
+              <Button size='large' className='shadow' onClick={this.props.showNewGame}>
+                New Game
+              </Button>
+              <Button size='large' className='shadow' onClick={this.props.showJoinGame}>
+                Join Game
+              </Button>
+            </Fragment>
+        );
+    }
+}
+
+export default connect(
+    state => state,
+    { showNewGame,
+      showJoinGame
+    }
+)(CreateOrJoin)

src/components/farm/MessagePanel.jsx

@@ -0,0 +1,50 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import React from 'react'
+import { connect } from 'react-redux'
+
+import SpaceNode from './SpaceNode.jsx'
+
+import { setMessagePanelSpace, mpMouse } from './actions.js'
+
+class MessagePanel extends React.Component {
+    render () {
+        if (this.props.space !== null) {
+            const panel = document.getElementById('message-panel'),
+                  mpDims = this.props.mpDims;
+            panel.style.top =
+                (Math.min(Math.max(mpDims.mouseY, mpDims.minHeight + mpDims.padding),
+                          mpDims.maxHeight)) + 'px';
+            panel.style.left =
+                (Math.min(Math.max(mpDims.mouseX, mpDims.minWidth + mpDims.padding),
+                          mpDims.maxWidth)) + 'px';
+            return (
+                    <SpaceNode space={this.props.space} height='210px'
+                               showtitle={true} orientation={''} />
+            );
+        } else {
+            return null;
+        }
+    }
+}
+
+export default connect(
+    state => state.farm,
+    null
+)(MessagePanel);

src/components/farm/PlayerIcon.jsx

@@ -0,0 +1,30 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import React from 'react'
+
+export default class PlayerIcon extends React.Component {
+    render() {
+        return (
+            <center>
+                {this.props.colors
+                 .map(c => (<div key={c} className={'player player-' + c}></div>))}
+            </center>
+        );
+    }
+}

src/components/farm/SpaceNode.jsx

@@ -0,0 +1,69 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import React from 'react'
+import { connect } from 'react-redux'
+
+import PlayerIcon from './PlayerIcon.jsx'
+
+import { setMessagePanelSpace, mpMouse } from './actions.js'
+
+class SpaceNode extends React.Component {
+    render() {
+        const space = this.props.space;
+        let title = '';
+        if (this.props.showtitle) {
+            switch (this.props.space.type) {
+            case 'hay': title = 'Hay Cutting'; break;
+            case 'cherry': title = 'Cherry Harvest'; break;
+            case 'wheat': title = 'Wheat Harvest'; break;
+            case 'cows': title = 'Livestock Sales'; break;
+            case 'apple': title = 'Apple Harvest'; break;
+            case 'corn': title = 'Corn Harvest'; break;
+            case 'buy': title = 'Purchasing'; break;
+            }
+        }
+        return (
+            <div className={'space space-type-' + this.props.space.type +
+                                ' space-orientation-' + this.props.orientation}
+                 onMouseOver={evt => {
+                     const clientRects = evt.target.getClientRects()[0];
+                     this.props.setMessagePanelSpace(space);
+                     this.props.mpMouse(clientRects.left, clientRects.top);
+                     return false; } }>
+                <div style={this.props.height ? {height: this.props.height} : {}}>
+                <center>{this.props.space.month}</center>
+                { this.props.showtitle ? (
+                    <div className='space-title'>
+                        {title}
+                    </div>)
+                  : (null)}
+            { this.props.space.players.length ? <PlayerIcon colors={this.props.space.players} /> : ''}
+                    <div className='space-description'>
+                        {this.props.space.description}
+                    </div>
+                </div>
+            </div>
+    );
+  }
+}
+
+export default connect(
+    null,
+    { setMessagePanelSpace, mpMouse }
+)(SpaceNode)

src/components/farm/actionTypes.js

@@ -0,0 +1,36 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+export const UPDATE_GAME = 'update-game';
+export const UPDATE_PLAYER = 'update-player';
+export const GAME_STATE = 'game-state';
+export const SET_SELECTED_CARD = 'set-selected-card';
+export const SET_CARDS = 'set-cards';
+export const SPACE_PUSH_PLAYER = 'space-push-player';
+export const SPACE_CLEAR_PLAYERS = 'space-clear-players';
+export const SET_OLD_MESSAGES = 'set-old-messages';
+export const MESSAGE_PANEL_SPACE = 'message-panel-space';
+export const MP_MOUSE = 'mp-mouse';
+export const SET_MP_DIMS = 'set-mp-dims';
+export const MOVE_PLAYER = 'move-player'
+export const SET_NEXT_ACTION = 'set-next-action'
+export const NEXT_UI_ACTION = 'next-ui-action'
+export const NEXT_UI_ACTION_SILENT = 'next-ui-action-silent'
+export const MARK_ACTION_CHANGE_HANDLED = 'mark-action-change-handled'
+export const ALERT = 'alert'
+export const ALERT_HANDLED = 'alert-handled'

src/components/farm/actions.js

@@ -0,0 +1,115 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import { UPDATE_GAME, UPDATE_PLAYER, GAME_STATE, SET_SELECTED_CARD, SET_CARDS,
+         SPACE_PUSH_PLAYER, SPACE_CLEAR_PLAYERS, SET_OLD_MESSAGES, MESSAGE_PANEL_SPACE,
+         MP_MOUSE, SET_MP_DIMS, MARK_ACTION_CHANGE_HANDLED, SET_NEXT_ACTION,
+         MOVE_PLAYER, NEXT_UI_ACTION, NEXT_UI_ACTION_SILENT, ALERT, ALERT_HANDLED
+       } from './actionTypes.js'
+
+export { updateGame, updatePlayer, gameState, setSelectedCard, setCards,
+         spacePushPlayer, spaceClearPlayers, setOldMessages, setMessagePanelSpace,
+         mpMouse, setMPDims, movePlayer, setNextAction, nextUIAction,
+         markActionChangeHandled, nextUIActionSilent, alert, alertHandled }
+
+function updateGame(update) {
+    return { type: UPDATE_GAME,
+             update };
+}
+
+function updatePlayer(update) {
+    return { type: UPDATE_PLAYER,
+             update };
+}
+
+function gameState(state) {
+    return { type: GAME_STATE,
+             state };
+}
+
+function setSelectedCard(card) {
+    return { type: SET_SELECTED_CARD,
+             // TODO share with initialState ui.card
+             card: card ? card : { type: 'no-card', contents: '', total: 0 } }
+}
+
+function setCards(cards) {
+    return { type: SET_CARDS,
+             cards };
+}
+
+function spacePushPlayer(id, player) {
+    return { type: SPACE_PUSH_PLAYER,
+             id,
+             player };
+}
+
+function spaceClearPlayers(id) {
+    return { type: SPACE_CLEAR_PLAYERS,
+             id };
+}
+
+function setOldMessages(messages) {
+    return { type: SET_OLD_MESSAGES,
+             messages };
+}
+
+function setMessagePanelSpace(space) {
+    return { type: MESSAGE_PANEL_SPACE,
+             space };
+}
+
+function mpMouse(mouseX, mouseY) {
+    return { type: MP_MOUSE,
+             mouseX, mouseY };
+}
+
+function setMPDims(minWidth, minHeight, maxWidth, maxHeight) {
+    return { type: SET_MP_DIMS,
+             minWidth, minHeight, maxWidth, maxHeight };
+}
+
+function movePlayer(newSpace, oldSpace, player) {
+    return { type: MOVE_PLAYER,
+             newSpace, oldSpace, player };
+}
+
+function nextUIAction() {
+    return { type: NEXT_UI_ACTION };
+}
+
+function nextUIActionSilent() {
+    return { type: NEXT_UI_ACTION_SILENT };
+}
+
+function setNextAction(action, value) {
+    return { type: SET_NEXT_ACTION,
+             action, value };
+}
+
+function markActionChangeHandled() {
+    return { type: MARK_ACTION_CHANGE_HANDLED };
+}
+
+function alert(value) {
+    return { type: ALERT, value };
+}
+
+function alertHandled() {
+    return { type: ALERT_HANDLED };
+}

src/components/farm/interface.js

@@ -0,0 +1,177 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import { GAME_STATES, ALERTS } from '../../constants.js'
+
+import { batch } from 'react-redux'
+import * as websocket from '../../websocket.js'
+
+import { updateGame, updatePlayer, gameState, setSelectedCard, setCards,
+         movePlayer, setOldMessages, markActionChangeHandled,
+         mpMouse, rolled, setNextAction, nextUIAction, nextUIActionSilent, alert
+       } from './actions.js'
+
+export { initialize, buy, roll, endTurn, loan, trade, submitTradeAccept,
+         submitTradeDeny, submitTradeCancel, audit, handleMessage,
+         nextAction, buyUncleBert, actionsFinished }
+
+let store;
+
+let spacesWithPlayers = [];
+let loop = 0;
+function handleMessage(evt) {
+    const data = JSON.parse(evt.data),
+          type = data.event;
+
+    if (data.event === 'error') {
+        console.log('error:' + data.exn);
+        return;
+    }
+    batch(() => {
+        if (data.player.state === GAME_STATES.preTurn &&
+            data.game.otherPlayers.length > 0 &&
+            store.getState().farm.player.state !== GAME_STATES.preTurn) {
+            store.dispatch(alert(ALERTS.beginTurn));
+        } else if (data.game.otherPlayers.length > 0 &&
+                   data.game.currentPlayer !== store.getState().farm.game.currentPlayer) {
+            store.dispatch(alert(ALERTS.otherPlayersTurn));
+        }
+        store.dispatch(updatePlayer(data.player));
+        if (data.event === 'init') {
+            store.dispatch(movePlayer(data.player.space, 0, data.player.color));
+        }
+        // new player(s) added to game, put them on the board
+        if (data.game.otherPlayers.length !== store.getState().farm.game.otherPlayers.length) {
+            const otherPlayers = store.getState().farm.game.otherPlayers;
+            const newPlayers = data.game.otherPlayers.filter(
+                x => !otherPlayers.find(y => y.player.name === x.player.name));
+            for (const p of newPlayers) {
+                store.dispatch(movePlayer(p.player.space, 0, p.player.color));
+            }
+        }
+        const oldMessages = store.getState().farm.game.messages.slice(0, 20);
+        store.dispatch(updateGame(data.game));
+        store.dispatch(setOldMessages(oldMessages));
+        if (data.player.cards.length > 0) {
+            store.dispatch(setSelectedCard(data.player.cards[0]));
+        } else {
+            store.dispatch(setSelectedCard());
+        }
+        store.dispatch(setCards(data.player.cards));
+        if (data.event === 'action') {
+            if (data.player.name !== data.game.currentPlayer &&
+                data.action !== 'roll') {
+                store.dispatch(nextUIAction());
+            }
+            store.dispatch(setNextAction(data.action, data.value));
+            if (data.action === 'roll') {
+                store.dispatch(nextUIAction());
+            }
+        }
+        if (data.player.state === GAME_STATES.midTurn &&
+            data.player.cash < 0 &&
+            !store.getState().farm.ui.nextAction) {
+            store.dispatch(alert(ALERTS.raiseMoney));
+        }
+    });
+};
+
+let sendCommand;
+
+function buy(id, cash) {
+    sendCommand({ type: 'buy', id: id, cash: cash });
+}
+
+function roll() {
+    store.dispatch(setNextAction('pre-rolling', false));
+    store.dispatch(nextUIActionSilent());
+    sendCommand({ type: 'roll' });
+}
+
+function endTurn() {
+    store.dispatch(gameState(GAME_STATES.turnEnded));
+    sendCommand({ type: 'turn-ended' });
+}
+
+function loan(amount) {
+    sendCommand({ type: 'loan', amount: amount });
+}
+
+function trade(parameters) {
+    sendCommand({ type: 'trade',
+                  parameters: parameters });
+}
+
+function submitTradeAccept() {
+    sendCommand({ type: 'trade-accept' });
+}
+
+function submitTradeDeny() {
+    sendCommand({ type: 'trade-deny' });
+}
+
+function submitTradeCancel() {
+    sendCommand({ type: 'trade-cancel' });
+}
+
+function audit() {
+    sendCommand({ type: 'audit' });
+}
+
+function nextAction() {
+    sendCommand({ type: 'next-action' });
+}
+
+function buyUncleBert() {
+    sendCommand({ type: 'buy-uncle-bert' });
+}
+
+function actionsFinished() {
+    sendCommand({ type: 'actions-finished' });
+}
+
+function initialize(st, sc) {
+    store = st;
+    sendCommand = sc;
+
+    const unsubscribe = store.subscribe(
+        () => {
+            const state = store.getState();
+            if (state.farm.player.name === state.farm.game.currentPlayer
+                && !state.farm.ui.actionChangeHandled) {
+                store.dispatch(markActionChangeHandled());
+                nextAction();
+            }
+        });
+
+    // mpDims.mouseX = e.clientX
+    // window.onmousemove = e => store.
+    //     dispatch(mpMouse(e.clientX, store.getState().farm.mpDims.mouseY));
+    // document.addEventListener('keydown', keydown);
+}
+
+function keydown(e) {
+    switch (e.key) {
+    case 'r':
+        roll();
+        break;
+    case 'e':
+        endTurn();
+        break;
+    }
+}

src/components/farm/reducers.js

@@ -0,0 +1,182 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import { UPDATE_GAME, UPDATE_PLAYER, GAME_STATE, SET_SELECTED_CARD, SET_CARDS,
+         SPACE_PUSH_PLAYER, SPACE_CLEAR_PLAYERS,
+         SET_OLD_MESSAGES, MESSAGE_PANEL_SPACE, MP_MOUSE,
+         SET_MP_DIMS, MOVE_PLAYER, SET_NEXT_ACTION, NEXT_UI_ACTION,
+         MARK_ACTION_CHANGE_HANDLED, NEXT_UI_ACTION_SILENT, ALERT, ALERT_HANDLED
+       } from './actionTypes.js'
+import { GAME_STATES } from '../../constants.js'
+import { spaceContent, corners } from 'game.js'
+
+const spaces =
+    [[corners[0], 'buy'],
+     ['January', 'buy'],
+     ['January', 'buy'],
+     ['January', 'buy'],
+     ['January', 'buy'],
+     ['February','buy'],
+     ['February', 'buy'],
+     ['February', 'buy'],
+     ['February', 'buy'],
+     ['March', 'buy'],
+     ['March', 'buy'],
+     ['March', 'buy'],
+     ['March', 'buy'],
+     ['April', 'buy'],
+     [corners[1], 'buy'],
+     ['April', 'none'],
+     ['April', 'none'],
+     ['May', 'none'],
+     ['May', 'none'],
+     ['May', 'hay'],
+     ['May', 'hay'],
+     ['June', 'hay'],
+     ['June', 'hay'],
+     ['June', 'cherry'],
+     ['June', 'cherry'],
+     [corners[2], 'cherry'],
+     ['July', 'hay'],
+     ['July', 'hay'],
+     ['July', 'hay'],
+     ['July', 'wheat'],
+     ['August', 'wheat'],
+     ['August', 'wheat'],
+     ['August', 'wheat'],
+     ['August', 'wheat'],
+     ['September', 'hay'],
+     ['September', 'hay'],
+     ['September', 'cows'],
+     [corners[3], 'cows'],
+     ['September', 'cows'],
+     ['October', 'cows'],
+     ['October', 'hay'],
+     ['October', 'hay'],
+     ['October', 'apple'],
+     ['November', 'apple'],
+     ['November', 'apple'],
+     ['November', 'apple'],
+     ['November', 'corn'],
+     ['December', 'corn'],
+     ['December', 'corn']]
+      .map((s, i) => {
+          return { month: s[0], description: spaceContent[i],
+                   type: s[1], key: i, players: [] }});
+
+const initialState = {
+    player: { cash: 5000,
+              lastCash: 5000,
+              debt: 5000,
+              spaces,
+              state: GAME_STATES.turnEnded,
+              assets: { hay: 10, grain: 10, fruit: 0, cows: 0, harvester: 0, tractor: 0 },
+              color: '',
+              name: '',
+              ridges: { ridge1: 0, ridge2: 0, ridge3: 0, ridge4: 0 },
+              space: 0,
+              trade: {}
+            },
+    game: { auditThreshold: 250000,
+            calledAudit: false,
+            currentPlayer: '',
+            messages: [],
+            otherPlayers: [],
+            state: GAME_STATES.preTurn,
+            turn: 0,
+            oldMessages: [] },
+    ui: { card: { type: 'no-card', contents: '', total: 0 },
+          cards: [],
+          action: false,
+          actionValue: null,
+          nextAction: false,
+          nextActionValue: null,
+          actionChangeHandled: true,
+          alert: false,
+          alertHandled: false },
+    spaces: spaces,
+    space: null,
+    // message panel dimenions
+    mpDims: { mouseX: 0, mouseY: 0,
+              minWidth: 0, minHeight: 0, maxWidth: 0, maxHeight: 0,
+              padding: 8 },
+    profile: false,
+    profileTurns: 500
+}
+
+export default function(state = initialState, action) {
+    switch (action.type) {
+    case UPDATE_GAME:
+        return { ...state, game: { ...state.game, ...action.update }};
+    case UPDATE_PLAYER:
+        return { ...state, player: action.update };
+    case GAME_STATE:
+        return { ...state, game: { ...state.game, state: action.state } };
+    case SET_SELECTED_CARD:
+        return { ...state, ui: { ...state.ui, card: action.card }};
+    case SET_CARDS:
+        return { ...state, ui: { ...state.ui, cards: action.cards }};
+    case MOVE_PLAYER:
+        return { ...state, spaces: state.spaces
+                 .map((item, index) => {
+                     if (index === action.newSpace &&
+                         item.players.indexOf(action.player) === -1) {
+                         return { ...item, players: [...item.players, action.player]};
+                     } else if (index === action.oldSpace) {
+                         return { ...item,
+                                  players: item.players
+                                    .filter(x => x !== action.player) };
+                     }
+                     return item;
+                 })
+               };
+    case SET_OLD_MESSAGES:
+        return { ...state, oldMessages: action.messages };
+    case MESSAGE_PANEL_SPACE:
+        return { ...state, space: action.space };
+    case MP_MOUSE:
+        return { ...state, mpDims: { ...state.mpDims,
+                                     mouseX: action.mouseX, mouseY: action.mouseY }};
+    case SET_MP_DIMS:
+        return { ...state, mpDims: { ...state.mpDims,
+                                     minWidth: action.minWidth,
+                                     minHeight: action.minHeight,
+                                     maxWidth: action.maxWidth,
+                                     maxHeight: action.maxHeight }};
+    case SET_NEXT_ACTION:
+        return { ...state, ui: { ...state.ui, nextAction: action.action,
+                                 nextActionValue: action.value }};
+    case NEXT_UI_ACTION:
+        return { ...state, ui: { ...state.ui, action: state.ui.nextAction,
+                                 actionValue: state.ui.nextActionValue,
+                                 actionChangeHandled: !state.ui.nextAction }};
+    case NEXT_UI_ACTION_SILENT: // don't set actionChangeHandled
+        return { ...state, ui: { ...state.ui, action: state.ui.nextAction,
+                                 actionValue: state.ui.nextActionValue }};
+    case MARK_ACTION_CHANGE_HANDLED:
+        return { ...state, ui: { ...state.ui, actionChangeHandled: true }};
+    case ALERT:
+        return { ...state, ui: { ...state.ui,
+                                 alert: action.value,
+                                 alertHandled: action.value === false ? true : false }};
+    case ALERT_HANDLED:
+        return { ...state, ui: { ...state.ui, alertHandled: true }};
+    default:
+        return state;
+    }
+}

src/components/join-game/JoinGame.jsx

@@ -0,0 +1,97 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import React, { Fragment } from 'react'
+import { connect } from 'react-redux'
+
+import { GroupBox, Row, Col, Button } from '../widgets.jsx'
+
+import { startOrJoinGame } from '../start/actions.js'
+
+import NewGame from '../new-game/NewGame.jsx'
+
+const JoinGameScreens = { list: 'list', details: 'details' };
+
+class JoinGame extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            screen: JoinGameScreens.list,
+            game: null
+        };
+    }
+
+    handleClickGame = game => {
+        this.setState({ screen: JoinGameScreens.details,
+                        game: game
+                      });
+    }
+
+    handleBack = e => {
+        this.setState({ screen: JoinGameScreens.list });
+    }
+
+    handleJoinAsExisting = e => {
+        this.props.startOrJoinGame({ type: 'join-as-existing',
+                                     playerName: e.target.text,
+                                     gameName: this.state.game.name });
+    }
+
+    render() {
+        return (
+            <GroupBox title='Join Game'>
+              <Row>
+                <Col width='12'>
+                  {this.state.screen === JoinGameScreens.list ?
+                      (<ul>
+                        {this.props.games
+                            .map((g, i) =>
+                                 (<li key={i}>
+                                    <a href='#' onClick={() => this.handleClickGame(g)}>{g.name}</a>
+                                  </li>))}
+                       </ul>)
+                   : (<Fragment>
+                        <p><a href="#" onClick={this.handleBack}>back to games</a></p>
+                      <h3><b>Game:</b> {this.state.game.name}</h3>
+                      <h4>Join as existing player:</h4>
+                      <ul>
+                      {this.state.game.players.map((p, i) =>
+                                                   (<li key={i}>
+                                                    <a href='#' onClick={this.handleJoinAsExisting}>
+                                                    {p}
+                                                    </a>
+                                                    </li>))}
+                      </ul>
+                        <NewGame colors={this.state.game.colors}
+                                 button={'Join'}
+                                 showGameName={false}
+                                 gameName={this.state.game.name}
+                                 type={'join-game'}
+                                 title={'Join as New Player'} />
+                      </Fragment>)}
+                </Col>
+              </Row>
+            </GroupBox>
+        );
+    }
+}
+
+export default connect(
+    state => state.start.start,
+    { startOrJoinGame }
+)(JoinGame)

src/components/new-game/NewGame.jsx

@@ -0,0 +1,104 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import React, { Fragment } from 'react'
+import { connect } from 'react-redux'
+
+import { GroupBox, Row, Col, Button } from '../widgets.jsx'
+
+import { startOrJoinGame } from '../start/actions.js'
+
+class NewGame extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            playerName: '',
+            checkedColor: props.colors[0],
+            gameName: props.gameName || ''
+        };
+    }
+
+    handleInputChange = e => {
+        const target = e.target,
+              value = target.type === 'checkbox' ? target.name : target.value,
+              name = target.type === 'checkbox' ? 'checkedColor' : target.name;
+
+        this.setState({
+            [name]: value
+        });
+    }
+
+    handleSubmit = e => {
+        e.preventDefault();
+        this.props.startOrJoinGame(Object.assign({ type: this.props.type }, this.state));
+    }
+
+    render() {
+        let playerNameInput;
+        return (
+            <GroupBox title={this.props.title}>
+              <form onSubmit={this.handleSubmit}>
+                <Row>
+                  <Col width='12'>
+                    <label>Your Name
+                      <input type='text' name='playerName'
+                             value={this.state.playerName}
+                             onChange={this.handleInputChange} />
+                    </label>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col width='12'>
+                    <label>Your Color</label>
+                    {this.props.colors
+                        .map(c =>
+                             (<label key={c} className={'player player-selectable player-' + c + (this.state.checkedColor === c ? ' player-selected' : '')}>
+                                <input type='checkbox'
+                                       checked={this.state.checkedColor === c}
+                                           onChange={this.handleInputChange}
+                                           name={c} />
+                               </label>))
+                    }
+                    <br /><br />
+                  </Col>
+                </Row>
+                {this.props.showGameName && (
+                <Row>
+                  <Col width='12'>
+                    <label>Game Name
+                      <input type='text' name='gameName' value={this.state.gameName}
+                             onChange={this.handleInputChange} />
+                    </label>
+                  </Col>
+                </Row>
+                )}
+                <Row>
+                  <Col width='12'>
+                    <Button type='submit'>{this.props.button} Game</Button>
+                  </Col>
+                </Row>
+              </form>
+            </GroupBox>
+        );
+    }
+}
+
+export default connect(
+    null,
+    { startOrJoinGame }
+)(NewGame)

src/components/start/Start.jsx

@@ -0,0 +1,94 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import React, { Fragment } from 'react'
+import { connect } from 'react-redux'
+
+import { GroupBox, Row, Col } from '../widgets.jsx'
+import { startOrJoinGame } from './actions.js'
+
+const JoinGameScreens = { list: 'list', details: 'details' };
+
+class JoinGameComp extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            screen: JoinGameScreens.list,
+            game: null
+        };
+    }
+
+    handleClickGame = game => {
+        this.setState({ screen: JoinGameScreens.details,
+                        game: game
+                      });
+    }
+
+    handleBack = e => {
+        this.setState({ screen: JoinGameScreens.list });
+    }
+
+    handleJoinAsExisting = e => {
+        this.props.startOrJoinGame({ type: 'join-as-existing',
+                                     playerName: e.target.text,
+                                     gameName: this.state.game.name });
+    }
+
+    render() {
+        return (
+            <GroupBox title='Join Game'>
+              <Row>
+                <Col width='12'>
+                  {this.state.screen === JoinGameScreens.list ?
+                      (<ul>
+                        {this.props.games
+                            .map((g, i) =>
+                                 (<li key={i}>
+                                    <a href='#' onClick={() => this.handleClickGame(g)}>{g.name}</a>
+                                  </li>))}
+                       </ul>)
+                   : (<Fragment>
+                        <p><a href="#" onClick={this.handleBack}>back to games</a></p>
+                      <h3><b>Game:</b> {this.state.game.name}</h3>
+                      <h4>Join as existing player:</h4>
+                      <ul>
+                      {this.state.game.players.map((p, i) =>
+                                                   (<li key={i}>
+                                                    <a href='#' onClick={this.handleJoinAsExisting}>
+                                                    {p}
+                                                    </a>
+                                                    </li>))}
+                      </ul>
+                        <NewGame colors={this.state.game.colors}
+                                 button={'Join'}
+                                 showGameName={false}
+                                 gameName={this.state.game.name}
+                                 type={'join-game'}
+                                 title={'Join as New Player'} />
+                      </Fragment>)}
+                </Col>
+              </Row>
+            </GroupBox>
+        );
+    }
+}
+
+const JoinGame = connect(
+    null,
+    { startOrJoinGame }
+)(JoinGameComp)

src/components/start/actionTypes.js

@@ -0,0 +1,20 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+export const SET_START_GAMES = 'set-start-games';
+export const START_OR_JOIN_GAME = 'start-or-join-game';

src/components/start/actions.js

@@ -0,0 +1,31 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import { SET_START_GAMES, START_OR_JOIN_GAME } from './actionTypes.js'
+
+export { setStartGames, startOrJoinGame }
+
+function setStartGames(games) {
+    return { type: SET_START_GAMES,
+             games };
+}
+
+function startOrJoinGame(msg) {
+    return { type: START_OR_JOIN_GAME,
+             msg };
+}

src/components/start/reducers.js

@@ -0,0 +1,37 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import { SET_START_GAMES, START_OR_JOIN_GAME } from './actionTypes.js'
+import { SCREENS } from '../../constants.js'
+
+const initialState = {
+    start: { games: [] },
+    msg: null
+};
+
+export default function(state = initialState, action) {
+    switch (action.type) {
+    case SET_START_GAMES:
+        return { ...state, start: { ...state.start, games: action.games }};
+    case START_OR_JOIN_GAME:
+        return { ...state, msg: action.msg };
+    default:
+        return state;
+    }
+}
+

src/components/tractor/Tractor.jsx

@@ -0,0 +1,40 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import TractorImg from './../../../assets/img/tractor-offset.svg'
+import TractorAndSpikesImg from './../../../assets/img/tractor-offset-and-spikes.svg'
+import TractorSpikesImg from './../../../assets/img/tractor-spikes-offset.svg'
+
+import React, { Fragment } from 'react'
+
+export default class Tractor extends React.Component {
+    render() {
+        return (
+            <Fragment>
+              <div className={'tractor ' + (this.props.className ? this.props.className : '')}>
+                <img src={this.props.spikes ? TractorImg : TractorAndSpikesImg} />
+              </div>
+              {this.props.spikes ? (
+                  <div className='tractor spikes'>
+                    <img src={TractorSpikesImg} />
+                  </div>
+              ) : (<Fragment />)}
+            </Fragment>
+        );
+    }
+}

src/components/welcome/Welcome.jsx

@@ -0,0 +1,46 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import React, { Fragment } from 'react'
+import { connect } from 'react-redux'
+
+import { GroupBox, Row, Col, Button } from '../widgets.jsx'
+import { start } from '../app/actions.js'
+
+
+class Welcome extends React.Component {
+    render() {
+        return (
+            <Fragment>
+              <div className='intro-text'>
+                <div className='game-card'>
+                  Your ancestors were farmers on one of the first transports to Alpha Centuari{`'`}s Proxima b. The growing season is short and harsh but the colonists depend on you for their food. Are you up to the challenge?
+                </div>
+              </div>
+              <Button size='large' className='shadow intro' onClick={this.props.start}>
+                Begin
+              </Button>
+            </Fragment>
+        );
+    }
+}
+
+export default connect(
+    state => state,
+    { start }
+)(Welcome)

src/components/widgets.jsx

@@ -0,0 +1,69 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+import React, { Fragment } from 'react'
+
+export { GroupBox, Row, Col, Button }
+
+class GroupBox extends React.Component {
+    render() {
+        return (
+            <div className='panel card'>
+              {this.props.title ?
+                  (<div className='card-divider'>
+                    {this.props.title}
+                   </div>) : (<Fragment />)}
+                <div className={'card-section ' + this.props.className ? this.props.className : ''}>
+                {this.props.children}
+              </div>
+            </div>
+        );
+    }
+}
+
+class Row extends React.Component {
+    render() {
+        return (<div className={'grid-x full-width ' +
+                                (this.props.collapse ? 'collapse' : '') + ' ' +
+                                (this.props.className ? this.props.className : '')} >
+                {this.props.children}</div>);
+    }
+}
+
+class Col extends React.Component {
+    render() {
+        return (
+            <div className={'cell small-' + this.props.width}>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+class Button extends React.Component {
+    render() {
+        return (
+            <button className={'button ' + (this.props.size ? this.props.size : '') +
+                    ' ' + (this.props.className ? this.props.className : '')}
+                    type={this.props.type || 'button'}
+                    onClick={this.props.onClick} >
+              {this.props.children}
+            </button>
+        );
+    }
+}

src/constants.js

@@ -0,0 +1,34 @@
+// Copyright 2020 Thomas Hintz
+//
+// This file is part of the Alpha Centauri Farming project.
+//
+// The Alpha Centauri Farming project is free software: you can
+// redistribute it and/or modify it under the terms of the GNU General
+// Public License as published by the Free Software Foundation, either
+// version 3 of the License, or (at your option) any later version.
+//
+// The Alpha Centauri Farming project is distributed in the hope that
+// it will be useful, but WITHOUT ANY WARRANTY; without even the
+// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+// PURPOSE.  See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with the Alpha Centauri Farming project.  If not, see
+// <https://www.gnu.org/licenses/>.
+
+export const SCREENS = {
+    intro: 'intro',
+    start: 'start',
+    play: 'play',
+    newGame: 'new-game',
+    joinGame: 'join-game'
+};
+
+export const GAME_STATES = { preTurn: 'pre-turn',
+                             midTurn: 'mid-turn',
+                             turnEnded: 'turn-ended' };
+export const rootId = 'initial-element';
+export const messagePanelId = 'message-panel';
+export const ALERTS = { beginTurn: 'begin-turn',
+                        otherPlayersTurn: 'other-players-turn',
+                        raiseMoney: 'raise-money' }

src/foundation/_global.scss

@@ -0,0 +1,244 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+// 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;
+
+/// Global width of your site. Used by the grid to determine row width.
+/// @type Number
+$global-width: rem-calc(1200) !default;
+
+/// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px
+/// @type Number
+$global-lineheight: 1.5 !default;
+
+/// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.
+/// @type Map
+$foundation-palette: (
+  primary: #1779ba,
+  secondary: #767676,
+  success: #3adb76,
+  warning: #ffae00,
+  alert: #cc4b37,
+) !default;
+
+/// Color used for light gray UI items.
+/// @type Color
+$light-gray: #e6e6e6 !default;
+
+/// Color used for medium gray UI items.
+/// @type Color
+$medium-gray: #cacaca !default;
+
+/// Color used for dark gray UI items.
+/// @type Color
+$dark-gray: #8a8a8a !default;
+
+/// Color used for black ui items.
+/// @type Color
+$black: #0a0a0a !default;
+
+/// Color used for white ui items.
+/// @type Color
+$white: #fefefe !default;
+
+/// Background color of the body.
+/// @type Color
+$body-background: $white !default;
+
+/// Text color of the body.
+/// @type Color
+$body-font-color: $black !default;
+
+/// Font stack of the body.
+/// @type List
+$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;
+
+/// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties.
+/// @type Boolean
+$body-antialiased: true !default;
+
+/// Global value used for margin on components.
+/// @type Number
+$global-margin: 1rem !default;
+
+/// Global value used for padding on components.
+/// @type Number
+$global-padding: 1rem !default;
+
+/// Global value used for positioning on components.
+/// @type Number
+$global-position: 1rem !default;
+
+/// Global font weight used for normal type.
+/// @type Keyword | Number
+$global-weight-normal: normal !default;
+
+/// Global font weight used for bold type.
+/// @type Keyword | Number
+$global-weight-bold: bold !default;
+
+/// Global value used for all elements that have a border radius.
+/// @type Number
+$global-radius: 0 !default;
+
+/// Global value used for all menu styles. Can be overwritten at individual menu component level.
+/// @type Number
+$global-menu-padding: 0.7rem 1rem !default;
+
+/// Global value used for all menu styles. Nested margin for submenu.
+$global-menu-nested-margin: 1rem !default;
+
+/// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.
+/// @type Keyword
+$global-text-direction: ltr !default;
+
+/// Enables flexbox for components that support it.
+/// @type Boolean
+$global-flexbox: true !default;
+
+/// Enabled responsive breakpoints for prototypes if applicable
+/// @type Boolean
+$global-prototype-breakpoints: false !default;
+
+/// Button cursor's value, `auto` by default
+/// @type Keyword
+$global-button-cursor: auto !default;
+
+@if not map-has-key($foundation-palette, primary) {
+  @error 'In $foundation-palette, you must have a color named "primary".';
+}
+
+// Internal variables used for text direction
+$global-left: if($global-text-direction == rtl, right, left);
+$global-right: if($global-text-direction == rtl, left, right);
+
+// Internal 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
+@include add-foundation-colors;
+
+@mixin foundation-global-styles {
+  @include foundation-normalize;
+
+  // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
+  .foundation-mq {
+    font-family: '#{-zf-bp-serialize($breakpoints)}';
+  }
+
+  html {
+    box-sizing: border-box;
+    font-size: $global-font-size;
+  }
+
+  // Set box-sizing globally to handle padding and border widths
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+
+  // Default body styles
+  body {
+    margin: 0;
+    padding: 0;
+
+    background: $body-background;
+
+    font-family: $body-font-family;
+    font-weight: $global-weight-normal;
+    line-height: $global-lineheight;
+    color: $body-font-color;
+
+    @if ($body-antialiased) {
+      -webkit-font-smoothing: antialiased; // sass-lint:disable-line no-vendor-prefixes
+      -moz-osx-font-smoothing: grayscale; // sass-lint:disable-line no-vendor-prefixes
+    }
+  }
+
+  img {
+    // Get rid of gap under images by making them display: inline-block; by default
+    display: inline-block;
+    vertical-align: middle;
+
+    // Grid defaults to get images and embeds to work properly
+    max-width: 100%;
+    height: auto;
+    -ms-interpolation-mode: bicubic;
+  }
+
+  // Make sure textarea takes on height automatically
+  textarea {
+    height: auto;
+    min-height: 50px;
+    border-radius: $global-radius;
+  }
+
+  // Make select elements are 100% width by default
+  select {
+    box-sizing: border-box;
+    width: 100%;
+    border-radius: $global-radius;
+  }
+
+  // Styles Google Maps and MapQuest embeds properly
+  // sass-lint:disable-line no-ids
+  .map_canvas,
+  .mqa-display {
+    img,
+    embed,
+    object {
+      max-width: none !important;
+    }
+  }
+
+  // Reset <button> styles created by most browsers
+  button {
+    @include disable-mouse-outline;
+    padding: 0;
+    appearance: none;
+    border: 0;
+    border-radius: $global-radius;
+    background: transparent;
+    line-height: 1;
+    cursor: $global-button-cursor;
+  }
+
+  // Prevent text overflow on pre
+  pre {
+    overflow: auto;
+  }
+
+  // Make reset inherit font-family instead of settings sans-serif
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit;
+  }
+
+  // Internal classes to show/hide elements in JavaScript
+  .is-visible {
+    display: block !important;
+  }
+
+  .is-hidden {
+    display: none !important;
+  }
+}

src/foundation/_settings.scss

@@ -0,0 +1,896 @@
+//  Foundation for Sites Settings
+//  -----------------------------
+//
+//  Table of Contents:
+//
+//   1. Global
+//   2. Breakpoints
+//   3. The Grid
+//   4. Base Typography
+//   5. Typography Helpers
+//   6. Abide
+//   7. Accordion
+//   8. Accordion Menu
+//   9. Badge
+//  10. Breadcrumbs
+//  11. Button
+//  12. Button Group
+//  13. Callout
+//  14. 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
+
+@import 'util/util';
+
+// 1. Global
+// ---------
+
+$global-font-size: 100%;
+$global-width: rem-calc(1200);
+$global-lineheight: 1.5;
+$foundation-palette: (
+  primary: #B34534, // #1779ba
+  secondary: #BF7B71, // #767676
+  success: #3adb76,
+  warning: #ffae00,
+  alert: #cc4b37,
+);
+// other colors: #FF624A, #FFA496, #7F3125
+$light-gray: #e6e6e6;
+$medium-gray: #cacaca;
+$dark-gray: #8a8a8a;
+$black: #0a0a0a;
+$white: #fefefe;
+$body-background: $white;
+$body-font-color: $black;
+$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$body-antialiased: true;
+$global-margin: 1rem;
+$global-padding: 1rem;
+$global-position: 1rem;
+$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: true;
+$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;
+
+// 2. Breakpoints
+// --------------
+
+$breakpoints: (
+  small: 0,
+  medium: 640px,
+  large: 1024px,
+  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);
+
+// 3. The Grid
+// -----------
+
+$grid-row-width: $global-width;
+$grid-column-count: 12;
+$grid-column-gutter: (
+  small: 20px,
+  medium: 30px,
+);
+$grid-column-align-edge: true;
+$grid-column-alias: 'columns';
+$block-grid-max: 8;
+
+// 4. Base Typography
+// ------------------
+
+$header-font-family: $body-font-family;
+$header-font-weight: $global-weight-normal;
+$header-font-style: normal;
+$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+$header-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': 48),
+    'h2': ('font-size': 40),
+    'h3': ('font-size': 31),
+    'h4': ('font-size': 25),
+    'h5': ('font-size': 20),
+    'h6': ('font-size': 16),
+  ),
+);
+$header-text-rendering: optimizeLegibility;
+$small-font-size: 80%;
+$header-small-font-color: $medium-gray;
+$paragraph-lineheight: 1.6;
+$paragraph-margin-bottom: 1rem;
+$paragraph-text-rendering: optimizeLegibility;
+$enable-code-inline: true;
+$anchor-color: $primary-color;
+$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+$anchor-text-decoration: none;
+$anchor-text-decoration-hover: none;
+$hr-width: $global-width;
+$hr-border: 1px solid $medium-gray;
+$hr-margin: rem-calc(20) auto;
+$list-lineheight: $paragraph-lineheight;
+$list-margin-bottom: $paragraph-margin-bottom;
+$list-style-type: disc;
+$list-style-position: outside;
+$list-side-margin: 1.25rem;
+$list-nested-side-margin: 1.25rem;
+$defnlist-margin-bottom: 1rem;
+$defnlist-term-weight: $global-weight-bold;
+$defnlist-term-margin-bottom: 0.3rem;
+$blockquote-color: $dark-gray;
+$blockquote-padding: rem-calc(9 20 0 19);
+$blockquote-border: 1px solid $medium-gray;
+$enable-cite-block: true;
+$keystroke-font: $font-family-monospace;
+$keystroke-color: $black;
+$keystroke-background: $light-gray;
+$keystroke-padding: rem-calc(2 4 0);
+$keystroke-radius: $global-radius;
+$abbr-underline: 1px dotted $black;
+
+// 5. Typography Helpers
+// ---------------------
+
+$lead-font-size: $global-font-size * 1.25;
+$lead-lineheight: 1.6;
+$subheader-lineheight: 1.4;
+$subheader-color: $dark-gray;
+$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
+// --------
+
+$abide-inputs: true;
+$abide-labels: true;
+$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;
+
+// 7. Accordion
+// ------------
+
+$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;
+$accordion-item-padding: 1.25rem 1rem;
+$accordion-content-background: $white;
+$accordion-content-border: 1px solid $light-gray;
+$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: $white;
+$badge-color-alt: $black;
+$badge-palette: $foundation-palette;
+$badge-padding: 0.3em;
+$badge-minwidth: 2.1em;
+$badge-font-size: 0.6rem;
+
+// 10. Breadcrumbs
+// ---------------
+
+$breadcrumbs-margin: 0 0 $global-margin 0;
+$breadcrumbs-item-font-size: rem-calc(11);
+$breadcrumbs-item-color: $primary-color;
+$breadcrumbs-item-color-current: $black;
+$breadcrumbs-item-color-disabled: $medium-gray;
+$breadcrumbs-item-margin: 0.75rem;
+$breadcrumbs-item-uppercase: true;
+$breadcrumbs-item-separator: true;
+$breadcrumbs-item-separator-item: '/';
+$breadcrumbs-item-separator-item-rtl: '\\';
+$breadcrumbs-item-separator-color: $medium-gray;
+
+// 11. Button
+// ----------
+
+$button-font-family: inherit;
+$button-font-weight: null;
+$button-padding: 0.85em 1em;
+$button-margin: 0 0 $global-margin 0;
+$button-fill: solid;
+$button-background: $primary-color;
+$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-color: $white;
+$button-color-alt: $black;
+$button-radius: $global-radius;
+$button-border: 1px solid transparent;
+$button-hollow-border-width: 1px;
+$button-sizes: (
+  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;
+$button-responsive-expanded: false;
+
+// 12. Button Group
+// ----------------
+
+$buttongroup-margin: 1rem;
+$buttongroup-spacing: 1px;
+$buttongroup-child-selector: '.button';
+$buttongroup-expand-max: 6;
+$buttongroup-radius-on-each: true;
+
+// 13. Callout
+// -----------
+
+$callout-background: $white;
+$callout-background-fade: 85%;
+$callout-border: 1px solid rgba($black, 0.25);
+$callout-margin: 0 0 1rem 0;
+$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;
+$callout-link-tint: 30%;
+
+// 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-z-index: 10;
+$closebutton-default-size: medium;
+$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;
+
+// 16. Drilldown
+// -------------
+
+$drilldown-transition: transform 0.15s linear;
+$drilldown-arrows: true;
+$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;
+
+// 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,
+);
+
+// 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: null;
+$dropdownmenu-submenu-background: $white;
+$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;
+
+// 19. Flexbox Utilities
+// ---------------------
+
+$flex-source-ordering-count: 6;
+$flexbox-responsive-breakpoints: true;
+
+// 20. Forms
+// ---------
+
+$fieldset-border: 1px solid $medium-gray;
+$fieldset-padding: rem-calc(20);
+$fieldset-margin: rem-calc(18 0);
+$legend-padding: rem-calc(0 3);
+$form-spacing: rem-calc(16);
+$helptext-color: $black;
+$helptext-font-size: rem-calc(13);
+$helptext-font-style: italic;
+$input-prefix-color: $black;
+$input-prefix-background: $light-gray;
+$input-prefix-border: 1px solid $medium-gray;
+$input-prefix-padding: 1rem;
+$form-label-color: $black;
+$form-label-font-size: rem-calc(14);
+$form-label-font-weight: $global-weight-normal;
+$form-label-line-height: 1.8;
+$select-background: $white;
+$select-triangle-color: $dark-gray;
+$select-radius: $global-radius;
+$input-color: $black;
+$input-placeholder-color: $medium-gray;
+$input-font-family: inherit;
+$input-font-size: rem-calc(16);
+$input-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: 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;
+
+// 21. Label
+// ---------
+
+$label-background: $primary-color;
+$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;
+
+// 22. Media Object
+// ----------------
+
+$mediaobject-margin-bottom: $global-margin;
+$mediaobject-section-padding: $global-padding;
+$mediaobject-image-width-stacked: 100%;
+
+// 23. Menu
+// --------
+
+$menu-margin: 0;
+$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-state-back-compat: true;
+$menu-centered-back-compat: true;
+$menu-icons-back-compat: true;
+
+// 24. Meter
+// ---------
+
+$meter-height: 1rem;
+$meter-radius: $global-radius;
+$meter-background: $medium-gray;
+$meter-fill-good: $success-color;
+$meter-fill-medium: $warning-color;
+$meter-fill-bad: $alert-color;
+
+// 25. Off-canvas
+// --------------
+
+$offcanvas-sizes: (
+  small: 250px,
+);
+$offcanvas-vertical-sizes: (
+  small: 250px,
+);
+$offcanvas-background: $light-gray;
+$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';
+
+// 26. Orbit
+// ---------
+
+$orbit-bullet-background: $medium-gray;
+$orbit-bullet-background-active: $dark-gray;
+$orbit-bullet-diameter: 1.2rem;
+$orbit-bullet-margin: 0.1rem;
+$orbit-bullet-margin-top: 0.8rem;
+$orbit-bullet-margin-bottom: 0.8rem;
+$orbit-caption-background: rgba($black, 0.5);
+$orbit-caption-padding: 1rem;
+$orbit-control-background-hover: rgba($black, 0.5);
+$orbit-control-padding: 1rem;
+$orbit-control-zindex: 10;
+
+// 27. Pagination
+// --------------
+
+$pagination-font-size: rem-calc(14);
+$pagination-margin-bottom: $global-margin;
+$pagination-item-color: $black;
+$pagination-item-padding: rem-calc(3 10);
+$pagination-item-spacing: rem-calc(1);
+$pagination-radius: $global-radius;
+$pagination-item-background-hover: $light-gray;
+$pagination-item-background-current: $primary-color;
+$pagination-item-color-current: $white;
+$pagination-item-color-disabled: $medium-gray;
+$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
+// ----------------
+
+$progress-height: 1rem;
+$progress-background: $medium-gray;
+$progress-margin-bottom: $global-margin;
+$progress-meter-background: $primary-color;
+$progress-radius: $global-radius;
+
+// 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;
+$reveal-width: 600px;
+$reveal-max-width: $global-width;
+$reveal-padding: $global-padding;
+$reveal-border: 1px solid $medium-gray;
+$reveal-radius: $global-radius;
+$reveal-zindex: 1005;
+$reveal-overlay-background: rgba($black, 0.45);
+
+// 48. Slider
+// ----------
+
+$slider-width-vertical: 0.5rem;
+$slider-transition: all 0.2s ease-in-out;
+$slider-height: 0.5rem;
+$slider-background: $light-gray;
+$slider-fill-background: $medium-gray;
+$slider-handle-height: 1.4rem;
+$slider-handle-width: 1.4rem;
+$slider-handle-background: $primary-color;
+$slider-opacity-disabled: 0.25;
+$slider-radius: $global-radius;
+
+// 49. Switch
+// ----------
+
+$switch-background: $medium-gray;
+$switch-background-active: $primary-color;
+$switch-height: 2rem;
+$switch-height-tiny: 1.5rem;
+$switch-height-small: 1.75rem;
+$switch-height-large: 2.5rem;
+$switch-radius: $global-radius;
+$switch-margin: $global-margin;
+$switch-paddle-background: $white;
+$switch-paddle-offset: 0.25rem;
+$switch-paddle-radius: $global-radius;
+$switch-paddle-transition: all 0.25s ease-out;
+$switch-opacity-disabled: .5;
+$switch-cursor-disabled: not-allowed;
+
+// 50. Table
+// ---------
+
+$table-background: $white;
+$table-color-scale: 5%;
+$table-border: 1px solid smart-scale($table-background, $table-color-scale);
+$table-padding: rem-calc(8 10 10);
+$table-hover-scale: 2%;
+$table-row-hover: darken($table-background, $table-hover-scale);
+$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-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;
+
+// 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-content-background: $white;
+$tab-content-border: $light-gray;
+$tab-content-color: $body-font-color;
+$tab-content-padding: 1rem;
+
+// 52. Thumbnail
+// -------------
+
+$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);
+$thumbnail-transition: box-shadow 200ms ease-out;
+$thumbnail-radius: $global-radius;
+
+// 53. Title Bar
+// -------------
+
+$titlebar-background: $black;
+$titlebar-color: $white;
+$titlebar-padding: 0.5rem;
+$titlebar-text-font-weight: bold;
+$titlebar-icon-color: $white;
+$titlebar-icon-color-hover: $medium-gray;
+$titlebar-icon-spacing: 0.25rem;
+
+// 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;
+
+// 55. Top Bar
+// -----------
+
+$topbar-padding: 0.5rem;
+$topbar-background: $light-gray;
+$topbar-submenu-background: $topbar-background;
+$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
+$topbar-input-width: 200px;
+$topbar-unstack-breakpoint: medium;
+
+// 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;
+

src/foundation/components/_accordion-menu.scss

@@ -0,0 +1,174 @@
+////
+/// @group accordion-menu
+////
+
+/// Sets accordion menu padding.
+/// @type Number
+$accordionmenu-padding: $global-menu-padding !default;
+
+/// Sets accordion menu nested margin
+/// @type Number
+$accordionmenu-nested-margin: $global-menu-nested-margin !default;
+
+/// Sets accordion menu submenu padding.
+/// @type Number
+$accordionmenu-submenu-padding: $accordionmenu-padding !default;
+
+/// Sets if accordion menus have the default arrow styles.
+/// @type Boolean
+$accordionmenu-arrows: true !default;
+
+/// Sets accordion menu arrow color if arrow is used.
+/// @type Color
+$accordionmenu-arrow-color: $primary-color !default;
+
+/// Sets accordion menu item padding.
+/// @type Color
+$accordionmenu-item-background: null !default;
+
+/// Sets accordion menu item border.
+/// @type Color
+$accordionmenu-border: null !default;
+
+/// Sets accordion menu item padding.
+/// @type Color
+$accordionmenu-submenu-toggle-background: null !default;
+
+/// Sets accordion menu item padding.
+/// @type List
+$accordion-submenu-toggle-border: $accordionmenu-border !default;
+
+/// Sets accordion menu submenu toggle background width.
+/// @type Number
+$accordionmenu-submenu-toggle-width: 40px !default;
+
+/// Sets accordion menu submenu toggle background height.
+/// @type Number
+$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width !default;
+
+/// Sets accordion menu arrow size if arrow is used.
+/// @type Length
+$accordionmenu-arrow-size: 6px !default;
+
+@mixin zf-accordion-menu-left-right-arrows {
+  .is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
+    position: relative;
+
+    &::after {
+      @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
+      position: absolute;
+      top: 50%;
+      margin-top: -1 * ($accordionmenu-arrow-size / 2);
+      #{$global-right}: 1rem;
+    }
+  }
+
+  &.align-left .is-accordion-submenu-parent > a::after {
+    right: 1rem;
+    left: auto;
+  }
+
+  &.align-right .is-accordion-submenu-parent > a::after {
+    right: auto;
+    left: 1rem;
+  }
+}
+@mixin foundation-accordion-menu {
+
+  .accordion-menu {
+    @if $accordionmenu-border {
+      border-bottom: $accordionmenu-border;
+    }
+
+    li {
+      @if $accordionmenu-border {
+        border-top: $accordionmenu-border;
+        border-right: $accordionmenu-border;
+        border-left: $accordionmenu-border;
+      }
+      width: 100%;
+    }
+
+    a {
+      @if $accordionmenu-item-background {
+        background: $accordionmenu-item-background;
+      }
+      padding: $accordionmenu-padding;
+    }
+
+    .is-accordion-submenu a {
+      padding: $accordionmenu-submenu-padding;
+    }
+
+    .nested.is-accordion-submenu {
+      @include menu-nested($accordionmenu-nested-margin);
+    }
+
+    &.align-#{$global-right} {
+      .nested.is-accordion-submenu {
+        @include menu-nested($accordionmenu-nested-margin, right);
+      }
+    }
+
+    @if $accordionmenu-arrows {
+      @include zf-accordion-menu-left-right-arrows;
+
+      .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
+        transform: rotate(180deg);
+        transform-origin: 50% 50%;
+      }
+    }
+  }
+
+  .is-accordion-submenu li {
+    @if $accordionmenu-border {
+      border-right: 0;
+      border-left: 0;
+    }
+  }
+
+  .is-accordion-submenu-parent {
+    position: relative;
+  }
+
+  .has-submenu-toggle > a {
+    margin-#{$global-right}: $accordionmenu-submenu-toggle-width;
+  }
+
+  // Submenu toggle
+  .submenu-toggle {
+    position: absolute;
+    top: 0;
+    #{$global-right}: 0;
+
+    width: $accordionmenu-submenu-toggle-width;
+    height: $accordionmenu-submenu-toggle-height;
+
+    cursor: pointer;
+
+    border-#{$global-left}: $accordion-submenu-toggle-border;
+
+    @if $accordionmenu-submenu-toggle-background {
+      background: $accordionmenu-submenu-toggle-background;
+    }
+
+    // Add the arrow to the toggle
+    &::after {
+      @include css-triangle(6px, $accordionmenu-arrow-color, down);
+
+      top: 0;
+      bottom: 0;
+      margin: auto;
+    }
+  }
+
+  // Rotate the arrow when menu is open
+  .submenu-toggle[aria-expanded='true']::after {
+    transform: scaleY(-1);
+    transform-origin: 50% 50%;
+  }
+
+  .submenu-toggle-text {
+    @include element-invisible;
+  }
+}

src/foundation/components/_accordion.scss

@@ -0,0 +1,164 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group accordion
+////
+
+/// Default background color of an accordion group.
+/// @type Color
+$accordion-background: $white !default;
+
+/// If `true`, adds plus and minus icons to the side of each accordion title.
+/// @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;
+
+/// Default text color for items in a Menu.
+/// @type Color
+$accordion-item-color: $primary-color !default;
+
+/// Default background color on hover for items in a Menu.
+/// @type Color
+$accordion-item-background-hover: $light-gray !default;
+
+/// Default padding of an accordion item.
+/// @type Number | List
+$accordion-item-padding: 1.25rem 1rem !default;
+
+/// Default background color of tab content.
+/// @type Color
+$accordion-content-background: $white !default;
+
+/// Default border color of tab content.
+/// @type Color
+$accordion-content-border: 1px solid $light-gray !default;
+
+/// Default text color of tab content.
+/// @type Color
+$accordion-content-color: $body-font-color !default;
+
+/// Default padding for tab content.
+/// @type Number | List
+$accordion-content-padding: 1rem !default;
+
+/// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`.
+@mixin accordion-container (
+  $background: $accordion-background
+) {
+  margin-#{$global-left}: 0;
+  background: $background;
+  list-style-type: none;
+
+  &[disabled] {
+    .accordion-title {
+      cursor: not-allowed;
+    }
+  }
+}
+
+/// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
+@mixin accordion-item {
+  &:first-child > :first-child {
+    border-radius: $global-radius $global-radius 0 0;
+  }
+
+  &:last-child > :last-child {
+    border-radius: 0 0 $global-radius $global-radius;
+  }
+}
+
+/// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
+@mixin accordion-title (
+  $padding: $accordion-item-padding,
+  $font-size: $accordion-title-font-size,
+  $color: $accordion-item-color,
+  $border: $accordion-content-border,
+  $background-hover: $accordion-item-background-hover
+) {
+  position: relative;
+  display: block;
+  padding: $padding;
+
+  border: $border;
+  border-bottom: 0;
+
+  font-size: $font-size;
+  line-height: 1;
+  color: $color;
+
+  :last-child:not(.is-active) > & {
+    border-bottom: $border;
+    border-radius: 0 0 $global-radius $global-radius;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $background-hover;
+  }
+
+  @if $accordion-plusminus {
+    &::before {
+      position: absolute;
+      top: 50%;
+      #{$global-right}: 1rem;
+      margin-top: -0.5rem;
+      content: $accordion-plus-content;
+    }
+
+    .is-active > &::before {
+      content: $accordion-minus-content;
+    }
+  }
+}
+
+/// Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
+@mixin accordion-content (
+  $padding: $accordion-content-padding,
+  $border: $accordion-content-border,
+  $background: $accordion-content-background,
+  $color: $accordion-content-color
+) {
+  display: none;
+  padding: $padding;
+
+  border: $border;
+  border-bottom: 0;
+  background-color: $background;
+
+  color: $color;
+
+  :last-child > &:last-child {
+    border-bottom: $border;
+  }
+}
+
+@mixin foundation-accordion {
+  .accordion {
+    @include accordion-container;
+  }
+
+  .accordion-item {
+    @include accordion-item;
+  }
+
+  .accordion-title {
+    @include accordion-title;
+  }
+
+  .accordion-content {
+    @include accordion-content;
+  }
+}

src/foundation/components/_badge.scss

@@ -0,0 +1,63 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group badge
+////
+
+/// Default background color for badges.
+/// @type Color
+$badge-background: $primary-color !default;
+
+/// Default text color for badges.
+/// @type Color
+$badge-color: $white !default;
+
+/// Alternate text color for badges.
+/// @type Color
+$badge-color-alt: $black !default;
+
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$badge-palette: $foundation-palette !default;
+
+/// Default padding inside badges.
+/// @type Number
+$badge-padding: 0.3em !default;
+
+/// Minimum width of a badge.
+/// @type Number
+$badge-minwidth: 2.1em !default;
+
+/// Default font size for badges.
+/// @type Number
+$badge-font-size: 0.6rem !default;
+
+/// Generates the base styles for a badge.
+@mixin badge {
+  display: inline-block;
+  min-width: $badge-minwidth;
+  padding: $badge-padding;
+
+  border-radius: 50%;
+
+  font-size: $badge-font-size;
+  text-align: center;
+}
+
+@mixin foundation-badge {
+  .badge {
+    @include badge;
+
+    background: $badge-background;
+    color: $badge-color;
+
+    @each $name, $color in $badge-palette {
+      &.#{$name} {
+        background: $color;
+        color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
+      }
+    }
+  }
+}

src/foundation/components/_breadcrumbs.scss

@@ -0,0 +1,119 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group breadcrumbs
+////
+
+/// Margin around a breadcrumbs container.
+/// @type Number
+$breadcrumbs-margin: 0 0 $global-margin 0 !default;
+
+/// Font size of breadcrumb links.
+/// @type Number
+$breadcrumbs-item-font-size: rem-calc(11) !default;
+
+/// Color of breadcrumb links.
+/// @type Color
+$breadcrumbs-item-color: $primary-color !default;
+
+/// Color of the active breadcrumb link.
+/// @type Color
+$breadcrumbs-item-color-current: $black !default;
+
+/// Opacity of disabled breadcrumb links.
+/// @type Number
+$breadcrumbs-item-color-disabled: $medium-gray !default;
+
+/// Margin between breadcrumb items.
+/// @type Number
+$breadcrumbs-item-margin: 0.75rem !default;
+
+/// If `true`, makes breadcrumb links uppercase.
+/// @type Boolean
+$breadcrumbs-item-uppercase: true !default;
+
+/// If `true`, adds a seperator between breadcrumb links.
+/// @type Boolean
+$breadcrumbs-item-separator: true !default;
+
+// If it exists $breadcrumbs-item-slash is used to build $breadcrumbs-item-separator. See the documentation.
+@if variable-exists(breadcrumbs-item-slash) {
+  $breadcrumbs-item-separator: $breadcrumbs-item-slash;
+}
+
+/// Used character for the breadcrumb separator.
+/// @type Content
+$breadcrumbs-item-separator-item: '/' !default;
+
+/// Used character for the breadcrumb separator in rtl mode.
+/// @type Content
+$breadcrumbs-item-separator-item-rtl: '\\' !default;
+
+/// Color of breadcrumb item.
+/// @type Color
+$breadcrumbs-item-separator-color: $medium-gray !default;
+
+// If it exists $breadcrumbs-item-slash-color is used to build $breadcrumbs-item-separator-color. See the documentation.
+@if variable-exists(breadcrumbs-item-slash-color) {
+  $breadcrumbs-item-separator-color: $breadcrumbs-item-slash-color;
+}
+
+/// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
+@mixin breadcrumbs-container {
+  @include clearfix;
+  margin: $breadcrumbs-margin;
+  list-style: none;
+
+  // Item wrapper
+  li {
+    float: #{$global-left};
+
+    font-size: $breadcrumbs-item-font-size;
+    color: $breadcrumbs-item-color-current;
+    cursor: default;
+
+    @if $breadcrumbs-item-uppercase {
+      text-transform: uppercase;
+    }
+
+    @if $breadcrumbs-item-separator {
+      // 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;
+        }
+      }
+    }
+    @else {
+      margin-#{$global-right}: $breadcrumbs-item-margin;
+    }
+  }
+
+  // Page links
+  a {
+    color: $breadcrumbs-item-color;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+@mixin foundation-breadcrumbs {
+  .breadcrumbs {
+    @include breadcrumbs-container;
+
+    .disabled {
+      color: $breadcrumbs-item-color-disabled;
+      cursor: not-allowed;
+    }
+  }
+}

src/foundation/components/_button-group.scss

@@ -0,0 +1,299 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group button-group
+////
+
+/// Margin for button groups.
+/// @type Number
+$buttongroup-margin: 1rem !default;
+
+/// Margin between buttons in a button group.
+/// @type Number
+$buttongroup-spacing: 1px !default;
+
+/// Selector for the buttons inside a button group.
+/// @type String
+$buttongroup-child-selector: '.button' !default;
+
+/// 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;
+
+/// Determines if $button-radius is applied to each button or the button group as a whole. Use $global-radius in _settings.scss to change radius.
+/// @type Boolean
+$buttongroup-radius-on-each: true !default;
+
+/// Add styles for a button group container.
+/// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+/// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
+@mixin button-group(
+  $child-selector: $buttongroup-child-selector,
+  $spacing: $buttongroup-spacing
+) {
+  @include clearfix;
+  margin-bottom: $buttongroup-margin;
+
+  @if $global-flexbox {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+  @else {
+    font-size: 0;
+  }
+
+  #{$child-selector} {
+    margin: 0;
+    margin-#{$global-right}: $spacing;
+    margin-bottom: $spacing;
+    font-size: map-get($button-sizes, default);
+
+    @if $global-flexbox {
+      flex: 0 0 auto;
+    }
+
+    &:last-child {
+      margin-#{$global-right}: 0;
+    }
+
+    @if not $buttongroup-radius-on-each {
+      border-radius: 0;
+
+      &:first-child {
+        border-top-#{$global-left}-radius: $button-radius;
+        border-bottom-#{$global-left}-radius: $button-radius;
+      }
+
+      &:last-child {
+        border-top-#{$global-right}-radius: $button-radius;
+        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;
+    }
+  }
+}
+
+/// Creates a full-width button group, making each button equal width.
+/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+/// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
+@mixin button-group-expand(
+  $selector: $buttongroup-child-selector,
+  $spacing: $buttongroup-spacing,
+  $count: null
+) {
+  @if not $global-flexbox {
+    margin-#{$global-right}: -$spacing;
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+
+  #{$selector} {
+    @if $global-flexbox {
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
+    }
+    @else {
+      // One child
+      &:first-child {
+        &:last-child {
+          width: calc(100% - #{$spacing});
+        }
+      }
+
+      // Two or more childreen
+      @for $i from 2 through $buttongroup-expand-max {
+        &:first-child:nth-last-child(#{$i}) {
+          &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
+            display: inline-block;
+            width: calc(#{percentage(1 / $i)} - #{$spacing});
+            margin-#{$global-right}: $spacing;
+
+            &:last-child {
+              margin-#{$global-right}: $spacing * -$buttongroup-expand-max;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/// Stacks the buttons in a button group.
+/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
+@mixin button-group-stack(
+  $selector: $buttongroup-child-selector
+) {
+  @if $global-flexbox {
+    flex-wrap: wrap;
+  }
+
+  #{$selector} {
+    @if $global-flexbox {
+      flex: 0 0 100%;
+    }
+    @else {
+      width: 100%;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+
+    @if not $buttongroup-radius-on-each {
+      border-radius: 0;
+
+      &:first-child {
+        border-top-#{$global-left}-radius: $global-radius;
+        border-top-#{$global-right}-radius: $global-radius;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+        border-bottom-#{$global-left}-radius: $global-radius;
+        border-bottom-#{$global-right}-radius: $global-radius;
+      }
+    }
+
+  }
+}
+
+/// Un-stacks the buttons in a button group.
+/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
+@mixin button-group-unstack(
+  $selector: $buttongroup-child-selector
+) {
+  #{$selector} {
+    @if $global-flexbox {
+      flex: 0 0 auto;
+    }
+    @else {
+      width: auto;
+    }
+    margin-bottom: 0;
+
+    @if not $buttongroup-radius-on-each {
+      &:first-child {
+        border-top-#{$global-left}-radius: $global-radius;
+        border-top-#{$global-right}-radius: 0;
+        border-bottom-#{$global-left}-radius: $global-radius;
+      }
+
+      &:last-child {
+        border-top-#{$global-right}-radius: $global-radius;
+        border-bottom-#{$global-right}-radius: $global-radius;
+        border-bottom-#{$global-left}-radius: 0;
+      }
+    }
+
+  }
+}
+
+@mixin foundation-button-group {
+  .button-group {
+    @include button-group;
+
+    // Sizes
+    @each $size, $value in map-remove($button-sizes, default) {
+      &.#{$size} #{$buttongroup-child-selector} {
+        font-size: $value;
+      }
+    }
+
+    // Even-width Group
+    &.expanded {
+      @include button-group-expand;
+    }
+
+    // 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);
+          }
+        }
+
+        @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 {
+      @include breakpoint(medium) {
+        @include button-group-unstack;
+      }
+    }
+
+    &.stacked-for-medium {
+      @include breakpoint(large) {
+        @include button-group-unstack;
+      }
+    }
+
+    &.stacked-for-small.expanded {
+      @include breakpoint(small only) {
+        display: block;
+
+        #{$buttongroup-child-selector} {
+          display: block;
+          margin-#{$global-right}: 0;
+        }
+      }
+    }
+
+    &.stacked-for-medium.expanded {
+      @include breakpoint(medium down) {
+        display: block;
+
+        #{$buttongroup-child-selector} {
+          display: block;
+          margin-#{$global-right}: 0;
+        }
+      }
+    }
+  }
+}

src/foundation/components/_button.scss

@@ -0,0 +1,428 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group button
+////
+
+/// Font family for button elements.
+/// @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;
+
+/// Margin around buttons.
+/// @type List
+$button-margin: 0 0 $global-margin 0 !default;
+
+/// Default fill for buttons. Can either be `solid` or `hollow`.
+/// @type Keyword
+$button-fill: solid !default;
+
+/// Default background color for buttons.
+/// @type Color
+$button-background: $primary-color !default;
+
+/// Background color on hover for buttons.
+/// @type Color
+$button-background-hover: scale-color($button-background, $lightness: -15%) !default;
+
+/// Font color for buttons.
+/// @type List
+$button-color: $white !default;
+
+/// Alternative font color for buttons.
+/// @type List
+$button-color-alt: $black !default;
+
+/// Border radius for buttons, defaulted to global-radius.
+/// @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;
+
+/// Sizes for buttons.
+/// @type Map
+$button-sizes: (
+  tiny: 0.6rem,
+  small: 0.75rem,
+  default: 0.9rem,
+  large: 1.25rem,
+) !default;
+
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$button-palette: $foundation-palette !default;
+
+/// opacity for a disabled button.
+/// @type List
+$button-opacity-disabled: 0.25 !default;
+
+/// Background color lightness on hover for buttons.
+/// @type Number
+$button-background-hover-lightness: -20% !default;
+
+/// Color lightness on hover for hollow buttons.
+/// @type Number
+$button-hollow-hover-lightness: -50% !default;
+
+// Internal: flip from margin-right to margin-left for defaults
+@if $global-text-direction == 'rtl' {
+  $button-margin: 0 0 $global-margin $global-margin !default;
+}
+
+/// transitions for buttons.
+/// @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;
+
+  @if (type-of($button-padding) == 'map') {
+    @each $size, $padding in $button-padding {
+      @include breakpoint($size) {
+        padding: $padding;
+      }
+    }
+  }
+  @else {
+    padding: $button-padding;
+  }
+
+  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;
+}
+
+/// Expands a button to make it full-width.
+/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.
+@mixin button-expand($expand: true) {
+  @if $expand {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0;
+  }
+  @else {
+    display: inline-block;
+    width: auto;
+    margin: $button-margin;
+  }
+}
+
+/// 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.
+/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
+@mixin button-style(
+  $background: $button-background,
+  $background-hover: $button-background-hover,
+  $color: $button-color,
+  $background-hover-lightness: $button-background-hover-lightness
+) {
+  @if $color == auto {
+    $color: color-pick-contrast($background, ($button-color, $button-color-alt));
+  }
+
+  @if $background-hover == auto {
+    $background-hover: scale-color($background, $lightness: $background-hover-lightness);
+  }
+
+  // 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;
+    color: $color;
+  }
+}
+
+/// Sets the base styles of a hollow button.
+/// See mixin `button-hollow-style` for the filling styles.
+@mixin button-hollow {
+  &, &.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,
+  $border-width: $button-hollow-border-width
+) {
+  $color-hover: scale-color($color, $lightness: $hover-lightness);
+
+  // 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;
+  }
+}
+
+/// 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;
+    }
+  }
+}
+
+/// 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
+) {
+  $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;
+}
+
+/// Adds a dropdown arrow to a button.
+/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.
+/// @param {Color} $color [white] - Color of the arrow.
+/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.
+@mixin button-dropdown(
+  $size: 0.4em,
+  $color: $white,
+  $offset: get-side($button-padding, right)
+) {
+  &::after {
+    @include css-triangle($size, $color, down);
+    position: relative;
+    top: 0.4em; // Aligns the arrow with the text of the button
+
+    display: inline-block;
+    float: #{$global-right};
+    margin-#{$global-left}: $offset;
+  }
+}
+
+/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.
+/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.
+/// @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.
+/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
+/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.
+@mixin button(
+  $expand: false,
+  $background: $button-background,
+  $background-hover: $button-background-hover,
+  $color: $button-color,
+  $style: $button-fill
+) {
+  @include button-base;
+  @include button-fill($style);
+  @include button-fill-style($style, $background, $background-hover, $color);
+
+  @if $expand {
+    @include button-expand;
+  }
+}
+
+@mixin foundation-button {
+  .button {
+    @include button($style: none);
+
+    // Sizes
+    @each $size, $value in map-remove($button-sizes, default) {
+      &.#{$size} {
+        font-size: $value;
+      }
+    }
+
+    &.expanded { @include button-expand; }
+
+    @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;
+            }
+          }
+
+          @include breakpoint(#{$size}) {
+            &.#{$size}-expanded {
+              @include button-expand;
+            }
+          }
+        }
+      }
+    }
+
+    // Solid, hollow & clear styles
+    @each $filling in (solid hollow clear) {
+      $selector: if($button-fill == $filling, null, '.#{$filling}');
+
+      &#{$selector} {
+        @include button-fill($filling);
+        @include button-fill-style($filling);
+
+        @each $name, $color in $button-palette {
+          &.#{$name} {
+            @include button-fill-style($filling, $color, auto, auto);
+          }
+        }
+      }
+    }
+
+    // Disabled state
+    &.disabled, &[disabled] {
+      @include button-disabled;
+    }
+
+    // Dropdown arrow
+    &.dropdown {
+      @include button-dropdown;
+
+      @if $button-fill == hollow {
+        &::after {
+          border-top-color: $button-background;
+        }
+      }
+
+      &.hollow, &.clear {
+        &::after {
+          border-top-color: $button-background;
+        }
+
+        @each $name, $color in $button-palette {
+          &.#{$name} {
+            &::after {
+              border-top-color: $color;
+            }
+          }
+        }
+      }
+    }
+
+    // Button with dropdown arrow only
+    &.arrow-only::after {
+      top: -0.1em;
+      float: none;
+      margin-#{$global-left}: 0;
+    }
+  }
+
+  a.button { // sass-lint:disable-line no-qualifying-elements
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+}

src/foundation/components/_callout.scss

@@ -0,0 +1,108 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group callout
+////
+
+/// Default background color.
+/// @type Color
+$callout-background: $white !default;
+
+/// Default fade value for callout backgrounds.
+/// @type Number
+$callout-background-fade: 85% !default;
+
+/// Default border style for callouts.
+/// @type List
+$callout-border: 1px solid rgba($black, 0.25) !default;
+
+/// Default bottom margin for callouts.
+/// @type Number
+$callout-margin: 0 0 1rem 0 !default;
+
+/// Sizes for Callout paddings.
+/// @type Map
+$callout-sizes: (
+  small: 0.5rem,
+  default: 1rem,
+  large: 3rem,
+) !default;
+
+/// Default font color for callouts.
+/// @type Color
+$callout-font-color: $body-font-color !default;
+
+/// Default font color for callouts, if the callout has a dark background.
+/// @type Color
+$callout-font-color-alt: $body-background !default;
+
+/// Default border radius for callouts.
+/// @type Color
+$callout-radius: $global-radius !default;
+
+/// Amount to tint links used within colored panels. Set to `false` to disable this feature.
+/// @type Number | Boolean
+$callout-link-tint: 30% !default;
+
+/// Adds basic styles for a callout, including padding and margin.
+@mixin callout-base() {
+  position: relative;
+  margin: $callout-margin;
+  padding: map-get($callout-sizes, default);
+
+  border: $callout-border;
+  border-radius: $callout-radius;
+
+  // Respect the padding, fool.
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/// Generate quick styles for a callout using a single color as a baseline.
+/// @param {Color} $color [$callout-background] - Color to use.
+@mixin callout-style($color: $callout-background) {
+  $background: scale-color($color, $lightness: $callout-background-fade);
+
+  background-color: $background;
+  color: color-pick-contrast($background, ($callout-font-color, $callout-font-color-alt));
+}
+
+@mixin callout-size($padding) {
+  padding-top: $padding;
+  padding-right: $padding;
+  padding-bottom: $padding;
+  padding-left: $padding;
+}
+
+
+/// Adds styles for a callout.
+/// @param {Color} $color [$callout-background] - Color to use.
+@mixin callout($color: $callout-background) {
+  @include callout-base;
+  @include callout-style($color);
+}
+
+@mixin foundation-callout {
+  .callout {
+    @include callout;
+
+    @each $name, $color in $foundation-palette {
+      &.#{$name} {
+        @include callout-style($color);
+      }
+    }
+
+    @each $size, $padding in map-remove($callout-sizes, default) {
+      &.#{$size} {
+        @include callout-size($padding);
+      }
+    }
+  }
+}

src/foundation/components/_card.scss

@@ -0,0 +1,129 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group card
+////
+
+/// Default background color.
+/// @type Color
+$card-background: $white !default;
+
+/// Default font color for cards.
+/// @type Color
+$card-font-color: $body-font-color !default;
+
+/// Default background.
+/// @type Color
+$card-divider-background: $light-gray !default;
+
+/// Default border style.
+/// @type List
+$card-border: 1px solid $light-gray !default;
+
+/// Default card shadow.
+/// @type List
+$card-shadow: none !default;
+
+/// Default border radius.
+/// @type List
+$card-border-radius: $global-radius !default;
+
+/// Default padding.
+/// @type Number
+$card-padding: $global-padding !default;
+
+/// Default bottom margin.
+/// @type number
+$card-margin-bottom: $global-margin !default;
+
+/// Adds styles for a card container.
+/// @param {Color} $background - Background color of the card.
+/// @param {Color} $color - font color of the card.
+/// @param {Number} $margin - Bottom margin of the card.
+/// @param {List} $border - Border around the card.
+/// @param {List} $radius - border radius of the card.
+/// @param {List} $shadow - box shadow of the card.
+@mixin card-container(
+  $background: $card-background,
+  $color: $card-font-color,
+  $margin: $card-margin-bottom,
+  $border: $card-border,
+  $radius: $card-border-radius,
+  $shadow: $card-shadow
+) {
+  @if $global-flexbox {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  margin-bottom: $margin;
+
+  border: $border;
+  border-radius: $radius;
+
+  background: $background;
+  box-shadow: $shadow;
+
+  overflow: hidden;
+  color: $color;
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/// Adds styles for a card divider.
+@mixin card-divider(
+  $background: $card-divider-background,
+  $padding: $card-padding
+) {
+  @if $global-flexbox {
+    display: flex;
+    flex: 0 1 auto;
+  }
+
+  padding: $padding;
+  background: $background;
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/// Adds styles for a card section.
+@mixin card-section(
+  $padding: $card-padding
+) {
+  @if $global-flexbox {
+    flex: 1 0 auto;
+  }
+
+  padding: $padding;
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+@mixin foundation-card {
+  .card {
+    @include card-container;
+  }
+
+  .card-divider {
+    @include card-divider;
+  }
+
+  .card-section {
+    @include card-section;
+  }
+
+  // For IE 11 - Flexbug
+  // https://github.com/philipwalton/flexbugs/issues/75
+  .card-image {
+    min-height: 1px;
+  }
+}

src/foundation/components/_close-button.scss

@@ -0,0 +1,127 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group close-button
+////
+
+/// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`.
+/// @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: (
+  small: 0.66rem,
+  medium: 1rem,
+) !default;
+
+/// Top (or bottom) offset(s) for a close button.
+/// @type Number|Map
+$closebutton-offset-vertical: (
+  small: 0.33em,
+  medium: 0.5rem,
+) !default;
+
+/// Size(s) of the close button. Used to generate sizing modifiers.
+/// @type Number|Map
+$closebutton-size: (
+  small: 1.5em,
+  medium: 2em,
+) !default;
+
+/// The line-height of the close button. It affects the spacing of the element.
+/// @type Number
+$closebutton-lineheight: 1 !default;
+
+/// Default color of the close button.
+/// @type Color
+$closebutton-color: $dark-gray !default;
+
+/// Default color of the close button when being hovered on.
+/// @type Color
+$closebutton-color-hover: $black !default;
+
+
+/// Get the size and position for a close button. If the input value is a number, the number is returned. If the input value is a config map and the map has the key `$size`, the value is returned.
+///
+/// @param {Number|Map} $value - A number or map that represents the size or position value(s) of the close button.
+/// @param {Keyword} $size - The size of the close button to use.
+///
+/// @return {Number} The given number or the value found in the map.
+@function -zf-get-size-val($value, $size) {
+  // Check if the value is a number
+  @if type-of($value) == 'number' {
+    // If it is, just return the number
+    @return $value;
+  }
+
+  // Check if the size name exists in the value map
+  @else if map-has-key($value, $size) {
+    // If it does, return the value
+    @return map-get($value, $size);
+  }
+}
+
+/// Sets the size and position of a close button.
+/// @param {Keyword} $size [medium] - The size to use. Set to `small` to create a small close button. The 'medium' values defined in `$closebutton-*` variables will be used as the default size and position of the close button.
+@mixin close-button-size($size) {
+  $x: nth($closebutton-position, 1);
+  $y: nth($closebutton-position, 2);
+
+  #{$x}: -zf-get-size-val($closebutton-offset-horizontal, $size);
+  #{$y}: -zf-get-size-val($closebutton-offset-vertical, $size);
+  font-size: -zf-get-size-val($closebutton-size, $size);
+  line-height: -zf-get-size-val($closebutton-lineheight, $size);
+}
+
+/// Adds styles for a close button, using the styles in the settings variables.
+@mixin close-button {
+  $x: nth($closebutton-position, 1);
+  $y: nth($closebutton-position, 2);
+
+  @include disable-mouse-outline;
+  position: absolute;
+  z-index: $closebutton-z-index;
+  color: $closebutton-color;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    color: $closebutton-color-hover;
+  }
+}
+
+@mixin foundation-close-button {
+  .close-button {
+    @include close-button;
+
+    // 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};
+  }
+}

src/foundation/components/_drilldown.scss

@@ -0,0 +1,140 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group drilldown
+////
+
+/// Transition property to use for animating menus.
+/// @type Transition
+$drilldown-transition: transform 0.15s linear !default;
+
+/// Adds arrows to drilldown items with submenus, as well as the back button.
+/// @type Boolean
+$drilldown-arrows: true !default;
+
+/// Sets drilldown menu item padding.
+/// @type Number
+$drilldown-padding: $global-menu-padding !default;
+
+/// Sets drilldown menu nested margin
+/// @type Number
+$drilldown-nested-margin: 0 !default;
+
+/// Background color for drilldown top level items.
+/// @type Color
+$drilldown-background: $white !default;
+
+/// Sets drilldown menu item padding in the submenu.
+/// @type Number
+$drilldown-submenu-padding: $drilldown-padding !default;
+
+/// Background color for drilldown submenus.
+/// @type Color
+$drilldown-submenu-background: $white !default;
+
+/// Sets drilldown arrow color if arrow is used.
+/// @type Color
+$drilldown-arrow-color: $primary-color !default;
+
+/// Sets drilldown arrow size if arrow is used.
+/// @type Length
+$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;
+    }
+  }
+
+  &.align-left .is-drilldown-submenu-parent > a::after {
+    @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;
+  }
+
+}
+
+@mixin foundation-drilldown-menu {
+  // Applied to the Menu container
+  .is-drilldown {
+    position: relative;
+    overflow: hidden;
+
+    li {
+      display: block;
+    }
+
+    &.animate-height {
+      transition: height 0.5s;
+    }
+  }
+
+  // The top level <ul>
+  .drilldown {
+    a {
+      padding: $drilldown-padding;
+      background: $drilldown-background;
+    }
+
+    // Applied to submenu <ul>s
+    .is-drilldown-submenu {
+      position: absolute;
+      top: 0;
+      #{$global-left}: 100%;
+      z-index: -1;
+
+      width: 100%;
+      background: $drilldown-submenu-background;
+      transition: $drilldown-transition;
+
+      &.is-active {
+        z-index: 1;
+        display: block;
+        transform: translateX(if($global-text-direction == ltr, -100%, 100%));
+      }
+
+      &.is-closing {
+        transform: translateX(if($global-text-direction == ltr, 100%, -100%));
+      }
+
+      // Submenu item padding
+      a {
+        padding: $drilldown-submenu-padding;
+      }
+    }
+
+    .nested.is-drilldown-submenu {
+      @include menu-nested($drilldown-nested-margin);
+    }
+
+    .drilldown-submenu-cover-previous {
+      min-height: 100%;
+    }
+
+    @if $drilldown-arrows {
+      @include zf-drilldown-left-right-arrows;
+
+      .js-drilldown-back > a::before {
+        @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left);
+        display: inline-block;
+        vertical-align: middle;
+        margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
+      }
+    }
+  }
+}

src/foundation/components/_dropdown-menu.scss

@@ -0,0 +1,279 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group dropdown-menu
+////
+
+/// Enables arrows for items with dropdown menus.
+/// @type Boolean
+$dropdownmenu-arrows: true !default;
+
+/// Sets dropdown menu arrow color if arrow is used.
+/// @type Color
+$dropdownmenu-arrow-color: $anchor-color !default;
+
+/// Sets dropdown menu arrow size if arrow is used.
+/// @type Length
+$dropdownmenu-arrow-size: 6px !default;
+
+/// Sets dropdown menu arrow padding for aligning the arrow correctly.
+/// @type Length
+$dropdownmenu-arrow-padding: 1.5rem !default;
+
+/// Minimum width of dropdown sub-menus.
+/// @type Length
+$dropdownmenu-min-width: 200px !default;
+
+/// Background color for top level items.
+/// @type Color
+$dropdownmenu-background: null !default;
+
+/// Background color for dropdowns.
+/// @type Color
+$dropdownmenu-submenu-background: $white !default;
+
+/// Padding for top level items.
+/// @type Number
+$dropdownmenu-padding: $global-menu-padding !default;
+
+/// Sets dropdown menu nested margin
+/// @type Number
+$dropdownmenu-nested-margin: 0 !default;
+
+/// Padding for sub-menu items.
+/// @type Number
+$dropdownmenu-submenu-padding: $dropdownmenu-padding !default;
+
+/// Border for dropdown sub-menus.
+/// @type List
+$dropdownmenu-border: 1px solid $medium-gray !default;
+
+// Border width for dropdown sub-menus.
+// Used to adjust top margin of a sub-menu if a border is used.
+// @type Length
+$dropdownmenu-border-width: nth($dropdownmenu-border, 1);
+
+/// Text color of an active dropdown menu item. Explicit override for menu defaults
+/// @type Color
+$dropdown-menu-item-color-active: get-color(primary) !default;
+
+/// Background color of an active dropdown menu item. Explicit override for menu defaults
+/// @type Color
+$dropdown-menu-item-background-active: transparent !default;
+
+@mixin zf-dropdown-left-right-arrows {
+  > a::after {
+    #{$global-right}: 14px;
+  }
+
+  &.opens-left > a::after {
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
+    right: auto;
+    left: 5px;
+  }
+
+  &.opens-right > a::after {
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
+  }
+}
+
+@mixin dropdown-menu-direction($dir: horizontal) {
+  @if $dir == horizontal {
+    > li.opens-left { // sass-lint:disable-line no-qualifying-elements
+      > .is-dropdown-submenu {
+        top: 100%;
+        right: 0;
+        left: auto;
+      }
+    }
+
+    > li.opens-right { // sass-lint:disable-line no-qualifying-elements
+      > .is-dropdown-submenu {
+        top: 100%;
+        right: auto;
+        left: 0;
+      }
+    }
+
+    @if $dropdownmenu-arrows {
+      > 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 { // sass-lint:disable-line no-qualifying-elements
+        @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
+        #{$global-right}: 5px;
+        #{$global-left}: auto;
+        margin-top: -1 * ($dropdownmenu-arrow-size / 2);
+      }
+    }
+  }
+  @else if $dir == vertical {
+    > li {
+      .is-dropdown-submenu {
+        top: 0;
+      }
+
+      &.opens-left {
+        > .is-dropdown-submenu {
+          top: 0;
+          right: 100%;
+          left: auto;
+        }
+      }
+
+      &.opens-right {
+        > .is-dropdown-submenu {
+          right: auto;
+          left: 100%;
+        }
+      }
+
+      @if $dropdownmenu-arrows {
+        @include zf-dropdown-left-right-arrows;
+      }
+    }
+  }
+  @else {
+    @warn 'The direction used for dropdown-menu-direction() must be horizontal or vertical.';
+  }
+}
+
+@mixin foundation-dropdown-menu {
+  .dropdown.menu {
+    @include dropdown-menu-direction(horizontal);
+
+    a {
+      @include disable-mouse-outline;
+    }
+
+    // Top-level item
+    > li > a {
+      background: $dropdownmenu-background;
+      padding: $dropdownmenu-padding;
+    }
+
+    // Top-level item active state
+    > li.is-active > a {
+      background: $dropdown-menu-item-background-active;
+      color: $dropdown-menu-item-color-active;
+    }
+
+    .no-js & ul {
+      display: none;
+    }
+
+    .nested.is-dropdown-submenu {
+      @include menu-nested($dropdownmenu-nested-margin);
+    }
+
+    &.vertical {
+      @include dropdown-menu-direction(vertical);
+    }
+
+    @each $size in $breakpoint-classes {
+      @if $size != $-zf-zero-breakpoint {
+        @include breakpoint($size) {
+          &.#{$size}-horizontal {
+            @include dropdown-menu-direction(horizontal);
+          }
+
+          &.#{$size}-vertical {
+            @include dropdown-menu-direction(vertical);
+          }
+        }
+      }
+    }
+
+    &.align-right {
+      .is-dropdown-submenu.first-sub {
+        top: 100%;
+        right: 0;
+        left: auto;
+      }
+    }
+  }
+
+  .is-dropdown-menu.vertical {
+    width: 100px;
+
+    &.align-right {
+      float: right;
+    }
+  }
+
+  .is-dropdown-submenu-parent {
+    position: relative;
+
+    a::after {
+      position: absolute;
+      top: 50%;
+      #{$global-right}: 5px;
+      #{$global-left}: auto;
+      margin-top: -1 * $dropdownmenu-arrow-size;
+    }
+
+    &.opens-inner > .is-dropdown-submenu {
+
+      top: 100%;
+      @if $global-text-direction == 'rtl' {
+        right: auto;
+      }
+      @else {
+        left: auto;
+      }
+    }
+
+    &.opens-left > .is-dropdown-submenu {
+      right: 100%;
+      left: auto;
+    }
+
+    &.opens-right > .is-dropdown-submenu {
+      right: auto;
+      left: 100%;
+    }
+  }
+
+  .is-dropdown-submenu {
+    position: absolute;
+    top: 0;
+    #{$global-left}: 100%;
+    z-index: 1;
+
+    display: none;
+    min-width: $dropdownmenu-min-width;
+
+    border: $dropdownmenu-border;
+    background: $dropdownmenu-submenu-background;
+
+    .dropdown & a {
+      padding: $dropdownmenu-submenu-padding;
+    }
+
+    .is-dropdown-submenu-parent {
+      @if $dropdownmenu-arrows {
+        @include zf-dropdown-left-right-arrows;
+      }
+    }
+
+    @if (type-of($dropdownmenu-border-width) == 'number') {
+      .is-dropdown-submenu {
+        margin-top: (-$dropdownmenu-border-width);
+      }
+    }
+
+    > li {
+      width: 100%;
+    }
+
+    // [TODO] Cut back specificity
+    //&:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &, // why is this line needed? Opening is handled by JS and this causes some ugly flickering when the sub is re-positioned automatically...
+    &.js-dropdown-active {
+      display: block;
+    }
+  }
+}

src/foundation/components/_dropdown.scss

@@ -0,0 +1,82 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group dropdown
+////
+
+/// Padding for dropdown panes.
+/// @type List
+$dropdown-padding: 1rem !default;
+
+/// Background for dropdown panes.
+/// @type Color
+$dropdown-background: $body-background !default;
+
+/// Border for dropdown panes.
+/// @type List
+$dropdown-border: 1px solid $medium-gray !default;
+
+/// Font size for dropdown panes.
+/// @type List
+$dropdown-font-size: 1rem !default;
+
+/// Width for dropdown panes.
+/// @type Number
+$dropdown-width: 300px !default;
+
+/// Border radius dropdown panes.
+/// @type Number
+$dropdown-radius: $global-radius !default;
+
+/// Sizes for dropdown panes. Each size is a CSS class you can apply.
+/// @type Map
+$dropdown-sizes: (
+  tiny: 100px,
+  small: 200px,
+  large: 400px,
+) !default;
+
+/// Applies styles for a basic dropdown.
+@mixin dropdown-container {
+  position: absolute;
+  z-index: 10;
+
+  display: none;
+
+  width: $dropdown-width;
+  padding: $dropdown-padding;
+
+  visibility: hidden;
+  border: $dropdown-border;
+  border-radius: $dropdown-radius;
+  background-color: $dropdown-background;
+
+  font-size: $dropdown-font-size;
+
+
+  // Allow an intermittent state to do positioning before making visible.
+  &.is-opening {
+    display: block;
+  }
+
+  &.is-open {
+    display: block;
+    visibility: visible;
+  }
+}
+
+@mixin foundation-dropdown {
+  .dropdown-pane {
+    @include dropdown-container;
+  }
+
+  @each $name, $size in $dropdown-sizes {
+    .dropdown-pane {
+      &.#{$name} {
+        width: $size;
+      }
+    }
+  }
+}

src/foundation/components/_flex-video.scss

@@ -0,0 +1 @@
+@import 'responsive-embed';

src/foundation/components/_flex.scss

@@ -0,0 +1,119 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group Flexbox Utilities
+////
+//
+/// Default value for the count of source ordering`
+/// @type Number
+$flex-source-ordering-count: 6 !default;
+
+/// Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.
+/// @type Boolean
+$flexbox-responsive-breakpoints: true !default;
+
+@mixin flex-helpers {
+  .flex-container {
+    @include flex;
+  }
+
+  .flex-child-auto {
+    flex: 1 1 auto;
+  }
+
+  .flex-child-grow {
+    flex: 1 0 auto;
+  }
+
+  .flex-child-shrink {
+    flex: 0 1 auto;
+  }
+
+  @each $dir, $prop in $-zf-flex-direction {
+    .flex-dir-#{$dir} {
+      @include flex-direction($prop);
+    }
+  }
+
+  @if ($flexbox-responsive-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-flex-container {
+            @include flex;
+          }
+
+          .#{$size}-flex-child-auto {
+            flex: 1 1 auto;
+          }
+
+          .#{$size}-flex-child-grow {
+            flex: 1 0 auto;
+          }
+
+          .#{$size}-flex-child-shrink {
+            flex: 0 1 auto;
+          }
+
+          @each $dir, $prop in $-zf-flex-direction {
+            .#{$size}-flex-dir-#{$dir} {
+              @include flex-direction($prop);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin foundation-flex-classes {
+  // Horizontal alignment using justify-content
+  @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, 'justify', 'spaced') {
+    .align-#{$hdir} {
+      &.vertical {
+        &.menu > li > a {
+          @include flex-align($x: $hdir);
+        }
+      }
+    }
+  }
+
+  // Vertical alignment using align-items and align-self
+  @each $vdir, $prop in $-zf-flex-align {
+    .align-#{$vdir} {
+      @include flex-align($y: $vdir);
+    }
+
+    .align-self-#{$vdir} {
+      @include flex-align-self($y: $vdir);
+    }
+  }
+
+  // Central alignment of content
+  .align-center-middle {
+    @include flex-align($x: center, $y: middle);
+    align-content: center;
+  }
+
+  // Source ordering
+  @include -zf-each-breakpoint {
+    @for $i from 1 through $flex-source-ordering-count {
+      .#{$-zf-size}-order-#{$i} {
+        @include flex-order($i);
+      }
+    }
+  }
+
+  // Vanilla Flexbox Helpers
+  @include flex-helpers;
+}

src/foundation/components/_float.scss

@@ -0,0 +1,27 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group float
+////
+
+@mixin foundation-float-classes {
+  .float-left {
+    float: left !important;
+  }
+
+  .float-right {
+    float: right !important;
+  }
+
+  .float-center {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .clearfix {
+    @include clearfix;
+  }
+}

src/foundation/components/_label.scss

@@ -0,0 +1,64 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group label
+////
+
+/// Default background color for labels.
+/// @type Color
+$label-background: $primary-color !default;
+
+/// Default text color for labels.
+/// @type Color
+$label-color: $white !default;
+
+/// Alternate text color for labels.
+/// @type Color
+$label-color-alt: $black !default;
+
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$label-palette: $foundation-palette !default;
+
+/// Default font size for labels.
+/// @type Number
+$label-font-size: 0.8rem !default;
+
+/// Default padding inside labels.
+/// @type Number
+$label-padding: 0.33333rem 0.5rem !default;
+
+/// Default radius of labels.
+/// @type Number
+$label-radius: $global-radius !default;
+
+/// Generates base styles for a label.
+@mixin label {
+  display: inline-block;
+  padding: $label-padding;
+
+  border-radius: $label-radius;
+
+  font-size: $label-font-size;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: default;
+}
+
+@mixin foundation-label {
+  .label {
+    @include label;
+
+    background: $label-background;
+    color: $label-color;
+
+    @each $name, $color in $label-palette {
+      &.#{$name} {
+        background: $color;
+        color: color-pick-contrast($color, ($label-color, $label-color-alt));
+      }
+    }
+  }
+}

src/foundation/components/_media-object.scss

@@ -0,0 +1,114 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group media-object
+////
+
+/// Bottom margin of a media object.
+/// @type Number
+$mediaobject-margin-bottom: $global-margin !default;
+
+/// Left and right padding on sections within a media object.
+/// @type Number
+$mediaobject-section-padding: $global-padding !default;
+
+/// Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
+/// @type Number
+$mediaobject-image-width-stacked: 100% !default;
+
+/// Adds styles for a media object container.
+@mixin media-object-container {
+  display: if($global-flexbox, flex, block);
+  margin-bottom: $mediaobject-margin-bottom;
+
+  @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.
+/// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections.
+@mixin media-object-section($padding: $mediaobject-section-padding) {
+  @if $global-flexbox {
+    flex: 0 1 auto;
+  }
+  @else {
+    display: table-cell;
+    vertical-align: top;
+  }
+
+  &:first-child {
+    padding-#{$global-right}: $padding;
+  }
+
+  &:last-child:not(:nth-child(2)) {
+    padding-#{$global-left}: $padding;
+  }
+
+  > :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.
+@mixin media-object-stack {
+  padding: 0;
+  padding-bottom: $mediaobject-section-padding;
+
+  @if $global-flexbox {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  @else {
+    display: block;
+  }
+
+  img {
+    width: $mediaobject-image-width-stacked;
+  }
+}
+
+@mixin foundation-media-object {
+  .media-object {
+    @include media-object-container;
+  }
+
+  .media-object-section {
+    @include media-object-section;
+  }
+}

src/foundation/components/_menu-icon.scss

@@ -0,0 +1,9 @@
+@mixin foundation-menu-icon {
+  .menu-icon {
+    @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover);
+  }
+
+  .menu-icon.dark {
+    @include hamburger;
+  }
+}

src/foundation/components/_menu.scss

@@ -0,0 +1,495 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group menu
+////
+
+/// Margin of a menu.
+/// @type Number
+$menu-margin: 0 !default;
+
+/// Left-hand margin of a nested menu.
+/// @type Number
+$menu-nested-margin: $global-menu-nested-margin !default;
+
+/// Padding for items in a pill menu.
+/// @type Number
+$menu-items-padding: $global-menu-padding !default;
+
+/// margin for items in a simple menu.
+/// @type Number
+$menu-simple-margin: 1rem !default;
+
+/// Text color of an active menu item.
+/// @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;
+
+/// Spacing between an icon and text in a menu item.
+/// @type Number
+$menu-icon-spacing: 0.25rem !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
+$menu-state-back-compat: true !default;
+
+/// Backward compatibility for menu centered. If true, this duplicate `.menu-centered > .menu` with `.menu.align-center`. 
+/// But please note that `menu-centered` will be removed in upcoming versions.
+/// @type Boolean
+$menu-centered-back-compat: true !default;
+
+/// Backward compatibility for using `icon-*` classes without `.icons` classes
+/// But please note that this backward compatibility will be removed in upcoming versions.
+/// @type Boolean
+$menu-icons-back-compat: true !default;
+
+/// Creates the base styles for a Menu.
+@mixin menu-base {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  position: relative;
+
+  @if $global-flexbox {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  li {
+    @include disable-mouse-outline;
+  }
+
+  a,
+  .button {
+    line-height: 1;
+    text-decoration: none;
+    display: block;
+    padding: $menu-items-padding;
+  }
+
+  // Reset styles of inner elements
+  input,
+  select,
+  a,
+  button {
+    margin-bottom: 0;
+  }
+
+  input {
+    display: inline-block;
+  }
+}
+
+/// Expands the items of a Menu, so each item is the same width.
+@mixin menu-expand {
+  @if $global-flexbox {
+    li {
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
+    }
+  }
+  @else {
+    display: table;
+    width: 100%;
+
+    > li {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+}
+
+/// Align menu items.
+@mixin menu-align($alignment) {
+  @if $alignment == left {
+    @if $global-flexbox {
+      justify-content: flex-start;
+    }
+    @else {
+      text-align: $global-left;
+    }
+  }
+  @else if $alignment == right {
+    @if $global-flexbox {
+      li {
+        display: flex;
+        justify-content: flex-end;
+
+        .submenu li {
+          justify-content: flex-start;
+        }
+      }
+
+      &.vertical li {
+        display: block;
+        text-align: $global-right;
+
+        .submenu li {
+          text-align: $global-right;
+        }
+      }
+    }
+    @else {
+      text-align: $global-right;
+
+      .submenu li {
+        text-align: $global-left;
+      }
+
+      &.vertical {
+        .submenu li {
+          text-align: $global-right;
+        }
+      }
+    }
+  }
+  @else if $alignment == center {
+    @if $global-flexbox {
+      li {
+        display: flex;
+        justify-content: center;
+
+        .submenu li {
+          justify-content: flex-start;
+        }
+      }
+    }
+    @else {
+      text-align: center;
+
+      .submenu li {
+        text-align: $global-left;
+      }
+    }
+  }
+}
+
+/// Sets the direction of a Menu.
+/// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
+@mixin menu-direction($dir: horizontal) {
+  @if $dir == horizontal {
+    @if $global-flexbox {
+      flex-wrap: wrap;
+      flex-direction: row;
+    }
+    @else {
+      li {
+        display: inline-block;
+      }
+    }
+  }
+  @else if $dir == vertical {
+    @if $global-flexbox {
+      flex-wrap: nowrap;
+      flex-direction: column;
+    }
+    @else {
+      li {
+        display: block;
+      }
+    }
+  }
+  @else {
+    @warn 'The direction used for menu-direction() must be horizontal or vertical.';
+  }
+}
+
+/// Creates a simple Menu, which has no padding or hover state.
+/// @param {Keyword} $dir [$global-left] - Direction of the menu. This effects the side of the `<li>` that receives the margin.
+/// @param {Number} $margin [$menu-simple-margin] - The margin to apply to each `<li>`.
+@mixin menu-simple($dir: $global-left, $margin: $menu-simple-margin) {
+  @if $global-flexbox {
+    align-items: center;
+  }
+
+  li + li {
+    margin-#{$dir}: $margin;
+  }
+
+  a {
+    padding: 0;
+  }
+}
+
+/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
+/// @param {Keyword|Number} $margin [$menu-nested-margin] - Length of the margin.
+/// @param {Keyword} $nested-alignment [left] - Alignment of the nested class
+@mixin menu-nested(
+  $margin: $menu-nested-margin,
+  $nested-alignment: left
+) {
+  @if $nested-alignment == right {
+    margin-#{$global-right}: $margin;
+    margin-#{$global-left}: 0;
+  }
+  @else {
+    margin-#{$global-right}: 0;
+    margin-#{$global-left}: $margin;
+  }
+
+}
+
+/// Adds basic styles for icons in menus.
+@mixin menu-icons() {
+  @if $global-flexbox {
+    a {
+      display: flex;
+    }
+  }
+  @else {
+    img,
+    i,
+    svg {
+      vertical-align: middle;
+
+      + span {
+        vertical-align: middle;
+      }
+    }
+  }
+}
+
+/// Adds position classes for icons within a menu.
+@mixin menu-icon-position($position: left, $spacing: $menu-icon-spacing) {
+  @if $position == left {
+    li a {
+      @if $global-flexbox {
+        flex-flow: row nowrap;
+      }
+
+      img,
+      i,
+      svg {
+        margin-#{$global-right}: $spacing;
+
+        @if not $global-flexbox {
+          display: inline-block;
+        }
+      }
+    }
+  }
+  @else if $position == right {
+    li a {
+      @if $global-flexbox {
+        flex-flow: row nowrap;
+      }
+
+      img,
+      i,
+      svg {
+        margin-#{$global-left}: $spacing;
+
+        @if not $global-flexbox {
+          display: inline-block;
+        }
+      }
+    }
+  }
+  @else if $position == top {
+    li a {
+      @if $global-flexbox {
+        flex-flow: column nowrap;
+      }
+      @else {
+        text-align: center;
+      }
+
+      img,
+      i,
+      svg {
+        @if not $global-flexbox {
+          display: block;
+          margin: 0 auto $spacing;
+        }
+        @else {
+          align-self: stretch;
+          margin-bottom: $spacing;
+          text-align: center;
+        }
+      }
+    }
+  }
+  @else if $position == bottom {
+    li a {
+      @if $global-flexbox {
+        flex-flow: column nowrap;
+      }
+      @else {
+        text-align: center;
+      }
+
+      img,
+      i,
+      svg {
+        @if not $global-flexbox {
+          display: block;
+          margin: $spacing auto 0;
+        }
+        @else {
+          align-self: stretch;
+          margin-bottom: $spacing;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+
+@mixin menu-text {
+  padding: $global-menu-padding;
+
+  font-weight: bold;
+  line-height: 1;
+  color: inherit;
+}
+
+@mixin menu-state-active {
+  background: $menu-item-background-active;
+  color: color-pick-contrast($menu-item-background-active, ($menu-item-color-active, $menu-item-color-alt-active));
+}
+
+@mixin foundation-menu {
+  .menu {
+    @include menu-base;
+
+    // Default orientation: horizontal
+    &, &.horizontal {
+      @include menu-direction(horizontal);
+    }
+
+    // Vertical orientation modifier
+    &.vertical {
+      @include menu-direction(vertical);
+    }
+
+    // Even-width modifier for horizontal orientation
+    &.expanded {
+      @include menu-expand;
+    }
+
+    // Simple
+    &.simple {
+      @include menu-simple;
+    }
+
+    // Breakpoint specific versions
+    @include -zf-each-breakpoint($small: false) {
+      &.#{$-zf-size}-horizontal {
+        @include menu-direction(horizontal);
+      }
+
+      &.#{$-zf-size}-vertical {
+        @include menu-direction(vertical);
+      }
+
+      &.#{$-zf-size}-expanded {
+        @include menu-expand;
+      }
+
+      &.#{$-zf-size}-simple {
+        @include menu-expand;
+      }
+    }
+
+    // Nesting
+    &.nested {
+      @include menu-nested;
+    }
+
+    // Icon Base Styles
+    &.icons {
+      @include menu-icons;
+    }
+
+    // Backward Compatibility for active state
+    @if $menu-icons-back-compat {
+      &.icon-top,
+      &.icon-right,
+      &.icon-bottom,
+      &.icon-left {
+        @include menu-icons;
+      }
+    }
+
+    // Icon Left
+    &.icon-left {
+      @include menu-icon-position(left);
+    }
+
+    // Icon Right
+    &.icon-right {
+      @include menu-icon-position(right);
+    }
+
+    // Icon Top
+    &.icon-top {
+      @include menu-icon-position(top);
+    }
+
+    // Icon Bottom
+    &.icon-bottom {
+      @include menu-icon-position(bottom);
+    }
+
+    // Active state
+    .is-active > a {
+      @include menu-state-active;
+    }
+    
+    // Backward Compatibility for active state
+    @if $menu-state-back-compat {
+      .active > a {
+        @include menu-state-active;
+      }
+    }
+
+    // Align left
+    &.align-#{$global-left} {
+      @include menu-align(left);
+    }
+
+    // Align right
+    &.align-#{$global-right} {
+      @include menu-align(right);
+
+      .nested {
+        @include menu-nested($nested-alignment: right);
+      }
+    }
+
+    // Align center
+    &.align-center {
+      @include menu-align(center);
+    }
+
+    .menu-text {
+      @include menu-text;
+    }
+  }
+
+  @if $menu-centered-back-compat {
+    .menu-centered {
+      > .menu {
+        @if $global-flexbox {
+          justify-content: center;
+        }
+        
+        @include menu-align(center);
+      }
+    }
+  }
+
+  // Prevent FOUC when using the Responsive Menu plugin
+  .no-js [data-responsive-menu] ul {
+    display: none;
+  }
+}

src/foundation/components/_off-canvas.scss

@@ -0,0 +1,511 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group off-canvas
+////
+
+/// Width map of a left/right off-canvas panel.
+/// @type Map
+$offcanvas-sizes: (
+  small: 250px,
+) !default;
+
+/// Height map of a top/bottom off-canvas panel.
+/// @type Map
+$offcanvas-vertical-sizes: (
+  small: 250px,
+) !default;
+
+/// Background color of an off-canvas panel.
+/// @type Color
+$offcanvas-background: $light-gray !default;
+
+/// Box shadow for the off-canvas overlap panel.
+/// @type Shadow
+$offcanvas-shadow: 0 0 10px rgba($black, 0.7) !default;
+
+/// Inner box shadow size for the off-canvas push panel.
+/// @type Number
+$offcanvas-inner-shadow-size: 20px !default;
+
+/// Inner box shadow color for the off-canvas push panel.
+/// @type Color
+$offcanvas-inner-shadow-color: rgba($black, 0.25) !default;
+
+/// Z-index of an off-canvas content overlay.
+/// @type Number
+$offcanvas-overlay-zindex: 11 !default;
+
+/// Z-index of an off-canvas panel with the `push` transition.
+/// @type Number
+$offcanvas-push-zindex: 12 !default;
+
+/// Z-index of an off-canvas panel with the `overlap` transition.
+/// @type Number
+$offcanvas-overlap-zindex: 13 !default;
+
+/// Z-index of an off-canvas panel using the `reveal-for-*` classes or mixin.
+/// @type Number
+$offcanvas-reveal-zindex: 12 !default;
+
+/// Length of the animation on an off-canvas panel.
+/// @type Number
+$offcanvas-transition-length: 0.5s !default;
+
+/// Timing function of the animation on an off-canvas panel.
+/// @type Keyword
+$offcanvas-transition-timing: ease !default;
+
+/// If `true`, a revealed off-canvas will be fixed-position, and scroll with the screen.
+/// @type Bool
+$offcanvas-fixed-reveal: true !default;
+
+/// Background color for the overlay that appears when an off-canvas panel is open.
+/// @type Color
+$offcanvas-exit-background: rgba($white, 0.25) !default;
+
+/// CSS class used for the main content area. The off-canvas mixins use this to target the page content.
+$maincontent-class: 'off-canvas-content' !default;
+
+/// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.
+@mixin off-canvas-basics {
+
+  /// Transform deprecated size settings into map & show warning
+  @if variable-exists(offcanvas-size) {
+    $offcanvas-sizes: (small: $offcanvas-size, medium: $offcanvas-size) !global;
+    @warn '$offcanvas-size is deprecated and not used anymore! Please update your settings and use the map $offcanvas-sizes instead';
+  }
+  @if variable-exists(offcanvas-vertical-size) {
+    $offcanvas-vertical-sizes: (small: $offcanvas-vertical-size, medium: $offcanvas-vertical-size) !global;
+    @warn '$offcanvas-vertical-size is deprecated and not used anymore! Please update your settings and use the map $offcanvas-vertical-sizes instead';
+  }
+
+  // Checks the z-indexes and increase them due to backwards compatibility.
+  // This is necessary because the overlay's z-index is new since v6.4 and may be identical to the user custom settings of the push z-index.
+  @if $offcanvas-push-zindex <= $offcanvas-overlay-zindex { $offcanvas-push-zindex: $offcanvas-overlay-zindex + 1 !global; }
+  @if $offcanvas-overlap-zindex <= $offcanvas-push-zindex { $offcanvas-overlap-zindex: $offcanvas-push-zindex + 1 !global; }
+  @if $offcanvas-reveal-zindex <= $offcanvas-overlay-zindex { $offcanvas-reveal-zindex: $offcanvas-overlay-zindex + 1 !global; }
+
+  // Hides overflow on body when an off-canvas panel is open.
+  .is-off-canvas-open {
+    overflow: hidden;
+  }
+
+  // Off-canvas overlay (generated by JavaScript)
+  .js-off-canvas-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: $offcanvas-overlay-zindex;
+
+    width: 100%;
+    height: 100%;
+
+    transition: opacity $offcanvas-transition-length $offcanvas-transition-timing, visibility $offcanvas-transition-length $offcanvas-transition-timing;
+
+    background: $offcanvas-exit-background;
+
+    opacity: 0;
+    visibility: hidden;
+
+    overflow: hidden;
+
+    &.is-visible {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    &.is-closable {
+      cursor: pointer;
+    }
+
+    &.is-overlay-absolute {
+      position: absolute;
+    }
+
+    &.is-overlay-fixed {
+      position: fixed;
+    }
+  }
+}
+
+// Adds basic styles for an off-canvas wrapper.
+@mixin off-canvas-wrapper() {
+  position: relative;
+  overflow: hidden;
+}
+
+/// Adds basic styles for an off-canvas panel.
+@mixin off-canvas-base(
+  $background: $offcanvas-background,
+  $transition: $offcanvas-transition-length $offcanvas-transition-timing,
+  $fixed: true
+) {
+  @include disable-mouse-outline;
+
+  @if $fixed == true {
+    position: fixed;
+  }
+  @else {
+    position: absolute;
+  }
+
+  // Set the off-canvas z-index.
+  z-index: $offcanvas-push-zindex;
+
+  // Increase CSS specificity
+  &.is-transition-push {
+    z-index: $offcanvas-push-zindex;
+  }
+
+  transition: transform $transition;
+  backface-visibility: hidden;
+
+  background: $background;
+
+  // Hide inactive off-canvas within the content that have the same position
+  &.is-closed {
+    visibility: hidden;
+  }
+
+  // Overlap only styles.
+  &.is-transition-overlap {
+    z-index: $offcanvas-overlap-zindex;
+
+    &.is-open {
+      box-shadow: $offcanvas-shadow;
+    }
+  }
+
+  // Sets transform to 0 to show an off-canvas panel.
+  &.is-open {
+    transform: translate(0, 0);
+  }
+}
+
+/// Adds styles to position an off-canvas panel to the left/right/top/bottom.
+@mixin off-canvas-position(
+  $position: left,
+  $orientation: horizontal,
+  $sizes: if($orientation == horizontal, $offcanvas-sizes, $offcanvas-vertical-sizes)
+) {
+  @if $position == left {
+    top: 0;
+    left: 0;
+    height: 100%;
+    overflow-y: auto;
+
+    @each $name, $size in $sizes {
+      @include breakpoint($name) {
+        width: $size;
+        transform: translateX(-$size);
+      }
+    }
+
+    // Sets the position for nested off-canvas element
+    @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
+
+      @each $name, $size in $sizes {
+        @include breakpoint($name) {
+          transform: translateX(-$size);
+        }
+      }
+      &.is-transition-overlap.is-open {
+        transform: translate(0, 0);
+      }
+    }
+
+    // Sets the open position for the content
+    @at-root .#{$maincontent-class}.is-open-#{$position} {
+      &.has-transition-push {
+        @each $name, $size in $sizes {
+          @include breakpoint($name) {
+            transform: translateX($size);
+          }
+        }
+      }
+    }
+  }
+  @else if $position == right {
+    top: 0;
+    right: 0;
+    height: 100%;
+    overflow-y: auto;
+
+    @each $name, $size in $sizes {
+      @include breakpoint($name) {
+        width: $size;
+        transform: translateX($size);
+      }
+    }
+
+    // Sets the position for nested off-canvas element
+    @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
+
+      @each $name, $size in $sizes {
+        @include breakpoint($name) {
+          transform: translateX($size);
+        }
+      }
+      &.is-transition-overlap.is-open {
+        transform: translate(0, 0);
+      }
+    }
+
+    // Sets the open position for the content
+    @at-root .#{$maincontent-class}.is-open-#{$position} {
+      &.has-transition-push {
+        @each $name, $size in $sizes {
+          @include breakpoint($name) {
+            transform: translateX(-$size);
+          }
+        }
+      }
+    }
+  }
+  @else if $position == top {
+    top: 0;
+    left: 0;
+    width: 100%;
+    overflow-x: auto;
+
+    @each $name, $size in $sizes {
+      @include breakpoint($name) {
+        height: $size;
+        transform: translateY(-$size);
+      }
+    }
+
+    // Sets the position for nested off-canvas element
+    @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
+      @each $name, $size in $sizes {
+        @include breakpoint($name) {
+          transform: translateY(-$size);
+        }
+      }
+      &.is-transition-overlap.is-open {
+        transform: translate(0, 0);
+      }
+    }
+
+    // Sets the open position for the content
+    @at-root .#{$maincontent-class}.is-open-#{$position} {
+      &.has-transition-push {
+        @each $name, $size in $sizes {
+          @include breakpoint($name) {
+            transform: translateY($size);
+          }
+        }
+      }
+    }
+  }
+  @else if $position == bottom {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    overflow-x: auto;
+
+    @each $name, $size in $sizes {
+      @include breakpoint($name) {
+        height: $size;
+        transform: translateY($size);
+      }
+    }
+
+    // Sets the position for nested off-canvas element
+    @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
+      @each $name, $size in $sizes {
+        @include breakpoint($name) {
+          transform: translateY($size);
+        }
+      }
+      &.is-transition-overlap.is-open {
+        transform: translate(0, 0);
+      }
+    }
+
+    // Sets the open position for the content
+    @at-root .#{$maincontent-class}.is-open-#{$position} {
+      &.has-transition-push {
+        @each $name, $size in $sizes {
+          @include breakpoint($name) {
+            transform: translateY(-$size);
+          }
+        }
+      }
+    }
+  }
+
+  // If $offcanvas-inner-shadow-size is set, add inner box-shadow.
+  // This mimics the off-canvas panel having a lower z-index, without having to have one.
+  @if $offcanvas-inner-shadow-size {
+    &.is-transition-push {
+      @if $position == left {
+        @include inner-side-shadow(right, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
+      }
+      @else if $position == right {
+        @include inner-side-shadow(left, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
+      }
+      @else if $position == top {
+        @include inner-side-shadow(bottom, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
+      }
+      @else if $position == bottom {
+        @include inner-side-shadow(top, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
+      }
+    }
+  }
+
+}
+
+/// Sets the styles for the content container.
+@mixin off-canvas-content() {
+  transform: none;
+  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);
+  }
+
+  // Consider element & content, nested in another content
+  .off-canvas.is-open {
+    transform: translate(0, 0);
+  }
+}
+
+/// Adds styles that reveal an off-canvas panel.
+@mixin off-canvas-reveal(
+$position: left,
+$zindex: $offcanvas-reveal-zindex,
+$content: $maincontent-class,
+$breakpoint: small
+) {
+  transform: none;
+  z-index: $zindex;
+  transition: none;
+  visibility: visible;
+
+  @if not $offcanvas-fixed-reveal {
+    position: absolute;
+  }
+
+  .close-button {
+    display: none;
+  }
+
+  // Consider revealed element is nested in content
+  .#{$maincontent-class} & {
+    transform: none;
+  }
+
+  @at-root .#{$content}.has-reveal-#{$position} {
+    margin-#{$position}: -zf-get-bp-val($offcanvas-sizes, $breakpoint);
+  }
+
+  // backwards compatibility (prior to v6.4)
+  & ~ .#{$content} {
+    margin-#{$position}: -zf-get-bp-val($offcanvas-sizes, $breakpoint);
+  }
+}
+
+/// Overrides the off-canvas styles
+@mixin in-canvas() {
+  visibility: visible;
+  height: auto;
+  position: static;
+  background: none;
+  width: auto;
+  overflow: visible;
+  transition: none;
+
+  // Increase CSS specificity
+  &.position-left,
+  &.position-right,
+  &.position-top,
+  &.position-bottom {
+    box-shadow: none;
+    transform: none;
+  }
+
+  .close-button {
+    display: none;
+  }
+}
+
+@mixin foundation-off-canvas {
+  @include off-canvas-basics;
+
+  // Off-canvas wrapper
+  .off-canvas-wrapper {
+    @include off-canvas-wrapper;
+  }
+
+  // Off-canvas container
+  .off-canvas {
+    @include off-canvas-base;
+
+    // Force position absolute for nested off-canvas because fixed doesn't work for push transition within the transform scope.
+    @at-root .#{$maincontent-class} & {
+      // NOTE: since overlap transition is currently forced if nested, there's no need to force position absolute until nested push transition is supported.
+      // position: absolute;
+    }
+  }
+
+  // Off-canvas container with absolute position
+  .off-canvas-absolute {
+    @include off-canvas-base($fixed: false);
+  }
+
+  // Off-canvas position classes
+  .position-left    { @include off-canvas-position(left,   horizontal); }
+  .position-right   { @include off-canvas-position(right,  horizontal); }
+  .position-top     { @include off-canvas-position(top,    vertical); }
+  .position-bottom  { @include off-canvas-position(bottom, vertical); }
+
+  .off-canvas-content {
+    @include off-canvas-content;
+  }
+
+  // Reveal off-canvas panel on larger screens
+  @each $name, $value in $breakpoint-classes {
+    @if $name != $-zf-zero-breakpoint {
+      @include breakpoint($name) {
+        .position-left.reveal-for-#{$name} {
+          @include off-canvas-reveal(left, $offcanvas-reveal-zindex, $maincontent-class, $name);
+        }
+
+        .position-right.reveal-for-#{$name} {
+          @include off-canvas-reveal(right, $offcanvas-reveal-zindex, $maincontent-class, $name);
+        }
+
+        .position-top.reveal-for-#{$name} {
+          @include off-canvas-reveal(top, $offcanvas-reveal-zindex, $maincontent-class, $name);
+        }
+
+        .position-bottom.reveal-for-#{$name} {
+          @include off-canvas-reveal(bottom, $offcanvas-reveal-zindex, $maincontent-class, $name);
+        }
+      }
+    }
+  }
+
+  // Move in-canvas for larger screens
+  @each $name, $value in $breakpoint-classes {
+    @if $name != $-zf-zero-breakpoint {
+      @include breakpoint($name) {
+        .off-canvas.in-canvas-for-#{$name} {
+          @include in-canvas;
+        }
+      }
+    }
+  }
+}
+

src/foundation/components/_orbit.scss

@@ -0,0 +1,197 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group orbit
+////
+
+/// Default color for Orbit's bullets.
+/// @type Color
+$orbit-bullet-background: $medium-gray !default;
+
+/// Default active color for Orbit's bullets.
+/// @type Color
+$orbit-bullet-background-active: $dark-gray !default;
+
+/// Default diameter for Orbit's bullets.
+/// @type Number
+$orbit-bullet-diameter: 1.2rem !default;
+
+/// Default margin between Orbit's bullets.
+/// @type Number
+$orbit-bullet-margin: 0.1rem !default;
+
+/// Default distance from slide region for Orbit's bullets.
+/// @type Number
+$orbit-bullet-margin-top: 0.8rem !default;
+
+/// Default bottom margin from Orbit's bullets to whatever content may lurk below it.
+/// @type Number
+$orbit-bullet-margin-bottom: 0.8rem !default;
+
+/// Default background color for Orbit's caption.
+/// @type Color
+$orbit-caption-background: rgba($black, 0.5) !default;
+
+/// Default padding for Orbit's caption.
+/// @type Number
+$orbit-caption-padding: 1rem !default;
+
+/// Default background color for Orbit's controls when hovered.
+/// @type Color
+$orbit-control-background-hover: rgba($black, 0.5) !default;
+
+/// Default padding for Orbit's controls.
+/// @type Number
+$orbit-control-padding: 1rem !default;
+
+/// Default z-index for Orbit's controls.
+/// @type Number
+$orbit-control-zindex: 10 !default;
+
+/// Adds styles for the outer Orbit wrapper. These styles are used on the `.orbit` class.
+@mixin orbit-wrapper {
+  position: relative;
+}
+
+/// Adds styles for the inner Orbit slide container. These styles are used on the `.orbit-container` class.
+@mixin orbit-container {
+  position: relative;
+  height: 0; // Prevent FOUC by not showing until JS sets height
+  margin: 0;
+  list-style: none;
+  overflow: hidden;
+}
+
+/// 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 {
+      top: 0;
+      left: 0;
+    }
+  }
+}
+
+@mixin orbit-figure {
+  margin: 0;
+}
+
+/// Adds styles for a slide containing an image. These styles are used on the `.orbit-image` class.
+@mixin orbit-image {
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+}
+
+/// Adds styles for an orbit slide caption. These styles are used on the `.orbit-caption` class.
+@mixin orbit-caption {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  margin-bottom: 0;
+  padding: $orbit-caption-padding;
+
+  background-color: $orbit-caption-background;
+  color: color-pick-contrast($orbit-caption-background);
+}
+
+/// Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the `.orbit-next` and `.orbit-previous` classes in the default CSS.
+@mixin orbit-control {
+  @include disable-mouse-outline;
+  @include vertical-center;
+  z-index: $orbit-control-zindex;
+  padding: $orbit-control-padding;
+  color: $white;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: $orbit-control-background-hover;
+  }
+}
+
+/// Adds styles for the Orbit previous button. These styles are used on the `.orbit-previous` class.
+@mixin orbit-previous {
+  #{$global-left}: 0;
+}
+
+/// Adds styles for the Orbit next button. These styles are used on the `.orbit-next` class.
+@mixin orbit-next {
+  #{$global-left}: auto;
+  #{$global-right}: 0;
+}
+
+/// Adds styles for a container of Orbit bullets. /// Adds styles for the Orbit previous button. These styles are used on the `.orbit-bullets` class.
+@mixin orbit-bullets {
+  @include disable-mouse-outline;
+  position: relative;
+  margin-top: $orbit-bullet-margin-top;
+  margin-bottom: $orbit-bullet-margin-bottom;
+  text-align: center;
+
+  button {
+    width: $orbit-bullet-diameter;
+    height: $orbit-bullet-diameter;
+    margin: $orbit-bullet-margin;
+
+    border-radius: 50%;
+    background-color: $orbit-bullet-background;
+
+    &:hover {
+      background-color: $orbit-bullet-background-active;
+    }
+
+    &.is-active {
+      background-color: $orbit-bullet-background-active;
+    }
+  }
+}
+
+@mixin foundation-orbit {
+  .orbit {
+    @include orbit-wrapper;
+  }
+
+  .orbit-container {
+    @include orbit-container;
+  }
+
+  .orbit-slide {
+    @include orbit-slide;
+  }
+
+  .orbit-figure {
+    @include orbit-figure;
+  }
+
+  .orbit-image {
+    @include orbit-image;
+  }
+
+  .orbit-caption {
+    @include orbit-caption;
+  }
+
+  %orbit-control {
+    @include orbit-control;
+  }
+
+  .orbit-previous {
+    @extend %orbit-control;
+    @include orbit-previous;
+  }
+
+  .orbit-next {
+    @extend %orbit-control;
+    @include orbit-next;
+  }
+
+  .orbit-bullets {
+    @include orbit-bullets;
+  }
+}

src/foundation/components/_pagination.scss

@@ -0,0 +1,201 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group pagination
+////
+
+/// Font size of pagination items.
+/// @type Number
+$pagination-font-size: rem-calc(14) !default;
+
+/// Default bottom margin of the pagination object.
+/// @type Number
+$pagination-margin-bottom: $global-margin !default;
+
+/// Text color of pagination items.
+/// @type Color
+$pagination-item-color: $black !default;
+
+/// Padding inside of pagination items.
+/// @type Number
+$pagination-item-padding: rem-calc(3 10) !default;
+
+/// Right margin to separate pagination items.
+/// @type Number
+$pagination-item-spacing: rem-calc(1) !default;
+
+/// Default radius for pagination items.
+/// @type Number
+$pagination-radius: $global-radius !default;
+
+/// Background color of pagination items on hover.
+/// @type Color
+$pagination-item-background-hover: $light-gray !default;
+
+/// Background color of pagination item for the current page.
+/// @type Color
+$pagination-item-background-current: $primary-color !default;
+
+/// Text color of the pagination item for the current page.
+/// @type Color
+$pagination-item-color-current: $white !default;
+
+/// Text color of a disabled pagination item.
+/// @type Color
+$pagination-item-color-disabled: $medium-gray !default;
+
+/// Color of the ellipsis in a pagination menu.
+/// @type Color
+$pagination-ellipsis-color: $black !default;
+
+/// If `false`, don't display page number links on mobile, only next/previous links
+/// and optionally current page number.
+/// @type Boolean
+$pagination-mobile-items: false !default;
+
+/// If `true`, display the current page number on mobile even if `$pagination-mobile-items` is set to `false`.
+/// This parameter will only override the visibility setting of the current item for `$pagination-mobile-items: false;`,
+/// it will not affect the current page number visibility when `$pagination-mobile-items` is set to `true`.
+/// @type Boolean
+$pagination-mobile-current-item: false !default;
+
+/// If `true`, arrows are added to the next and previous links of pagination.
+/// @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,
+  $font-size: $pagination-font-size,
+  $spacing: $pagination-item-spacing,
+  $radius: $pagination-radius,
+  $color: $pagination-item-color,
+  $padding: $pagination-item-padding,
+  $background-hover: $pagination-item-background-hover
+) {
+  @include clearfix;
+  margin-#{$global-left}: 0;
+  margin-bottom: $margin-bottom;
+
+  // List item
+  li {
+    margin-#{$global-right}: $spacing;
+    border-radius: $radius;
+    font-size: $font-size;
+
+    @if $pagination-mobile-items {
+      display: inline-block;
+    }
+    @else {
+      display: none;
+
+      &:last-child,
+      &:first-child {
+        display: inline-block;
+      }
+
+      @if $pagination-mobile-current-item {
+        &.current {
+          display: inline-block;
+        }
+      }
+
+      @include breakpoint(medium) {
+        display: inline-block;
+      }
+    }
+  }
+
+  // Page links
+  a,
+  button {
+    display: block;
+    padding: $padding;
+    border-radius: $radius;
+    color: $color;
+
+    &:hover {
+      background: $background-hover;
+    }
+  }
+}
+
+/// Adds styles for the current pagination item. Apply this to an `<a>`.
+@mixin pagination-item-current (
+  $padding: $pagination-item-padding,
+  $background-current: $pagination-item-background-current,
+  $color-current: $pagination-item-color-current
+) {
+  padding: $padding;
+  background: $background-current;
+  color: $color-current;
+  cursor: default;
+}
+
+/// Adds styles for a disabled pagination item. Apply this to an `<a>`.
+@mixin pagination-item-disabled (
+  $padding: $pagination-item-padding,
+  $color: $pagination-item-color-disabled
+) {
+  padding: $padding;
+  color: $color;
+  cursor: not-allowed;
+
+  &:hover {
+    background: transparent;
+  }
+}
+
+/// Adds styles for an ellipsis for use in a pagination list.
+@mixin pagination-ellipsis (
+  $padding: $pagination-item-padding,
+  $color: $pagination-ellipsis-color
+) {
+  padding: $padding;
+  content: '\2026';
+  color: $color;
+}
+
+@mixin foundation-pagination {
+  .pagination {
+    @include pagination-container;
+
+    .current {
+      @include pagination-item-current;
+    }
+
+    .disabled {
+      @include pagination-item-disabled;
+    }
+
+    .ellipsis::after {
+      @include pagination-ellipsis;
+    }
+  }
+
+  @if $pagination-arrows {
+    .pagination-previous a::before,
+    .pagination-previous.disabled::before {
+      display: inline-block;
+      margin-#{$global-right}: 0.5rem;
+      content: $pagination-arrow-previous;
+    }
+
+    .pagination-next a::after,
+    .pagination-next.disabled::after {
+      display: inline-block;
+      margin-#{$global-left}: 0.5rem;
+      content: $pagination-arrow-next;
+    }
+  }
+}

src/foundation/components/_progress-bar.scss

@@ -0,0 +1,63 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+/// Adds styles for a progress bar container.
+@mixin progress-container {
+  height: $progress-height;
+  margin-bottom: $progress-margin-bottom;
+  border-radius: $progress-radius;
+  background-color: $progress-background;
+}
+
+/// Adds styles for the inner meter of a progress bar.
+@mixin progress-meter {
+  position: relative;
+  display: block;
+  width: 0%;
+  height: 100%;
+  background-color: $progress-meter-background;
+
+  @if has-value($progress-radius) {
+    border-radius: $global-radius;
+  }
+}
+
+/// Adds styles for text in the progress meter.
+@mixin progress-meter-text {
+  @include absolute-center;
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: bold;
+  color: $white;
+  white-space: nowrap;
+
+  @if has-value($progress-radius) {
+    border-radius: $progress-radius;
+  }
+}
+
+@mixin foundation-progress-bar {
+  // Progress bar
+  .progress {
+    @include progress-container;
+
+    @each $name, $color in $foundation-palette {
+      &.#{$name} {
+        .progress-meter {
+          background-color: $color;
+        }
+      }
+    }
+  }
+
+  // Inner meter
+  .progress-meter {
+    @include progress-meter;
+  }
+
+  // Inner meter text
+  .progress-meter-text {
+    @include progress-meter-text;
+  }
+}

src/foundation/components/_responsive-embed.scss

@@ -0,0 +1,57 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group responsive-embed
+////
+
+/// Margin below a responsive embed container.
+/// @type Number
+$responsive-embed-margin-bottom: rem-calc(16) !default;
+
+/// Aspect ratios used to determine padding-bottom of responsive embed containers.
+/// @type Map
+$responsive-embed-ratios: (
+  default: 4 by 3,
+  widescreen: 16 by 9,
+) !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) {
+  @if type-of($ratio) == 'string' {
+    $ratio: map-get($responsive-embed-ratios, $ratio);
+  }
+  position: relative;
+  height: 0;
+  margin-bottom: $responsive-embed-margin-bottom;
+  padding-bottom: ratio-to-percentage($ratio);
+  overflow: hidden;
+
+  iframe,
+  object,
+  embed,
+  video {
+    position: absolute;
+    top: 0;
+    #{$global-left}: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@mixin foundation-responsive-embed {
+  .responsive-embed,
+  .flex-video {
+    @include responsive-embed($ratio: default);
+
+    $ratios: map-remove($responsive-embed-ratios,default);
+
+    @each $name, $ratio in $ratios {
+      &.#{$name} {
+        padding-bottom: ratio-to-percentage($ratio);
+      }
+    }
+  }
+}

src/foundation/components/_reveal.scss

@@ -0,0 +1,185 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group reveal
+////
+
+/// Default background color of a modal.
+/// @type Color
+$reveal-background: $white !default;
+
+/// Default width of a modal, with no class applied.
+/// @type Number
+$reveal-width: 600px !default;
+
+/// Default maximum width of a modal.
+/// @type Number
+$reveal-max-width: $global-width !default;
+
+/// Default padding inside a modal.
+/// @type Number
+$reveal-padding: $global-padding !default;
+
+/// Default border around a modal.
+/// @type Number
+$reveal-border: 1px solid $medium-gray !default;
+
+/// Default radius for modal.
+/// @type Number
+$reveal-radius: $global-radius !default;
+
+/// z-index for modals. The overlay uses this value, while the modal itself uses this value plus one.
+/// @type Number
+$reveal-zindex: 1005 !default;
+
+/// Background color of modal overlays.
+/// @type Color
+$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;
+    left: auto;
+    margin: 0 auto;
+  }
+}
+
+
+/// Adds styles for a modal overlay.
+/// @param {Color} $background [$reveal-overlay-background] - Background color of the overlay.
+@mixin reveal-overlay($background: $reveal-overlay-background) {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $reveal-zindex;
+
+  display: none;
+  background-color: $background;
+  overflow-y: auto;
+}
+
+/// Adds base styles for a modal.
+@mixin reveal-modal-base {
+  @include disable-mouse-outline;
+  z-index: $reveal-zindex + 1;
+  // Workaround android browser z-index bug
+  backface-visibility: hidden;
+
+  display: none;
+  padding: $reveal-padding;
+
+  border: $reveal-border;
+  border-radius: $reveal-radius;
+  background-color: $reveal-background;
+
+  @include breakpoint(medium) {
+    min-height: 0;
+  }
+
+  // Make sure rows don't have a min-width on them
+  .column {
+    min-width: 0;
+  }
+
+  // Strip margins from the last item in the modal
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/// Adjusts the width of a modal.
+/// @param {Number} $width - Width of the modal. Generally a percentage.
+/// @param {Number} $max-width [$reveal-max-width] - Maximum width of the modal.
+@mixin reveal-modal-width(
+  $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) {
+    width: $width;
+    max-width: $max-width;
+  }
+}
+
+/// 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%;
+  min-height: 100%;
+  margin-left: 0;
+
+  border: 0;
+  border-radius: 0;
+}
+
+@mixin foundation-reveal {
+
+  /// Disables the scroll when Reveal is shown to prevent the background from shifting
+  html.is-reveal-open {
+    position: fixed;
+    width: 100%;
+    overflow-y: hidden;
+
+    &.zf-has-scroll {
+      overflow-y: scroll;
+    }
+
+    body { // sass-lint:disable-line no-qualifying-elements
+      overflow-y: hidden;
+    }
+  }
+
+  // Overlay
+  .reveal-overlay {
+    @include reveal-overlay;
+  }
+
+  // Modal container
+  .reveal {
+    @include reveal-modal-base;
+    @include reveal-modal-width($reveal-width);
+    position: relative;
+    top: 100px;
+    margin-right: auto;
+    margin-left: auto;
+    overflow-y: auto;
+
+    // Remove padding
+    &.collapse {
+      padding: 0;
+    }
+
+    // Sizing classes
+    &.tiny  { @include reveal-modal-width(30%); }
+    &.small { @include reveal-modal-width(50%); }
+    &.large { @include reveal-modal-width(90%); }
+
+    // Full-screen mode
+    &.full {
+      @include reveal-modal-fullscreen;
+    }
+
+    @include breakpoint($-zf-zero-breakpoint only) {
+      @include reveal-modal-fullscreen;
+    }
+
+    &.without-overlay {
+      position: fixed;
+    }
+  }
+}

src/foundation/components/_slider.scss

@@ -0,0 +1,137 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+// [TODO] Check how plugin confirms disabled or vertical status
+// [TODO] Check if transition: all; is necessary
+
+////
+/// @group slider
+////
+
+/// Default slider width of a vertical slider. (Doesn't apply to the native slider.)
+/// @type Number
+$slider-width-vertical: 0.5rem !default;
+
+/// Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.)
+/// @type Transition
+$slider-transition: all 0.2s ease-in-out !default;
+
+/// Adds the general styles for sliders.
+@mixin slider-container {
+  position: relative;
+  height: $slider-height;
+  margin-top: 1.25rem;
+  margin-bottom: 2.25rem;
+
+  background-color: $slider-background;
+  cursor: pointer;
+  user-select: none;
+  touch-action: none;
+}
+
+/// Adds the general styles for active fill for sliders.
+@mixin slider-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  display: inline-block;
+  max-width: 100%;
+  height: $slider-height;
+
+  background-color: $slider-fill-background;
+  transition: $slider-transition;
+
+  &.is-dragging {
+    transition: all 0s linear;
+  }
+}
+
+/// Adds the general styles for the slider handles.
+@mixin slider-handle {
+  @include disable-mouse-outline;
+  @include vertical-center;
+  left: 0;
+  z-index: 1;
+
+  display: inline-block;
+  width: $slider-handle-width;
+  height: $slider-handle-height;
+
+  border-radius: $slider-radius;
+  background-color: $slider-handle-background;
+  transition: $slider-transition;
+  touch-action: manipulation;
+
+  &:hover {
+    background-color: scale-color($slider-handle-background, $lightness: -15%);
+  }
+
+  &.is-dragging {
+    transition: all 0s linear;
+  }
+}
+
+@mixin slider-disabled {
+  opacity: $slider-opacity-disabled;
+  cursor: not-allowed;
+}
+
+@mixin slider-vertical {
+  display: inline-block;
+  width: $slider-width-vertical;
+  height: 12.5rem;
+  margin: 0 1.25rem;
+  transform: scale(1, -1);
+
+  .slider-fill {
+    top: 0;
+    width: $slider-width-vertical;
+    max-height: 100%;
+  }
+
+  .slider-handle {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: $slider-handle-height;
+    height: $slider-handle-width;
+    transform: translateX(-50%);
+  }
+}
+
+@mixin foundation-slider {
+  // Container
+  .slider {
+    @include slider-container;
+  }
+
+  // Fill area
+  .slider-fill {
+    @include slider-fill;
+  }
+
+  // Draggable handle
+  .slider-handle {
+    @include slider-handle;
+  }
+
+  // Disabled state
+  .slider.disabled,
+  .slider[disabled] {
+    @include slider-disabled;
+  }
+
+  // Vertical slider
+  .slider.vertical {
+    @include slider-vertical;
+  }
+
+  // RTL support
+  @if $global-text-direction == rtl {
+    .slider:not(.vertical) {
+      transform: scale(-1, 1);
+    }
+  }
+}

src/foundation/components/_sticky.scss

@@ -0,0 +1,39 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@mixin foundation-sticky {
+  .sticky-container {
+    position: relative;
+  }
+
+  .sticky {
+    position: relative;
+    z-index: 0;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .sticky.is-stuck {
+    position: fixed;
+    z-index: 5;
+    width: 100%;
+
+    &.is-at-top {
+      top: 0;
+    }
+
+    &.is-at-bottom {
+      bottom: 0;
+    }
+  }
+
+  .sticky.is-anchored {
+    position: relative;
+    right: auto;
+    left: auto;
+
+    &.is-at-bottom {
+      bottom: 0;
+    }
+  }
+}

src/foundation/components/_switch.scss

@@ -0,0 +1,261 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group switch
+////
+
+/// Background color of a switch.
+/// @type Color
+$switch-background: $medium-gray !default;
+
+/// Background active color of a switch.
+/// @type Color
+$switch-background-active: $primary-color !default;
+
+/// Height of a switch, with no class applied.
+/// @type Number
+$switch-height: 2rem !default;
+
+/// Height of a switch with .tiny class.
+/// @type Number
+$switch-height-tiny: 1.5rem !default;
+
+/// Height of a switch with .small class.
+/// @type Number
+$switch-height-small: 1.75rem !default;
+
+/// Height of a switch with .large class.
+/// @type Number
+$switch-height-large: 2.5rem !default;
+
+/// Border radius of the switch
+/// @type Number
+$switch-radius: $global-radius !default;
+
+/// border around a modal.
+/// @type Number
+$switch-margin: $global-margin !default;
+
+/// Background color for the switch container and paddle.
+/// @type Color
+$switch-paddle-background: $white !default;
+
+/// Spacing between a switch paddle and the edge of the body.
+/// @type Number
+$switch-paddle-offset: 0.25rem !default;
+
+/// border radius of the switch paddle
+/// @type Number
+$switch-paddle-radius: $global-radius !default;
+
+/// switch transition.
+/// @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
+
+/// Adds styles for a switch container. Apply this to a container class.
+@mixin switch-container {
+  position: relative;
+  margin-bottom: $switch-margin;
+  outline: 0;
+
+  // These properties cascade down to the switch text
+  font-size: rem-calc(14);
+  font-weight: bold;
+  color: $white;
+
+  user-select: none;
+}
+
+/// Adds styles for a switch input. Apply this to an `<input>` within a switch.
+@mixin switch-input {
+  position: absolute;
+  margin-bottom: 0;
+  opacity: 0;
+}
+
+/// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch.
+@mixin switch-paddle {
+  $switch-width: $switch-height * 2;
+  $paddle-height: $switch-height - ($switch-paddle-offset * 2);
+  $paddle-width: $switch-height - ($switch-paddle-offset * 2);
+  $paddle-active-offest: $switch-width - $paddle-width - $switch-paddle-offset;
+
+  position: relative;
+  display: block;
+  width: $switch-width;
+  height: $switch-height;
+
+  border-radius: $switch-radius;
+  background: $switch-background;
+  transition: $switch-paddle-transition;
+
+  // Resetting these <label> presets so type styles cascade down
+  font-weight: inherit;
+  color: inherit;
+
+  cursor: pointer;
+
+  // Needed to override specificity
+  input + & {
+    margin: 0;
+  }
+
+  // The paddle itself
+  &::after {
+    position: absolute;
+    top: $switch-paddle-offset;
+    #{$global-left}: $switch-paddle-offset;
+
+    display: block;
+    width: $paddle-width;
+    height: $paddle-height;
+
+    transform: translate3d(0, 0, 0);
+    border-radius: $switch-paddle-radius;
+    background: $switch-paddle-background;
+    transition: $switch-paddle-transition;
+    content: '';
+  }
+
+  // Change the visual style when the switch is active
+  input:checked ~ & {
+    background: $switch-background-active;
+
+    &::after {
+      #{$global-left}: $paddle-active-offest;
+    }
+  }
+
+  // indicate a disabled switch
+  input:disabled ~ & {
+    cursor: $switch-cursor-disabled;
+    opacity: $switch-opacity-disabled;
+  }
+
+  input:focus ~ & {
+    @include disable-mouse-outline;
+  }
+}
+
+/// Adds base styles for active/inactive text inside a switch. Apply this to text elements inside the switch `<label>`.
+@mixin switch-text {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/// Adds styles for the active state text within a switch.
+@mixin switch-text-active {
+  #{$global-left}: 8%;
+  display: none;
+
+  input:checked + label > & {
+    display: block;
+  }
+}
+
+/// Adds styles for the inactive state text within a switch.
+@mixin switch-text-inactive {
+  #{$global-right}: 15%;
+
+  input:checked + label > & {
+    display: none;
+  }
+}
+
+/// Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container.
+/// @param {Number} $font-size [1rem] - Font size of label text within the switch.
+/// @param {Number} $switch-height [2rem] - Height of the switch body.
+/// @param {Number} $paddle-offset [0.25rem] - Spacing between the switch paddle and the edge of the switch body.
+@mixin switch-size(
+  $font-size: 1rem,
+  $switch-height: 2rem,
+  $paddle-offset: 0.25rem
+) {
+
+  $switch-width: $switch-height * 2;
+  $paddle-width: $switch-height - ($paddle-offset * 2);
+  $paddle-height: $switch-height - ($paddle-offset * 2);
+  $paddle-active-offest: $switch-width - $paddle-width - $paddle-offset;
+
+  height: $switch-height;
+
+  .switch-paddle {
+    width: $switch-width;
+    height: $switch-height;
+    font-size: $font-size;
+  }
+
+  .switch-paddle::after {
+    top: $paddle-offset;
+    #{$global-left}: $paddle-offset;
+    width: $paddle-width;
+    height: $paddle-height;
+  }
+
+  input:checked ~ .switch-paddle::after {
+    #{$global-left}: $paddle-active-offest;
+  }
+}
+
+@mixin foundation-switch {
+  // Container class
+  .switch {
+    height: $switch-height;
+    @include switch-container;
+  }
+
+  // <input> element
+  .switch-input {
+    @include switch-input;
+  }
+
+  // <label> element
+  .switch-paddle {
+    @include switch-paddle;
+  }
+
+  // Base label text styles
+  %switch-text {
+    @include switch-text;
+  }
+
+  // Active label text styles
+  .switch-active {
+    @extend %switch-text;
+    @include switch-text-active;
+  }
+
+  // Inactive label text styles
+  .switch-inactive {
+    @extend %switch-text;
+    @include switch-text-inactive;
+  }
+
+  // Switch sizes
+  .switch.tiny {
+    @include switch-size(rem-calc(10), $switch-height-tiny, $switch-paddle-offset);
+  }
+
+  .switch.small {
+    @include switch-size(rem-calc(12), $switch-height-small, $switch-paddle-offset);
+  }
+
+  .switch.large {
+    @include switch-size(rem-calc(16), $switch-height-large, $switch-paddle-offset);
+  }
+}

src/foundation/components/_table.scss

@@ -0,0 +1,328 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+// sass-lint:disable no-qualifying-elements
+
+////
+/// @group table
+////
+
+/// Default color for table background.
+/// @type Color
+$table-background: $white  !default;
+
+/// Default scale for darkening the striped table rows and the table border.
+/// @type Number
+$table-color-scale: 5% !default;
+
+/// Default style for table border.
+/// @type List
+$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;
+
+/// Default padding for table.
+/// @type Number
+$table-padding: rem-calc(8 10 10) !default;
+
+/// Default scale for darkening the table rows on hover.
+/// @type Number
+$table-hover-scale: 2% !default;
+
+/// Default color of standard rows on hover.
+/// @type List
+$table-row-hover: darken($table-background, $table-hover-scale) !default;
+
+/// Default color of striped rows on hover.
+/// @type List
+$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;
+
+/// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.
+/// @type Boolean
+$table-is-striped: true !default;
+
+/// Default background color for striped rows.
+/// @type Color
+$table-striped-background: smart-scale($table-background, $table-color-scale) !default;
+
+/// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.
+/// @type Keyword
+$table-stripe: even !default;
+
+/// Default color for header background.
+/// @type Color
+$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;
+
+/// Default color of header rows on hover.
+/// @type List
+$table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;
+
+/// Default color for footer background.
+/// @type Color
+$table-foot-background: smart-scale($table-background, $table-color-scale) !default;
+
+/// Default color of footer rows on hover.
+/// @type List
+$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;
+
+/// Default font color for header.
+/// @type Color
+$table-head-font-color: $body-font-color !default;
+
+/// Default font color for footer.
+/// @type Color
+$table-foot-font-color: $body-font-color !default;
+
+/// Default value for showing the header when using stacked tables.
+/// @type Boolean
+$show-header-for-stacked: false !default;
+
+/// Breakpoint at which stacked table switches from mobile to desktop view.
+/// @type Breakpoint
+$table-stack-breakpoint: medium !default;
+
+@mixin -zf-table-stripe($stripe: $table-stripe) {
+  tr {
+    // If stripe is set to even, darken the even rows.
+    @if $stripe == even {
+      &:nth-child(even) {
+        border-bottom: 0;
+        background-color: $table-striped-background;
+      }
+    }
+
+    // If stripe is set to odd, darken the odd rows.
+    @else if $stripe == odd {
+      &:nth-child(odd) {
+        background-color: $table-striped-background;
+      }
+    }
+  }
+}
+
+@mixin -zf-table-unstripe() {
+  tr {
+    border-bottom: 0;
+    border-bottom: $table-border;
+    background-color: $table-background;
+  }
+}
+
+@mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) {
+  thead,
+  tbody,
+  tfoot {
+    border: $table-border;
+    background-color: $table-background;
+  }
+
+  // Caption
+  caption {
+    padding: $table-padding;
+    font-weight: $global-weight-bold;
+  }
+
+  // Table head
+  thead {
+    background: $table-head-background;
+    color: $table-head-font-color;
+  }
+
+  // Table foot
+  tfoot {
+    background: $table-foot-background;
+    color: $table-foot-font-color;
+  }
+
+  // Table head and foot
+  thead,
+  tfoot {
+    // Rows within head and foot
+    tr {
+      background: transparent;
+    }
+
+    // Cells within head and foot
+    th,
+    td {
+      padding: $table-padding;
+      font-weight: $global-weight-bold;
+      text-align: #{$global-left};
+    }
+  }
+
+  // Table rows
+  tbody {
+    th,
+    td {
+      padding: $table-padding;
+    }
+  }
+
+  // If tables are striped
+  @if $is-striped == true {
+    tbody {
+      @include -zf-table-stripe($stripe);
+    }
+
+    &.unstriped {
+      tbody {
+        @include -zf-table-unstripe();
+        background-color: $table-background;
+      }
+    }
+  }
+
+  // If tables are not striped
+  @else if $is-striped == false {
+    tbody {
+      @include -zf-table-unstripe();
+    }
+
+    &.striped {
+      tbody {
+        @include -zf-table-stripe($stripe);
+      }
+    }
+  }
+}
+
+/// 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
+) {
+  border-collapse: collapse;
+  width: 100%;
+  margin-bottom: $global-margin;
+  border-radius: $global-radius;
+
+  @if $nest {
+    @include -zf-table-children-styles($stripe);
+  }
+  @else {
+    @at-root {
+      @include -zf-table-children-styles($stripe);
+    }
+  }
+}
+
+/// Adds the ability to horizontally scroll the table when the content overflows horizontally.
+@mixin table-scroll {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+}
+
+/// Slightly darkens the table rows on hover.
+@mixin table-hover {
+  thead tr {
+    //Darkens the table header rows on hover.
+    &:hover {
+      background-color: $table-head-row-hover;
+    }
+  }
+
+  tfoot tr {
+    //Darkens the table footer rows on hover.
+    &:hover {
+      background-color: $table-foot-row-hover;
+    }
+  }
+
+  tbody tr {
+    //Darkens the non-striped table rows on hover.
+    &:hover {
+      background-color: $table-row-hover;
+    }
+  }
+
+  @if $table-is-striped == true {
+    // Darkens the even striped table rows.
+    @if($table-stripe == even) {
+      &:not(.unstriped) tr:nth-of-type(even):hover {
+        background-color: $table-row-stripe-hover;
+      }
+    }
+
+    // Darkens the odd striped table rows.
+    @else if($table-stripe == odd) {
+      &:not(.unstriped) tr:nth-of-type(odd):hover {
+        background-color: $table-row-stripe-hover;
+      }
+    }
+  }
+
+  @else if $table-is-striped == false {
+    // Darkens the even striped table rows.
+    @if($table-stripe == even) {
+      &.striped tr:nth-of-type(even):hover {
+        background-color: $table-row-stripe-hover;
+      }
+    }
+
+    // Darkens the odd striped table rows.
+    @else if($table-stripe == odd) {
+      &.striped tr:nth-of-type(odd):hover {
+        background-color: $table-row-stripe-hover;
+      }
+    }
+  }
+}
+
+/// Adds styles for a stacked table. Useful for small-screen layouts.
+/// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked.
+@mixin table-stack($header: $show-header-for-stacked) {
+  @if $header {
+    thead {
+      th {
+        display: block;
+      }
+    }
+  }
+  @else {
+    thead {
+      display: none;
+    }
+  }
+
+  tfoot {
+    display: none;
+  }
+
+  tr,
+  th,
+  td {
+    display: block;
+  }
+
+  td {
+    border-top: 0;
+  }
+}
+
+@mixin foundation-table($nest: false) {
+  table {
+    @include table($nest: $nest);
+  }
+
+  table.stack {
+    @include breakpoint($table-stack-breakpoint down) {
+      @include table-stack;
+    }
+  }
+
+  table.scroll {
+    @include table-scroll;
+  }
+
+  table.hover {
+    @include table-hover;
+  }
+
+  .table-scroll {
+    overflow-x: auto;
+
+  }
+}

src/foundation/components/_tabs.scss

@@ -0,0 +1,193 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group tabs
+////
+
+/// Default margin of the tab bar.
+/// @type Number
+$tab-margin: 0 !default;
+
+/// Default background color of a tab bar.
+/// @type Color
+$tab-background: $white !default;
+
+/// Font color of tab item.
+/// @type Color
+$tab-color: $primary-color !default;
+
+/// Active background color of a tab bar.
+/// @type Color
+$tab-background-active: $light-gray !default;
+
+/// Active font color of tab item.
+/// @type Color
+$tab-active-color: $primary-color !default;
+
+/// Font size of tab items.
+/// @type Number
+$tab-item-font-size: rem-calc(12) !default;
+
+/// Default background color on hover for items in a Menu.
+$tab-item-background-hover: $white !default;
+
+/// Default padding of a tab item.
+/// @type Number
+$tab-item-padding: 1.25rem 1.5rem !default;
+
+/// Default background color of tab content.
+/// @type Color
+$tab-content-background: $white !default;
+
+/// Default border color of tab content.
+/// @type Color
+$tab-content-border: $light-gray !default;
+
+/// Default text color of tab content.
+/// @type Color
+$tab-content-color: $body-font-color !default;
+
+/// Default padding for tab content.
+/// @type Number | List
+$tab-content-padding: 1rem !default;
+
+/// Adds styles for a tab container. Apply this to a `<ul>`.
+@mixin tabs-container (
+  $margin: $tab-margin,
+  $background: $tab-background,
+  $border-color: $tab-content-border
+) {
+  @include clearfix;
+  margin: $margin;
+  border: 1px solid $border-color;
+  background: $background;
+  list-style-type: none;
+}
+
+/// Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`.
+@mixin tabs-container-vertical {
+  > li {
+    display: block;
+    float: none;
+    width: auto;
+  }
+}
+
+/// Adds styles for the links within a tab container. Apply this to the `<li>` elements inside a tab container.
+@mixin tabs-title (
+  $padding: $tab-item-padding,
+  $font-size: $tab-item-font-size,
+  $color: $tab-color,
+  $color-active: $tab-active-color,
+  $background-hover: $tab-item-background-hover,
+  $background-active: $tab-background-active
+) {
+  float: #{$global-left};
+
+  > a {
+    @include disable-mouse-outline;
+    display: block;
+    padding: $padding;
+    font-size: $font-size;
+    line-height: 1;
+    color: $color;
+
+    &:hover {
+      background: $background-hover;
+      color: scale-color($color, $lightness: -14%);
+    }
+
+    &:focus,
+    &[aria-selected='true'] {
+      background: $background-active;
+      color: $color-active;
+    }
+  }
+}
+
+/// Adds styles for the wrapper that surrounds a tab group's content panes.
+@mixin tabs-content (
+  $background: $tab-content-background,
+  $color: $tab-content-color,
+  $border-color: $tab-content-border
+) {
+  border: 1px solid $border-color;
+  border-top: 0;
+  background: $background;
+  color: $color;
+  transition: all 0.5s ease;
+}
+
+/// Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with `tabs-content()`.
+@mixin tabs-content-vertical (
+  $border-color: $tab-content-border
+) {
+  border: 1px solid $border-color;
+  border-#{$global-left}: 0;
+}
+
+/// Adds styles for an individual tab content panel within the tab content container.
+@mixin tabs-panel (
+  $padding: $tab-content-padding
+) {
+  display: none;
+  padding: $padding;
+
+  &.is-active {
+    display: block;
+  }
+}
+
+@mixin foundation-tabs {
+  .tabs {
+    @include tabs-container;
+  }
+
+  // Vertical
+  .tabs.vertical {
+    @include tabs-container-vertical;
+  }
+
+  // Simple
+  .tabs.simple {
+    > li > a {
+      padding: 0;
+
+      &:hover {
+        background: transparent;
+      }
+    }
+  }
+
+  // Primary color
+  .tabs.primary {
+    background: $primary-color;
+
+    > li > a {
+      color: color-pick-contrast($primary-color);
+
+      &:hover,
+      &:focus {
+        background: smart-scale($primary-color);
+      }
+    }
+  }
+
+  .tabs-title {
+    @include tabs-title;
+  }
+
+  .tabs-content {
+    @include tabs-content;
+  }
+
+  .tabs-content.vertical {
+    @include tabs-content-vertical;
+  }
+
+  .tabs-panel {
+    @include tabs-panel;
+  }
+}

src/foundation/components/_thumbnail.scss

@@ -0,0 +1,67 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group thumbnail
+////
+
+/// Border around thumbnail images.
+/// @type Border
+$thumbnail-border: 4px solid $white !default;
+
+/// Bottom margin for thumbnail images.
+/// @type Length
+$thumbnail-margin-bottom: $global-margin !default;
+
+/// Box shadow under thumbnail images.
+/// @type Shadow
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default;
+
+/// Box shadow under thumbnail images.
+/// @type Shadow
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default;
+
+/// Transition proprties for thumbnail images.
+/// @type Transition
+$thumbnail-transition: box-shadow 200ms ease-out !default;
+
+/// Default radius for thumbnail images.
+/// @type Number
+$thumbnail-radius: $global-radius !default;
+
+/// Adds thumbnail styles to an element.
+@mixin thumbnail {
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: $thumbnail-margin-bottom;
+
+  border: $thumbnail-border;
+  border-radius: $thumbnail-radius;
+  box-shadow: $thumbnail-shadow;
+
+  line-height: 0;
+}
+
+@mixin thumbnail-link {
+  transition: $thumbnail-transition;
+
+  &:hover,
+  &:focus {
+    box-shadow: $thumbnail-shadow-hover;
+  }
+
+  image {
+    box-shadow: none;
+  }
+}
+
+@mixin foundation-thumbnail {
+  .thumbnail {
+    @include thumbnail;
+  }
+
+  a.thumbnail {
+    @include thumbnail-link;
+  }
+}

src/foundation/components/_title-bar.scss

@@ -0,0 +1,84 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group title-bar
+////
+
+/// Background color of a title bar.
+/// @type Color
+$titlebar-background: $black !default;
+
+/// Color of text inside a title bar.
+/// @type Color
+$titlebar-color: $white !default;
+
+/// Padding inside a title bar.
+/// @type Length
+$titlebar-padding: 0.5rem !default;
+
+/// Font weight of text inside a title bar.
+/// @type Weight
+$titlebar-text-font-weight: bold !default;
+
+/// Color of menu icons inside a title bar.
+/// @type Color
+$titlebar-icon-color: $white !default;
+
+/// Color of menu icons inside a title bar on hover.
+/// @type Color
+$titlebar-icon-color-hover: $medium-gray !default;
+
+/// Spacing between the menu icon and text inside a title bar.
+/// @type Length
+$titlebar-icon-spacing: 0.25rem !default;
+
+@mixin foundation-title-bar {
+  .title-bar {
+    padding: $titlebar-padding;
+    background: $titlebar-background;
+    color: $titlebar-color;
+
+    @if $global-flexbox {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    @else {
+      @include clearfix;
+    }
+
+    .menu-icon {
+      margin-#{$global-left}: $titlebar-icon-spacing;
+      margin-#{$global-right}: $titlebar-icon-spacing;
+    }
+  }
+
+  @if $global-flexbox {
+    .title-bar-left,
+    .title-bar-right {
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
+    }
+
+    .title-bar-right {
+      text-align: right;
+    }
+  }
+  @else {
+    .title-bar-left {
+      float: left;
+    }
+
+    .title-bar-right {
+      float: right;
+      text-align: right;
+    }
+  }
+
+  .title-bar-title {
+    display: inline-block;
+    vertical-align: middle;
+    font-weight: $titlebar-text-font-weight;
+  }
+}

src/foundation/components/_tooltip.scss

@@ -0,0 +1,160 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group tooltip
+////
+
+/// Default cursor of the defined term.
+/// @type Keyword
+$has-tip-cursor: help !default;
+
+/// Default font weight of the defined term.
+/// @type Keyword | Number
+$has-tip-font-weight: $global-weight-bold !default;
+
+/// Default border bottom of the defined term.
+/// @type List
+$has-tip-border-bottom: dotted 1px $dark-gray !default;
+
+/// Default color of the tooltip background.
+/// @type Color
+$tooltip-background-color: $black !default;
+
+/// Default color of the tooltip font.
+/// @type Color
+$tooltip-color: $white !default;
+
+/// Default padding of the tooltip background.
+/// @type Number
+$tooltip-padding: 0.75rem !default;
+
+/// Default max width for tooltips.
+/// @type Number
+$tooltip-max-width: 10rem !default;
+
+/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.
+/// @type Number
+$tooltip-font-size: $small-font-size !default;
+
+/// Default pip width for tooltips.
+/// @type Number
+$tooltip-pip-width: 0.75rem !default;
+
+/// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.
+/// @type Number
+$tooltip-pip-height: $tooltip-pip-width * 0.866 !default;
+
+/// Default radius for tooltips.
+/// @type Number
+$tooltip-radius: $global-radius !default;
+
+@mixin has-tip {
+  position: relative;
+  display: inline-block;
+
+  border-bottom: $has-tip-border-bottom;
+  font-weight: $has-tip-font-weight;
+  cursor: $has-tip-cursor;
+}
+
+@mixin tooltip {
+  position: absolute;
+  top: calc(100% + #{$tooltip-pip-height});
+  z-index: 1200;
+
+  max-width: $tooltip-max-width;
+  padding: $tooltip-padding;
+
+  border-radius: $tooltip-radius;
+  background-color: $tooltip-background-color;
+  font-size: $tooltip-font-size;
+  color: $tooltip-color;
+
+  &::before {
+    position: absolute;
+  }
+
+  &.bottom {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
+      bottom: 100%;
+    }
+
+    &.align-center::before {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &.top {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, down);
+      top: 100%;
+      bottom: auto;
+    }
+
+    &.align-center::before {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &.left {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
+      left: 100%;
+    }
+
+    &.align-center::before {
+      bottom: auto;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &.right {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
+      right: 100%;
+      left: auto;
+    }
+
+    &.align-center::before {
+      bottom: auto;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &.align-top::before {
+    bottom: auto;
+    top: 10%;
+  }
+
+  &.align-bottom::before {
+    bottom: 10%;
+    top: auto;
+  }
+
+  &.align-left::before {
+    left: 10%;
+    right: auto;
+  }
+
+  &.align-right::before {
+    left: auto;
+    right: 10%;
+  }
+}
+
+@mixin foundation-tooltip {
+  .has-tip {
+    @include has-tip;
+  }
+
+  .tooltip {
+    @include tooltip;
+  }
+}

src/foundation/components/_top-bar.scss

@@ -0,0 +1,175 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group top-bar
+////
+
+/// Padding for the top bar.
+/// @type Number
+$topbar-padding: 0.5rem !default;
+
+/// Background color for the top bar. This color also cascades to menus within the top bar.
+/// @type Color
+$topbar-background: $light-gray !default;
+
+/// Background color submenus within the top bar. Usefull if $topbar-background is transparent.
+/// @type Color
+$topbar-submenu-background: $topbar-background !default;
+
+/// Spacing for the top bar title.
+/// @type Number
+$topbar-title-spacing: 0.5rem 1rem 0.5rem 0 !default;
+
+/// Maximum width of `<input>` elements inside the top bar.
+/// @type Number
+$topbar-input-width: 200px !default;
+
+/// Breakpoint at which top bar switches from mobile to desktop view.
+/// @type Breakpoint
+$topbar-unstack-breakpoint: medium !default;
+
+/// Adds styles for a top bar container.
+@mixin top-bar-container {
+  @if $global-flexbox {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+  @else {
+    @include clearfix;
+  }
+
+  padding: $topbar-padding;
+
+  &,
+  ul {
+    background-color: $topbar-background;
+  }
+
+  // Check if $topbar-background is differnt from $topbar-background-submenu
+  @if ($topbar-background != $topbar-submenu-background) {
+    ul ul {
+      background-color: $topbar-submenu-background;
+    }
+  }
+
+  // Restrain width of inputs by default to make them easier to arrange
+  input {
+    max-width: $topbar-input-width;
+    margin-#{$global-right}: 1rem;
+  }
+
+  // The above styles shouldn't apply to input group fields
+  .input-group-field {
+    width: 100%;
+    margin-#{$global-right}: 0;
+  }
+
+  input.button { // sass-lint:disable-line no-qualifying-elements
+    width: auto;
+  }
+}
+
+/// Makes sections of a top bar stack on top of each other.
+@mixin top-bar-stacked {
+  @if $global-flexbox {
+    flex-wrap: wrap;
+
+    // Sub-sections
+    .top-bar-left,
+    .top-bar-right {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+  }
+  @else {
+    // Sub-sections
+    .top-bar-left,
+    .top-bar-right {
+      width: 100%;
+    }
+  }
+}
+
+/// Undoes the CSS applied by the `top-bar-stacked()` mixin.
+@mixin top-bar-unstack {
+  @if $global-flexbox {
+    flex-wrap: nowrap;
+
+    .top-bar-left {
+      flex: 1 1 auto;
+      margin-right: auto;
+    }
+
+    .top-bar-right {
+      flex: 0 1 auto;
+      margin-left: auto;
+    }
+  }
+  @else {
+    .top-bar-left,
+    .top-bar-right {
+      width: auto;
+    }
+  }
+}
+
+@mixin foundation-top-bar {
+  // Top bar container
+  .top-bar {
+    @include top-bar-container;
+
+    // Stack on small screens by default
+    @include top-bar-stacked;
+
+    @include breakpoint($topbar-unstack-breakpoint) {
+      @include top-bar-unstack;
+    }
+
+    // Generate classes for stacking on each screen size (defined in $breakpoint-classes)
+    @each $size in $breakpoint-classes {
+      @if $size != $-zf-zero-breakpoint {
+        &.stacked-for-#{$size} {
+          @include breakpoint($size down) {
+            @include top-bar-stacked;
+          }
+        }
+      }
+    }
+  }
+
+  // Sub-sections
+  @if $global-flexbox {
+    .top-bar-title {
+      flex: 0 0 auto;
+      margin: $topbar-title-spacing;
+    }
+
+    .top-bar-left,
+    .top-bar-right {
+      flex: 0 0 auto;
+    }
+  }
+  @else {
+    .top-bar-title {
+      display: inline-block;
+      float: left;
+      padding: $topbar-title-spacing;
+
+      .menu-icon {
+        bottom: 2px;
+      }
+    }
+
+    .top-bar-left {
+      float: left;
+    }
+
+    .top-bar-right {
+      float: right;
+    }
+  }
+}

src/foundation/components/_visibility.scss

@@ -0,0 +1,135 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// 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);
+  // 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/zurb/foundation-sites/issues/11313
+  $size: -zf-bp-to-em($size) - .00125;
+
+  @include breakpoint($size down) {
+    display: none !important;
+  }
+}
+
+/// Hide an element by default, only displaying it within a certain breakpoint.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin show-for-only($size) {
+  $lower-bound-size: map-get($breakpoints, $size);
+  $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) - .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);
+  }
+
+  @if $upper-bound-size == null {
+    @media screen and (max-width: $lower-bound) {
+      display: none !important;
+    }
+  }
+  @else {
+    $upper-bound: -zf-bp-to-em($upper-bound-size);
+
+    @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
+      display: none !important;
+    }
+  }
+}
+
+
+/// Show an element by default, and hide it above a certain screen size.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin hide-for($size) {
+  @include breakpoint($size) {
+    display: none !important;
+  }
+}
+
+/// Show an element by default, and hide it above a certain screen size.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin hide-for-only($size) {
+  @include breakpoint($size only) {
+    display: none !important;
+  }
+}
+
+@mixin foundation-visibility-classes {
+  // Basic hiding classes
+  .hide {
+    display: none !important;
+  }
+
+  .invisible {
+    visibility: hidden;
+  }
+
+  // Responsive visibility classes
+  @each $size in $breakpoint-classes {
+    @if $size != $-zf-zero-breakpoint {
+      .hide-for-#{$size} {
+        @include hide-for($size);
+      }
+
+      .show-for-#{$size} {
+        @include show-for($size);
+      }
+    }
+
+    .hide-for-#{$size}-only {
+      @include hide-for-only($size);
+    }
+
+    .show-for-#{$size}-only {
+      @include show-for-only($size);
+    }
+  }
+
+  // Screen reader visibility classes
+  // Need a "hide-for-sr" class? Add aria-hidden='true' to the element
+  .show-for-sr,
+  .show-on-focus {
+    @include element-invisible;
+  }
+
+  // Only display the element when it's focused
+  .show-on-focus {
+    &:active,
+    &:focus {
+      @include element-invisible-off;
+    }
+  }
+
+  // Landscape and portrait visibility
+  .show-for-landscape,
+  .hide-for-portrait {
+    display: block !important;
+
+    @include breakpoint(landscape) {
+      display: block !important;
+    }
+
+    @include breakpoint(portrait) {
+      display: none !important;
+    }
+  }
+
+  .hide-for-landscape,
+  .show-for-portrait {
+    display: none !important;
+
+    @include breakpoint(landscape) {
+      display: none !important;
+    }
+
+    @include breakpoint(portrait) {
+      display: block !important;
+    }
+  }
+}

src/foundation/forms/_checkbox.scss

@@ -0,0 +1,41 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+@mixin foundation-form-checkbox {
+  [type='file'],
+  [type='checkbox'],
+  [type='radio'] {
+    margin: 0 0 $form-spacing;
+  }
+
+  // Styles for input/label siblings
+  [type='checkbox'] + label,
+  [type='radio'] + label {
+    display: inline-block;
+    vertical-align: baseline;
+
+    margin-#{$global-left}: $form-spacing * 0.5;
+    margin-#{$global-right}: $form-spacing;
+    margin-bottom: 0;
+
+    &[for] {
+      cursor: pointer;
+    }
+  }
+
+  // Styles for inputs inside labels
+  label > [type='checkbox'],
+  label > [type='radio'] {
+    margin-#{$global-right}: $form-spacing * 0.5;
+  }
+
+  // Normalize file input width
+  [type='file'] {
+    width: 100%;
+  }
+}

src/foundation/forms/_error.scss

@@ -0,0 +1,89 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group abide
+////
+
+/// Sets if error styles should be added to inputs.
+/// @type Boolean
+$abide-inputs: true !default;
+
+/// Sets if error styles should be added to labels.
+/// @type Boolean
+$abide-labels: true !default;
+
+/// Background color to use for invalid text inputs.
+/// @type Color
+$input-background-invalid: get-color(alert) !default;
+
+/// Color to use for labels of invalid inputs.
+/// @type Color
+$form-label-color-invalid: get-color(alert) !default;
+
+/// Default font color for form error text.
+/// @type Color
+$input-error-color: get-color(alert) !default;
+
+/// Default font size for form error text.
+/// @type Number
+$input-error-font-size: rem-calc(12) !default;
+
+/// Default font weight for form error text.
+/// @type Keyword
+$input-error-font-weight: $global-weight-bold !default;
+
+/// Styles the background and border of an input field to have an error state.
+///
+/// @param {Color} $background [$alert-color] - Color to use for the background and border.
+/// @param {Number} $background-lighten [10%] - Lightness level of the background color.
+@mixin form-input-error(
+  $background: $input-background-invalid,
+  $background-lighten: 10%
+) {
+  &:not(:focus) {
+    border-color: $background;
+    background-color: mix($background, $white, $background-lighten);
+
+    &::placeholder {
+      color: $background;
+    }
+  }
+}
+
+/// Adds error styles to a form element, using the values in the settings file.
+@mixin form-error {
+  display: none;
+  margin-top: $form-spacing * -0.5;
+  margin-bottom: $form-spacing;
+
+  font-size: $input-error-font-size;
+  font-weight: $input-error-font-weight;
+  color: $input-error-color;
+}
+
+@mixin foundation-form-error {
+  @if $abide-inputs {
+    // Error class for invalid inputs
+    .is-invalid-input {
+      @include form-input-error;
+    }
+  }
+
+  @if $abide-labels {
+    // Error class for labels of invalid outputs
+    .is-invalid-label {
+      color: $form-label-color-invalid;
+    }
+  }
+
+  // Form error element
+  .form-error {
+    @include form-error;
+
+    &.is-visible {
+      display: block;
+    }
+  }
+}

src/foundation/forms/_fieldset.scss

@@ -0,0 +1,53 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+/// Default border around custom fieldsets.
+/// @type Border
+$fieldset-border: 1px solid $medium-gray !default;
+
+/// Default padding inside custom fieldsets.
+/// @type Number
+$fieldset-padding: rem-calc(20) !default;
+
+/// Default margin around custom fieldsets.
+/// @type Number
+$fieldset-margin: rem-calc(18 0) !default;
+
+/// Default padding between the legend text and fieldset border.
+/// @type Number
+$legend-padding: rem-calc(0 3) !default;
+
+@mixin fieldset {
+  margin: $fieldset-margin;
+  padding: $fieldset-padding;
+  border: $fieldset-border;
+
+  legend {
+    // Covers up the fieldset's border to create artificial padding
+    margin: 0;
+    margin-#{$global-left}: rem-calc(-3);
+    padding: $legend-padding;
+  }
+}
+
+@mixin foundation-form-fieldset {
+  fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  legend {
+    max-width: 100%;
+    margin-bottom: $form-spacing * 0.5;
+  }
+
+  .fieldset {
+    @include fieldset;
+  }
+}

src/foundation/forms/_forms.scss

@@ -0,0 +1,34 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+/// Global spacing for form elements.
+/// @type Number
+$form-spacing: rem-calc(16) !default;
+
+@import 'text';
+@import 'checkbox';
+@import 'label';
+@import 'help-text';
+@import 'input-group';
+@import 'fieldset';
+@import 'select';
+@import 'range';
+@import 'progress';
+@import 'meter';
+@import 'error';
+
+@mixin foundation-forms {
+  @include foundation-form-text;
+  @include foundation-form-checkbox;
+  @include foundation-form-label;
+  @include foundation-form-helptext;
+  @include foundation-form-prepostfix;
+  @include foundation-form-fieldset;
+  @include foundation-form-select;
+  @include foundation-form-error;
+}

src/foundation/forms/_help-text.scss

@@ -0,0 +1,30 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+/// Default color for help text.
+/// @type Color
+$helptext-color: $black !default;
+
+/// Default font size for help text.
+/// @type Number
+$helptext-font-size: rem-calc(13) !default;
+
+/// Default font style for help text.
+/// @type Keyword
+$helptext-font-style: italic !default;
+
+@mixin foundation-form-helptext {
+  .help-text {
+    $margin-top: ($form-spacing * 0.5) * -1;
+
+    margin-top: $margin-top;
+    font-size: $helptext-font-size;
+    font-style: $helptext-font-style;
+    color: $helptext-color;
+  }
+}

src/foundation/forms/_input-group.scss

@@ -0,0 +1,142 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+/// Color of labels prefixed to an input.
+/// @type Color
+$input-prefix-color: $black !default;
+
+/// Background color of labels prefixed to an input.
+/// @type Color
+$input-prefix-background: $light-gray !default;
+
+/// Border around labels prefixed to an input.
+/// @type Border
+$input-prefix-border: 1px solid $medium-gray !default;
+
+/// Left/right padding of an pre/postfixed input label
+$input-prefix-padding: 1rem !default;
+
+@mixin foundation-form-prepostfix {
+  $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);
+    width: 100%;
+    margin-bottom: $form-spacing;
+
+    @if $global-flexbox {
+      align-items: stretch;
+    }
+
+    > :first-child {
+      &, &.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);
+      }
+    }
+  }
+
+  %input-group-child {
+    margin: 0;
+    white-space: nowrap;
+
+    @if not $global-flexbox {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+
+  .input-group-label {
+    @extend %input-group-child;
+    padding: 0 $input-prefix-padding;
+    border: $input-prefix-border;
+    background: $input-prefix-background;
+
+    color: $input-prefix-color;
+    text-align: center;
+    white-space: nowrap;
+
+    @if $global-flexbox {
+      display: flex;
+      flex: 0 0 auto;
+      align-items: center;
+    }
+    @else {
+      width: 1%;
+      height: 100%;
+    }
+
+    @if has-value($input-prefix-border) {
+      &:first-child {
+        border-#{$global-right}: 0;
+      }
+
+      &:last-child {
+        border-#{$global-left}: 0;
+      }
+    }
+  }
+
+  .input-group-field {
+    @extend %input-group-child;
+    border-radius: 0;
+
+    @if $global-flexbox {
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
+      min-width: 0;
+    }
+  }
+
+  .input-group-button {
+    @extend %input-group-child;
+    padding-top: 0;
+    padding-bottom: 0;
+    text-align: center;
+
+    @if $global-flexbox {
+      display: flex;
+      flex: 0 0 auto;
+    }
+    @else {
+      width: 1%;
+      height: 100%;
+    }
+
+    a,
+    input,
+    button,
+    label {
+      @extend %input-group-child;
+
+      @if $global-flexbox {
+        align-self: stretch;
+        height: auto;
+      }
+      @else {
+        height: $height;
+      }
+      padding-top: 0;
+      padding-bottom: 0;
+      font-size: $input-font-size;
+    }
+  }
+
+  // Specificity bump needed to prevent override by buttons
+  @if not $global-flexbox {
+    .input-group {
+      .input-group-button {
+        display: table-cell;
+      }
+    }
+  }
+}

src/foundation/forms/_label.scss

@@ -0,0 +1,50 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+/// Color for form labels.
+/// @type Color
+$form-label-color: $black !default;
+
+/// Font size for form labels.
+/// @type Number
+$form-label-font-size: rem-calc(14) !default;
+
+/// Font weight for form labels.
+/// @type Keyword
+$form-label-font-weight: $global-weight-normal !default;
+
+/// Line height for form labels. The higher the number, the more space between the label and its input field.
+/// @type Number
+$form-label-line-height: 1.8 !default;
+
+@mixin form-label {
+  display: block;
+  margin: 0;
+
+  font-size: $form-label-font-size;
+  font-weight: $form-label-font-weight;
+  line-height: $form-label-line-height;
+  color: $form-label-color;
+}
+
+@mixin form-label-middle {
+  $input-border-width: get-border-value($input-border, width);
+
+  margin: 0 0 $form-spacing;
+  padding: ($form-spacing / 2 + rem-calc($input-border-width)) 0;
+}
+
+@mixin foundation-form-label {
+  label {
+    @include form-label;
+
+    &.middle {
+      @include form-label-middle;
+    }
+  }
+}

src/foundation/forms/_meter.scss

@@ -0,0 +1,116 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group meter
+////
+
+/// Height of a `<meter>` element.
+/// @type Length
+$meter-height: 1rem !default;
+
+/// Border radius of a `<meter>` element.
+/// @type Length
+$meter-radius: $global-radius !default;
+
+/// Background color of a `<meter>` element.
+/// @type Color
+$meter-background: $medium-gray !default;
+
+/// Meter fill for an optimal value in a `<meter>` element.
+/// @type Color
+$meter-fill-good: $success-color !default;
+
+/// Meter fill for an average value in a `<meter>` element.
+/// @type Color
+$meter-fill-medium: $warning-color !default;
+
+/// Meter fill for a suboptimal value in a `<meter>` element.
+/// @type Color
+$meter-fill-bad: $alert-color !default;
+
+@mixin foundation-meter-element {
+  meter {
+    display: block;
+    width: 100%;
+    height: $meter-height;
+    margin-bottom: 1rem;
+
+    // Disable `-webkit-appearance: none` from getting prefixed,
+    // We have disabled autoprefixer first and are just only using 
+    // `-moz-appearance: none` as a prefix and neglecting the webkit.
+    
+    /*! autoprefixer: off */
+    -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+    appearance: none;
+
+    @if has-value($meter-radius) {
+      border-radius: $meter-radius;
+    }
+
+    // For Firefox
+    border: 0;
+    background: $meter-background;
+
+    // Chrome/Safari/Edge
+    &::-webkit-meter-bar {
+      border: 0;
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+
+      background: $meter-background;
+    }
+
+    &::-webkit-meter-inner-element {
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &::-webkit-meter-optimum-value {
+      background: $meter-fill-good;
+
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &::-webkit-meter-suboptimum-value {
+      background: $meter-fill-medium;
+
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &::-webkit-meter-even-less-good-value {
+      background: $meter-fill-bad;
+
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &::-moz-meter-bar {
+      background: $primary-color;
+
+      @if has-value($meter-radius) {
+        border-radius: $meter-radius;
+      }
+    }
+
+    &:-moz-meter-optimum::-moz-meter-bar {
+      background: $meter-fill-good;
+    }
+
+    &:-moz-meter-sub-optimum::-moz-meter-bar {
+      background: $meter-fill-medium;
+    }
+
+    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+      background: $meter-fill-bad;
+    }
+  }
+}

src/foundation/forms/_progress.scss

@@ -0,0 +1,94 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group progress-bar
+////
+
+/// Height of a progress bar.
+/// @type Number
+$progress-height: 1rem !default;
+
+/// Background color of a progress bar.
+/// @type Color
+$progress-background: $medium-gray !default;
+
+/// Bottom margin of a progress bar.
+/// @type Number
+$progress-margin-bottom: $global-margin !default;
+
+/// Default color of a progress bar's meter.
+/// @type Color
+$progress-meter-background: $primary-color !default;
+
+/// Default radius of a progress bar.
+/// @type Number
+$progress-radius: $global-radius !default;
+
+@mixin foundation-progress-element {
+  progress {
+    display: block;
+    width: 100%;
+    height: $progress-height;
+    margin-bottom: $progress-margin-bottom;
+
+    appearance: none;
+
+    @if has-value($progress-radius) {
+      border-radius: $progress-radius;
+    }
+
+    // For Firefox
+    border: 0;
+    background: $progress-background;
+
+    &::-webkit-progress-bar {
+      background: $progress-background;
+
+      @if has-value($progress-radius) {
+        border-radius: $progress-radius;
+      }
+    }
+
+    &::-webkit-progress-value {
+      background: $progress-meter-background;
+
+      @if has-value($progress-radius) {
+        border-radius: $progress-radius;
+      }
+    }
+
+    &::-moz-progress-bar {
+      background: $progress-meter-background;
+
+      @if has-value($progress-radius) {
+        border-radius: $progress-radius;
+      }
+    }
+
+    @each $name, $color in $foundation-palette {
+      &.#{$name} {
+        // Internet Explorer sets the fill with color
+        color: $color;
+
+        &::-webkit-progress-value {
+          background: $color;
+        }
+
+        &::-moz-progress-bar {
+          background: $color;
+        }
+      }
+    }
+
+    // For IE and Edge
+    &::-ms-fill { // sass-lint:disable-line no-vendor-prefixes
+      @if has-value($progress-radius) {
+        border-radius: $progress-radius;
+      }
+
+      border: 0;
+    }
+  }
+}

src/foundation/forms/_range.scss

@@ -0,0 +1,149 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group slider
+////
+
+/// Default height of the slider.
+/// @type Number
+$slider-height: 0.5rem !default;
+
+/// Default background color of the slider's track.
+/// @type Color
+$slider-background: $light-gray !default;
+
+/// Default color of the active fill color of the slider.
+/// @type Color
+$slider-fill-background: $medium-gray !default;
+
+/// Default height of the handle of the slider.
+/// @type Number
+$slider-handle-height: 1.4rem !default;
+
+/// Default width of the handle of the slider.
+/// @type Number
+$slider-handle-width: 1.4rem !default;
+
+/// Default color of the handle for the slider.
+/// @type Color
+$slider-handle-background: $primary-color !default;
+
+/// Default fade amount of a disabled slider.
+/// @type Number
+$slider-opacity-disabled: 0.25 !default;
+
+/// Default radius for slider.
+/// @type Number
+$slider-radius: $global-radius !default;
+
+@mixin foundation-range-input {
+  input[type='range'] {  // sass-lint:disable-line no-qualifying-elements
+    $margin: ($slider-handle-height - $slider-height) / 2;
+
+    display: block;
+    width: 100%;
+    height: auto;
+    margin-top: $margin;
+    margin-bottom: $margin;
+
+    appearance: none;
+    border: 0;
+    line-height: 1;
+    cursor: pointer;
+
+    @if has-value($slider-radius) {
+      border-radius: $slider-radius;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+
+    &[disabled] {
+      opacity: $slider-opacity-disabled;
+    }
+
+    // sass-lint:disable no-vendor-prefix
+
+    // Chrome/Safari
+    &::-webkit-slider-runnable-track {
+      height: $slider-height;
+      background: $slider-background;
+    }
+
+    &::-webkit-slider-thumb {
+      width: $slider-handle-width;
+      height: $slider-handle-height;
+      margin-top: -$margin;
+
+      -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+      background: $slider-handle-background;
+
+      @if has-value($slider-radius) {
+        border-radius: $slider-radius;
+      }
+    }
+
+    // Firefox
+    &::-moz-range-track {
+      height: $slider-height;
+      -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+      background: $slider-background;
+    }
+
+    &::-moz-range-thumb {
+      width: $slider-handle-width;
+      height: $slider-handle-height;
+      margin-top: -$margin;
+
+      -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+      background: $slider-handle-background;
+
+      @if has-value($slider-radius) {
+        border-radius: $slider-radius;
+      }
+    }
+
+    // Internet Explorer
+    &::-ms-track {
+      height: $slider-height;
+
+      border: 0;
+      border-top: $margin solid $body-background;
+      border-bottom: $margin solid $body-background;
+      background: $slider-background;
+
+      overflow: visible;
+      color: transparent;
+    }
+
+    &::-ms-thumb {
+      width: $slider-handle-width;
+      height: $slider-handle-height;
+      border: 0;
+      background: $slider-handle-background;
+
+      @if has-value($slider-radius) {
+        border-radius: $slider-radius;
+      }
+    }
+
+    &::-ms-fill-lower {
+      background: $slider-fill-background;
+    }
+
+    &::-ms-fill-upper {
+      background: $slider-background;
+    }
+
+    @at-root {
+      output {
+        vertical-align: middle;
+        margin-left: 0.5em;
+        line-height: $slider-handle-height;
+      }
+    }
+  }
+}

src/foundation/forms/_select.scss

@@ -0,0 +1,90 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+/// Background color for select menus.
+/// @type Color
+$select-background: $white !default;
+
+/// Color of the dropdown triangle inside select menus. Set to `transparent` to remove it entirely.
+/// @type Color
+$select-triangle-color: $dark-gray !default;
+
+/// Default radius for select menus.
+/// @type Color
+$select-radius: $global-radius !default;
+
+@mixin form-select {
+  $height: ($input-font-size * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
+
+  height: $height;
+  margin: 0 0 $form-spacing;
+  padding: $input-padding;
+
+  appearance: none;
+  border: $input-border;
+  border-radius: $select-radius;
+  background-color: $select-background;
+
+  font-family: $input-font-family;
+  font-size: $input-font-size;
+  font-weight: $input-font-weight;
+  line-height: $input-line-height;
+  color: $input-color;
+
+  @if $select-triangle-color != transparent {
+    @include background-triangle($select-triangle-color);
+    background-origin: content-box;
+    background-position: $global-right (-$form-spacing) center;
+    background-repeat: no-repeat;
+    background-size: 9px 6px;
+
+    padding-#{$global-right}: ($form-spacing * 1.5);
+  }
+
+  @if has-value($input-transition) {
+    transition: $input-transition;
+  }
+
+  // Focus state
+  &:focus {
+    outline: none;
+    border: $input-border-focus;
+    background-color: $input-background-focus;
+    box-shadow: $input-shadow-focus;
+
+    @if has-value($input-transition) {
+      transition: $input-transition;
+    }
+  }
+
+  // Disabled state
+  &:disabled {
+    background-color: $input-background-disabled;
+    cursor: $input-cursor-disabled;
+  }
+
+  // Hide the dropdown arrow shown in newer IE versions
+  &::-ms-expand {
+    display: none;
+  }
+
+  &[multiple] {
+    height: auto;
+    background-image: none;
+  }
+  &:not([multiple]) {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+@mixin foundation-form-select {
+  select {
+    @include form-select;
+  }
+}

src/foundation/forms/_text.scss

@@ -0,0 +1,179 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+/// Font color of text inputs.
+/// @type Color
+$input-color: $black !default;
+
+/// Font color of placeholder text within text inputs.
+/// @type Color
+$input-placeholder-color: $medium-gray !default;
+
+/// Font family of text inputs.
+/// @type Font
+$input-font-family: inherit !default;
+
+/// Font size of text inputs.
+/// @type Number
+$input-font-size: rem-calc(16) !default;
+
+/// Font weight of text inputs.
+/// @type Keyword
+$input-font-weight: $global-weight-normal !default;
+
+/// Line height of text inputs.
+/// @type Keyword
+$input-line-height: $global-lineheight !default;
+
+/// Background color of text inputs.
+/// @type Color
+$input-background: $white !default;
+
+/// Background color of focused of text inputs.
+/// @type Color
+$input-background-focus: $white !default;
+
+/// Background color of disabled text inputs.
+/// @type Color
+$input-background-disabled: $light-gray !default;
+
+/// Border around text inputs.
+/// @type Border
+$input-border: 1px solid $medium-gray !default;
+
+/// Border around focused text inputs.
+/// @type Color
+$input-border-focus: 1px solid $dark-gray !default;
+
+/// Padding of text inputs.
+/// @type Color
+$input-padding: $form-spacing / 2 !default;
+
+/// Box shadow inside text inputs when not focused.
+/// @type Shadow
+$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default;
+
+/// Box shadow outside text inputs when focused.
+/// @type Shadow
+$input-shadow-focus: 0 0 5px $medium-gray !default;
+
+/// Cursor to use when hovering over a disabled text input.
+/// @type Cursor
+$input-cursor-disabled: not-allowed !default;
+
+/// Properties to transition on text inputs.
+/// @type Transition
+$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out !default;
+
+/// Enables the up/down buttons that Chrome and Firefox add to `<input type='number'>` elements.
+/// @type Boolean
+$input-number-spinners: true !default;
+
+/// Radius for text inputs.
+/// @type Border
+$input-radius: $global-radius !default;
+
+/// Border radius for form buttons, defaulted to global-radius.
+/// @type Number
+$form-button-radius: $global-radius !default;
+
+@mixin form-element {
+  $height: ($input-font-size * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
+
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: $height;
+  margin: 0 0 $form-spacing;
+  padding: $input-padding;
+
+  border: $input-border;
+  border-radius: $input-radius;
+  background-color: $input-background;
+  box-shadow: $input-shadow;
+
+  font-family: $input-font-family;
+  font-size: $input-font-size;
+  font-weight: $input-font-weight;
+  line-height: $input-line-height;
+  color: $input-color;
+
+  @if has-value($input-transition) {
+    transition: $input-transition;
+  }
+
+  // Focus state
+  &:focus {
+    outline: none;
+    border: $input-border-focus;
+    background-color: $input-background-focus;
+    box-shadow: $input-shadow-focus;
+
+    @if has-value($input-transition) {
+      transition: $input-transition;
+    }
+  }
+}
+
+@mixin foundation-form-text {
+  // Text inputs
+  #{text-inputs()},
+  textarea {
+    @include form-element;
+    appearance: none;
+  }
+
+  // Text areas
+  textarea {
+    max-width: 100%;
+
+    &[rows] {
+      height: auto;
+    }
+  }
+
+  input,
+  textarea {
+    // Disabled/readonly state
+    &:disabled,
+    &[readonly] {
+      background-color: $input-background-disabled;
+      cursor: $input-cursor-disabled;
+    }
+  }
+
+  // Reset styles on button-like inputs
+  [type='submit'],
+  [type='button'] {
+    appearance: none;
+    border-radius: $form-button-radius;
+  }
+
+  // Reset Normalize setting content-box to search elements
+  input[type='search'] { // sass-lint:disable-line no-qualifying-elements
+    box-sizing: border-box;
+  }
+
+  // Number input styles
+  [type='number'] {
+    @if not $input-number-spinners {
+      -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-prefixes
+        margin: 0;
+      }
+    }
+  }
+
+  // Placeholder text
+  ::placeholder {
+    color: $input-placeholder-color;
+  }
+}

src/foundation/foundation.scss

@@ -0,0 +1,155 @@
+/**
+ * Foundation for Sites by ZURB
+ * Version 6.6.1
+ * foundation.zurb.com
+ * Licensed under MIT Open Source
+ */
+
+// --- 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';
+@import '../_vendor/sassy-lists/stylesheets/functions/purge';
+@import '../_vendor/sassy-lists/stylesheets/functions/remove';
+@import '../_vendor/sassy-lists/stylesheets/functions/replace';
+@import '../_vendor/sassy-lists/stylesheets/functions/to-list';
+
+// --- Settings ---
+// import your own `settings` here or
+// import and modify the default settings through
+@import '_settings';
+
+// --- Components ---
+// Utilities
+@import 'util/util';
+// Global styles
+@import 'global';
+@import 'forms/forms';
+@import 'typography/typography';
+
+// Grids
+@import 'grid/grid';
+@import 'xy-grid/xy-grid';
+// Generic components
+@import 'components/button';
+@import 'components/button-group';
+@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/dropdown';
+@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/reveal';
+@import 'components/sticky';
+@import 'components/title-bar';
+@import 'components/top-bar';
+
+// Helpers
+@import 'components/float';
+@import 'components/flex';
+@import 'components/visibility';
+@import 'prototype/prototype';
+
+
+@mixin foundation-everything(
+  $flex: true,
+  $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;
+  }
+  @else {
+    @if $xy-grid {
+      @include foundation-xy-grid-classes;
+    }
+    @else {
+      @include foundation-flex-grid;
+    }
+  }
+
+  // Generic components
+  @include foundation-button;
+  @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-callout;
+  @include foundation-card;
+  @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-menu;
+
+  // Layout components
+  @include foundation-off-canvas;
+  @include foundation-reveal;
+  @include foundation-sticky;
+  @include foundation-title-bar;
+  @include foundation-top-bar;
+
+  // Helpers
+  @include foundation-float-classes;
+  @if $flex { @include foundation-flex-classes; }
+  @include foundation-visibility-classes;
+  @if $prototype { @include foundation-prototype-classes; }
+}

src/foundation/grid/_classes.scss

@@ -0,0 +1,189 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+/// Outputs CSS classes for the grid.
+/// @access private
+@mixin foundation-grid(
+  $row: 'row',
+  $column: 'column',
+  $column-row: 'column-row',
+  $gutter: 'gutter',
+  $push: 'push',
+  $pull: 'pull',
+  $center: 'centered',
+  $uncenter: 'uncentered',
+  $collapse: 'collapse',
+  $uncollapse: 'uncollapse',
+  $offset: 'offset',
+  $end: 'end',
+  $expanded: 'expanded',
+  $block: 'block'
+) {
+  // Row
+  .#{$row} {
+    @include grid-row;
+
+    // Collapsing
+    &.#{$collapse} {
+      > .#{$column} {
+        @include grid-col-collapse;
+      }
+    }
+
+    // Nesting
+    & .#{$row} {
+      @include grid-row-nest($grid-column-gutter);
+
+      &.#{$collapse} {
+        margin-right: 0;
+        margin-left: 0;
+      }
+    }
+
+    // Expanded (full-width) row
+    &.#{$expanded} {
+      @include grid-row-size(expand);
+
+      .#{$row} {
+        margin-right: auto;
+        margin-left: auto;
+      }
+    }
+
+    &:not(.#{$expanded}) .#{$row} {
+      @include grid-row-size(expand);
+    }
+
+    @if type-of($grid-column-gutter) == 'map' {
+      // Static (unresponsive) row gutters
+      //
+      @each $breakpoint, $value in $grid-column-gutter {
+        &.#{$gutter}-#{$breakpoint} {
+          > .#{$column} {
+            @include grid-col-gutter($value);
+          }
+        }
+      }
+    }
+  }
+
+  // Column
+  .#{$column} {
+    @include grid-col;
+
+    @if $grid-column-align-edge {
+      &.#{$end} {
+        @include grid-col-end;
+      }
+    }
+  }
+
+  // Column row
+  // The double .row class is needed to bump up the specificity
+  .#{$column}.#{$row}.#{$row} {
+    float: none;
+  }
+
+  // To properly nest a column row, padding and margin is removed
+  .#{$row} .#{$column}.#{$row}.#{$row} {
+    margin-right: 0;
+    margin-left: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  @include -zf-each-breakpoint {
+    @for $i from 1 through $grid-column-count {
+      // Column width
+      .#{$-zf-size}-#{$i} {
+        @include grid-col-size($i);
+      }
+
+      // Source ordering
+      @if $i < $grid-column-count {
+        @if $push {
+          .#{$-zf-size}-#{$push}-#{$i} {
+            @include grid-col-pos($i);
+          }
+        }
+
+        @if $pull {
+          .#{$-zf-size}-#{$pull}-#{$i} {
+            @include grid-col-pos(-$i);
+          }
+        }
+      }
+
+      // Offsets
+      $o: $i - 1;
+
+      @if $offset {
+        .#{$-zf-size}-#{$offset}-#{$o} {
+          @include grid-col-off($o);
+        }
+      }
+    }
+
+    // Block grid
+    @for $i from 1 through $block-grid-max {
+      .#{$-zf-size}-up-#{$i} {
+        @include grid-layout($i, '.#{$column}');
+      }
+    }
+
+    // Responsive collapsing
+    .#{$-zf-size}-#{$collapse} {
+      > .#{$column} { @include grid-col-collapse; }
+
+      .#{$row} {
+        margin-right: 0;
+        margin-left: 0;
+      }
+    }
+
+    .#{$expanded}.#{$row} .#{$-zf-size}-#{$collapse}.#{$row} {
+      margin-right: 0;
+      margin-left: 0;
+    }
+
+    .#{$-zf-size}-#{$uncollapse} {
+      > .#{$column} { @include grid-col-gutter($-zf-size); }
+    }
+
+    // Positioning
+    @if $center {
+      .#{$-zf-size}-#{$center} {
+        @include grid-col-pos(center);
+      }
+    }
+
+    // Gutter adjustment
+    $-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;
+      }
+    }
+  }
+
+  // Block grid columns
+  .#{$column}-#{$block} {
+    @include grid-column-margin;
+  }
+
+  @if $column == 'column' and has-value($grid-column-alias) {
+    .#{$grid-column-alias} {
+      // sass-lint:disable-block placeholder-in-extend
+      @extend .column;
+    }
+  }
+}

src/foundation/grid/_column.scss

@@ -0,0 +1,78 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+/// Calculates the width of a column based on a number of factors.
+///
+/// @param {Number|List} $columns
+///   Width of the column. Accepts multiple values:
+///   - A percentage value will make the column that exact size.
+///   - A single digit will make the column span that number of columns wide, taking into account the column count of the parent row.
+///   - A list of the format "x of y" (without quotes) will make a column that is *x* columns wide, assuming *y* total columns for the parent.
+///
+/// @returns {Number} A calculated percentage value.
+@function grid-column($columns) {
+  @return fraction-to-percentage($columns, $denominator: $grid-column-count);
+}
+
+/// Creates a grid column.
+///
+/// @param {Mixed} $columns [$grid-column-count] - Width of the column. Refer to the `grid-column()` function to see possible values.
+/// @param {Mixed} $gutters [$grid-column-gutter] - Spacing between columns. Refer to the `grid-column-gutter()` function to see possible values.
+@mixin grid-column(
+  $columns: $grid-column-count,
+  $gutters: $grid-column-gutter
+) {
+  @include grid-column-size($columns);
+  float: $global-left;
+
+  // Gutters
+  @include grid-column-gutter($gutters: $gutters);
+
+  // Position
+  @include grid-col-pos(auto);
+}
+
+/// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element.
+///
+/// @param {Mixed} $gutters [$grid-column-gutter] - Width of the gutters on either side of the column row. Refer to the `grid-column-gutter()` function to see possible values.
+@mixin grid-column-row(
+  $gutters: $grid-column-gutter
+) {
+  @include grid-row;
+  @include grid-column($gutters: $gutters);
+
+  &,
+  &:last-child {
+    float: none;
+  }
+}
+
+/// Shorthand for `grid-column()`.
+/// @alias grid-column
+@function grid-col(
+  $columns: $grid-column-count
+) {
+  @return grid-column($columns);
+}
+
+/// Shorthand for `grid-column()`.
+/// @alias grid-column
+@mixin grid-col(
+  $columns: $grid-column-count,
+  $gutters: $grid-column-gutter
+) {
+  @include grid-column($columns, $gutters);
+}
+
+/// Shorthand for `grid-column-row()`.
+/// @alias grid-column-row
+@mixin grid-col-row(
+  $gutters: $grid-column-gutter
+) {
+  @include grid-column-row($gutters);
+}

src/foundation/grid/_flex-grid.scss

@@ -0,0 +1,260 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group flex-grid
+////
+
+/// Creates a container for a flex grid row.
+///
+/// @param {Keyword|List} $behavior [null]
+///   Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.
+/// @param {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,
+  $size: $grid-row-width,
+  $columns: null,
+  $base: true,
+  $wrap: true,
+  $gutters: $grid-column-gutter
+) {
+  $margin: auto;
+  $wrap: if($wrap, wrap, nowrap);
+
+  @if index($behavior, nest) != null {
+    @include grid-row-nest($gutters);
+
+    @if index($behavior, collapse) != null {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+  @else {
+    @include grid-row-size($size);
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  @if $base {
+    display: flex;
+    flex-flow: row $wrap;
+  }
+
+  @if $columns != null {
+    @include grid-context($columns, $base) {
+      @content;
+    }
+  }
+}
+
+/// Calculates the `flex` property for a flex grid column. It accepts all of the same values as the basic `grid-column()` function, along with two extras:
+///   - `expand` (the default) will make the column expand to fill space.
+///   - `shrink` will make the column contract, so it only takes up the horizontal space it needs.
+///
+/// @param {Mixed} $columns [expand] - Width of the column.
+@function flex-grid-column($columns: expand) {
+  $flex: 1 1 0px; // sass-lint:disable-line zero-unit
+
+  @if $columns == shrink {
+    $flex: 0 0 auto;
+  }
+  @else if $columns != expand {
+    $flex: 0 0 grid-column($columns);
+  }
+
+  @return $flex;
+}
+
+/// Creates a column for a flex grid. By default, the column will stretch to the full width of its container, but this can be overridden with sizing classes, or by using the `unstack` class on the parent flex row.
+///
+/// @param {Mixed} $columns [expand] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
+/// @param {Number|Map} $gutters [$grid-column-gutter] - Map or single value for gutters width. See the `grid-column-gutter` mixin.
+@mixin flex-grid-column(
+  $columns: expand,
+  $gutters: $grid-column-gutter
+) {
+  // Base properties
+  @include flex-grid-size($columns);
+
+  // Gutters
+  @include grid-column-gutter($gutters: $gutters);
+
+  // fixes recent Chrome version not limiting child width
+  // https://stackoverflow.com/questions/34934586/white-space-nowrap-and-flexbox-did-not-work-in-chrome
+  @if $columns == expand {
+    min-width: 0;
+  }
+}
+
+/// Creates a block grid for a flex grid row.
+///
+/// @param {Number} $n - Number of columns to display on each row.
+/// @param {String} $selector - Selector to use to target columns within the row.
+@mixin flex-grid-layout(
+  $n,
+  $selector: '.column'
+) {
+  flex-wrap: wrap;
+
+  > #{$selector} {
+    $pct: percentage(1/$n);
+
+    flex: 0 0 $pct;
+    max-width: $pct;
+  }
+}
+
+/// Changes the width flex grid column.
+/// @param {Mixed} $columns [expand] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
+@mixin flex-grid-size($columns: null) {
+  $columns: $columns or expand;
+
+  flex: flex-grid-column($columns);
+
+  // max-width fixes IE 10/11 not respecting the flex-basis property
+  @if $columns != expand and $columns != shrink {
+    max-width: grid-column($columns);
+  }
+}
+
+
+@mixin foundation-flex-grid {
+  // Row
+  .row {
+    @include flex-grid-row;
+
+    // Nesting behavior
+    & .row {
+      @include flex-grid-row(nest, $base: false);
+
+      &.collapse {
+        margin-right: 0;
+        margin-left: 0;
+      }
+    }
+
+    // Expanded row
+    &.expanded {
+      @include grid-row-size(expand);
+
+      .row {
+        margin-right: auto;
+        margin-left: auto;
+      }
+    }
+
+    &:not(.expanded) .row {
+      @include grid-row-size(expand);
+    }
+
+    &.collapse {
+      > .column {
+        @include grid-col-collapse;
+      }
+    }
+
+    // Undo negative margins
+    // From collapsed child
+    &.is-collapse-child,
+    &.collapse > .column > .row {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+
+  // Column
+  .column {
+    @include flex-grid-column;
+  }
+
+  // Column row
+  // The double .row class is needed to bump up the specificity
+  .column.row.row {
+    float: none;
+    display: block;
+  }
+
+  // To properly nest a column row, padding and margin is removed
+  .row .column.row.row {
+    margin-right: 0;
+    margin-left: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  @include -zf-each-breakpoint {
+    @for $i from 1 through $grid-column-count {
+      // Sizing (percentage)
+      .#{$-zf-size}-#{$i} {
+        flex: flex-grid-column($i);
+        max-width: grid-column($i);
+      }
+
+      // Offsets
+      $o: $i - 1;
+
+      .#{$-zf-size}-offset-#{$o} {
+        @include grid-column-offset($o);
+      }
+    }
+
+    // Block grid
+    @for $i from 1 through $block-grid-max {
+      .#{$-zf-size}-up-#{$i} {
+        @include flex-grid-layout($i);
+      }
+    }
+
+    @if $-zf-size != $-zf-zero-breakpoint {
+      // Sizing (expand)
+      @include breakpoint($-zf-size) {
+        .#{$-zf-size}-expand {
+          flex: flex-grid-column();
+        }
+      }
+
+      // Auto-stacking/unstacking
+      @at-root (without: media) {
+        .row.#{$-zf-size}-unstack {
+          > .column {
+            flex: flex-grid-column(100%);
+
+            @include breakpoint($-zf-size) {
+              flex: flex-grid-column();
+            }
+          }
+        }
+      }
+    }
+
+    // Responsive collapsing
+    .#{$-zf-size}-collapse {
+      > .column { @include grid-col-collapse; }
+    }
+
+    .#{$-zf-size}-uncollapse {
+      > .column { @include grid-col-gutter($-zf-size); }
+    }
+  }
+
+  // Sizing (shrink)
+  .shrink {
+    flex: flex-grid-column(shrink);
+    max-width: 100%;
+  }
+
+  // Block grid columns
+  .column-block {
+    @include grid-column-margin;
+  }
+
+  .columns {
+    @extend .column; // sass-lint:disable-line placeholder-in-extend
+
+  }
+}

src/foundation/grid/_grid.scss

@@ -0,0 +1,48 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+/// The maximum width of a row.
+/// @type Number
+$grid-row-width: $global-width !default;
+
+/// The default column count of a grid. Changing this value affects the logic of the grid mixins, and the number of CSS classes output.
+/// @type Number
+$grid-column-count: 12 !default;
+
+/// The amount of space between columns at different screen sizes. To use just one size, set the variable to a number instead of a map.
+/// @type Map | Length
+/// @since 6.1.0
+$grid-column-gutter: (
+  small: 20px,
+  medium: 30px,
+) !default;
+
+/// If `true`, the last column in a row will align to the opposite edge of the row.
+/// @type Boolean
+$grid-column-align-edge: true !default;
+
+/// Selector used for an alias of column (with @extend). If `false`, no alias is created.
+/// @type String
+$grid-column-alias: 'columns' !default;
+
+/// The highest number of `.x-up` classes available when using the block grid CSS.
+/// @type Number
+$block-grid-max: 8 !default;
+
+// Internal value to store the end column float direction
+$-zf-end-float: if($grid-column-align-edge, $global-right, $global-left);
+
+@import 'row';
+@import 'column';
+@import 'size';
+@import 'position';
+@import 'gutter';
+@import 'classes';
+@import 'layout';
+
+@import 'flex-grid';

src/foundation/grid/_gutter.scss

@@ -0,0 +1,67 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+/// Set the gutters on a column
+/// @param {Number|Keyword} $gutter [auto]
+///   Spacing between columns, accepts multiple values:
+///   - A single value will make the gutter that exact size.
+///   - A breakpoint name will make the gutter the corresponding size in the $gutters map.
+///   - "auto" will make the gutter responsive, using the $gutters map values.
+/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use. Responsive gutter settings by default.
+@mixin grid-column-gutter(
+  $gutter: auto,
+  $gutters: $grid-column-gutter
+) {
+  @include -zf-breakpoint-value($gutter, $gutters) {
+    $padding: rem-calc($-zf-bp-value) / 2;
+
+    padding-right: $padding;
+    padding-left: $padding;
+  }
+}
+
+/// Collapse the gutters on a column by removing the padding. **Note:** only use this mixin within a breakpoint. To collapse a column's gutters on all screen sizes, use the `$gutter` parameter of the `grid-column()` mixin instead.
+@mixin grid-column-collapse {
+  @include grid-column-gutter(0);
+}
+
+/// Shorthand for `grid-column-gutter()`.
+/// @alias grid-column-gutter
+@mixin grid-col-gutter(
+  $gutter: auto,
+  $gutters: $grid-column-gutter
+) {
+  @include grid-column-gutter($gutter, $gutters);
+}
+
+/// Shorthand for `grid-column-collapse()`.
+/// @alias grid-column-collapse
+@mixin grid-col-collapse {
+  @include grid-column-collapse;
+}
+
+/// Sets bottom margin on grid columns to match gutters
+/// @param {Number|Keyword} $margin [auto]
+///   The bottom margin on grid columns, accepts multiple values:
+///   - A single value will make the margin that exact size.
+///   - A breakpoint name will make the margin the corresponding size in the $margins map.
+///   - "auto" will make the margin responsive, using the $margins map values.
+/// @param {Number|Map} $margins [$grid-column-gutter] - Map or single value to use. Responsive gutter settings by default.
+@mixin grid-column-margin (
+  $margin: auto,
+  $margins: $grid-column-gutter
+) {
+  @include -zf-breakpoint-value($margin, $margins) {
+    $margin-bottom: rem-calc($-zf-bp-value);
+    margin-bottom: $margin-bottom;
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}

src/foundation/grid/_layout.scss

@@ -0,0 +1,76 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+/// Sizes child elements so that `$n` number of items appear on each row.
+///
+/// @param {Number} $n - Number of elements to display per row.
+/// @param {String} $selector ['.column'] - Selector(s) to use for child elements.
+/// @param {Number|List} $gutter
+///   The gutter to apply to child elements. Accepts multiple values:
+///   - $grid-column-gutter will use the values in the $grid-column-gutter map, including breakpoint sizes.
+///   - A fixed numeric value will apply this gutter to all breakpoints.
+@mixin grid-layout(
+  $n,
+  $selector: '.column',
+  $gutter: null
+) {
+  & > #{$selector} {
+    float: $global-left;
+    width: percentage(1/$n);
+
+    // If a $gutter value is passed
+    @if($gutter) {
+      // Gutters
+      @if type-of($gutter) == 'map' {
+        @each $breakpoint, $value in $gutter {
+          $padding: rem-calc($value) / 2;
+
+          @include breakpoint($breakpoint) {
+            padding-right: $padding;
+            padding-left: $padding;
+          }
+        }
+      }
+      @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
+        $padding: rem-calc($gutter) / 2;
+        padding-right: $padding;
+        padding-left: $padding;
+      }
+    }
+
+    &:nth-of-type(1n) {
+      clear: none;
+    }
+
+    &:nth-of-type(#{$n}n+1) {
+      clear: both;
+    }
+
+    &:last-child {
+      float: $global-left;
+    }
+  }
+}
+
+/// Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.
+///
+/// @param {Number} $n - Number of items that appear in each row.
+@mixin grid-layout-center-last($n) {
+  @for $i from 1 to $n {
+    @if $i == 1 {
+      &:nth-child(#{$n}n+1):last-child {
+        margin-left: (100 - 100/$n * $i) / 2 * 1%;
+      }
+    }
+    @else {
+      &:nth-child(#{$n}n+1):nth-last-child(#{$i}) {
+        margin-left: (100 - 100/$n * $i) / 2 * 1%;
+      }
+    }
+  }
+}

src/foundation/grid/_position.scss

@@ -0,0 +1,100 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+/// Reposition a 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) {
+  // 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;
+      clear: both;
+    }
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  @else {
+    @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;
+  margin-right: 0;
+  margin-left: 0;
+}
+
+/// Offsets a column to the right by `$n` columns.
+/// @param {Number|List} $n - Width to offset by. You can pass in any value accepted by the `grid-column()` mixin, such as `6`, `50%`, or `1 of 2`.
+@mixin grid-column-offset($n) {
+  margin-#{$global-left}: grid-column($n);
+}
+
+/// Disable the default behavior of the last column in a row aligning to the opposite edge.
+@mixin grid-column-end {
+  // This extra specificity is required for the property to be applied
+  &:last-child:last-child {
+    float: $global-left;
+  }
+}
+
+/// Shorthand for `grid-column-position()`.
+/// @alias grid-column-position
+@mixin grid-col-pos($position) {
+  @include grid-column-position($position);
+}
+
+/// Shorthand for `grid-column-unposition()`.
+/// @alias grid-column-unposition
+@mixin grid-col-unpos {
+  @include grid-column-unposition;
+}
+
+/// Shorthand for `grid-column-offset()`.
+/// @alias grid-column-offset
+@mixin grid-col-off($n) {
+  @include grid-column-offset($n);
+}
+
+/// Shorthand for `grid-column-end()`.
+/// @alias grid-column-end
+@mixin grid-col-end {
+  @include grid-column-end;
+}

src/foundation/grid/_row.scss

@@ -0,0 +1,99 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+/// Change the behavior of columns defined inside this mixin to use a different column count.
+/// @content
+///
+/// @param {Number} $columns - Number of columns to use.
+/// @param {Boolean} $root [false]
+///   If `false`, selectors inside this mixin will nest inside the parent selector.
+///   If `true`, selectors will not nest.
+@mixin grid-context(
+  $columns,
+  $root: false
+) {
+  // Store the current column count so it can be re-set later
+  $old-grid-column-count: $grid-column-count;
+  $grid-column-count: $columns !global;
+
+  @if $root {
+    @at-root { @content; }
+  }
+  @else {
+    @content;
+  }
+
+  // Restore the old column count
+  $grid-column-count: $old-grid-column-count !global;
+}
+
+/// Creates a grid row.
+/// @content
+///
+/// @param {Number} $columns [null] - Column count for this row. `null` will use the default column count.
+/// @param {Keywords} $behavior [null]
+///   Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.
+/// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.
+/// @param {Boolean} $cf [true] - Whether or not to include a clearfix.
+/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default.
+@mixin grid-row(
+  $columns: null,
+  $behavior: null,
+  $size: $grid-row-width,
+  $cf: true,
+  $gutters: $grid-column-gutter
+) {
+  $margin: auto;
+
+  @if index($behavior, nest) != null {
+    @include grid-row-nest($gutters);
+
+    @if index($behavior, collapse) != null {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+  @else {
+    @include grid-row-size($size);
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  @if $cf {
+    @include clearfix;
+  }
+
+  @if $columns != null {
+    @include grid-context($columns) {
+      @content;
+    }
+  }
+}
+
+/// Inverts the margins of a row to nest it inside of a column.
+///
+/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default.
+@mixin grid-row-nest($gutters: $grid-column-gutter) {
+  @include -zf-each-breakpoint {
+    $margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) / 2 * -1;
+
+    margin-right: $margin;
+    margin-left: $margin;
+  }
+}
+
+/// Set a grid row size
+///
+/// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.
+@mixin grid-row-size($size: $grid-row-width) {
+  @if $size == expand {
+    $size: none;
+  }
+
+  max-width: $size;
+}

src/foundation/grid/_size.scss

@@ -0,0 +1,24 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+/// Set the width of a grid column.
+///
+/// @param {Number|List} $width [$grid-column-count] - Width to make the column. You can pass in any value accepted by the `grid-column()` function, such as `6`, `50%`, or `1 of 2`.
+@mixin grid-column-size(
+  $columns: $grid-column-count
+) {
+  width: grid-column($columns);
+}
+
+/// Shorthand for `grid-column-size()`.
+/// @alias grid-column-size
+@mixin grid-col-size(
+  $columns: $grid-column-count
+) {
+  @include grid-column-size($columns);
+}

src/foundation/prototype/_arrow.scss

@@ -0,0 +1,36 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-arrow
+////
+
+/// Map containing all the `arrow` direction
+/// @type Map
+$prototype-arrow-directions: (
+  down,
+  up,
+  right,
+  left
+) !default;
+
+/// Width of the Arrow, `0.4375rem` by default.
+/// @type Number
+$prototype-arrow-size: 0.4375rem;
+
+/// Color of the Arrow, `$black` by default.
+/// @type Color
+$prototype-arrow-color: $black;
+
+@mixin foundation-prototype-arrow {
+  @each $prototype-arrow-direction in $prototype-arrow-directions {
+    .arrow-#{$prototype-arrow-direction} {
+      @include css-triangle(
+        $prototype-arrow-size, 
+        $prototype-arrow-color, 
+        $prototype-arrow-direction
+      );
+    }
+  }
+}

src/foundation/prototype/_border-box.scss

@@ -0,0 +1,35 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-border-box
+////
+
+/// Responsive breakpoints for border box.
+/// @type Boolean
+$prototype-border-box-breakpoints: $global-prototype-breakpoints !default;
+
+/// Border box utility
+@mixin border-box {
+  box-sizing: border-box !important;
+}
+
+@mixin foundation-prototype-border-box {
+  .border-box {
+    @include border-box;
+  }
+
+  @if ($prototype-border-box-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-border-box {
+            @include border-box;
+          }
+        }
+      }
+    }
+  }
+}

src/foundation/prototype/_border-none.scss

@@ -0,0 +1,35 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-border-none
+////
+
+/// Responsive breakpoints for border none.
+/// @type Boolean
+$prototype-border-none-breakpoints: $global-prototype-breakpoints !default;
+
+/// Border none utility
+@mixin border-none {
+  border: none !important;
+}
+
+@mixin foundation-prototype-border-none {
+  .border-none {
+    @include border-none;
+  }
+
+  @if ($prototype-border-none-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-border-none {
+            @include border-none;
+          }
+        }
+      }
+    }
+  }
+}

src/foundation/prototype/_bordered.scss

@@ -0,0 +1,54 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-bordered
+////
+
+/// Responsive breakpoints for bordered utility.
+/// @type Boolean
+$prototype-bordered-breakpoints: $global-prototype-breakpoints !default;
+
+/// Default value for `prototype-border-width`
+/// @type Number
+$prototype-border-width: rem-calc(1) !default;
+
+/// Default value for `prototype-border-type`
+/// @type String
+$prototype-border-type: solid !default;
+
+/// Default value for `prototype-border-color` defaulted to `medium-gray`
+/// @type Color
+$prototype-border-color: $medium-gray !default;
+
+/// Bordered Utility: Adds a light border to an element by default.
+/// @param {Number} $width [$prototype-border-width] Width of the border
+/// @param {String} $type [$prototype-border-type] Type of the border
+/// @param {Color} $color [$prototype-border-color] Color of the border
+@mixin bordered(
+  $width: $prototype-border-width,
+  $type: $prototype-border-type,
+  $color: $prototype-border-color
+) {
+  border: $width $type $color;
+}
+
+@mixin foundation-prototype-bordered {
+  .bordered {
+    @include bordered;
+  }
+
+  @if ($prototype-bordered-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-bordered {
+            @include bordered;
+          }
+        }
+      }
+    }
+  }
+}

src/foundation/prototype/_box.scss

@@ -0,0 +1,23 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-box
+////
+
+/// Box Mixin: Easily create a square, rectangle or a circle
+/// @param {Number} $width[] Width of the box
+/// @param {Number} $height[$width] Height of the box, defaults to `$width` to easily make a square
+/// @param {Boolean} $circle[false] Makes the box a circle, by default `false`.
+@mixin box(
+  $width, 
+  $height: $width, 
+  $circle: false
+) {
+  width: $width;
+  height: $height;
+  @if $circle {
+    border-radius: 50% !important;
+  }
+}

src/foundation/prototype/_display.scss

@@ -0,0 +1,50 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-display
+////
+
+/// Responsive breakpoints for display classes
+/// @type Boolean
+$prototype-display-breakpoints: $global-prototype-breakpoints !default;
+
+/// Map containing all the `display` classes
+/// @type Map
+$prototype-display: (
+  inline,
+  inline-block,
+  block,
+  table,
+  table-cell
+) !default;
+
+/// Display classes, by default coming through a map `$prototype-display`
+/// @param {String} $display [] Display classes
+@mixin display($display) {
+  display: $display !important;
+}
+
+@mixin foundation-prototype-display {
+  @each $display in $prototype-display {
+    .display-#{$display} {
+      @include display($display);
+    }
+  }
+
+  @if ($prototype-display-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @each $display in $prototype-display {
+          @if $size != $-zf-zero-breakpoint {
+            .#{$size}-display-#{$display} {
+              @include display($display);
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/foundation/prototype/_font-styling.scss

@@ -0,0 +1,95 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-font-styling
+////
+
+/// Responsive breakpoints for font styling types
+/// @type Boolean
+$prototype-font-breakpoints: $global-prototype-breakpoints !default;
+
+/// Letter spacing for `.font-wide`
+/// @type Number
+$prototype-wide-letter-spacing: rem-calc(4) !default;
+
+/// Default weight for `.font-normal`, defaulted to `global-weight-normal`
+/// @type Number
+$prototype-font-normal: $global-weight-normal !default;
+
+/// Default weight for `.font-bold`, defaulted to `global-weight-bold`
+/// @type Number
+$prototype-font-bold: $global-weight-bold !default;
+
+/// Font wide letter spacing!
+/// @param {Number} $letter-spacing [$prototype-wide-letter-spacing] Wide letter spacing for the font
+@mixin font-wide(
+  $letter-spacing: $prototype-wide-letter-spacing
+) {
+  letter-spacing: $letter-spacing;
+}
+
+/// Font Weight Normal, default value coming through `global-weight-normal`
+/// @param {Number} $weight [$prototype-font-normal] Weight of the font (normal)
+@mixin font-normal(
+  $weight: $prototype-font-normal
+) {
+  font-weight: $weight;
+}
+
+/// Font Weight Bold, default value coming through `global-weight-bold`
+/// @param {Number} $weight [$prototype-font-bold] Weight of the font (bold)
+@mixin font-bold(
+  $weight: $prototype-font-bold
+) {
+  font-weight: $weight;
+}
+
+/// Font Style Italic
+@mixin font-italic {
+  font-style: italic !important;
+}
+
+@mixin foundation-prototype-font-styling {
+  .font-wide{
+    @include font-wide;
+  }
+
+  .font-normal {
+    @include font-normal;
+  }
+
+  .font-bold {
+    @include font-bold;
+  }
+
+  .font-italic {
+    @include font-italic;
+  }
+
+  @if ($prototype-font-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-font-wide{
+            @include font-wide;
+          }
+
+          .#{$size}-font-normal {
+            @include font-normal;
+          }
+
+          .#{$size}-font-bold {
+            @include font-bold;
+          }
+
+          .#{$size}-font-italic {
+            @include font-italic;
+          }
+        }
+      }
+    }
+  }
+}

src/foundation/prototype/_list-style-type.scss

@@ -0,0 +1,95 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-list-style-type
+////
+
+/// Responsive breakpoints for list styling types
+/// @type Boolean
+$prototype-list-breakpoints: $global-prototype-breakpoints !default;
+
+/// Map containing all the `style-type-unordered` classes
+/// @type Map
+$prototype-style-type-unordered: (
+  disc,
+  circle,
+  square
+) !default;
+
+/// Map containing all the `style-type-ordered` classes
+/// @type Map
+$prototype-style-type-ordered: (
+  decimal,
+  lower-alpha,
+  lower-latin,
+  lower-roman,
+  upper-alpha,
+  upper-latin,
+  upper-roman
+) !default;
+
+
+/// Style type for unordered Lists, by default coming through a map `$prototype-style-type-unordered`
+/// @param {String} $style-type-unordered [] Style type for unordered Lists
+@mixin style-type-unordered($style-type-unordered) {
+  list-style-type: $style-type-unordered !important;
+}
+
+/// Style type for ordered Lists, by default coming through a map `$prototype-style-type-ordered`
+/// @param {String} $style-type-ordered [] Style type for ordered Lists
+@mixin style-type-ordered($style-type-ordered) {
+  list-style-type: $style-type-ordered !important;
+}
+
+@mixin list-unordered {
+  @each $style-type-unordered in $prototype-style-type-unordered {
+    ul.list-#{$style-type-unordered} {
+      @include style-type-unordered($style-type-unordered);
+    }
+  }
+
+  @if ($prototype-list-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @each $style-type-unordered in $prototype-style-type-unordered {
+          @if $size != $-zf-zero-breakpoint {
+            ul.#{$size}-list-#{$style-type-unordered} {
+              @include style-type-unordered($style-type-unordered);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin list-ordered {
+  @each $style-type-ordered in $prototype-style-type-ordered {
+    ol.list-#{$style-type-ordered} {
+      @include style-type-ordered($style-type-ordered);
+    }
+  }
+
+  @if ($prototype-list-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @each $style-type-ordered in $prototype-style-type-ordered {
+          @if $size != $-zf-zero-breakpoint {
+            ol.#{$size}-list-#{$style-type-ordered} {
+              @include style-type-ordered($style-type-ordered);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin foundation-prototype-list-style-type {
+  @include list-unordered;
+  @include list-ordered;
+}

src/foundation/prototype/_overflow.scss

@@ -0,0 +1,72 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-overflow
+////
+
+/// Responsive breakpoints for overflow helper classes
+/// @type Boolean
+$prototype-overflow-breakpoints: $global-prototype-breakpoints !default;
+
+/// Map containing all the `overflow` classes
+/// @type Map
+$prototype-overflow: (
+  visible,
+  hidden,
+  scroll
+) !default;
+
+/// Overflow classes, by default coming through a map `$prototype-overflow`
+/// @param {String} $overflow [] Overflow classes
+@mixin overflow($overflow) {
+  overflow: $overflow !important;
+}
+
+/// Overflow classes on horizontal axis, by default coming through a map `$prototype-overflow`
+/// @param {String} $overflow [] Overflow classes (horizontal axis)
+@mixin overflow-x($overflow) {
+  overflow-x: $overflow !important;
+}
+
+/// Overflow classes on vertical axis, by default coming through a map `$prototype-overflow`
+/// @param {String} $overflow [] Overflow classes (vertical axis)
+@mixin overflow-y($overflow) {
+  overflow-y: $overflow !important;
+}
+
+@mixin foundation-prototype-overflow {
+  @each $overflow in $prototype-overflow {
+    .overflow-#{$overflow} {
+      @include overflow($overflow);
+    }
+    .overflow-x-#{$overflow} {
+      @include overflow-x($overflow);
+    }
+    .overflow-y-#{$overflow} {
+      @include overflow-y($overflow);
+    }
+  }
+
+  @if ($prototype-overflow-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @each $overflow in $prototype-overflow {
+          @if $size != $-zf-zero-breakpoint {
+            .#{$size}-overflow-#{$overflow} {
+              @include overflow($overflow);
+            }
+            .#{$size}-overflow-x-#{$overflow} {
+              @include overflow-x($overflow);
+            }
+            .#{$size}-overflow-y-#{$overflow} {
+              @include overflow-y($overflow);
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/foundation/prototype/_position.scss

@@ -0,0 +1,114 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-position
+////
+
+/// Responsive breakpoints for position helpers
+/// @type Boolean
+$prototype-position-breakpoints: $global-prototype-breakpoints !default;
+
+/// Map containing all the `position` classes
+/// @type Map
+$prototype-position: (
+  static,
+  relative,
+  absolute,
+  fixed
+) !default;
+
+/// z-index for fixed positioning
+/// @type Number
+$prototype-position-z-index: 975 !default;
+
+/// Position classes, by default coming through a map `$prototype-position`, whereas all the offset values are multiplied by `$global-position` which by default is equal to `1rem`.
+/// @param {String} $position [] Position classes, Either `static`, `relative`, `absolute` or `fixed`
+/// @param {Number} $top [null] - Top offset
+/// @param {Number} $right [null] - Right offset
+/// @param {Number} $bottom [null] - Bottom offset
+/// @param {Number} $left [null] - Left offset
+@mixin position(
+  $position,
+  $top: null,
+  $right: null,
+  $bottom: null,
+  $left: null
+) {
+  position: $position !important;
+  @if $top != null {
+    top: $top * $global-position !important;
+  }
+  @if $right != null {
+    right: $right * $global-position !important;
+  }
+  @if $bottom != null {
+    bottom: $bottom * $global-position !important;
+  }
+  @if $left != null {
+    left: $left * $global-position !important;
+  }
+}
+
+/// Position Fixed on top corners
+/// @param {Number} $z-index [$prototype-position-z-index] z-index for `position-fixed-top`
+@mixin position-fixed-top(
+  $z-index: $prototype-position-z-index
+) {
+  @include position(fixed, 0, 0, null, 0);
+  z-index: $z-index;
+}
+
+/// Position Fixed on bottom corners
+/// @param {Number} $z-index [$prototype-position-z-index] z-index for `position-fixed-bottom`
+@mixin position-fixed-bottom(
+  $z-index: $prototype-position-z-index
+) {
+  @include position(fixed, null, 0, 0, 0);
+  z-index: $z-index;
+}
+
+@mixin foundation-prototype-position {
+  // Position: Static, Relative, Fixed, Absolute
+  @each $position in $prototype-position {
+    .position-#{$position} {
+      @include position($position);
+    }
+  }
+
+  // Position: Fixed Top, Fixed Bottom
+  .position-fixed-top {
+    @include position-fixed-top;
+  }
+  .position-fixed-bottom {
+    @include position-fixed-bottom;
+  }
+
+  @if ($prototype-position-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        // Position: Static, Relative, Fixed, Absolute
+        @each $position in $prototype-position {
+          @if $size != $-zf-zero-breakpoint {
+            .#{$size}-position-#{$position} {
+              @include position($position);
+            }
+          }
+        }
+
+        // Position: Fixed Top, Fixed Bottom
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-position-fixed-top {
+            @include position-fixed-top;
+          }
+
+          .#{$size}-position-fixed-bottom {
+            @include position-fixed-bottom;
+          }
+        }
+      }
+    }
+  }
+}

src/foundation/prototype/_prototype.scss

@@ -0,0 +1,87 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype
+////
+
+// Relational Mixins
+@import 'relation';
+
+// Box Mixin
+@import 'box';
+
+// Rotate Mixin
+@import 'rotate';
+
+// Text utilities
+@import 'text-utilities';
+
+// Text transformation classes
+@import 'text-transformation';
+
+// Text Decoration classes
+@import 'text-decoration';
+
+// Font Styling
+@import 'font-styling';
+
+// List Style type
+@import 'list-style-type';
+
+// Rounded Utility
+@import 'rounded';
+
+// Bordered Utility
+@import 'bordered';
+
+// Shadow Utility
+@import 'shadow';
+
+// Arrow Utility
+@import 'arrow';
+
+// Separator Utility
+@import 'separator';
+
+// Overflow helper classes
+@import 'overflow';
+
+// Display classes
+@import 'display';
+
+// Position Helpers
+@import 'position';
+
+// Border box
+@import 'border-box';
+
+// Border none Utilty
+@import 'border-none';
+
+// Sizing Utilities
+@import 'sizing';
+
+// Spacing Utilities
+@import 'spacing';
+
+@mixin foundation-prototype-classes {
+  @include foundation-prototype-text-utilities;
+  @include foundation-prototype-text-transformation;
+  @include foundation-prototype-text-decoration;
+  @include foundation-prototype-font-styling;
+  @include foundation-prototype-list-style-type;
+  @include foundation-prototype-rounded;
+  @include foundation-prototype-bordered;
+  @include foundation-prototype-shadow;
+  @include foundation-prototype-arrow;
+  @include foundation-prototype-separator;
+  @include foundation-prototype-overflow;
+  @include foundation-prototype-display;
+  @include foundation-prototype-position;
+  @include foundation-prototype-border-box;
+  @include foundation-prototype-border-none;
+  @include foundation-prototype-sizing;
+  @include foundation-prototype-spacing;
+}