second commit

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"],
+  "comments": false,
+  "env": {
+    "test": {
+      "plugins": [ "istanbul" ]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,2 @@
+build/*.js
+config/*.js

.eslintrc.js

@@ -0,0 +1,48 @@
+// http://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+  },
+  extends: 'airbnb-base',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // check if imports actually resolve
+  'settings': {
+    'import/resolver': {
+      'webpack': {
+        'config': 'build/webpack.base.conf.js'
+      }
+    }
+  },
+  // add your custom rules here
+  'rules': {
+    // don't require .vue extension when importing
+    'import/extensions': ['error', 'always', {
+      'js': 'never',
+      'vue': 'never'
+    }],
+    // allow optionalDependencies
+    'import/no-extraneous-dependencies': ['error', {
+      'optionalDependencies': ['test/unit/index.js']
+    }],
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    // allow import with script-loader in main.js
+    'import/no-webpack-loader-syntax': 0    
+  },
+  globals: {
+    'Foundation': false,
+    '$': false
+  }
+}
+
+
+

.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

build/build.js

@@ -0,0 +1,40 @@
+// https://github.com/shelljs/shelljs
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var path = require('path')
+var chalk = require('chalk')
+var shell = require('shelljs')
+var webpack = require('webpack')
+var config = require('../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for production...')
+spinner.start()
+
+var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
+shell.rm('-rf', assetsPath)
+shell.mkdir('-p', assetsPath)
+shell.config.silent = true
+shell.cp('-R', 'static/*', assetsPath)
+shell.config.silent = false
+
+webpack(webpackConfig, function (err, stats) {
+  spinner.stop()
+  if (err) throw err
+  process.stdout.write(stats.toString({
+    colors: true,
+    modules: false,
+    children: false,
+    chunks: false,
+    chunkModules: false
+  }) + '\n\n')
+
+  console.log(chalk.cyan('  Build complete.\n'))
+  console.log(chalk.yellow(
+    '  Tip: built files are meant to be served over an HTTP server.\n' +
+    '  Opening index.html over file:// won\'t work.\n'
+  ))
+})

build/check-versions.js

@@ -0,0 +1,45 @@
+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  },
+  {
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  }
+]
+
+module.exports = function () {
+  var warnings = []
+  for (var i = 0; i < versionRequirements.length; i++) {
+    var mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+    for (var i = 0; i < warnings.length; i++) {
+      var warning = warnings[i]
+      console.log('  ' + warning)
+    }
+    console.log()
+    process.exit(1)
+  }
+}

build/dev-client.js

@@ -0,0 +1,9 @@
+/* eslint-disable */
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})

build/dev-server.js

@@ -0,0 +1,81 @@
+require('./check-versions')()
+
+var config = require('../config')
+if (!process.env.NODE_ENV) {
+  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+}
+
+var opn = require('opn')
+var path = require('path')
+var express = require('express')
+var webpack = require('webpack')
+var proxyMiddleware = require('http-proxy-middleware')
+var webpackConfig = require('./webpack.dev.conf')
+
+// default port where dev server listens for incoming traffic
+var port = process.env.PORT || config.dev.port
+// automatically open browser, if not set will be false
+var autoOpenBrowser = !!config.dev.autoOpenBrowser
+// Define HTTP proxies to your custom API backend
+// https://github.com/chimurai/http-proxy-middleware
+var proxyTable = config.dev.proxyTable
+
+var app = express()
+var compiler = webpack(webpackConfig)
+
+var devMiddleware = require('webpack-dev-middleware')(compiler, {
+  publicPath: webpackConfig.output.publicPath,
+  quiet: true
+})
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler, {
+  log: () => {}
+})
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+    hotMiddleware.publish({ action: 'reload' })
+    cb()
+  })
+})
+
+// proxy api requests
+Object.keys(proxyTable).forEach(function (context) {
+  var options = proxyTable[context]
+  if (typeof options === 'string') {
+    options = { target: options }
+  }
+  app.use(proxyMiddleware(options.filter || context, options))
+})
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+app.use(devMiddleware)
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
+
+// serve pure static assets
+var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+app.use(staticPath, express.static('./static'))
+
+var uri = 'http://localhost:' + port
+
+devMiddleware.waitUntilValid(function () {
+  console.log('> Listening at ' + uri + '\n')
+})
+
+module.exports = app.listen(port, function (err) {
+  if (err) {
+    console.log(err)
+    return
+  }
+
+  // when env is testing, don't need open it
+  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+    opn(uri)
+  }
+})

build/utils.js

@@ -0,0 +1,82 @@
+var path = require('path')
+var config = require('../config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function (_path) {
+  var assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  var cssLoader = {
+    loader: 'css-loader',
+    options: {
+      minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    var loaders = [cssLoader]
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  let sassOptions = {
+    indentedSyntax: true
+  }
+  let scssOptions = {
+    includePaths: [
+      './src/styles'
+    ],
+    data: '@import "./src/styles/app";'
+  }
+
+  // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', sassOptions),
+    //  Make custom SASS available to all components https://github.com/webpack-contrib/sass-loader
+    scss: generateLoaders('sass', scssOptions),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  var output = []
+  var loaders = exports.cssLoaders(options)
+  for (var extension in loaders) {
+    var loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+  return output
+}

build/vue-loader.conf.js

@@ -0,0 +1,17 @@
+var utils = require('./utils')
+var config = require('../config')
+var isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: isProduction
+      ? config.build.productionSourceMap
+      : config.dev.cssSourceMap,
+    extract: isProduction
+  }),
+  postcss: [
+    require('autoprefixer')({
+      browsers: ['last 2 versions']
+    })
+  ]
+}

build/webpack.base.conf.js

@@ -0,0 +1,67 @@
+var path = require('path')
+var utils = require('./utils')
+var config = require('../config')
+var vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src')
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: "pre",
+        include: [resolve('src'), resolve('test')],
+        options: {
+          formatter: require('eslint-friendly-formatter')
+        }
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+}

build/webpack.dev.conf.js

@@ -0,0 +1,35 @@
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: '#cheap-module-eval-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.dev.env
+    }),
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    new FriendlyErrorsPlugin()
+  ]
+})

build/webpack.prod.conf.js

@@ -0,0 +1,102 @@
+var path = require('path')
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var env = config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      sourceMap: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css')
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module, count) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
+    })
+  ]
+})
+
+if (config.build.productionGzip) {
+  var CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

config/dev.env.js

@@ -0,0 +1,6 @@
+var merge = require('webpack-merge')
+var prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

config/index.js

@@ -0,0 +1,38 @@
+// see http://vuejs-templates.github.io/webpack for documentation.
+var path = require('path')
+
+module.exports = {
+  build: {
+    env: require('./prod.env'),
+    index: path.resolve(__dirname, '../docs/index.html'),
+    assetsRoot: path.resolve(__dirname, '../docs'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/vue-foundation/',
+    productionSourceMap: false,
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  },
+  dev: {
+    env: require('./dev.env'),
+    port: 8060,
+    autoOpenBrowser: true,
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false
+  }
+}

config/prod.env.js

@@ -0,0 +1,3 @@
+module.exports = {
+  NODE_ENV: '"production"'
+}

docs/index.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>vue-fondation</title><link href=/vue-foundation/static/css/app.1a10a9b3605c5bf02c9843beb55122aa.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/vue-foundation/static/js/manifest.ad7a7e375b7ff4b2c47b.js></script><script type=text/javascript src=/vue-foundation/static/js/vendor.75a9a9c8f712ae5e9b67.js></script><script type=text/javascript src=/vue-foundation/static/js/app.ca95872da330a5c7d673.js></script></body></html>

docs/static/js/manifest.ad7a7e375b7ff4b2c47b.js

@@ -0,0 +1 @@
+!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,a,c){for(var u,i,f,s=0,l=[];s<t.length;s++)i=t[s],o[i]&&l.push(o[i][0]),o[i]=0;for(u in a)Object.prototype.hasOwnProperty.call(a,u)&&(e[u]=a[u]);for(r&&r(t,a,c);l.length;)l.shift()();if(c)for(s=0;s<c.length;s++)f=n(n.s=c[s]);return f};var t={},o={2:0};n.e=function(e){function r(){c.onerror=c.onload=null,clearTimeout(u);var n=o[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),o[e]=void 0)}if(0===o[e])return Promise.resolve();if(o[e])return o[e][2];var t=new Promise(function(n,r){o[e]=[n,r]});o[e][2]=t;var a=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,n.nc&&c.setAttribute("nonce",n.nc),c.src=n.p+"static/js/"+e+"."+{0:"ca95872da330a5c7d673",1:"75a9a9c8f712ae5e9b67"}[e]+".js";var u=setTimeout(r,12e4);return c.onerror=c.onload=r,a.appendChild(c),t},n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:t})},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="/vue-foundation/",n.oe=function(e){throw console.error(e),e}}([]);

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>MPS.FUN | Welcome to mps fun</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package.json

@@ -0,0 +1,80 @@
+{
+  "name": "vue-fondation-w2",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "Tommaso Marcelli <tommaso.marcelli@gmail.com>",
+  "private": true,
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "node build/dev-server.js",
+    "build": "node build/build.js",
+    "lint": "eslint --ext .js,.vue src",
+    "upgrade": "npm run upgrade:rm && npm run upgrade:ncu && npm run upgrade:npm-install",
+    "upgrade:rm": "rm node_modules -Rf",
+    "upgrade:ncu": "npm-check-updates --upgradeAll",
+    "upgrade:npm-install": "npm install"
+  },
+  "dependencies": {
+    "foundation-sites": "^6.3.1",
+    "jquery": "^3.2.1",
+    "motion-ui": "^1.2.2",
+    "vue": "^2.3.3",
+    "vue-router": "^2.5.3",
+    "what-input": "^4.1.3"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.0.1",
+    "babel-core": "^6.24.1",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.4.0",
+    "babel-preset-stage-2": "^6.24.1",
+    "babel-register": "^6.24.1",
+    "chalk": "^1.1.3",
+    "connect-history-api-fallback": "^1.3.0",
+    "css-loader": "^0.28.1",
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb-base": "^11.1.3",
+    "eslint-friendly-formatter": "^2.0.7",
+    "eslint-import-resolver-webpack": "^0.8.1",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-html": "^2.0.3",
+    "eslint-plugin-import": "^2.2.0",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.15.2",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.11.1",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "function-bind": "^1.1.0",
+    "html-webpack-plugin": "^2.28.0",
+    "http-proxy-middleware": "^0.17.4",
+    "node-sass": "^4.5.2",
+    "npm-check-updates": "^2.11.0",
+    "opn": "^5.0.0",
+    "ora": "^1.2.0",
+    "resolve-url-loader": "^2.0.2",
+    "sass-loader": "^6.0.4",
+    "script-loader": "^0.7.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.7",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^12.0.3",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.3.3",
+    "webpack": "^2.5.1",
+    "webpack-bundle-analyzer": "^2.6.0",
+    "webpack-dev-middleware": "^1.10.2",
+    "webpack-hot-middleware": "^2.18.0",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/App.vue

@@ -0,0 +1,86 @@
+<template>
+  <div id="app">
+<!-- <div class="off-canvas position-right" id="offCanvas" data-off-canvas>
+      <ul class="sidebar-menu" data-close="offCanvas">
+        <li><router-link to="/" exact>Home</router-link></li>
+        <li><router-link to="/reveal" exact>Reveal</router-link></li>
+        <li><router-link to="/slider" exact>Slider</router-link></li>
+        <li><router-link to="/tooltip" exact>Tooltip</router-link></li>
+        <li><router-link to="/dropdown-menu" exact>Dropdown Menu</router-link></li>
+        <li><router-link to="/drilldown-menu" exact>Drilldown Menu</router-link></li>
+        <li><router-link to="/accordion-menu" exact>Accordion Menu</router-link></li>
+        <li><router-link to="/magellan" exact>Magellan</router-link></li>
+        <li><router-link to="/accordion" exact>Accordion</router-link></li>
+        <li><router-link to="/dropdown" exact>Dropdown</router-link></li>
+        <li><router-link to="/tabs" exact>Tabs</router-link></li>
+        <li><router-link to="/orbit" exact>Orbit</router-link></li>
+      </ul>          
+    </div> -->
+    <div class="off-canvas-content" data-off-canvas-content>
+<!--  <div class="top-bar">
+          <ul class="menu expanded">
+            <li class="logo">
+              <router-link to="/">Vue-Foundation</router-link>
+            </li>
+            <li><a class="button small menu-button" data-toggle="offCanvas">Menu</a></li>
+          </ul>
+      </div> -->
+      <div class="content-wrapper">
+        <router-view></router-view>
+      </div>
+    
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app',
+};
+</script>
+
+
+
+<style lang="scss">  
+  @import './styles/global';
+  
+  // Chrome Reset 
+  a:focus {
+    outline: none;
+  }
+
+  .logo, .logo a {
+    color: $white;
+    font-weight: normal;
+  }
+
+  li a.menu-button {
+    border-radius: 20px;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem; 
+    font-weight: 600;
+    text-transform: uppercase;
+    display: inline-block;
+    float: right;
+  }
+
+  .content-wrapper {
+    padding: 0.75rem 0;
+  }
+
+  .sidebar-menu {
+    @include menu-base();
+    @include menu-direction(vertical);
+    a {
+      color: $secondary-color;
+      font-weight: normal;
+    }
+    a.active {
+      font-weight: 600;
+      color: $primary-color;
+    }
+  }
+  body {
+    background: #15151B;
+  }
+</style>

src/assets/fonts/config.json

@@ -0,0 +1,22 @@
+{
+  "name": "",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "0f6a2573a7b6df911ed199bb63717e27",
+      "css": "github-circled",
+      "code": 61595,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "5f0f183e241d15cbe486bff88b188dff",
+      "css": "puzzle",
+      "code": 61742,
+      "src": "fontawesome"
+    }
+  ]
+}

src/assets/fonts/fontello.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2017 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="github-circled" unicode="&#xf09b;" d="M429 779q116 0 215-58t156-156 57-215q0-140-82-252t-211-155q-15-3-22 4t-7 17q0 1 0 43t0 75q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 67-44 115 21 51-4 114-16 5-46-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-47 7q-25-63-5-114-44-48-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-21-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l6-13q7-21 24-34t37-17 39-3 31 1l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58z m-267-616q2 4-3 7-6 1-8-1-1-4 4-7 5-3 7 1z m18-19q4 3-1 9-6 5-9 2-4-3 1-9 5-6 9-2z m16-25q6 4 0 11-4 7-9 3-5-3 0-10t9-4z m24-23q4 4-2 10-7 7-11 2-5-5 2-11 6-6 11-1z m32-14q1 6-8 9-8 2-10-4t7-9q8-3 11 4z m35-3q0 7-10 6-9 0-9-6 0-7 10-6 9 0 9 6z m32 5q-1 7-10 5-9-1-8-8t10-4 8 7z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="puzzle" unicode="&#xf12e;" d="M929 237q0-45-25-75t-69-30q-23 0-43 10t-33 21-32 21-39 10q-62 0-62-69 0-22 9-65t8-64v-3q-12 0-18 0-19-2-54-7t-65-7-54-3q-35 0-58 15t-23 47q0 20 9 39t22 32 21 33 10 43q0 44-31 69t-75 25q-47 0-80-26t-33-71q0-24 9-46t18-36 19-30 8-28q0-25-25-50-21-19-65-19-54 0-137 13-5 1-16 2t-15 3l-7 1q-1 0-2 0-1 0-1 1v571q1 0 10-2t19-2 12-2q83-14 137-14 44 0 65 20 25 24 25 49 0 13-8 29t-19 29-18 36-9 47q0 45 33 71t81 25q44 0 74-25t31-69q0-23-10-43t-21-33-22-31-9-40q0-32 23-47t58-14q35 0 100 8t91 9v-1q-1-1-2-9t-3-19-2-12q-13-84-13-137 0-45 19-65 25-26 50-26 12 0 28 8t30 19 36 19 46 8q46 0 71-33t26-80z" horiz-adv-x="928.6" />
+</font>
+</defs>
+</svg>

src/components/Accordion.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="row">
+    <div class="medium-10 medium-offset-1 columns">
+      <h1>{{ msg }}</h1>
+      <ul id="accordion" class="accordion" data-accordion>
+        <li class="accordion-item is-active" data-accordion-item>
+          <a href="#" class="accordion-title">Accordion 1</a>
+          <div class="accordion-content" data-tab-content>
+            If you init Foundation in the component, this will work fine.
+          </div>
+        </li>
+        <li class="accordion-item" data-accordion-item>
+          <a href="#" class="accordion-title">Accordion 2</a>
+          <div class="accordion-content" data-tab-content>
+            I need to be clicked, in order to show up.
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'accordion',
+  mounted() {
+    this.accordion = new Foundation.Accordion($('#accordion'), {
+      // These options can be declarative using the data attributes
+      slideSpeed: 500,
+      multiExpand: true,
+    });
+  },
+  data() {
+    return {
+      msg: 'Accordion',
+    };
+  },
+  destroyed() {
+    this.accordion.destroy();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/AccordionMenu.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="row">
+    <div class="medium-10 medium-offset-1 columns">
+      <h1>{{ msg }}</h1>
+      <ul id="accordion-menu" class="vertical menu" data-accordion-menu>
+        <li>
+          <a>Item 1</a>
+          <ul class="menu vertical nested">
+            <li><a>Item 1A</a></li>
+            <li><a>Item 1B</a></li>
+          </ul>
+        </li>
+        <li><a>Item 2</a></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    this.accordionMenu = new Foundation.AccordionMenu($('#accordion-menu'), {
+      // These options can be declarative using the data attributes
+      slideSpeed: 500,
+      multiOpen: true,
+    });
+  },
+  name: 'accordion-menu',
+  data() {
+    return {
+      msg: 'Accordion Menu',
+    };
+  },
+  destroyed() {
+    this.accordionMenu.destroy();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/DrilldownMenu.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="row">
+    <div class="medium-10 medium-offset-1 columns">
+      <h1>{{ msg }}</h1>
+      <ul id="drilldown" class="vertical menu" data-drilldown>
+        <li>
+          <a>Item 1</a>
+          <ul class="vertical menu">
+            <li><a>Item 1A</a></li>
+            <!-- ... -->
+          </ul>
+        </li>
+        <li><a>Item 2</a></li>
+      </ul>    
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'drilldown',
+  mounted() {
+    this.drilldown = new Foundation.Drilldown($('#drilldown'), {
+      // These options can be declarative using the data attributes
+      animationDuration: 500,
+    });
+  },
+  data() {
+    return {
+      msg: 'Drilldown Menu',
+    };
+  },
+  destroyed() {
+    this.drilldown.destroy();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/Dropdown.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="row">
+    <div class="medium-10 medium-offset-1 columns">
+      <h1>{{ msg }}</h1>
+      <button class="button" type="button" data-toggle="dropdown1">Toggle Dropdown</button>
+      <div class="dropdown-pane" id="dropdown1" data-dropdown data-auto-focus="true">
+        Example form in a dropdown.
+        <form>
+          <div class="row">
+            <div class="medium-6 columns">
+              <label>Name
+                <input type="text" placeholder="Kirk, James T.">
+              </label>
+            </div>
+            <div class="medium-6 columns">
+              <label>Rank
+                <input type="text" placeholder="Captain">
+              </label>
+            </div>
+          </div>
+        </form>
+      </div>
+      <button class="button" type="button" data-toggle="dropdown2">Hoverable Dropdown</button>
+      <div class="dropdown-pane" id="dropdown2" data-dropdown data-hover="true" data-hover-pane="true">
+        v-foundation directive doesn't work here
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'dropdown',
+  mounted() {
+    this.dropdown1 = new Foundation.Dropdown($('#dropdown1'), {
+      // These options can be declarative using the data attributes
+      vOffset: 20,
+    });
+    this.dropdown2 = new Foundation.Dropdown($('#dropdown2'), {
+      hover: true,
+    });
+  },
+  data() {
+    return {
+      msg: 'Dropdown',
+    };
+  },
+  destroyed() {
+    this.dropdown1.destroy();
+    this.dropdown2.destroy();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/DropdownMenu.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="row">
+    <div class="medium-10 medium-offset-1 columns">
+      <h1>{{ msg }}</h1>
+      <ul id="dropdown-menu" class="dropdown menu" data-dropdown-menu>
+        <li>
+          <a>Item 1</a>
+          <ul class="menu">
+            <li><a>Item 1A</a></li>
+            <!-- ... -->
+          </ul>
+        </li>
+        <li><a>Item 2</a></li>
+        <li><a>Item 3</a></li>
+        <li><a>Item 4</a></li>
+      </ul>    
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'dropdown-menu',
+  mounted() {
+    this.dropdownMenu = new Foundation.DropdownMenu($('#dropdown-menu'), {
+      // These options can be declarative using the data attributes
+      hoverDelay: 300,
+    });
+  },
+  data() {
+    return {
+      msg: 'Dropdown Menu',
+    };
+  },
+  destroyed() {
+    this.dropdownMenu.destroy();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/Home.vue

@@ -0,0 +1,137 @@
+<template>
+  <div id="">
+    <div class="row align-center first_window">
+      <div class="column small-12">
+        <div class="intro_text ">
+          <div class="row column text-center">
+            <img class="company_logo" src="../assets/img/logo.png" alt="motion picture solutions logo">
+          </div>       
+          <div class="company_name">Motion Picture Solutions</div>
+          <div class="first_title">Welcome</div>
+          <div class="first_second">to</div>
+          <div class="first_third">MPS.Fun</div>
+          <div class="slogan"><p class="text-center">Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p></div>
+          <br>
+          <div class="row column text-center">
+            <button class="hollow button">PLAY NOW</button>
+          </div>
+          
+        </div>
+      </div>
+      <img class="shades" src="../assets/img/mps-glasses.png" alt="">
+
+    </div>
+    <div class="row align-middle card_info_one">
+        <div class="columns">
+          <h2>Direct KDM Automation</h2>
+          <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
+        </div>
+        <div class="large-6 columns">
+          <img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
+        </div>
+    </div>
+
+        <div class="row align-middle card_info_two">
+            <div class="large-6 columns">
+              <img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
+            </div>
+            <div class="columns">
+              <h2>Direct KDM Automation</h2>
+              <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
+            </div>
+            
+        </div>
+
+        <div class="row align-middle card_info_three">
+            <div class="columns">
+              <h2>Direct KDM Automation</h2>
+              <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
+            </div>
+            <div class="large-6 columns">
+              <img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
+            </div>
+        </div>
+
+        <div class="row align-middle card_info_four">
+            <div class="large-6 columns">
+              <img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
+            </div>
+            <div class="columns">
+              <h2>Direct KDM Automation</h2>
+              <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
+            </div>
+        </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  
+  .image {
+    margin-top: 0.75rem;
+    margin-bottom: 1.5rem;
+  }
+  .company_logo {
+    padding-bottom: 10px;
+  }
+  .company_name {
+    text-align:center;
+    letter-spacing: 16px;
+    text-transform:uppercase;
+  }
+  .first_window {
+    min-height:1060px;
+  }
+  .intro_text {
+    padding-top:rem-calc(250);
+    font-family: 'Lato', sans-serif;
+    color:#fff;
+    .first_title, 
+    .first_third {
+      font-weight:bolder;
+      font-size:rem-calc(120);
+      text-transform:uppercase;
+      text-align:center;
+      line-height:1;
+    }
+    .first_title {
+
+    }
+    .first_second {
+      text-align:center;
+      font-weight:bolder;
+      line-height:0;
+    }
+  }
+  .call-button {
+    border-radius: 20px;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem; 
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+  .shades {
+    position:absolute;
+    bottom:-10;
+
+  }
+
+
+</style>
+
+<script>
+
+export default {
+  name: 'hello',
+  data() {
+    return {
+      msg: 'Vue + Foundation',
+    };
+  },
+  mounted() {
+    // const height = $(window).innerHeight();
+    // document.getElementById('first_window').style.height = height;
+    // console.log(height);
+  },
+};
+</script>
+

src/components/Magellan.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="row">
+    <div class="medium-10 medium-offset-1 columns">
+      <h1>{{ msg }}</h1>
+      <ul id="magellan" class="horizontal menu" data-magellan>
+        <li><a href="#first">First</a></li>
+        <li><a href="#second">Second</a></li>
+        <li><a href="#third">Third</a></li>
+      </ul>
+      <div class="sections">
+        <section id="first" data-magellan-target="first"><span>First Section</span></section>
+        <section id="second" data-magellan-target="second"><span>Second Section</span></section>
+        <section id="third" data-magellan-target="third"><span>Third Section</span></section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'magellan',
+  mounted() {
+    this.magellan = new Foundation.Magellan($('#magellan'), {
+      // These options can be declarative using the data attributes
+      animationEasing: 'swing',
+    });
+  },
+  data() {
+    return {
+      msg: 'Magellan',
+    };
+  },
+  destroyed() {
+    this.magellan.destroy();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  section {
+    min-height: 500px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 1rem;
+    background: $light-gray;
+  }
+
+  span {
+    font-size: 2rem;
+    font-weight: 300;
+  }
+</style>

src/components/MpsGame.vue

@@ -0,0 +1,302 @@
+<template>
+	<div id="game">
+		<div class="modal-overlay">
+			<div class="modal">
+				<h2 class="winner">Well Done!</h2>
+				<button @click="restart" class="restart">Play Again?</button>
+				<p class="share-text">Share it?</p>
+				<ul class="social">
+					<li></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	export default {
+	  name: 'game',
+	  mounted() {
+
+	  },
+	  created() {
+
+	  },
+	  data() {
+	    return {
+	      msg: 'Game',
+	      game: '',
+	      modal: '',
+	      overlay: '',
+	      // restartButton:'',
+	      cardsArray: '',
+	      shuffleCards: '',
+	      card: [
+	      	{
+	      		name: 'mpsOne' ,
+	      		img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
+	      		id: 1,
+	      	},
+	      	{
+	      		name: 'mpsTwo' ,
+	      		img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
+	      		id: 2,
+	      	},
+	      	{
+	      		name: 'mpsThree',
+	      		img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
+	      		id: 3,
+	      	},
+	      	{
+	      		name: 'mpsFour',
+	      		img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
+	      		id: 4,
+	      	},
+	      ],
+	    };
+	  },
+	  destroyed() {
+	    this.accordion.destroy();
+	  },
+	};
+</script>
+<style lang='scss' scoped>
+@import url(http://weloveiconfonts.com/api/?family=brandico);
+
+/* brandico */
+[class*="brandico-"]:before {
+  font-family: 'brandico', sans-serif;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html, body {
+	height: 100%;
+}
+
+body {
+	background: black;
+	min-height: 100%;
+	font-family: "Arial", sans-serif;
+}
+
+.wrap {
+  position: relative;
+  height: 100%;
+  min-height: 500px;
+  padding-bottom: 20px;
+}
+
+.game {
+	transform-style: preserve-3d;
+	perspective: 500px;
+	min-height: 100%;
+  height: 100%;
+}
+
+@mixin width($max){
+	@media (max-width: $max){
+		@content;
+	}
+}
+
+@keyframes matchAnim {
+	0% {
+		background: #bcffcc;
+	}
+	100% {
+		background: white;
+	}
+}
+
+.card {
+  float: left;
+  width: 16.66666%;
+  height: 25%;
+  padding: 5px;
+  text-align: center;
+	display: block;
+	perspective: 500px;
+	position: relative;
+	cursor: pointer;
+  z-index: 50; 
+	-webkit-tap-highlight-color: rgba(0,0,0,0);  
+	@include width(800px){
+		width: 25%;
+		height: 16.666%;
+	}
+  
+	.inside {
+		width: 100%;
+		height: 100%;
+		display: block;
+		transform-style: preserve-3d;
+		transition: .4s ease-in-out;
+		background: white;
+
+		&.picked, &.matched {
+			transform: rotateY(180deg);
+		}
+		&.matched {
+			animation: 1s matchAnim ease-in-out;
+			animation-delay: .4s;
+		}
+	}
+  
+  .front, .back {
+  	border: 1px solid black;
+  	backface-visibility: hidden;
+  	position: absolute;
+  	top: 0;
+  	left: 0;
+  	width: 100%;
+  	height: 100%;
+  	padding: 20px;
+
+  	img {
+  		max-width: 100%;
+  		display: block;
+  		margin: 0 auto;
+  		max-height: 100%;
+  	}
+  }
+  .front {
+  	transform: rotateY(-180deg);
+  	@include width(800px){
+  		padding: 5px;
+  	}
+  }
+  .back{
+		@include width(800px){
+  		padding: 10px;
+  	}
+  }
+}
+
+.modal-overlay {
+	display: none;
+	background: rgba(0,0,0,.8);
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.modal {
+	display: none;
+	position: relative;
+	width: 500px;
+	height: 400px;
+	max-height: 90%;
+	max-width: 90%;
+	min-height: 380px;
+	margin: 0 auto;
+	background: white;
+	top: 50%;
+	transform: translateY(-50%);
+	padding: 30px 10px;
+	.winner {
+		font-size: 80px;
+		text-align: center;
+		font-family: "Anton", sans-serif;
+		color: #4d4d4d;
+		text-shadow: 0px 3px 0 black;
+		@include width(480px){
+			font-size: 60px;
+		}
+	}
+	.restart {
+		font-family: "Anton", sans-serif;
+		margin: 30px auto;
+		padding: 20px 30px;
+		display: block;
+		font-size: 30px;
+		border: none;
+		background: #4d4d4d;
+		background: linear-gradient(#4d4d4d, #222);
+		border: 1px solid #222;
+		border-radius: 5px;
+		color: white;
+		text-shadow: 0px 1px 0 black;
+		cursor: pointer;
+		&:hover {
+			background: linear-gradient(#222, black);
+		}
+	}
+	.message {
+		text-align: center;
+		a {
+			text-decoration: none;
+			color: #28afe6;
+			font-weight: bold;
+			&:hover {
+				$c: lighten(#28afe6, 10%);
+				color: $c;
+				border-bottom: 1px dotted $c;
+			}
+		}
+	}
+	.share-text {
+		text-align: center;
+		margin: 10px auto;
+	}
+	.social {
+		margin: 20px auto;
+		text-align: center;
+		li {
+			display: inline-block;
+			height: 50px;
+			width: 50px;
+			margin-right: 10px;
+			&:last-child {
+				margin-right: 0;
+			}
+			a {
+				display: block;
+				line-height: 50px;
+				font-size: 20px;
+				color: white;
+				text-decoration: none;
+				border-radius: 5px;
+				&.facebook {
+					background: #3b5998;
+					&:hover {
+						background: lighten(#3b5998, 10%);
+					}
+				}
+				&.google {
+					background: #D34836;
+					&:hover {
+						background: lighten(#D34836, 10%);
+					}
+				}
+				&.twitter {
+					background: #4099FF;
+					&:hover {
+						background: lighten(#4099FF, 10%);
+					}
+				}
+			}
+		}
+	}
+}
+
+footer {
+	height: 20px;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+  z-index: 0;
+	.disclaimer {
+		line-height: 20px;
+		font-size: 12px;
+		color: #727272;
+		text-align: center;
+		@include width(767px){
+			font-size: 8px;
+		}
+	}
+}
+</style>

src/components/Orbit.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="row">
+    <div class="medium-10 medium-offset-1 columns">
+      <h1>{{ msg }}</h1>
+      <div id="orbit" class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
+        <ul class="orbit-container">
+          <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
+          <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
+          <li class="is-active orbit-slide">
+            <img class="orbit-image" src="../assets/img/orbit/01.jpg" alt="Space">
+            <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
+          </li>
+          <li class="orbit-slide">
+            <img class="orbit-image" src="../assets/img/orbit/02.jpg" alt="Space">
+            <figcaption class="orbit-caption">Lets Rocket!</figcaption>
+          </li>
+          <li class="orbit-slide">
+            <img class="orbit-image" src="../assets/img/orbit/03.jpg" alt="Space">
+            <figcaption class="orbit-caption">Encapsulating</figcaption>
+          </li>
+          <li class="orbit-slide">
+            <img class="orbit-image" src="../assets/img/orbit/04.jpg" alt="Space">
+            <figcaption class="orbit-caption">Outta This World</figcaption>
+          </li>
+        </ul>
+        <nav class="orbit-bullets">
+          <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+          <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
+          <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
+          <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
+        </nav>
+      </div>    
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'orbit',
+  mounted() {
+    this.orbit = new Foundation.Orbit($('#orbit'), {
+      // These options can be declarative using the data attributes
+      timerDelay: 2000,
+    });
+  },
+  data() {
+    return {
+      msg: 'Orbit',
+    };
+  },
+  destroyed() {
+    this.orbit.destroy();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/Reveal.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="row">
+    <div class="medium-10 medium-offset-1 columns">
+      <h1>{{ msg }}</h1>
+      <div id="reveal-dialog" class="reveal" data-reveal>
+        <h1>Awesome. I Have It.</h1>
+        <p class="lead">Your couch. It is mine.</p>
+        <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
+        <button class="close-button" data-close aria-label="Close modal" type="button">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <p><a v-on:click="openReveal()">Click me for a modal</a></p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'reveal',
+  mounted() {
+    this.reveal = new Foundation.Reveal($('#reveal-dialog'), {
+      // These options can be declarative using the data attributes
+      animationIn: 'scale-in-up',
+    });
+  },
+  data() {
+    return {
+      msg: 'Reveal',
+    };
+  },
+  methods: {
+    // Added the below openReveal method for two reasons:
+    // 1) There was a bug preventing the reveal from working once
+    // you navigated away and back to the reveal component.
+    // 2) Most dialogs will need to be opened using code.
+    openReveal() {
+      this.reveal.open();
+    },
+  },
+  destroyed() {
+    this.reveal.destroy();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/Slider.vue

@@ -0,0 +1,43 @@
+
+<template>
+  <div class="row">
+    <div class="medium-10 medium-offset-1 columns">
+      <h1>{{ msg }}</h1>  
+      <div id="slider" class="slider" data-slider v-bind:data-initial-start="this.dataValue" v-bind:data-end="this.dataEnd">
+        <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
+        <span class="slider-fill" data-slider-fill></span>
+        <input type="hidden" class="slider-input">
+      </div>
+      <p>Value: {{ dataValue }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'slider',
+  mounted() {
+    this.slider = new Foundation.Slider($('#slider'), {
+      // These options can be declarative using the data attributes
+      step: 10,
+    });
+    this.slider.$element.on('moved.zf.slider', () => {
+      this.dataValue = this.slider.inputs.val();
+    });
+  },
+  data() {
+    return {
+      msg: 'Slider',
+      dataValue: 50,
+      dataEnd: 200,
+    };
+  },
+  destroyed() {
+    this.slider.destroy();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/Tabs.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="row">
+    <div class="medium-10 medium-offset-1 columns">
+      <h1>{{ msg }}</h1>
+      <ul id="tabs" class="tabs" data-tabs>
+        <li class="tabs-title is-active"><a href="#panel1d" aria-selected="true">Tab 1</a></li>
+        <li class="tabs-title"><a href="#panel2d">Tab 2</a></li>
+        <li class="tabs-title"><a href="#panel3d">Tab 3</a></li>
+      </ul>
+    
+      <div class="tabs-content" data-tabs-content="tabs">
+        <div class="tabs-panel is-active" id="panel1d">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </div>
+        <div class="tabs-panel" id="panel2d">
+          <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
+        </div>
+        <div class="tabs-panel" id="panel3d">
+          <p>Curabitur sit amet dolor vitae justo vulputate semper in quis ipsum. Proin dignissim, eros vitae aliquet pellentesque, tortor odio molestie felis, in tempor lectus metus nec lacus.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tabs',
+  mounted() {
+    this.tabs = new Foundation.Tabs($('#tabs'), {
+      // These options can be declarative using the data attributes
+      matchHeight: false,
+    });
+  },
+  data() {
+    return {
+      msg: 'Tabs',
+    };
+  },
+  destroyed() {
+    this.tabs.destroy();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/Tooltip.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="row">
+    <div class="medium-10 medium-offset-1 columns">
+      <h1>{{ msg }}</h1>
+      <p>
+      The <span data-tooltip aria-haspopup="true" class="has-tip" tabindex="1" title="Fancy word for a beetle.">scarabaeus</span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tooltip',
+  mounted() {
+    // The following code works however only if showOn: 'all' is set.
+    // This is a known bug: https://github.com/zurb/foundation-sites/issues/7554
+    // Until this bug is fixed, Use the selector method
+    // this.tooltip = new Foundation.Tooltip($('.has-tip'), {
+    //   // These options can be declarative using the data attributes
+    //   showOn: 'all',
+    // });
+
+    // Selector method
+    this.tooltip = $('.has-tip').foundation();
+  },
+  data() {
+    return {
+      msg: 'Tooltip',
+    };
+  },
+  destroyed() {
+    // Due to Selector Method destroy is disabled
+    // this.tooltip.destroy();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/main.js

@@ -0,0 +1,21 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import jQuery from 'jquery';
+import Vue from 'vue';
+import App from './App';
+import router from './router';
+
+window.jQuery = jQuery;
+window.$ = jQuery;
+
+require('motion-ui');
+require('what-input');
+require('foundation-sites');
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  template: '<App/>',
+  components: { App },
+});

src/router/index.js

@@ -0,0 +1,37 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+
+// Components
+import Home from '@/components/Home';
+import Reveal from '@/components/Reveal';
+import Slider from '@/components/Slider';
+import Tooltip from '@/components/Tooltip';
+import DropdownMenu from '@/components/DropdownMenu';
+import DrilldownMenu from '@/components/DrilldownMenu';
+import AccordionMenu from '@/components/AccordionMenu';
+import Magellan from '@/components/Magellan';
+import Accordion from '@/components/Accordion';
+import Dropdown from '@/components/Dropdown';
+import Tabs from '@/components/Tabs';
+import Orbit from '@/components/Orbit';
+
+Vue.use(Router);
+
+export default new Router({
+  linkActiveClass: 'active',
+  routes: [
+    // routes
+    { name: 'home', path: '/', component: Home },
+    { name: 'reveal', path: '/reveal', component: Reveal },
+    { name: 'slider', path: '/slider', component: Slider },
+    { name: 'tooltip', path: '/tooltip', component: Tooltip },
+    { name: 'dropdown-menu', path: '/dropdown-menu', component: DropdownMenu },
+    { name: 'drilldown-menu', path: '/drilldown-menu', component: DrilldownMenu },
+    { name: 'accordion-menu', path: '/accordion-menu', component: AccordionMenu },
+    { name: 'magellan', path: '/magellan', component: Magellan },
+    { name: 'accordion', path: '/accordion', component: Accordion },
+    { name: 'dropdown', path: '/dropdown', component: Dropdown },
+    { name: 'tabs', path: '/tabs', component: Tabs },
+    { name: 'orbit', path: '/orbit', component: Orbit },
+  ],
+});

src/styles/_icons.scss

@@ -0,0 +1,60 @@
+@font-face {
+  font-family: 'fontello';
+  src: url('./assets/fonts/fontello.eot?11465456');
+  src: url('./assets/fonts/fontello.eot?11465456#iefix') format('embedded-opentype'),
+       url('./assets/fonts/fontello.woff2?11465456') format('woff2'),
+       url('./assets/fonts/fontello.woff?11465456') format('woff'),
+       url('./assets/fonts/fontello.ttf?11465456') format('truetype'),
+       url('./assets/fonts/fontello.svg?11465456#fontello') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'fontello';
+    src: url('../font/fontello.svg?21286189#fontello') format('svg');
+  }
+}
+*/
+ 
+[class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "fontello";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+ 
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+ 
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+ 
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+ 
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+ 
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+ 
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+ 
+.icon-github-circled:before { content: '\f09b'; } /* '' */
+.icon-puzzle:before { content: '\f12e'; } /* '' */

src/styles/_settings.scss

@@ -0,0 +1,625 @@
+//  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. Forms
+//  20. Label
+//  21. Media Object
+//  22. Menu
+//  23. Meter
+//  24. Off-canvas
+//  25. Orbit
+//  26. Pagination
+//  27. Progress Bar
+//  28. Responsive Embed
+//  29. Reveal
+//  30. Slider
+//  31. Switch
+//  32. Table
+//  33. Tabs
+//  34. Thumbnail
+//  35. Title Bar
+//  36. Tooltip
+//  37. Top Bar
+
+// [Vue-Foundation] This doesn't work here
+// @import 'util/util';
+
+// [Vue-Foundation] This does
+@import '~foundation-sites/scss/util/util';
+
+// 1. Global
+// ---------
+
+$global-font-size: 100%;
+$global-width: rem-calc(1200);
+$global-lineheight: 1.5;
+$foundation-palette: (
+  primary: #FBDC00,
+  secondary: #34495e,
+  success: #4fc08d,
+  warning: #FCB738,
+  alert: #DA5961,
+);
+$light-gray: #f8f8f8;
+$medium-gray: #cacaca;
+$dark-gray: #727f80;
+$black: #2c3e50;
+$white: #ffffff;
+$body-background: $white;
+$body-font-color: $black;
+$body-font-family: 'Source Sans Pro', Helvetica, Roboto, Arial, sans-serif;
+$body-antialiased: true;
+$global-margin: 1rem;
+$global-padding: 1rem;
+$global-weight-normal: normal;
+$global-weight-bold: bold;
+$global-radius: 0;
+$global-text-direction: ltr;
+$global-flexbox: false;
+$print-transparent-backgrounds: true;
+
+@include add-foundation-colors;
+
+// 2. Breakpoints
+// --------------
+
+$breakpoints: (
+  small: 0,
+  medium: 640px,
+  large: 1024px,
+  xlarge: 1200px,
+  xxlarge: 1440px,
+);
+$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;
+$block-grid-max: 8;
+
+// 4. Base Typography
+// ------------------
+
+$header-font-family: $body-font-family;
+$header-font-weight: 300;
+$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;
+$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);
+$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;
+$cite-font-size: rem-calc(13);
+$cite-color: $dark-gray;
+$cite-pseudo-content: '\2014 \0020';
+$keystroke-font: $font-family-monospace;
+$keystroke-color: $black;
+$keystroke-background: $light-gray;
+$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;
+
+// 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-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-arrows: true;
+$accordionmenu-arrow-color: $primary-color;
+$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-slash: true;
+
+// 11. Button
+// ----------
+
+$button-padding: 0.85em 1em;
+$button-margin: 0 0 $global-margin 0;
+$button-fill: solid;
+$button-background: $primary-color;
+$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-color: $white;
+$button-color-alt: $black;
+$button-radius: $global-radius;
+$button-sizes: (
+  tiny: 0.6rem,
+  small: 0.75rem,
+  default: 0.9rem,
+  large: 1.25rem,
+);
+$button-palette: $foundation-palette;
+$button-opacity-disabled: 0.25;
+$button-background-hover-lightness: -20%;
+$button-hollow-hover-lightness: -50%;
+$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
+
+// 12. Button Group
+// ----------------
+
+$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-padding: 1rem;
+$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: $global-margin;
+
+// 15. Close Button
+// ----------------
+
+$closebutton-position: right top;
+$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-arrow-color: $primary-color;
+$drilldown-arrow-size: 6px;
+$drilldown-background: $white;
+
+// 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-min-width: 200px;
+$dropdownmenu-background: $white;
+$dropdownmenu-border: 1px solid $medium-gray;
+
+// 19. Forms
+// ---------
+
+$fieldset-border: 1px solid $medium-gray;
+$fieldset-padding: rem-calc(20);
+$fieldset-margin: rem-calc(18 0);
+$legend-padding: rem-calc(0 3);
+$form-spacing: rem-calc(16);
+$helptext-color: $black;
+$helptext-font-size: rem-calc(13);
+$helptext-font-style: italic;
+$input-prefix-color: $black;
+$input-prefix-background: $light-gray;
+$input-prefix-border: 1px solid $medium-gray;
+$input-prefix-padding: 1rem;
+$form-label-color: $black;
+$form-label-font-size: rem-calc(14);
+$form-label-font-weight: $global-weight-normal;
+$form-label-line-height: 1.8;
+$select-background: $white;
+$select-triangle-color: $dark-gray;
+$select-radius: $global-radius;
+$input-color: $black;
+$input-placeholder-color: $medium-gray;
+$input-font-family: inherit;
+$input-font-size: rem-calc(16);
+$input-font-weight: $global-weight-normal;
+$input-background: $white;
+$input-background-focus: $white;
+$input-background-disabled: $light-gray;
+$input-border: 1px solid $medium-gray;
+$input-border-focus: 1px solid $dark-gray;
+$input-shadow: inset 0 1px 2px rgba($black, 0.1);
+$input-shadow-focus: 0 0 5px $medium-gray;
+$input-cursor-disabled: not-allowed;
+$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+$input-number-spinners: true;
+$input-radius: $global-radius;
+$form-button-radius: $global-radius;
+
+// 20. Label
+// ---------
+
+$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;
+
+// 21. Media Object
+// ----------------
+
+$mediaobject-margin-bottom: $global-margin;
+$mediaobject-section-padding: $global-padding;
+$mediaobject-image-width-stacked: 100%;
+
+// 22. Menu
+// --------
+
+$menu-margin: 0;
+$menu-margin-nested: 1rem;
+$menu-item-padding: 0.7rem 1rem;
+$menu-item-color-active: $white;
+$menu-item-background-active: get-color(primary);
+$menu-icon-spacing: 0.25rem;
+$menu-item-background-hover: $light-gray;
+$menu-border: $light-gray;
+
+// 23. Meter
+// ---------
+
+$meter-height: 1rem;
+$meter-radius: $global-radius;
+$meter-background: $medium-gray;
+$meter-fill-good: $success-color;
+$meter-fill-medium: $warning-color;
+$meter-fill-bad: $alert-color;
+
+// 24. Off-canvas
+// --------------
+
+$offcanvas-size: 250px;
+$offcanvas-vertical-size: 250px;
+$offcanvas-background: $light-gray;
+$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
+$offcanvas-push-zindex: 1;
+$offcanvas-overlap-zindex: 10;
+$offcanvas-reveal-zindex: 1;
+$offcanvas-transition-length: 0.5s;
+$offcanvas-transition-timing: ease;
+$offcanvas-fixed-reveal: true;
+$offcanvas-exit-background: rgba($white, 0.25);
+$maincontent-class: 'off-canvas-content';
+
+// 25. Orbit
+// ---------
+
+$orbit-bullet-background: $medium-gray;
+$orbit-bullet-background-active: $dark-gray;
+$orbit-bullet-diameter: 1.2rem;
+$orbit-bullet-margin: 0.1rem;
+$orbit-bullet-margin-top: 0.8rem;
+$orbit-bullet-margin-bottom: 0.8rem;
+$orbit-caption-background: rgba($black, 0.5);
+$orbit-caption-padding: 1rem;
+$orbit-control-background-hover: rgba($black, 0.5);
+$orbit-control-padding: 1rem;
+$orbit-control-zindex: 10;
+
+// 26. Pagination
+// --------------
+
+$pagination-font-size: rem-calc(14);
+$pagination-margin-bottom: $global-margin;
+$pagination-item-color: $black;
+$pagination-item-padding: rem-calc(3 10);
+$pagination-item-spacing: rem-calc(1);
+$pagination-radius: $global-radius;
+$pagination-item-background-hover: $light-gray;
+$pagination-item-background-current: $primary-color;
+$pagination-item-color-current: $white;
+$pagination-item-color-disabled: $medium-gray;
+$pagination-ellipsis-color: $black;
+$pagination-mobile-items: false;
+$pagination-mobile-current-item: false;
+$pagination-arrows: true;
+
+// 27. Progress Bar
+// ----------------
+
+$progress-height: 1rem;
+$progress-background: $medium-gray;
+$progress-margin-bottom: $global-margin;
+$progress-meter-background: $primary-color;
+$progress-radius: $global-radius;
+
+// 28. Responsive Embed
+// --------------------
+
+$responsive-embed-margin-bottom: rem-calc(16);
+$responsive-embed-ratios: (
+  default: 4 by 3,
+  widescreen: 16 by 9,
+);
+
+// 29. 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);
+
+// 30. 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;
+
+// 31. 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;
+
+// 32. 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;
+
+// 33. Tabs
+// --------
+
+$tab-margin: 0;
+$tab-background: $white;
+$tab-color: $primary-color;
+$tab-background-active: $light-gray;
+$tab-active-color: $primary-color;
+$tab-item-font-size: rem-calc(12);
+$tab-item-background-hover: $white;
+$tab-item-padding: 1.25rem 1.5rem;
+$tab-expand-max: 6;
+$tab-content-background: $white;
+$tab-content-border: $light-gray;
+$tab-content-color: $body-font-color;
+$tab-content-padding: 1rem;
+
+// 34. Thumbnail
+// -------------
+
+$thumbnail-border: solid 4px $white;
+$thumbnail-margin-bottom: $global-margin;
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+$thumbnail-transition: box-shadow 200ms ease-out;
+$thumbnail-radius: $global-radius;
+
+// 35. 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;
+
+// 36. Tooltip
+// -----------
+
+$has-tip-font-weight: $global-weight-bold;
+$has-tip-border-bottom: dotted 1px $dark-gray;
+$tooltip-background-color: $black;
+$tooltip-color: $white;
+$tooltip-padding: 0.75rem;
+$tooltip-font-size: $small-font-size;
+$tooltip-pip-width: 0.75rem;
+$tooltip-pip-height: $tooltip-pip-width * 0.866;
+$tooltip-radius: $global-radius;
+
+// 37. Top Bar
+// -----------
+
+$topbar-padding: 0.5rem;
+$topbar-background: $secondary-color;
+$topbar-submenu-background: $topbar-background;
+$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
+$topbar-input-width: 200px;
+$topbar-unstack-breakpoint: medium;
+

src/styles/app.scss

@@ -0,0 +1,7 @@
+// This file gets imported in every component by the scss cssLoader (see build/utils.js)
+// https://github.com/vuejs/vue-loader/issues/328
+
+// Load custom Foundation variables
+@import "./settings";
+// Load Foundation
+@import "~foundation-sites/scss/foundation";

src/styles/global.scss

@@ -0,0 +1,8 @@
+// Source Sans Pro font
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600');
+// Init Foundation
+@include foundation-everything(true); 
+// Load icon fonts
+@import './icons';
+// Import Motion UI
+@import '~motion-ui/dist/motion-ui';