Initial start of Buttons Computer on its own project.

.gitignore

@@ -1,97 +1,7 @@
-# ---> Node
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
-.nuxt
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-
-# FuseBox cache
-.fusebox/
-
-# ---> Vim
-# Swap
-[._]*.s[a-v][a-z]
-[._]*.sw[a-p]
-[._]s[a-rt-v][a-z]
-[._]ss[a-gi-z]
-[._]sw[a-p]
-
-# Session
-Session.vim
-
-# Temporary
-.netrwhist
-*~
-# Auto-generated tag files
-tags
-# Persistent undo
-[._]*.un~
-
+.DS_Store
+/node_modules/
+/src/node_modules/@sapper/
+yarn-error.log
+/cypress/screenshots/
+/__sapper__/
+.*.sw*

README.md

@@ -1,3 +1,111 @@
-# buttons-computer
+# sapper-template
 
-The code for the little button clicks only programming language.
+The default [Sapper](https://github.com/sveltejs/sapper) template, available for Rollup and webpack.
+
+
+## Getting started
+
+
+### Using `degit`
+
+[`degit`](https://github.com/Rich-Harris/degit) is a scaffolding tool that lets you create a directory from a branch in a repository. Use either the `rollup` or `webpack` branch in `sapper-template`:
+
+```bash
+# for Rollup
+npx degit "sveltejs/sapper-template#rollup" my-app
+# for webpack
+npx degit "sveltejs/sapper-template#webpack" my-app
+```
+
+
+### Using GitHub templates
+
+Alternatively, you can use GitHub's template feature with the [sapper-template-rollup](https://github.com/sveltejs/sapper-template-rollup) or [sapper-template-webpack](https://github.com/sveltejs/sapper-template-webpack) repositories.
+
+
+### Running the project
+
+However you get the code, you can install dependencies and run the project in development mode with:
+
+```bash
+cd my-app
+npm install # or yarn
+npm run dev
+```
+
+Open up [localhost:3000](http://localhost:3000) and start clicking around.
+
+Consult [sapper.svelte.dev](https://sapper.svelte.dev) for help getting started.
+
+
+## Structure
+
+Sapper expects to find two directories in the root of your project —  `src` and `static`.
+
+
+### src
+
+The [src](src) directory contains the entry points for your app — `client.js`, `server.js` and (optionally) a `service-worker.js` — along with a `template.html` file and a `routes` directory.
+
+
+#### src/routes
+
+This is the heart of your Sapper app. There are two kinds of routes — *pages*, and *server routes*.
+
+**Pages** are Svelte components written in `.svelte` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel. (Sapper will preload and cache the code for these subsequent pages, so that navigation is instantaneous.)
+
+**Server routes** are modules written in `.js` files, that export functions corresponding to HTTP methods. Each function receives Express `request` and `response` objects as arguments, plus a `next` function. This is useful for creating a JSON API, for example.
+
+There are three simple rules for naming the files that define your routes:
+
+* A file called `src/routes/about.svelte` corresponds to the `/about` route. A file called `src/routes/blog/[slug].svelte` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to the route
+* The file `src/routes/index.svelte` (or `src/routes/index.js`) corresponds to the root of your app. `src/routes/about/index.svelte` is treated the same as `src/routes/about.svelte`.
+* Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `src/routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route
+
+
+### static
+
+The [static](static) directory contains any static assets that should be available. These are served using [sirv](https://github.com/lukeed/sirv).
+
+In your [service-worker.js](src/service-worker.js) file, you can import these as `files` from the generated manifest...
+
+```js
+import { files } from '@sapper/service-worker';
+```
+
+...so that you can cache them (though you can choose not to, for example if you don't want to cache very large files).
+
+
+## Bundler config
+
+Sapper uses Rollup or webpack to provide code-splitting and dynamic imports, as well as compiling your Svelte components. With webpack, it also provides hot module reloading. As long as you don't do anything daft, you can edit the configuration files to add whatever plugins you'd like.
+
+
+## Production mode and deployment
+
+To start a production version of your app, run `npm run build && npm start`. This will disable live reloading, and activate the appropriate bundler plugins.
+
+You can deploy your application to any environment that supports Node 10 or above. As an example, to deploy to [Vercel Now](https://vercel.com) when using `sapper export`, run these commands:
+
+```bash
+npm install -g vercel
+vercel
+```
+
+If your app can't be exported to a static site, you can use the [now-sapper](https://github.com/thgh/now-sapper) builder. You can find instructions on how to do so in its [README](https://github.com/thgh/now-sapper#basic-usage).
+
+
+## Using external components
+
+When using Svelte components installed from npm, such as [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list), Svelte needs the original component source (rather than any precompiled JavaScript that ships with the component). This allows the component to be rendered server-side, and also keeps your client-side app smaller.
+
+Because of that, it's essential that the bundler doesn't treat the package as an *external dependency*. You can either modify the `external` option under `server` in [rollup.config.js](rollup.config.js) or the `externals` option in [webpack.config.js](webpack.config.js), or simply install the package to `devDependencies` rather than `dependencies`, which will cause it to get bundled (and therefore compiled) with your app:
+
+```bash
+npm install -D @sveltejs/svelte-virtual-list
+```
+
+
+## Bugs and feedback
+
+Sapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the [Sapper issue tracker](https://github.com/sveltejs/sapper/issues).

cypress.json

@@ -0,0 +1,4 @@
+{
+	"baseUrl": "http://localhost:3000",
+	"video": false
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/spec.js

@@ -0,0 +1,19 @@
+describe('Sapper template app', () => {
+	beforeEach(() => {
+		cy.visit('/')
+	});
+
+	it('has the correct <h1>', () => {
+		cy.contains('h1', 'Great success!')
+	});
+
+	it('navigates to /about', () => {
+		cy.get('nav a').contains('about').click();
+		cy.url().should('include', '/about');
+	});
+
+	it('navigates to /blog', () => {
+		cy.get('nav a').contains('blog').click();
+		cy.url().should('include', '/blog');
+	});
+});

cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

ecosystem.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  apps : [
+  {
+    name: 'gulp',
+    script: 'gulp',
+    instances: 1,
+    autorestart: true,
+    watch: false,
+    max_memory_restart: '1G',
+    env: {
+      NODE_ENV: 'development'
+    },
+    env_production: {
+      NODE_ENV: 'production'
+    }
+  },
+  ],
+};
+
+

gulpfile.js

@@ -0,0 +1,35 @@
+const gulp = require('gulp');
+const autoprefixer = require('gulp-autoprefixer');
+const cleancss = require('gulp-clean-css');
+const csscomb = require('gulp-csscomb');
+const rename = require('gulp-rename');
+const sass = require('gulp-sass');
+
+let paths = {
+  source: './sass/*.scss',
+};
+
+const styles = () => {
+  return gulp.src(paths.source)
+	.pipe(sass({outputStyle: 'compact', precision: 10})
+	  .on('error', sass.logError)
+	)
+	.pipe(autoprefixer())
+	.pipe(csscomb())
+	.pipe(cleancss())
+	.pipe(rename({
+	  suffix: '.min'
+	}))
+	.pipe(gulp.dest('./static/css/'));
+};
+
+
+const auto = () => {
+  return gulp.watch(['./**/*.scss'], styles);
+}
+
+module.exports = {
+  styles,
+  default: auto
+};
+

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "TODO",
+  "description": "TODO",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "sapper dev",
+    "build": "sapper build --legacy",
+    "export": "sapper export --legacy",
+    "start": "node __sapper__/build",
+    "cy:run": "cypress run",
+    "cy:open": "cypress open",
+    "test": "run-p --race dev cy:run"
+  },
+  "dependencies": {
+    "compression": "^1.7.1",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^7.0.1",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-csscomb": "^3.1.0",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^4.1.0",
+    "pm2": "^4.4.1",
+    "polka": "next",
+    "randomcolor": "^0.6.2",
+    "sirv": "^1.0.0",
+    "svelte-preprocess": "^4.1.2"
+  },
+  "devDependencies": {
+    "npm-run-all": "^4.1.5",
+    "sapper": "^0.28.0",
+    "svelte": "^3.17.3",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/runtime": "^7.0.0",
+    "@rollup/plugin-babel": "^5.0.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-node-resolve": "^8.0.0",
+    "@rollup/plugin-replace": "^2.2.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-svelte": "^6.0.0",
+    "rollup-plugin-terser": "^7.0.0"
+  }
+}

rollup.config.js

@@ -0,0 +1,111 @@
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import commonjs from '@rollup/plugin-commonjs';
+import svelte from 'rollup-plugin-svelte';
+import babel from '@rollup/plugin-babel';
+import { terser } from 'rollup-plugin-terser';
+import config from 'sapper/config/rollup.js';
+import pkg from './package.json';
+import sveltePreprocess from 'svelte-preprocess';
+
+const preprocopts = {};
+
+
+const mode = process.env.NODE_ENV;
+const dev = mode === 'development';
+const legacy = !!process.env.SAPPER_LEGACY_BUILD;
+
+const onwarn = (warning, onwarn) =>
+  (warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
+    (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) ||
+    onwarn(warning);
+
+export default {
+  client: {
+    input: config.client.input(),
+    output: config.client.output(),
+    plugins: [
+      replace({
+        'process.browser': true,
+        'process.env.NODE_ENV': JSON.stringify(mode)
+      }),
+      svelte({
+        dev,
+        hydratable: true,
+        emitCss: true,
+        preprocess: sveltePreprocess(preprocopts)
+      }),
+      resolve({
+        browser: true,
+        dedupe: ['svelte']
+      }),
+      commonjs(),
+
+      legacy && babel({
+        extensions: ['.js', '.mjs', '.html', '.svelte'],
+        babelHelpers: 'runtime',
+        exclude: ['node_modules/@babel/**'],
+        presets: [
+          ['@babel/preset-env', {
+            targets: '> 0.25%, not dead'
+          }]
+        ],
+        plugins: [
+          '@babel/plugin-syntax-dynamic-import',
+          ['@babel/plugin-transform-runtime', {
+            useESModules: true
+          }]
+        ]
+      }),
+
+      !dev && terser({
+        module: true
+      })
+    ],
+
+    preserveEntrySignatures: false,
+    onwarn,
+  },
+
+  server: {
+    input: config.server.input(),
+    output: config.server.output(),
+    plugins: [
+      replace({
+        'process.browser': false,
+        'process.env.NODE_ENV': JSON.stringify(mode)
+      }),
+      svelte({
+        generate: 'ssr',
+        hydratable: true,
+        dev,
+        preprocess: sveltePreprocess(preprocopts)
+      }),
+      resolve({
+        dedupe: ['svelte']
+      }),
+      commonjs()
+    ],
+    external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),
+
+    preserveEntrySignatures: 'strict',
+    onwarn,
+  },
+
+  serviceworker: {
+    input: config.serviceworker.input(),
+    output: config.serviceworker.output(),
+    plugins: [
+      resolve(),
+      replace({
+        'process.browser': true,
+        'process.env.NODE_ENV': JSON.stringify(mode)
+      }),
+      commonjs(),
+      !dev && terser()
+    ],
+
+    preserveEntrySignatures: false,
+    onwarn,
+  }
+};

sass/_accordions.scss

@@ -0,0 +1,38 @@
+// Accordions
+.accordion {
+  input:checked ~,
+  &[open] {
+    & .accordion-header {
+      .icon {
+        transform: rotate(90deg);
+      }
+    }
+
+    & .accordion-body {
+      max-height: 50rem;
+    }
+  }
+
+  .accordion-header {
+    display: block;
+    padding: $unit-1 $unit-2;
+
+    .icon {
+      transition: transform .25s;
+    }
+  }
+
+  .accordion-body {
+    margin-bottom: $layout-spacing;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height .25s;
+  }
+}
+
+// Remove default details marker in Webkit
+summary.accordion-header {
+  &::-webkit-details-marker {
+    display: none;
+  }
+}

sass/_animations.scss

@@ -0,0 +1,20 @@
+// Animations
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-$unit-8);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

sass/_autocomplete.scss

@@ -0,0 +1,47 @@
+// Autocomplete
+.form-autocomplete {
+  position: relative;
+
+  .form-autocomplete-input {
+    align-content: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+    min-height: $unit-8;
+    padding: $unit-h;
+
+    &.is-focused {
+      @include control-shadow();
+      border-color: $primary-color;
+    }
+
+    .form-input {
+      border-color: transparent;
+      box-shadow: none;
+      display: inline-block;
+      flex: 1 0 auto;
+      height: $unit-6;
+      line-height: $unit-4;
+      margin: $unit-h;
+      width: auto;
+    }
+  }
+
+  .menu {
+    left: 0;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+  }
+
+  &.autocomplete-oneline {
+    .form-autocomplete-input {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+    }
+
+    .chip {
+      flex: 1 0 auto;
+    }
+  }
+}

sass/_avatars.scss

@@ -0,0 +1,77 @@
+// Avatars
+.avatar {
+  @include avatar-base();
+  background: $primary-color;
+  border-radius: 50%;
+  color: rgba($light-color, .85);
+  display: inline-block;
+  font-weight: 300;
+  line-height: 1.25;
+  margin: 0;
+  position: relative;
+  vertical-align: middle;
+
+  &.avatar-xs {
+    @include avatar-base($unit-4);
+  }
+  &.avatar-sm {
+    @include avatar-base($unit-6);
+  }
+  &.avatar-lg {
+    @include avatar-base($unit-12);
+  }
+  &.avatar-xl {
+    @include avatar-base($unit-16);
+  }
+
+  img {
+    border-radius: 50%;
+    height: 100%;
+    position: relative;
+    width: 100%;
+    z-index: $zindex-0;
+  }
+
+  .avatar-icon,
+  .avatar-presence {
+    background: $bg-color-light;
+    bottom: 14.64%;
+    height: 50%;
+    padding: $border-width-lg;
+    position: absolute;
+    right: 14.64%;
+    transform: translate(50%, 50%);
+    width: 50%;
+    z-index: $zindex-0 + 1;
+  }
+
+  .avatar-presence {
+    background: $gray-color;
+    box-shadow: 0 0 0 $border-width-lg $light-color;
+    border-radius: 50%;
+    height: .5em;
+    width: .5em;
+
+    &.online {
+      background: $success-color;
+    }
+
+    &.busy {
+      background: $error-color;
+    }
+
+    &.away {
+      background: $warning-color;
+    }
+  }
+
+  &[data-initial]::before {
+    color: currentColor;
+    content: attr(data-initial);
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: $zindex-0;
+  }
+}

sass/_badges.scss

@@ -0,0 +1,60 @@
+// Badges
+.badge {
+  position: relative;
+  white-space: nowrap;
+
+  &[data-badge],
+  &:not([data-badge]) {
+    &::after {
+      background: $primary-color;
+      background-clip: padding-box;
+      border-radius: .5rem;
+      box-shadow: 0 0 0 .1rem $bg-color-light;
+      color: $light-color;
+      content: attr(data-badge);
+      display: inline-block;
+      transform: translate(-.05rem, -.5rem);
+    }
+  }
+  &[data-badge] {
+    &::after {
+      font-size: $font-size-sm;
+      height: .9rem;
+      line-height: 1;
+      min-width: .9rem;
+      padding: .1rem .2rem;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+  &:not([data-badge]),
+  &[data-badge=""] {
+    &::after {
+      height: 6px;
+      min-width: 6px;
+      padding: 0;
+      width: 6px;
+    }
+  }
+
+  // Badges for Buttons
+  &.btn {
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translate(50%, -50%);
+    }
+  }
+
+  // Badges for Avatars
+  &.avatar {
+    &::after {
+      position: absolute;
+      top: 14.64%;
+      right: 14.64%;
+      transform: translate(50%, -50%);
+      z-index: $zindex-1;
+    }
+  }
+}

sass/_bars.scss

@@ -0,0 +1,71 @@
+// Bars
+.bar {
+  background: $bg-color-dark;
+  border-radius: $border-radius;
+  display: flex;
+  flex-wrap: nowrap;
+  height: $unit-4;
+  width: 100%;
+
+  &.bar-sm {
+    height: $unit-1;
+  }
+
+  // TODO: attr() support
+  .bar-item {
+    background: $primary-color;
+    color: $light-color;
+    display: block;
+    font-size: $font-size-sm;
+    flex-shrink: 0;
+    line-height: $unit-4;
+    height: 100%;
+    position: relative;
+    text-align: center;
+    width: 0;
+
+    &:first-child {
+      border-bottom-left-radius: $border-radius;
+      border-top-left-radius: $border-radius;
+    }
+    &:last-child {
+      border-bottom-right-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+      flex-shrink: 1;
+    }
+  }
+}
+
+// Slider bar
+.bar-slider {
+  height: $border-width-lg;
+  margin: $layout-spacing 0;
+  position: relative;
+
+  .bar-item {
+    left: 0;
+    padding: 0;
+    position: absolute;
+    &:not(:last-child):first-child {
+      background: $bg-color-dark;
+      z-index: $zindex-0;
+    }
+  }
+
+  .bar-slider-btn {
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: $unit-3;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(50%, -50%);
+    width: $unit-3;
+
+    &:active {
+      box-shadow: 0 0 0 .1rem $primary-color;
+    }
+  }
+}

sass/_base.scss

@@ -0,0 +1,40 @@
+// Base
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: $html-font-size;
+  line-height: $html-line-height;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  background: $body-bg;
+  color: $body-font-color;
+  font-family: $body-font-family;
+  font-size: $font-size;
+  overflow-x: hidden;
+  text-rendering: optimizeLegibility;
+}
+
+a {
+  color: $link-color;
+  outline: none;
+  text-decoration: underline;
+
+  &:focus {
+    @include control-shadow();
+  }
+
+  &:focus,
+  &:hover,
+  &:active,
+  &.active {
+    color: $link-color-dark;
+    text-decoration: underline;
+  }
+}

sass/_breadcrumbs.scss

@@ -0,0 +1,29 @@
+// Breadcrumbs
+.breadcrumb {
+  list-style: none;
+  margin: $unit-1 0;
+  padding: $unit-1 0;
+
+  .breadcrumb-item {
+    color: $gray-color-dark;
+    display: inline-block;
+    margin: 0;
+    padding: $unit-1 0;
+
+    &:not(:last-child) {
+      margin-right: $unit-1;
+
+      a {
+        color: $gray-color-dark;
+      }
+    }
+
+    &:not(:first-child) {
+      &::before {
+        color: $gray-color-dark;
+        content: "/";
+        padding-right: $unit-2;
+      }
+    }
+  }
+}

sass/_buttons.scss

@@ -0,0 +1,198 @@
+// Buttons
+.btn {
+  appearance: none;
+  background: $bg-color-light;
+  border: $border-width solid $primary-color;
+  border-radius: $border-radius;
+  color: $primary-color;
+  cursor: pointer;
+  display: inline-block;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
+  outline: none;
+  padding: $control-padding-y $control-padding-x;
+  text-align: center;
+  text-decoration: none;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  &:focus {
+    @include control-shadow();
+  }
+  &:focus,
+  &:hover {
+    background: $secondary-color;
+    border-color: $primary-color-dark;
+    color: $light-color;
+    text-decoration: none;
+  }
+  &:active,
+  &.active {
+    background: $primary-color-dark;
+    border-color: darken($primary-color-dark, 5%);
+    color: $light-color;
+    text-decoration: none;
+    &.loading {
+      &::after {
+        border-bottom-color: $light-color;
+        border-left-color: $light-color;
+      }
+    }
+  }
+  &[disabled],
+  &:disabled,
+  &.disabled {
+    cursor: default;
+    opacity: .5;
+    pointer-events: none;
+  }
+
+  // Button Primary
+  &.btn-primary {
+    background: $primary-color;
+    border-color: $primary-color-dark;
+    color: $light-color;
+    &:focus,
+    &:hover {
+      background: darken($primary-color-dark, 2%);
+      border-color: darken($primary-color-dark, 5%);
+      color: $light-color;
+    }
+    &:active,
+    &.active {
+      background: darken($primary-color-dark, 4%);
+      border-color: darken($primary-color-dark, 7%);
+      color: $light-color;
+    }
+    &.loading {
+      &::after {
+        border-bottom-color: $light-color;
+        border-left-color: $light-color;
+      }
+    }
+  }
+
+  // Button Colors
+  &.btn-success {
+    @include button-variant($success-color);
+  }
+
+  &.btn-warning {
+    @include button-variant($warning-color);
+  }
+
+  &.btn-error {
+    @include button-variant($error-color);
+  }
+
+  // Button Link
+  &.btn-link {
+    background: transparent;
+    border-color: transparent;
+    color: $link-color;
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      color: $link-color-dark;
+    }
+  }
+
+  // Button Sizes
+  &.btn-sm {
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-y-sm $control-padding-x-sm;
+  }
+
+  &.btn-lg {
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-y-lg $control-padding-x-lg;
+  }
+
+  // Button Block
+  &.btn-block {
+    display: block;
+    width: 100%;
+  }
+
+  // Button Action
+  &.btn-action {
+    width: $control-size;
+    padding-left: 0;
+    padding-right: 0;
+
+    &.btn-sm {
+      width: $control-size-sm;
+    }
+
+    &.btn-lg {
+      width: $control-size-lg;
+    }
+  }
+
+  // Button Clear
+  &.btn-clear {
+    background: transparent;
+    border: 0;
+    color: currentColor;
+    height: $unit-5;
+    line-height: $unit-4;
+    margin-left: $unit-1;
+    margin-right: -2px;
+    opacity: 1;
+    padding: $unit-h;
+    text-decoration: none;
+    width: $unit-5;
+
+    &:focus,
+    &:hover {
+      background: rgba($bg-color, .5);
+      opacity: .95;
+    }
+
+    &::before {
+      content: "\2715";
+    }
+  }
+}
+
+// Button groups
+.btn-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+
+  .btn {
+    flex: 1 0 auto;
+    &:first-child:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+      margin-left: -$border-width;
+    }
+    &:last-child:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      margin-left: -$border-width;
+    }
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      z-index: $zindex-0;
+    }
+  }
+
+  &.btn-group-block {
+    display: flex;
+
+    .btn {
+      flex: 1 0 0;
+    }
+  }
+}

sass/_calendars.scss

@@ -0,0 +1,222 @@
+// Calendars
+.calendar {
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: block;
+  min-width: 280px;
+
+  .calendar-nav {
+    align-items: center;
+    background: $bg-color;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    display: flex;
+    font-size: $font-size-lg;
+    padding: $layout-spacing;
+  }
+
+  .calendar-header,
+  .calendar-body {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: $layout-spacing 0;
+
+    .calendar-date {
+      flex: 0 0 14.28%; // 7 calendar-items each row
+      max-width: 14.28%;
+    }
+  }
+
+  .calendar-header {
+    background: $bg-color;
+    border-bottom: $border-width solid $border-color;
+    color: $gray-color;
+    font-size: $font-size-sm;
+    text-align: center;
+  }
+
+  .calendar-body {
+    color: $gray-color-dark;
+  }
+
+  .calendar-date {
+    border: 0;
+    padding: $unit-1;
+
+    .date-item {
+      appearance: none;
+      background: transparent;
+      border: $border-width solid transparent;
+      border-radius: 50%;
+      color: $gray-color-dark;
+      cursor: pointer;
+      font-size: $font-size-sm;
+      height: $unit-7;
+      line-height: $unit-5;
+      outline: none;
+      padding: $unit-h;
+      position: relative;
+      text-align: center;
+      text-decoration: none;
+      transition: background .2s, border .2s, box-shadow .2s, color .2s;
+      vertical-align: middle;
+      white-space: nowrap;
+      width: $unit-7;
+
+      &.date-today {
+        border-color: $secondary-color-dark;
+        color: $primary-color;
+      }
+
+      &:focus {
+        @include control-shadow();
+      }
+
+      &:focus,
+      &:hover {
+        background: $secondary-color-light;
+        border-color: $secondary-color-dark;
+        color: $primary-color;
+        text-decoration: none;
+      }
+      &:active,
+      &.active {
+        background: $primary-color-dark;
+        border-color: darken($primary-color-dark, 5%);
+        color: $light-color;
+      }
+
+      // Calendar badge support
+      &.badge {
+        &::after {
+          position: absolute;
+          top: 3px;
+          right: 3px;
+          transform: translate(50%, -50%);
+        }
+      }
+    }
+
+    .date-item,
+    .calendar-event {
+      &:disabled,
+      &.disabled {
+        cursor: default;
+        opacity: .25;
+        pointer-events: none;
+      }
+    }
+
+    &.prev-month,
+    &.next-month {
+      .date-item,
+      .calendar-event {
+        opacity: .25;
+      }
+    }
+  }
+
+  .calendar-range {
+    position: relative;
+
+    &::before {
+      background: $secondary-color;
+      content: "";
+      height: $unit-7;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    &.range-start {
+      &::before {
+        left: 50%;
+      }
+    }
+    &.range-end {
+      &::before {
+        right: 50%;
+      }
+    }
+
+    &.range-start,
+    &.range-end {
+      .date-item {
+        background: $primary-color-dark;
+        border-color: darken($primary-color-dark, 5%);
+        color: $light-color;
+      }
+    }
+
+    .date-item {
+      color: $primary-color;
+    }
+  }
+
+  // Calendars size
+  &.calendar-lg {
+    .calendar-body {
+      padding: 0;
+
+      .calendar-date {
+        border-bottom: $border-width solid $border-color;
+        border-right: $border-width solid $border-color;
+        display: flex;
+        flex-direction: column;
+        height: 5.5rem;
+        padding: 0;
+
+        &:nth-child(7n) {
+          border-right: 0;
+        }
+        &:nth-last-child(-n+7) {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    .date-item {
+      align-self: flex-end;
+      height: $unit-7;
+      margin-right: $layout-spacing-sm;
+      margin-top: $layout-spacing-sm;
+    }
+
+    .calendar-range {
+      &::before {
+        top: 19px;
+      }
+      &.range-start {
+        &::before {
+          left: auto;
+          width: 19px;
+        }
+      }
+      &.range-end {
+        &::before {
+          right: 19px;
+        }
+      }
+    }
+
+    .calendar-events {
+      flex-grow: 1;
+      line-height: 1;
+      overflow-y: auto;
+      padding: $layout-spacing-sm;
+    }
+
+    .calendar-event {
+      border-radius: $border-radius;
+      font-size: $font-size-sm;
+      display: block;
+      margin: $unit-h auto;
+      overflow: hidden;
+      padding: 3px 4px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}

sass/_cards.scss

@@ -0,0 +1,43 @@
+// Cards
+.card {
+  background: $bg-color-light;
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+
+  .card-header,
+  .card-body,
+  .card-footer {
+    padding: $layout-spacing-lg;
+    padding-bottom: 0;
+
+    &:last-child {
+      padding-bottom: $layout-spacing-lg;
+    }
+  }
+
+  .card-body {
+    flex: 1 1 auto;
+  }
+
+  .card-image {
+    padding-top: $layout-spacing-lg;
+
+    &:first-child {
+      padding-top: 0;
+
+      img {
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      }
+    }
+
+    &:last-child {
+      img {
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+    }
+  }
+}

sass/_carousels.scss

@@ -0,0 +1,136 @@
+// Carousels
+// The number of carousel images
+$carousel-number: 8;
+
+%carousel-image-checked { 
+  animation: carousel-slidein .75s ease-in-out 1;
+  opacity: 1;
+  z-index: $zindex-1;
+}
+
+%carousel-nav-checked { 
+  color: $gray-color-light;
+}
+
+.carousel {
+  background: $bg-color;
+  display: block;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  -webkit-overflow-scrolling: touch;
+  z-index: $zindex-0;
+
+  .carousel-container {
+    height: 100%;
+    left: 0;
+    position: relative;
+    &::before {
+      content: "";
+      display: block;
+      padding-bottom: 56.25%;
+    }
+
+    .carousel-item {
+      animation: carousel-slideout 1s ease-in-out 1;
+      height: 100%;
+      left: 0;
+      margin: 0;
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+
+      &:hover {
+        .item-prev,
+        .item-next {
+          opacity: 1;
+        }
+      }
+    }
+
+    .item-prev,
+    .item-next {
+      background: rgba($gray-color-light, .25);
+      border-color: rgba($gray-color-light, .5);
+      color: $gray-color-light;
+      opacity: 0;
+      position: absolute;
+      top: 50%;
+      transition: all .4s;
+      transform: translateY(-50%);
+      z-index: $zindex-1;
+    }
+    .item-prev {
+      left: 1rem;
+    }
+    .item-next {
+      right: 1rem;
+    }
+  }
+
+  .carousel-locator {
+    @for $i from 1 through ($carousel-number) {
+      &:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) {
+        @extend %carousel-image-checked;
+      }
+    }
+
+    @for $i from 1 through ($carousel-number) {
+      &:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) {
+        @extend %carousel-nav-checked;
+      }
+    }
+  }
+
+  .carousel-nav {
+    bottom: $layout-spacing;
+    display: flex;
+    justify-content: center;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    width: 10rem;
+    z-index: $zindex-1;
+
+    .nav-item {
+      color: rgba($gray-color-light, .5);
+      display: block;
+      flex: 1 0 auto;
+      height: $unit-8;
+      margin: $unit-1;
+      max-width: 2.5rem;
+      position: relative;
+
+      &::before {
+        background: currentColor;
+        content: "";
+        display: block;
+        height: $unit-h;
+        position: absolute;
+        top: .5rem;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@keyframes carousel-slidein {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes carousel-slideout {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+}

sass/_chips.scss

@@ -0,0 +1,33 @@
+// Chips
+.chip {
+  align-items: center;
+  background: $bg-color-dark;
+  border-radius: 5rem;
+  display: inline-flex;
+  font-size: 90%;
+  height: $unit-6;
+  line-height: $unit-4;
+  margin: $unit-h;
+  max-width: $control-width-sm;
+  overflow: hidden;
+  padding: $unit-1 $unit-2;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &.active {
+    background: $primary-color;
+    color: $light-color;
+  }
+
+  .avatar {
+    margin-left: -$unit-2;
+    margin-right: $unit-1;
+  }
+
+  .btn-clear {
+    border-radius: 50%;
+    transform: scale(.75);
+  }
+}

sass/_codes.scss

@@ -0,0 +1,31 @@
+// Codes
+code {
+  @include label-base();
+  @include label-variant($code-color, $black);
+  font-size: 85%;
+}
+
+pre {
+  border-radius: $border-radius;
+  color: $white;
+  position: relative;
+  background-color: $black;
+
+  &::before {
+    color: $gray-color;
+    content: attr(data-lang);
+    font-size: $font-size-sm;
+    position: absolute;
+    right: $layout-spacing;
+    top: $unit-h;
+  }
+
+  code {
+    color: inherit;
+    display: block;
+    line-height: 1.5;
+    overflow-x: auto;
+    padding: 1rem;
+    width: 100%;
+  }
+}

sass/_comparison-sliders.scss

@@ -0,0 +1,115 @@
+// Image comparison slider
+// Credit: http://codepen.io/solipsistacp/pen/Gpmaq
+.comparison-slider {
+  height: 50vh;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  -webkit-overflow-scrolling: touch;
+
+  .comparison-before,
+  .comparison-after {
+    height: 100%;
+    left: 0;
+    margin: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+
+    img {
+      height: 100%;
+      object-fit: cover;
+      object-position: left center;
+      position: absolute;
+      width: 100%;
+    }
+  }
+
+  .comparison-before {
+    width: 100%;
+    z-index: 1;
+
+    .comparison-label {
+      right: $unit-4;
+    }
+  }
+
+  .comparison-after {
+    max-width: 100%;
+    min-width: 0;
+    z-index: 2;
+
+    &::before {
+      background: transparent;
+      content: "";
+      cursor: default;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      right: $unit-4;
+      top: 0;
+      z-index: $zindex-0;
+    }
+
+    &::after {
+      background: currentColor;
+      border-radius: 50%;
+      box-shadow: 0 -5px, 0 5px;
+      color: $light-color;
+      content: "";
+      height: 3px;
+      position: absolute;
+      right: $unit-2;
+      top: 50%;
+      transform: translate(50%, -50%);
+      width: 3px;
+    }
+
+    .comparison-label {
+      left: $unit-4;
+    }
+  }
+
+  .comparison-resizer {
+    animation: first-run 1.5s 1 ease-in-out;
+    cursor: ew-resize;
+    height: $unit-4;
+    left: 0;
+    max-width: 100%;
+    min-width: $unit-4;
+    opacity: 0;
+    outline: none;
+    position: relative;
+    resize: horizontal;
+    top: 50%;
+    transform: translateY(-50%) scaleY(30);
+    width: 0;
+  }
+
+  .comparison-label {
+    background: rgba($dark-color, .5);
+    bottom: $unit-4;
+    color: $light-color;
+    padding: $unit-1 $unit-2;
+    position: absolute;
+    user-select: none;
+  }
+}
+
+@keyframes first-run {
+  0% {
+    width: 0;
+  }
+  25% {
+    width: $unit-12;
+  }
+  50% {
+    width: $unit-4;
+  }
+  75% {
+    width: $unit-6;
+  }
+  100% {
+    width: 0;
+  }
+}

sass/_dropdowns.scss

@@ -0,0 +1,36 @@
+// Dropdown
+.dropdown {
+  display: inline-block;
+  position: relative;
+
+  .menu {
+    animation: slide-down .15s ease 1;
+    display: none;
+    left: 0;
+    max-height: 50vh;
+    overflow-y: auto;
+    position: absolute;
+    top: 100%;
+  }
+
+  &.dropdown-right {
+    .menu {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  &.active .menu,
+  .dropdown-toggle:focus + .menu,
+  .menu:hover {
+    display: block;
+  }
+
+  // Fix dropdown-toggle border radius in button groups
+  .btn-group {
+    .dropdown-toggle:nth-last-child(2) {
+      border-bottom-right-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+  }
+}

sass/_empty.scss

@@ -0,0 +1,21 @@
+// Empty states (or Blank slates)
+.empty {
+  background: $bg-color;
+  border-radius: $border-radius;
+  color: $gray-color-dark;
+  text-align: center;
+  padding: $unit-16 $unit-8;
+
+  .empty-icon {
+    margin-bottom: $layout-spacing-lg;
+  }
+
+  .empty-title,
+  .empty-subtitle {
+    margin: $layout-spacing auto;
+  }
+
+  .empty-action {
+    margin-top: $layout-spacing-lg;
+  }
+}

sass/_filters.scss

@@ -0,0 +1,37 @@
+// Filters 
+// The number of filter options 
+$filter-number: 8 !default;
+
+%filter-checked-nav { 
+  background: $primary-color;
+  color: $light-color;
+}
+
+%filter-checked-body { 
+  display: none;
+}
+
+.filter {
+  .filter-nav {
+    margin: $layout-spacing 0;
+  }
+
+  .filter-body {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .filter-tag {
+    @for $i from 0 through ($filter-number) {
+      &#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] {
+        @extend %filter-checked-nav;
+      }
+    }
+
+    @for $i from 1 through ($filter-number) {
+      &#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) {
+        @extend %filter-checked-body;
+      }
+    }
+  }
+}

sass/_forms.scss

@@ -0,0 +1,557 @@
+// Forms
+.form-group {
+  &:not(:last-child) {
+    margin-bottom: $layout-spacing;
+  }
+}
+
+fieldset {
+  margin-bottom: $layout-spacing-lg;
+}
+
+legend {
+  font-size: $font-size-lg;
+  font-weight: 500;
+  margin-bottom: $layout-spacing-lg;
+}
+
+// Form element: Label
+.form-label {
+  display: block;
+  line-height: $line-height;
+  padding: $control-padding-y + $border-width 0;
+  margin-top: $layout-spacing-sm;
+
+  &.label-sm {
+    font-size: $font-size-sm;
+    padding: $control-padding-y-sm + $border-width 0;
+  }
+
+  &.label-lg {
+    font-size: $font-size-lg;
+    padding: $control-padding-y-lg + $border-width 0;
+  }
+}
+
+// Form element: Input
+.form-input {
+  appearance: none;
+  background: $bg-color-light;
+  background-image: none;
+  border: $border-width solid $border-color-dark;
+  border-radius: $border-radius;
+  color: $body-font-color;
+  display: block;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
+  max-width: 100%;
+  outline: none;
+  padding: $control-padding-y $control-padding-x;
+  position: relative;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
+  width: 100%;
+  &:focus {
+    @include control-shadow();
+    border-color: $primary-color;
+  }
+  &::placeholder {
+    color: $gray-color;
+  }
+
+  // Input sizes
+  &.input-sm {
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-y-sm $control-padding-x-sm;
+  }
+
+  &.input-lg {
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-y-lg $control-padding-x-lg;
+  }
+
+  &.input-inline {
+    display: inline-block;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  // Input types
+  &[type="file"] {
+    height: auto;
+  }
+}
+
+// Form element: Textarea
+textarea.form-input {
+  &,
+  &.input-lg,
+  &.input-sm {
+    height: auto;
+  }
+}
+
+// Form element: Input hint
+.form-input-hint {
+  color: $gray-color;
+  font-size: $font-size-sm;
+  margin-top: $unit-1;
+
+  .has-success &,
+  .is-success + & {
+    color: $success-color;
+  }
+
+  .has-error &,
+  .is-error + & {
+    color: $error-color;
+  }
+}
+
+// Form element: Select
+.form-select {
+  appearance: none;
+  border: $border-width solid $border-color-dark;
+  border-radius: $border-radius;
+  color: inherit;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
+  outline: none;
+  padding: $control-padding-y $control-padding-x;
+  vertical-align: middle;
+  width: 100%;
+  background: $bg-color-light; 
+  &:focus {
+    @include control-shadow();
+    border-color: $primary-color;
+  }
+  &::-ms-expand {
+    display: none;
+  }
+
+  // Select sizes
+  &.select-sm {
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
+  }
+
+  &.select-lg {
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
+  }
+
+  // Multiple select
+  &[size],
+  &[multiple] {
+    height: auto;
+    padding: $control-padding-y $control-padding-x;
+
+    option {
+      padding: $unit-h $unit-1;
+    }
+  }
+  &:not([multiple]):not([size]) {
+    background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
+    padding-right: $control-icon-size + $control-padding-x;
+  }
+}
+
+// Form Icons
+.has-icon-left,
+.has-icon-right {
+  position: relative;
+
+  .form-icon {
+    height: $control-icon-size;
+    margin: 0 $control-padding-y;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: $control-icon-size;
+    z-index: $zindex-0 + 1;
+  }
+}
+
+.has-icon-left {
+  .form-icon {
+    left: $border-width;
+  }
+
+  .form-input {
+    padding-left: $control-icon-size + $control-padding-y * 2;
+  }
+}
+
+.has-icon-right {
+  .form-icon {
+    right: $border-width;
+  }
+
+  .form-input {
+    padding-right: $control-icon-size + $control-padding-y * 2;
+  }
+}
+
+// Form element: Checkbox and Radio
+.form-checkbox,
+.form-radio,
+.form-switch {
+  display: block;
+  line-height: $line-height;
+  margin: ($control-size - $control-size-sm) 0;
+  min-height: $control-size-sm;
+  padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
+  position: relative;
+
+  input {
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    position: absolute;
+    width: 1px;
+    &:focus + .form-icon {
+      @include control-shadow();
+      border-color: $primary-color;
+    }
+    &:checked + .form-icon {
+      background: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+
+  .form-icon {
+    border: $border-width solid $border-color-dark;
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    transition: background .2s, border .2s, box-shadow .2s, color .2s;
+  }
+
+  // Input checkbox, radio and switch sizes
+  &.input-sm {
+    font-size: $font-size-sm;
+    margin: 0;
+  }
+
+  &.input-lg {
+    font-size: $font-size-lg;
+    margin: ($control-size-lg - $control-size-sm) / 2 0;
+  }
+}
+
+.form-checkbox,
+.form-radio {
+  .form-icon {
+    background: $bg-color-light;
+    height: $control-icon-size;
+    left: 0;
+    top: ($control-size-sm - $control-icon-size) / 2;
+    width: $control-icon-size;
+  }
+
+  input {
+    &:active + .form-icon {
+      background: $bg-color-dark;
+    }
+  }
+}
+.form-checkbox {
+  .form-icon {
+    border-radius: $border-radius;
+  }
+
+  input {
+    &:checked + .form-icon {
+      &::before {
+        background-clip: padding-box;
+        border: $border-width solid $light-color;
+        border-left-width: 0;
+        border-top-width: 0;
+        content: "";
+        height: 9px;
+        left: 50%;
+        margin-left: -3px;
+        margin-top: -6px;
+        position: absolute;
+        top: 50%;
+        transform: rotate(45deg);
+        width: 6px;
+      }
+    }
+    &:indeterminate + .form-icon {
+      background: $primary-color;
+      border-color: $primary-color;
+      &::before {
+        background: $bg-color-light;
+        content: "";
+        height: 2px;
+        left: 50%;
+        margin-left: -5px;
+        margin-top: -1px;
+        position: absolute;
+        top: 50%;
+        width: 10px;
+      }
+    }
+  }
+}
+.form-radio {
+  .form-icon {
+    border-radius: 50%;
+  }
+
+  input {
+    &:checked + .form-icon {
+      &::before {
+        background: $bg-color-light;
+        border-radius: 50%;
+        content: "";
+        height: 6px;
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 6px;
+      }
+    }
+  }
+}
+
+// Form element: Switch
+.form-switch {
+  padding-left: ($unit-8 + $control-padding-x);
+
+  .form-icon {
+    background: $gray-color;
+    background-clip: padding-box;
+    border-radius: $unit-2 + $border-width;
+    height: $unit-4 + $border-width * 2;
+    left: 0;
+    top: ($control-size-sm - $unit-4) / 2 - $border-width;
+    width: $unit-8;
+    &::before {
+      background: $bg-color-light;
+      border-radius: 50%;
+      content: "";
+      display: block;
+      height: $unit-4;
+      left: 0;
+      position: absolute;
+      top: 0;
+      transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
+      width: $unit-4;
+    }
+  }
+
+  input {
+    &:checked + .form-icon {
+      &::before {
+        left: 14px;
+      }
+    }
+    &:active + .form-icon {
+      &::before {
+        background: $bg-color;
+      }
+    }
+  }
+}
+
+// Form element: Input groups
+.input-group {
+  display: flex;
+
+  .input-group-addon {
+    background: $bg-color;
+    border: $border-width solid $border-color-dark;
+    border-radius: $border-radius;
+    line-height: $line-height;
+    padding: $control-padding-y $control-padding-x;
+    white-space: nowrap;
+
+    &.addon-sm {
+      font-size: $font-size-sm;
+      padding: $control-padding-y-sm $control-padding-x-sm;
+    }
+
+    &.addon-lg {
+      font-size: $font-size-lg;
+      padding: $control-padding-y-lg $control-padding-x-lg;
+    }
+  }
+
+  .form-input,
+  .form-select {
+    flex: 1 1 auto;
+    width: 1%;
+  }
+
+  .input-group-btn {
+    z-index: $zindex-0;
+  }
+
+  .form-input,
+  .form-select,
+  .input-group-addon,
+  .input-group-btn {
+    &:first-child:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+      margin-left: -$border-width;
+    }
+    &:last-child:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      margin-left: -$border-width;
+    }
+    &:focus {
+      z-index: $zindex-0 + 1;
+    }
+  }
+
+  .form-select {
+    width: auto;
+  }
+
+  &.input-inline {
+    display: inline-flex;
+  }
+}
+
+// Form validation states
+.form-input,
+.form-select {
+  .has-success &,
+  &.is-success {
+    background: lighten($success-color, 53%);
+    border-color: $success-color;
+    &:focus {
+      @include control-shadow($success-color);
+    }
+  }
+
+  .has-error &,
+  &.is-error {
+    background: lighten($error-color, 53%);
+    border-color: $error-color;
+    &:focus {
+      @include control-shadow($error-color);
+    }
+  }
+}
+
+.form-checkbox,
+.form-radio,
+.form-switch {
+  .has-error &,
+  &.is-error {
+    .form-icon {
+      border-color: $error-color;
+    }
+
+    input {
+      &:checked + .form-icon {
+        background: $error-color;
+        border-color: $error-color;
+      }
+
+      &:focus + .form-icon {
+        @include control-shadow($error-color);
+        border-color: $error-color;
+      }
+    }
+  }
+}
+
+.form-checkbox {
+  .has-error &,
+  &.is-error {
+    input {
+      &:indeterminate + .form-icon {
+        background: $error-color;
+        border-color: $error-color;
+      }
+    }
+  }
+}
+
+// validation based on :placeholder-shown (Edge doesn't support it yet)
+.form-input {
+  &:not(:placeholder-shown) {
+    &:invalid {
+      border-color: $error-color;
+      &:focus {
+        @include control-shadow($error-color);
+        background: lighten($error-color, 53%);
+      }
+
+      & + .form-input-hint {
+        color: $error-color;
+      }
+    }
+  }
+}
+
+// Form disabled and readonly
+.form-input,
+.form-select {
+  &:disabled,
+  &.disabled {
+    background-color: $bg-color-dark;
+    cursor: not-allowed;
+    opacity: .5;
+    color: $black !important;
+  }
+}
+
+.form-input {
+  &[readonly] {
+    background-color: $bg-color;
+  }
+}
+
+input {
+  &:disabled,
+  &.disabled {
+    & + .form-icon {
+      background: $bg-color-dark;
+      cursor: not-allowed;
+      opacity: .5;
+    }
+  }
+}
+
+.form-switch {
+  input {
+    &:disabled,
+    &.disabled {
+      & + .form-icon::before {
+        background: $bg-color-light;
+      }
+    }
+  }
+}
+
+// Form horizontal
+.form-horizontal {
+  padding: $layout-spacing 0;
+
+  .form-group {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+// Form inline
+.form-inline {
+  display: inline-block;
+}

sass/_hero.scss

@@ -0,0 +1,22 @@
+// Hero
+.hero {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-bottom: 4rem;
+  padding-top: 4rem;
+
+  &.hero-sm {
+    padding-bottom: 2rem;
+    padding-top: 2rem;
+  }
+
+  &.hero-lg {
+    padding-bottom: 6rem;
+    padding-top: 6rem;
+  }
+
+  .hero-body {
+    padding: $layout-spacing;
+  }
+}

sass/_icons.scss

@@ -0,0 +1,5 @@
+// CSS Icons
+@import "icons/icons-core";
+@import "icons/icons-navigation";
+@import "icons/icons-action";
+@import "icons/icons-object";

sass/_labels.scss

@@ -0,0 +1,34 @@
+// Labels
+.label {
+  @include label-base();
+  @include label-variant(lighten($body-font-color, 5%), $bg-color-dark);
+  display: inline-block;
+
+  // Label rounded
+  &.label-rounded {
+    border-radius: 5rem;
+    padding-left: .4rem;
+    padding-right: .4rem; 
+  }
+
+  // Label colors
+  &.label-primary {
+    @include label-variant($light-color, $primary-color);
+  }
+
+  &.label-secondary {
+    @include label-variant($primary-color, $secondary-color);
+  }
+
+  &.label-success {
+    @include label-variant($light-color, $success-color);
+  }
+
+  &.label-warning {
+    @include label-variant($light-color, $warning-color);
+  }
+
+  &.label-error {
+    @include label-variant($light-color, $error-color);
+  }
+}

sass/_layout.scss

@@ -0,0 +1,509 @@
+// Layout
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: $layout-spacing;
+  padding-right: $layout-spacing;
+  width: 100%;
+
+  $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
+
+  &.grid-xl {
+    max-width: $grid-spacing * 2 + $size-2x;
+  }
+
+  &.grid-lg {
+    max-width: $grid-spacing * 2 + $size-lg;
+  }
+
+  &.grid-md {
+    max-width: $grid-spacing * 2 + $size-md;
+  }
+
+  &.grid-sm {
+    max-width: $grid-spacing * 2 + $size-sm;
+  }
+
+  &.grid-xs {
+    max-width: $grid-spacing * 2 + $size-xs;
+  }
+}
+
+// Responsive breakpoint system
+.show-xs,
+.show-sm,
+.show-md,
+.show-lg,
+.show-xl {
+  display: none !important;
+}
+
+// Responsive grid system
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -$layout-spacing;
+  margin-right: -$layout-spacing;
+
+  &.col-gapless {
+    margin-left: 0;
+    margin-right: 0;
+
+    & > .column {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+  &.col-oneline {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
+}
+.column {
+  flex: 1;
+  max-width: 100%;
+  padding-left: $layout-spacing;
+  padding-right: $layout-spacing;
+
+  &.col-12,
+  &.col-11,
+  &.col-10,
+  &.col-9,
+  &.col-8,
+  &.col-7,
+  &.col-6,
+  &.col-5,
+  &.col-4,
+  &.col-3,
+  &.col-2,
+  &.col-1,
+  &.col-auto {
+    flex: none;
+  }
+}
+.col-12 {
+  width: 100%;
+}
+.col-11 {
+  width: 91.66666667%;
+}
+.col-10 {
+  width: 83.33333333%;
+}
+.col-9 {
+  width: 75%;
+}
+.col-8 {
+  width: 66.66666667%;
+}
+.col-7 {
+  width: 58.33333333%;
+}
+.col-6 {
+  width: 50%;
+}
+.col-5 {
+  width: 41.66666667%;
+}
+.col-4 {
+  width: 33.33333333%;
+}
+.col-3 {
+  width: 25%;
+}
+.col-2 {
+  width: 16.66666667%;
+}
+.col-1 {
+  width: 8.33333333%;
+}
+.col-auto {
+  flex: 0 0 auto;
+  max-width: none;
+  width: auto;
+}
+.col-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.col-ml-auto {
+  margin-left: auto;
+}
+.col-mr-auto {
+  margin-right: auto;
+}
+@media (max-width: $size-xl) {
+  .col-xl-12,
+  .col-xl-11,
+  .col-xl-10,
+  .col-xl-9,
+  .col-xl-8,
+  .col-xl-7,
+  .col-xl-6,
+  .col-xl-5,
+  .col-xl-4,
+  .col-xl-3,
+  .col-xl-2,
+  .col-xl-1,
+  .col-xl-auto {
+    flex: none;
+  }
+  .col-xl-12 {
+    width: 100%;
+  }
+  .col-xl-11 {
+    width: 91.66666667%;
+  }
+  .col-xl-10 {
+    width: 83.33333333%;
+  }
+  .col-xl-9 {
+    width: 75%;
+  }
+  .col-xl-8 {
+    width: 66.66666667%;
+  }
+  .col-xl-7 {
+    width: 58.33333333%;
+  }
+  .col-xl-6 {
+    width: 50%;
+  }
+  .col-xl-5 {
+    width: 41.66666667%;
+  }
+  .col-xl-4 {
+    width: 33.33333333%;
+  }
+  .col-xl-3 {
+    width: 25%;
+  }
+  .col-xl-2 {
+    width: 16.66666667%;
+  }
+  .col-xl-1 {
+    width: 8.33333333%;
+  }
+  .col-xl-auto {
+    width: auto;
+  }
+  .hide-xl {
+    display: none !important;
+  }
+  .show-xl {
+    display: block !important;
+  }
+}
+@media (max-width: $size-lg) {
+  .col-lg-12,
+  .col-lg-11,
+  .col-lg-10,
+  .col-lg-9,
+  .col-lg-8,
+  .col-lg-7,
+  .col-lg-6,
+  .col-lg-5,
+  .col-lg-4,
+  .col-lg-3,
+  .col-lg-2,
+  .col-lg-1,
+  .col-lg-auto {
+    flex: none;
+  }
+  .col-lg-12 {
+    width: 100%;
+  }
+  .col-lg-11 {
+    width: 91.66666667%;
+  }
+  .col-lg-10 {
+    width: 83.33333333%;
+  }
+  .col-lg-9 {
+    width: 75%;
+  }
+  .col-lg-8 {
+    width: 66.66666667%;
+  }
+  .col-lg-7 {
+    width: 58.33333333%;
+  }
+  .col-lg-6 {
+    width: 50%;
+  }
+  .col-lg-5 {
+    width: 41.66666667%;
+  }
+  .col-lg-4 {
+    width: 33.33333333%;
+  }
+  .col-lg-3 {
+    width: 25%;
+  }
+  .col-lg-2 {
+    width: 16.66666667%;
+  }
+  .col-lg-1 {
+    width: 8.33333333%;
+  }
+  .col-lg-auto {
+    width: auto;
+  }
+  .hide-lg {
+    display: none !important;
+  }
+  .show-lg {
+    display: block !important;
+  }
+}
+@media (max-width: $size-md) {
+  .col-md-12,
+  .col-md-11,
+  .col-md-10,
+  .col-md-9,
+  .col-md-8,
+  .col-md-7,
+  .col-md-6,
+  .col-md-5,
+  .col-md-4,
+  .col-md-3,
+  .col-md-2,
+  .col-md-1,
+  .col-md-auto {
+    flex: none;
+  }
+  .col-md-12 {
+    width: 100%;
+  }
+  .col-md-11 {
+    width: 91.66666667%;
+  }
+  .col-md-10 {
+    width: 83.33333333%;
+  }
+  .col-md-9 {
+    width: 75%;
+  }
+  .col-md-8 {
+    width: 66.66666667%;
+  }
+  .col-md-7 {
+    width: 58.33333333%;
+  }
+  .col-md-6 {
+    width: 50%;
+  }
+  .col-md-5 {
+    width: 41.66666667%;
+  }
+  .col-md-4 {
+    width: 33.33333333%;
+  }
+  .col-md-3 {
+    width: 25%;
+  }
+  .col-md-2 {
+    width: 16.66666667%;
+  }
+  .col-md-1 {
+    width: 8.33333333%;
+  }
+  .col-md-auto {
+    width: auto;
+  }
+  .hide-md {
+    display: none !important;
+  }
+  .show-md {
+    display: block !important;
+  }
+}
+@media (max-width: $size-sm) {
+  .col-sm-12,
+  .col-sm-11,
+  .col-sm-10,
+  .col-sm-9,
+  .col-sm-8,
+  .col-sm-7,
+  .col-sm-6,
+  .col-sm-5,
+  .col-sm-4,
+  .col-sm-3,
+  .col-sm-2,
+  .col-sm-1,
+  .col-sm-auto {
+    flex: none;
+  }
+  .col-sm-12 {
+    width: 100%;
+  }
+  .col-sm-11 {
+    width: 91.66666667%;
+  }
+  .col-sm-10 {
+    width: 83.33333333%;
+  }
+  .col-sm-9 {
+    width: 75%;
+  }
+  .col-sm-8 {
+    width: 66.66666667%;
+  }
+  .col-sm-7 {
+    width: 58.33333333%;
+  }
+  .col-sm-6 {
+    width: 50%;
+  }
+  .col-sm-5 {
+    width: 41.66666667%;
+  }
+  .col-sm-4 {
+    width: 33.33333333%;
+  }
+  .col-sm-3 {
+    width: 25%;
+  }
+  .col-sm-2 {
+    width: 16.66666667%;
+  }
+  .col-sm-1 {
+    width: 8.33333333%;
+  }
+  .col-sm-auto {
+    width: auto;
+  }
+  .hide-sm {
+    display: none !important;
+  }
+  .show-sm {
+    display: block !important;
+  }
+}
+@media (max-width: $size-xs) {
+  .col-xs-12,
+  .col-xs-11,
+  .col-xs-10,
+  .col-xs-9,
+  .col-xs-8,
+  .col-xs-7,
+  .col-xs-6,
+  .col-xs-5,
+  .col-xs-4,
+  .col-xs-3,
+  .col-xs-2,
+  .col-xs-1,
+  .col-xs-auto {
+    flex: none;
+  }
+  .col-xs-12 {
+    width: 100%;
+  }
+  .col-xs-11 {
+    width: 91.66666667%;
+  }
+  .col-xs-10 {
+    width: 83.33333333%;
+  }
+  .col-xs-9 {
+    width: 75%;
+  }
+  .col-xs-8 {
+    width: 66.66666667%;
+  }
+  .col-xs-7 {
+    width: 58.33333333%;
+  }
+  .col-xs-6 {
+    width: 50%;
+  }
+  .col-xs-5 {
+    width: 41.66666667%;
+  }
+  .col-xs-4 {
+    width: 33.33333333%;
+  }
+  .col-xs-3 {
+    width: 25%;
+  }
+  .col-xs-2 {
+    width: 16.66666667%;
+  }
+  .col-xs-1 {
+    width: 8.33333333%;
+  }
+  .col-xs-auto {
+    width: auto;
+  }
+  .hide-xs {
+    display: none !important;
+  }
+  .show-xs {
+    display: block !important;
+  }
+}
+
+.container #content {
+}
+
+.full-width {
+    padding-right: 0rem !important;
+    padding-left: 0rem !important;
+}
+
+
+.full-width-gray {
+    padding-right: 0rem !important;
+    padding-left: 0rem !important;
+    background-color: $gray-color-light !important;
+}
+
+
+.grid { 
+  display: grid;
+  grid-gap: $border-width-lg;
+  grid-template-columns: repeat(auto-fit, minmax($control-width-sm, 1fr));
+  grid-auto-rows: $control-width-sm;
+  grid-auto-flow: dense;
+
+  &-tall {
+    grid-row: span 2;
+  }
+
+  &-tall-3 {
+    grid-row: span 3;
+  }
+
+  &-tall-4 {
+    grid-row: span 4;
+  }
+
+  &-square {
+    grid-row: span 1;
+    grid-column: span 1;
+  }
+
+  &-square-2 {
+    grid-row: span 2;
+    grid-column: span 2;
+  }
+
+  &-square-3 {
+    grid-row: span 3;
+    grid-column: span 3;
+  }
+
+  &-wide {
+    grid-column: span 2;
+  }
+
+  &-wide-3 {
+    grid-column: span 3;
+  }
+
+  &-wide-4 {
+    grid-column: span 4;
+  }
+}
+
+

sass/_media.scss

@@ -0,0 +1,75 @@
+// Media
+// Image responsive
+.img-responsive {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+// object-fit support is coming to Microsoft Edge
+// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
+.img-fit-cover {
+  object-fit: cover;
+}
+
+.img-fit-contain {
+  object-fit: contain;
+}
+
+// Video responsive
+.video-responsive {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
+  &::before {
+    content: "";
+    display: block;
+    padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16
+  }
+
+  iframe,
+  object,
+  embed {
+    border: 0;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+  }
+}
+
+video.video-responsive {
+  height: auto;
+  max-width: 100%;
+
+  &::before {
+    content: none;
+  }
+}
+
+.video-responsive-4-3 {
+  &::before {
+    padding-bottom: 75%; // Ratio 4:3
+  }
+}
+
+.video-responsive-1-1 {
+  &::before {
+    padding-bottom: 100%; // Ratio 1:1
+  }
+}
+
+// Figure
+.figure {
+  margin: 0 0 $layout-spacing 0;
+
+  .figure-caption {
+    color: $gray-color-dark;
+    margin-top: $layout-spacing;
+  }
+}

sass/_menus.scss

@@ -0,0 +1,66 @@
+// Menus
+.menu {
+  @include shadow-variant(.05rem);
+  background: $bg-color-light;
+  border-radius: $border-radius;
+  list-style: none;
+  margin: 0;
+  min-width: $control-width-xs;
+  padding: $unit-2;
+  transform: translateY($layout-spacing-sm);
+  z-index: $zindex-3;
+
+  &.menu-nav {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .menu-item {
+    margin-top: 0;
+    padding: 0 $unit-2;
+    position: relative;
+
+    & > a {
+      text-decoration: none;
+      border-radius: $border-radius;
+      color: inherit;
+      display: block;
+      margin: 0 (-$unit-2);
+      padding: $unit-o $unit-o;
+      &:focus,
+      &:hover {
+        background: $gray-color-light;
+        color: $primary-color;
+      }
+      &:active,
+      &.active {
+        background: $gray-color;
+        color: $primary-color;
+      }
+    }
+
+    .form-checkbox,
+    .form-radio,
+    .form-switch {
+      margin: $unit-h 0;
+    }
+
+    & + .menu-item {
+      margin-top: $unit-1;
+      font-size: .9rem;
+    }
+  }
+
+  .menu-badge {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    .label {
+      margin-right: $unit-2;
+    }
+  }
+}

sass/_meters.scss

@@ -0,0 +1,57 @@
+// Meters
+// Credit: https://css-tricks.com/html5-meter-element/
+.meter {
+  appearance: none;
+  background: $bg-color;
+  border: 0;
+  border-radius: $border-radius;
+  display: block;
+  width: 100%;
+  height: $unit-4;
+
+  &::-webkit-meter-inner-element {
+    display: block;
+  }
+
+  &::-webkit-meter-bar,
+  &::-webkit-meter-optimum-value,
+  &::-webkit-meter-suboptimum-value,
+  &::-webkit-meter-even-less-good-value {
+    border-radius: $border-radius;
+  }
+
+  &::-webkit-meter-bar {
+    background: $bg-color;
+  }
+
+  &::-webkit-meter-optimum-value {
+    background: $success-color;
+  }
+
+  &::-webkit-meter-suboptimum-value {
+    background: $warning-color;
+  }
+
+  &::-webkit-meter-even-less-good-value {
+    background: $error-color;
+  }
+
+  &::-moz-meter-bar,
+  &:-moz-meter-optimum,
+  &:-moz-meter-sub-optimum,
+  &:-moz-meter-sub-sub-optimum {
+    border-radius: $border-radius;
+  }
+
+  &:-moz-meter-optimum::-moz-meter-bar {
+    background: $success-color;
+  }
+
+  &:-moz-meter-sub-optimum::-moz-meter-bar {
+    background: $warning-color;
+  }
+
+  &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background: $error-color;
+  }
+}

sass/_mixins.scss

@@ -0,0 +1,10 @@
+// Mixins
+@import "mixins/avatar";
+@import "mixins/button";
+@import "mixins/clearfix";
+@import "mixins/color";
+@import "mixins/label";
+@import "mixins/position";
+@import "mixins/shadow";
+@import "mixins/text";
+@import "mixins/toast";

sass/_modals.scss

@@ -0,0 +1,87 @@
+// Modals
+.modal {
+  align-items: center;
+  display: none;
+  justify-content: center;
+  opacity: 0;
+  overflow: hidden;
+  padding: $layout-spacing;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  top: -30vh;
+
+  &:target,
+  &.active {
+    display: flex;
+    opacity: 1;
+    z-index: $zindex-4;
+
+    .modal-overlay {
+      background: rgba($bg-color, .75);
+      bottom: 0;
+      cursor: default;
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    .modal-container {
+      animation: slide-down .2s ease 1;
+      z-index: $zindex-0;
+    }
+  }
+
+  &.modal-sm {
+    .modal-container {
+      max-width: $control-width-sm;
+      padding: 0 $unit-2;
+    }
+  }
+
+  &.modal-lg {
+    .modal-overlay {
+      background: $bg-color-light;
+    }
+
+    .modal-container {
+      box-shadow: none;
+      max-width: $control-width-lg;
+    }
+  }
+}
+
+.modal-container {
+  @include shadow-variant(.2rem);
+  background: $bg-color-light;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+  max-height: 75vh;
+  max-width: $control-width-md;
+  padding: 0 $unit-4;
+  width: 100%;
+
+  &.modal-fullheight {
+    max-height: 100vh;
+  }
+
+  .modal-header {
+    color: $dark-color;
+    padding: $unit-4;
+  }
+
+  .modal-body {
+    overflow-y: auto;
+    padding: $unit-4;
+    position: relative;
+  }
+
+  .modal-footer {
+    padding: $unit-4;
+    text-align: right;
+  }
+}

sass/_navbar.scss

@@ -0,0 +1,33 @@
+// Navbar
+.navbar {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: $unit-3;
+  padding-right: $unit-3;
+  justify-content: space-between;
+  border-bottom: 2px solid $secondary-color-light;
+
+  .navbar-section {
+    align-items: center;
+    display: flex;
+    flex: 1 0 0;
+
+    &:not(:first-child):last-child {
+      justify-content: flex-end;
+    }
+  }
+
+  .navbar-center {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+  }
+
+  .navbar-brand {
+    position: relative;
+    top: 15%;
+    font-size: $font-size-lg;
+    text-decoration: none;
+  }
+}

sass/_navs.scss

@@ -0,0 +1,49 @@
+// Navs
+.nav {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: $unit-1 0;
+  background-color: inherit;
+  font-family: $mono-font-family;
+
+  .divider {
+    margin: 1px;
+  }
+
+  .h4 {
+    font-family: $mono-font-family;
+  }
+
+  .nav-item {
+    a {
+      color: $primary-color;
+      padding: $unit-1 $unit-2;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: $black;
+        text-decoration: underline;
+      }
+    }
+    &.active {
+      & > a {
+        color: darken($primary-color, 10%);
+        font-weight: bold;
+        &:focus,
+        &:hover {
+          color: $primary-color;
+        }
+      }
+    }
+  }
+
+  & .nav {
+    margin-bottom: $unit-2;
+    margin-left: $unit-4;
+  }
+
+  ul {
+    background-color: inherit;
+  }
+}

sass/_normalize.scss

@@ -0,0 +1,446 @@
+/* Manually forked from Normalize.css */
+/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+/* Document
+   ========================================================================== */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 3 */
+  -webkit-text-size-adjust: 100%; /* 3 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8 (removed).
+ */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers. (removed)
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/**
+ * Modify default styling of address.
+ */
+
+address {
+  font-style: normal;
+}
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed)
+ */
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: $mono-font-family; /* 1 (changed) */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-. (Removed)
+ */
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+  font-weight: 400; /* (added) */
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 (changed) */
+  font-size: inherit; /* 1 (changed) */
+  line-height: inherit; /* 1 (changed) */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule (removed).
+ */
+
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated) (changed).
+ */
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+  outline: none;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}

sass/_off-canvas.scss

@@ -0,0 +1,104 @@
+// Off canvas menus
+$off-canvas-breakpoint: $size-lg !default;
+
+.off-canvas {
+  display: flex;
+  flex-flow: nowrap;
+  height: 100%;
+  position: relative;
+  width: 100%;
+
+  .off-canvas-toggle {
+    display: block;
+    position: absolute;
+    top: $layout-spacing;
+    transition: none;
+    z-index: $zindex-0;
+    @if $rtl == true {
+      right: $layout-spacing;
+    } @else {
+      left: $layout-spacing;
+    }
+  }
+
+  .off-canvas-sidebar {
+    background: $bg-color;
+    bottom: 0;
+    min-width: 10rem;
+    overflow-y: auto;
+    position: fixed;
+    top: 0;
+    transition: transform .25s;
+    z-index: $zindex-2;
+    @if $rtl == true {
+      right: 0;
+      transform: translateX(100%);
+    } @else {
+      left: 0;
+      transform: translateX(-100%);
+    }
+  }
+
+  .off-canvas-content {
+    flex: 1 1 auto;
+    height: 100%;
+    padding: $layout-spacing $layout-spacing*2 $layout-spacing 1rem;
+  }
+
+  .off-canvas-overlay {
+    background: rgba($dark-color, .1);
+    border-color: transparent;
+    border-radius: 0;
+    bottom: 0;
+    display: none;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+  }
+
+  .off-canvas-sidebar {
+    &:target,
+    &.active {
+      transform: translateX(0);
+    }
+
+    &:target ~ .off-canvas-overlay,
+    &.active ~ .off-canvas-overlay {
+      display: block;
+      z-index: $zindex-1;
+    }
+  }
+}
+
+// Responsive layout
+@media (min-width: $off-canvas-breakpoint) {
+  .off-canvas {
+    &.off-canvas-sidebar-show {
+      .off-canvas-toggle {
+        display: none;
+      }
+  
+      .off-canvas-sidebar {
+        flex: 0 0 auto;
+        position: relative;
+        transform: none;
+      }
+
+      .off-canvas-overlay {
+        display: none !important;
+      }
+    }
+  }
+}
+
+.off-canvas .nav {
+  margin: 0px;
+  padding: 2px;
+}
+
+.off-canvas .nav .nav-item {
+  margin: 0px;
+}

sass/_pagination.scss

@@ -0,0 +1,60 @@
+// Pagination
+.pagination {
+  display: flex;
+  list-style: none;
+  margin: $unit-1 0;
+  padding: $unit-1 0;
+
+  .page-item {
+    margin: $unit-1 $unit-o;
+
+    span {
+      display: inline-block;
+      padding: $unit-1 $unit-1;
+    }
+
+    a {
+      border-radius: $border-radius;
+      display: inline-block;
+      padding: $unit-1 $unit-2;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: $primary-color;
+      }
+    }
+
+    &.disabled {
+      a {
+        cursor: default;
+        opacity: .5;
+        pointer-events: none;
+      }
+    }
+
+    &.active {
+      a {
+        background: $primary-color;
+        color: $light-color;
+      }
+    }
+
+    &.page-prev,
+    &.page-next {
+      flex: 1 0 50%;
+    }
+
+    &.page-next {
+      text-align: right;
+    }
+
+    .page-item-title {
+      margin: 0;
+    }
+
+    .page-item-subtitle {
+      margin: 0;
+      opacity: .5;
+    }
+  }
+}

sass/_panels.scss

@@ -0,0 +1,23 @@
+// Panels
+.panel {
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+
+  .panel-header,
+  .panel-footer {
+    flex: 0 0 auto;
+    padding: $layout-spacing-lg;
+  }
+
+  .panel-nav {
+    flex: 0 0 auto;
+  }
+
+  .panel-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 0 $layout-spacing-lg;
+  }
+}

sass/_parallax.scss

@@ -0,0 +1,135 @@
+// Parallax
+$parallax-deg: 3deg !default;
+$parallax-offset: 4.5px !default;
+$parallax-offset-z: 50px !default;
+$parallax-perspective: 1000px !default;
+$parallax-scale: .95 !default;
+$parallax-fade-color: rgba(255, 255, 255, .35) !default;
+
+// Mixin: Parallax direction
+@mixin parallax-dir() {
+  height: 50%;
+  outline: none;
+  position: absolute;
+  width: 50%;
+  z-index: $zindex-1;
+}
+
+.parallax {
+  display: block;
+  height: auto;
+  position: relative;
+  width: auto;
+
+  .parallax-content {
+    @include shadow-variant(1rem);
+    height: auto;
+    transform: perspective($parallax-perspective);
+    transform-style: preserve-3d;
+    transition: all .4s ease;
+    width: 100%;
+
+    &::before {
+      content: "";
+      display: block;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  .parallax-front {
+    align-items: center;
+    color: $light-color;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    text-shadow: 0 0 20px rgba($dark-color, .75);
+    top: 0;
+    transform: translateZ($parallax-offset-z) scale($parallax-scale);
+    transition: transform .4s;
+    width: 100%;
+    z-index: $zindex-0;
+  }
+
+  .parallax-top-left {
+    @include parallax-dir();
+    left: 0;
+    top: 0;
+
+    &:focus ~ .parallax-content,
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
+
+      &::before {
+        background: linear-gradient(135deg, $parallax-fade-color 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-top-right {
+    @include parallax-dir();
+    right: 0;
+    top: 0;
+
+    &:focus ~ .parallax-content,
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
+
+      &::before {
+        background: linear-gradient(-135deg, $parallax-fade-color 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-bottom-left {
+    @include parallax-dir();
+    bottom: 0;
+    left: 0;
+
+    &:focus ~ .parallax-content,
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
+
+      &::before {
+        background: linear-gradient(45deg, $parallax-fade-color 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-bottom-right {
+    @include parallax-dir();
+    bottom: 0;
+    right: 0;
+
+    &:focus ~ .parallax-content,
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
+
+      &::before {
+        background: linear-gradient(-45deg, $parallax-fade-color 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+}

sass/_popovers.scss

@@ -0,0 +1,65 @@
+// Popovers
+.popover {
+  display: inline-block;
+  position: relative;
+
+  .popover-container {
+    left: 50%;
+    opacity: 0;
+    padding: $layout-spacing;
+    position: absolute;
+    top: 0;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform .2s;
+    width: $control-width-sm;
+    z-index: $zindex-3;
+  }
+
+  *:focus + .popover-container,
+  &:hover .popover-container {
+    display: block;
+    opacity: 1;
+    transform: translate(-50%, -100%) scale(1);
+  }
+
+  &.popover-right {
+    .popover-container {
+      left: 100%;
+      top: 50%;
+    }
+
+    *:focus + .popover-container,
+    &:hover .popover-container {
+      transform: translate(0, -50%) scale(1);
+    }
+  }
+
+  &.popover-bottom {
+    .popover-container {
+      left: 50%;
+      top: 100%;
+    }
+
+    *:focus + .popover-container,
+    &:hover .popover-container {
+      transform: translate(-50%, 0) scale(1);
+    }
+  }
+
+  &.popover-left {
+    .popover-container {
+      left: 0;
+      top: 50%;
+    }
+
+    *:focus + .popover-container,
+    &:hover .popover-container {
+      transform: translate(-100%, -50%) scale(1);
+    }
+  }
+
+  .card {
+    @include shadow-variant(.2rem);
+    border: 0;
+  }
+}

sass/_progress.scss

@@ -0,0 +1,45 @@
+// Progress
+// Credit: https://css-tricks.com/html5-progress-element/
+.progress {
+  appearance: none;
+  background: $bg-color-dark;
+  border: 0;
+  border-radius: $border-radius;
+  color: $primary-color;
+  height: $unit-1;
+  position: relative;
+  width: 100%;
+
+  &::-webkit-progress-bar {
+    background: transparent;
+    border-radius: $border-radius;
+  }
+
+  &::-webkit-progress-value {
+    background: $primary-color;
+    border-radius: $border-radius;
+  }
+
+  &::-moz-progress-bar {
+    background: $primary-color;
+    border-radius: $border-radius;
+  }
+
+  &:indeterminate {
+    animation: progress-indeterminate 1.5s linear infinite;
+    background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat;
+
+    &::-moz-progress-bar {
+      background: transparent;
+    }
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}

sass/_sliders.scss

@@ -0,0 +1,99 @@
+// Sliders
+// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
+.slider {
+  appearance: none;
+  background: transparent;
+  display: block;
+  width: 100%;
+  height: $unit-6;
+
+  &:focus {
+    @include control-shadow();
+    outline: none;
+  }
+
+  &.tooltip:not([data-tooltip]) {
+    &::after {
+      content: attr(value);
+    }
+  }
+
+  // Slider Thumb
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: $unit-3;
+    margin-top: -($unit-3 - $unit-h) / 2;
+    transition: transform .2s;
+    width: $unit-3;
+  }
+  &::-moz-range-thumb {
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: $unit-3;
+    transition: transform .2s;
+    width: $unit-3;
+  }
+  &::-ms-thumb {
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: $unit-3;
+    transition: transform .2s;
+    width: $unit-3;
+  }
+
+  &:active {
+    &::-webkit-slider-thumb {
+      transform: scale(1.25);
+    }
+    &::-moz-range-thumb {
+      transform: scale(1.25);
+    }
+    &::-ms-thumb {
+      transform: scale(1.25);
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    &::-webkit-slider-thumb {
+      background: $gray-color-light;
+      transform: scale(1);
+    }
+    &::-moz-range-thumb {
+      background: $gray-color-light;
+      transform: scale(1);
+    }
+    &::-ms-thumb {
+      background: $gray-color-light;
+      transform: scale(1);
+    }
+  }
+
+  // Slider Track
+  &::-webkit-slider-runnable-track {
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
+    width: 100%;
+  }
+  &::-moz-range-track {
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
+    width: 100%;
+  }
+  &::-ms-track {
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
+    width: 100%;
+  }
+  &::-ms-fill-lower {
+    background: $primary-color;
+  }
+}

sass/_steps.scss

@@ -0,0 +1,71 @@
+// Steps
+.step {
+  display: flex;
+  flex-wrap: nowrap;
+  list-style: none;
+  margin: $unit-1 0;
+  width: 100%;
+
+  .step-item {
+    flex: 1 1 0;
+    margin-top: 0;
+    min-height: 1rem;
+    text-align: center;
+    position: relative;
+
+    &:not(:first-child)::before {
+      background: $primary-color;
+      content: "";
+      height: 2px;
+      left: -50%;
+      position: absolute;
+      top: 9px;
+      width: 100%;
+    }
+
+    a {
+      color: $primary-color;
+      display: inline-block;
+      padding: 20px 10px 0;
+      text-decoration: none;
+
+      &::before {
+        background: $primary-color;
+        border: $border-width-lg solid $light-color;
+        border-radius: 50%;
+        content: "";
+        display: block;
+        height: $unit-3;
+        left: 50%;
+        position: absolute;
+        top: $unit-1;
+        transform: translateX(-50%);
+        width: $unit-3;
+        z-index: $zindex-0;
+      }
+    }
+
+    &.active {
+      a {
+        &::before {
+          background: $light-color;
+          border: $border-width-lg solid $primary-color;
+        }
+      }
+
+      & ~ .step-item {
+        &::before {
+          background: $border-color;
+        }
+
+        a {
+          color: $gray-color;
+
+          &::before {
+            background: $border-color;
+          }
+        }
+      }
+    }
+  }
+}

sass/_tables.scss

@@ -0,0 +1,57 @@
+// Tables
+.table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  @if $rtl == true {
+    text-align: right;
+  } @else {
+    text-align: left;
+  }
+
+  &.table-striped {
+    tbody {
+      tr:nth-of-type(odd) {
+        background: $bg-color;
+      }
+    }
+  }
+
+  &,
+  &.table-striped {
+    tbody {
+      tr {
+        &.active {
+          background: $bg-color-dark;
+        }
+      }
+    }
+  }
+
+  &.table-hover {
+    tbody {
+      tr {
+        &:hover {
+          background: $bg-color-dark;
+        }
+      }
+    }
+  }
+
+  // Scollable tables
+  &.table-scroll {
+    display: block;
+    overflow-x: auto;
+    padding-bottom: .75rem;
+    white-space: nowrap;
+  }
+
+  td,
+  th {
+    border-bottom: $border-width solid $border-color;
+    padding: $unit-3 $unit-2;
+  }
+  th {
+    border-bottom-width: $border-width-lg;
+  }
+}

sass/_tabs.scss

@@ -0,0 +1,66 @@
+// Tabs
+.tab {
+  align-items: center;
+  border-bottom: $border-width solid $border-color;
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: $unit-1 0 ($unit-1 - $border-width) 0;
+
+  .tab-item {
+    margin-top: 0;
+
+    a {
+      border-bottom: $border-width-lg solid transparent;
+      color: inherit;
+      display: block;
+      margin: 0 $unit-2 0 0;
+      padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: $link-color;
+      }
+    }
+    &.active a,
+    a.active {
+      border-bottom-color: $primary-color;
+      color: $link-color;
+    }
+
+    &.tab-action {
+      flex: 1 0 auto;
+      text-align: right;
+    }
+
+    .btn-clear {
+      margin-top: -$unit-1;
+    }
+  }
+
+  &.tab-block {
+    .tab-item {
+      flex: 1 0 0;
+      text-align: center;
+
+      a {
+        margin: 0;
+      }
+
+      .badge {
+        &[data-badge]::after {
+          position: absolute;
+          right: $unit-h;
+          top: $unit-h;
+          transform: translate(0, 0);
+        }
+      }
+    }
+  }
+
+  &:not(.tab-block) {
+    .badge {
+      padding-right: 0;
+    }
+  }
+}

sass/_tiles.scss

@@ -0,0 +1,38 @@
+// Tiles
+.tile {
+  align-content: space-between;
+  align-items: flex-start;
+  display: flex;
+
+  .tile-icon,
+  .tile-action {
+    flex: 0 0 auto;
+  }
+  .tile-content {
+    flex: 1 1 auto;
+    &:not(:first-child) {
+      padding-left: $unit-2;
+    }
+    &:not(:last-child) {
+      padding-right: $unit-2;
+    }
+  }
+  .tile-title,
+  .tile-subtitle {
+    line-height: $line-height;
+  }
+
+  &.tile-centered {
+    align-items: center;
+
+    .tile-content {
+      overflow: hidden;
+    }
+
+    .tile-title,
+    .tile-subtitle {
+      @include text-ellipsis();
+      margin-bottom: 0;
+    }
+  }
+}

sass/_timelines.scss

@@ -0,0 +1,56 @@
+// Timelines
+.timeline {
+  .timeline-item {
+    display: flex;
+    margin-bottom: $unit-6;
+    position: relative;
+    &::before {
+      background: $border-color;
+      content: "";
+      height: 100%;
+      left: 11px;
+      position: absolute;
+      top: $unit-6;
+      width: 2px;
+    }
+
+    .timeline-left {
+      flex: 0 0 auto;
+    }
+
+    .timeline-content {
+      flex: 1 1 auto;
+      padding: 2px 0 2px $layout-spacing-lg;
+    }
+
+    .timeline-icon {
+      align-items: center;
+      border-radius: 50%;
+      color: $light-color;
+      display: flex;
+      height: $unit-6;
+      justify-content: center;
+      text-align: center;
+      width: $unit-6;
+      &::before {
+        border: $border-width-lg solid $primary-color;
+        border-radius: 50%;
+        content: "";
+        display: block;
+        height: $unit-2;
+        left: $unit-2;
+        position: absolute;
+        top: $unit-2;
+        width: $unit-2;
+      }
+
+      &.icon-lg {
+        background: $primary-color;
+        line-height: $line-height;
+        &::before {
+          content: none;
+        }
+      }
+    }
+  }
+}

sass/_toasts.scss

@@ -0,0 +1,47 @@
+// Toasts
+.toast {
+  @include toast-variant($dark-color, $gray-color);
+  border-radius: $border-radius;
+  color: $black !important;
+  display: block;
+  padding: $layout-spacing;
+  width: 100%;
+
+  &.toast-primary {
+    @include toast-variant($gray-color-light, $primary-color);
+  }
+
+  &.toast-success {
+    @include toast-variant(lighten($success-color, 30%), $success-color);
+  }
+
+  &.toast-warning {
+    @include toast-variant(lighten($warning-color, 30%), $warning-color);
+  }
+
+  &.toast-error {
+    @include toast-variant(lighten($error-color, 60%), $error-color);
+  }
+
+  a {
+    color: $black !important;
+    text-decoration: underline;
+    
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      opacity: .75;
+    }
+  }
+
+  .btn-clear {
+    margin: $unit-h;
+  }
+
+  p {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

sass/_tooltips.scss

@@ -0,0 +1,79 @@
+// Tooltips
+.tooltip {
+  position: relative;
+  &::after {
+    background: rgba($dark-color, .95);
+    border-radius: $border-radius;
+    bottom: 100%;
+    color: $light-color;
+    content: attr(data-tooltip);
+    display: block;
+    font-size: $font-size-sm;
+    left: 50%;
+    max-width: $control-width-sm;
+    opacity: 0;
+    overflow: hidden;
+    padding: $unit-1 $unit-2;
+    pointer-events: none;
+    position: absolute;
+    text-overflow: ellipsis;
+    transform: translate(-50%, $unit-2);
+    transition: opacity .2s, transform .2s;
+    white-space: pre;
+    z-index: $zindex-3;
+  }
+  &:focus,
+  &:hover {
+    &::after {
+      opacity: 1;
+      transform: translate(-50%, -$unit-1);
+    }
+  }
+  &[disabled],
+  &.disabled {
+    pointer-events: auto;
+  }
+
+  &.tooltip-right {
+    &::after {
+      bottom: 50%;
+      left: 100%;
+      transform: translate(-$unit-1, 50%);
+    }
+    &:focus,
+    &:hover {
+      &::after {
+        transform: translate($unit-1, 50%);
+      }
+    }
+  }
+
+  &.tooltip-bottom {
+    &::after {
+      bottom: auto;
+      top: 100%;
+      transform: translate(-50%, -$unit-2);
+    }
+    &:focus,
+    &:hover {
+      &::after {
+        transform: translate(-50%, $unit-1);
+      }
+    }
+  }
+  
+  &.tooltip-left {
+    &::after {
+      bottom: 50%;
+      left: auto;
+      right: 100%;
+      transform: translate($unit-2, 50%);
+    }
+    &:focus,
+    &:hover {
+      &::after {
+        transform: translate(-$unit-1, 50%);
+      }
+    }
+  }
+}

sass/_typography.scss

@@ -0,0 +1,165 @@
+// Typography
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 700;
+  margin-bottom: .5em;
+  margin-top: 0;
+  font-family: "Arial Black";
+
+  a {
+    text-decoration: none !important;
+    color: $primary-color !important;
+  }
+}
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-weight: 700;
+  font-family: "Arial Black";
+
+  a {
+    text-decoration: none !important;
+    color: $primary-color !important;
+  }
+}
+h1,
+.h1 {
+  font-size: 58px;
+  line-height: 87px;
+}
+h2,
+.h2 {
+  font-size: 45px;
+  line-height: 69px;
+}
+h3,
+.h3 {
+  font-size: 36px;
+  line-height: 56px;
+}
+h4,
+.h4 {
+  font-size: 28px;
+  line-height: 44px;
+}
+h5,
+.h5 {
+  font-size: 22px;
+  line-height: 35px;
+}
+h6,
+.h6 {
+  font-size: 17px;
+  line-height: 18px;
+}
+
+
+// Paragraphs
+p {
+  margin: 0 0 $line-height;
+  color: $black;
+}
+
+// Semantic text elements
+a,
+ins,
+u {
+  text-decoration-skip: ink edges;
+}
+
+abbr[title] {
+  border-bottom: $border-width dotted;
+  cursor: help;
+  text-decoration: none;
+}
+
+kbd {
+  @include label-base();
+  @include label-variant($light-color, $dark-color);
+  font-size: $font-size-sm;
+}
+
+mark {
+  @include label-variant($body-font-color, $highlight-color);
+  border-bottom: $unit-o solid darken($highlight-color, 15%);
+  border-radius: $border-radius;
+  padding: $unit-o $unit-h 0;
+}
+
+// Blockquote
+blockquote {
+  border-left: $border-width-lg solid $border-color;
+  background-color: lighten($gray-color-light, 3%);
+  margin-left: 0;
+  padding: $unit-2 $unit-4;
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Lists
+ul,
+ol {
+  margin: $unit-4 $unit-4 $unit-4 $unit-4;
+  background-color: lighten($gray-color-light, 3%);
+  padding: 0.5em;
+
+
+  ul,
+  ol {
+    margin: $unit-4 $unit-4 $unit-4 $unit-4;
+  }
+
+  li {
+    margin-top: $unit-2;
+  }
+}
+
+ul {
+  list-style: disc inside;
+
+  ul {
+    list-style-type: circle;
+  }
+}
+
+ol {
+  list-style: none;
+  counter-reset: high-contrast-counter;
+
+  ol {
+    list-style-type: lower-alpha;
+  }
+
+  li {
+    counter-increment: high-contrast-counter;
+  }
+
+  li::before {
+    content: "0" counter(high-contrast-counter) ".";
+    border-radius: $border-radius;
+    background-color: $black;
+    color: $snow;
+    padding: 3px;
+    margin-right: 0.3em;
+  }
+}
+
+dl {
+  dt {
+    font-weight: bold;
+  }
+  dd {
+    margin: $unit-2 0 $unit-4 0;
+  }
+}
+

sass/_utilities.scss

@@ -0,0 +1,8 @@
+@import "utilities/colors";
+@import "utilities/cursors";
+@import "utilities/display";
+@import "utilities/divider";
+@import "utilities/loading";
+@import "utilities/position";
+@import "utilities/shapes";
+@import "utilities/text";

sass/_variables.scss

@@ -0,0 +1,126 @@
+// Core variables
+$version: "0.5.8";
+
+// Core features
+$rtl: false !default;
+
+// created by me just kind of randomly
+$black: hsl(309, 15%, 9%);
+$blue: hsl(216, 43%, 21%);
+$red: hsl(356, 71%, 25%);
+$yellow: hsl(42, 75%, 49%);
+$green: hsl(151, 50%, 55%);
+$snow: hsl(86, 23, 94);
+$white: #f8f8f2; // this comes from the code prism uses
+
+// Core colors
+$primary-color: $blue !default;
+$primary-color-dark: $black !default;
+$primary-color-light: hsl(181, 29%, 67%) !default;
+$secondary-color: hsl(218, 8%, 63%) !default;
+$secondary-color-dark: hsl(212, 20%, 31%) !default;
+$secondary-color-light: hsl(240, 11%, 78%) !default;
+
+// Gray colors
+$dark-color: darken($primary-color, 5%) !default;
+$light-color: lighten($snow, 3%) !default;
+$gray-color: lighten($blue, 55%) !default;
+$gray-color-dark: darken($gray-color, 30%) !default;
+$gray-color-light: lighten($gray-color, 18%) !default;
+
+$border-color: lighten($dark-color, 65%) !default;
+$border-color-dark: darken($border-color, 10%) !default;
+$border-color-light: lighten($border-color, 8%) !default;
+$bg-color: $gray-color-light !default;
+$bg-color-dark: darken($bg-color, 3%) !default;
+$bg-color-light: $light-color !default;
+
+// Control colors
+$success-color: darken($green, 5%) !default;
+$warning-color: $yellow !default;
+$error-color: $red !default;
+
+// Other colors
+$code-color: $snow !default;
+$highlight-color: #ffe9b3 !default;
+$body-bg: $bg-color-light !default;
+$body-font-color: lighten($dark-color, 5%) !default;
+$link-color: $primary-color !default;
+$link-color-dark: darken($red, 20%) !default;
+$link-color-light: lighten($link-color, 10%) !default;
+
+// Fonts
+// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
+$base-font-family: "Arial", !default;
+$header-font-family: "Arial Black", !default;
+$mono-font-family: “Roboto”, “Droid Sans”, “Helvetica Neue”, sans-serif, !default;
+$fallback-font-family: "Helvetica Neue", sans-serif !default;
+$body-font-family: $base-font-family, $fallback-font-family !default;
+
+// Unit sizes
+$unit-o: .1rem !default;
+$unit-h: .2rem !default;
+$unit-1: .3rem !default;
+$unit-2: .5rem !default;
+$unit-3: .7rem !default;
+$unit-4: .9rem !default;
+$unit-5: 1.1rem !default;
+$unit-6: 1.3rem !default;
+$unit-7: 1.5rem !default;
+$unit-8: 1.7rem !default;
+$unit-9: 1.9rem !default;
+$unit-10: 2.1rem !default;
+$unit-12: 2.5rem !default;
+$unit-16: 3.3rem !default;
+
+// Font sizes
+$html-font-size: 22px !default;
+$html-line-height: 35px !default;
+$font-size: 1rem !default;
+$font-size-sm: 0.9rem !default;
+$font-size-lg: 1.1rem !default;
+$line-height: 1.4rem !default;
+
+// Sizes
+$layout-spacing: $unit-2 !default;
+$layout-spacing-sm: $unit-1 !default;
+$layout-spacing-lg: $unit-4 !default;
+$layout-spacing-xl: $unit-6 !default;
+$border-radius: $unit-h !default;
+$border-width-sm: 1px !default;
+$border-width: $unit-o !default;
+$border-width-lg: $unit-h !default;
+$control-size: $unit-9 !default;
+$control-size-sm: $unit-7 !default;
+$control-size-lg: $unit-10 !default;
+$control-padding-x: $unit-2 !default;
+$control-padding-x-sm: $unit-2 * .75 !default;
+$control-padding-x-lg: $unit-2 * 1.5 !default;
+$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
+$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
+$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
+$control-icon-size: 1rem !default;
+
+$control-width-xs: 180px !default;
+$control-width-sm: 320px !default;
+$control-width-md: 640px !default;
+$control-width-lg: 960px !default;
+$control-width-xl: 1280px !default;
+
+// Responsive breakpoints
+$size-xs: 480px !default;
+$size-sm: 600px !default;
+$size-md: 840px !default;
+$size-lg: 960px !default;
+$size-xl: 1257px !default;
+$size-2x: 1440px !default;
+
+$responsive-breakpoint: $size-xs !default;
+
+// Z-index
+$zindex-0: 1 !default;
+$zindex-1: 100 !default;
+$zindex-2: 200 !default;
+$zindex-3: 300 !default;
+$zindex-4: 400 !default;
+

sass/_viewer-360.scss

@@ -0,0 +1,34 @@
+// 360 Degree Viewer
+
+// Mixin: Viewer slider sizes
+@mixin viewer-slider-size($image-number: 36) {
+  @for $s from 1 through ($image-number) {
+    .viewer-slider[max='#{$image-number}'][value='#{$s}'] + .viewer-image {
+      background-position-y: percentage((($s)-1) * 1/(($image-number)-1));
+    }
+  }
+}
+
+.viewer-360 {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  // Copy and add more numbers if you need
+  @include viewer-slider-size(36);
+
+  .viewer-slider {
+    cursor: ew-resize;
+    margin: 1rem;
+    order: 2;
+    width: 60%;
+  }
+
+  .viewer-image {
+    background-position-y: 0;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    max-width: 100%;
+    order: 1;
+  }
+}

sass/icons/_icons-action.scss

@@ -0,0 +1,315 @@
+// Icon resize
+.icon-resize-horiz,
+.icon-resize-vert {
+  &::before,
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    height: .45em;
+    width: .45em;
+  }
+  &::before {
+    transform: translate(-50%, -90%) rotate(45deg);
+  }
+  &::after {
+    transform: translate(-50%, -10%) rotate(225deg);
+  }
+}
+
+.icon-resize-horiz {
+  &::before {
+    transform: translate(-90%, -50%) rotate(-45deg);
+  }
+  &::after {
+    transform: translate(-10%, -50%) rotate(135deg);
+  }
+}
+
+// Icon more
+.icon-more-horiz,
+.icon-more-vert {
+  &::before {
+    background: currentColor;
+    box-shadow: -.4em 0, .4em 0;
+    border-radius: 50%;
+    height: 3px;
+    width: 3px;
+  }
+}
+
+.icon-more-vert {
+  &::before {
+    box-shadow: 0 -.4em, 0 .4em;
+  }
+}
+
+// Icon plus, minus, cross
+.icon-plus,
+.icon-minus,
+.icon-cross {
+  &::before {
+    background: currentColor;
+    height: $icon-border-width;
+    width: 100%;
+  }
+}
+
+.icon-plus,
+.icon-cross {
+  &::after {
+    background: currentColor;
+    height: 100%;
+    width: $icon-border-width;
+  }
+}
+
+.icon-cross {
+  &::before {
+    width: 100%;
+  }
+  &::after {
+    height: 100%;
+  }
+  &::before,
+  &::after {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
+
+// Icon check
+.icon-check {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-right: 0;
+    border-top: 0;
+    height: .5em;
+    width: .9em;
+    transform: translate(-50%, -75%) rotate(-45deg);
+  }
+}
+
+// Icon stop
+.icon-stop {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    background: currentColor;
+    height: $icon-border-width;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: 1em;
+  }
+}
+
+// Icon shutdown
+.icon-shutdown {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  border-top-color: transparent;
+  &::before {
+    background: currentColor;
+    content: "";
+    height: .5em;
+    top: .1em;
+    width: $icon-border-width;
+  }
+}
+
+// Icon refresh
+.icon-refresh {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    border-right-color: transparent;
+    height: 1em;
+    width: 1em;
+  }
+  &::after {
+    border: .2em solid currentColor;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    height: 0;
+    left: 80%;
+    top: 20%;
+    width: 0;
+  }
+}
+
+// Icon search
+.icon-search {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    height: .75em;
+    left: 5%;
+    top: 5%;
+    transform: translate(0, 0) rotate(45deg);
+    width: .75em;
+  }
+  &::after {
+    background: currentColor;
+    height: $icon-border-width;
+    left: 80%;
+    top: 80%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: .4em;
+  }
+}
+
+// Icon edit
+.icon-edit {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    height: .4em;
+    transform: translate(-40%, -60%) rotate(-45deg);
+    width: .85em;
+  }
+  &::after {
+    border: .15em solid currentColor;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    height: 0;
+    left: 5%;
+    top: 95%;
+    transform: translate(0, -100%);
+    width: 0;
+  }
+}
+
+// Icon delete
+.icon-delete {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    border-top: 0;
+    height: .75em;
+    top: 60%;
+    width: .75em;
+  }
+  &::after {
+    background: currentColor;
+    box-shadow: -.25em .2em, .25em .2em;
+    height: $icon-border-width;
+    top: $icon-border-width/2;
+    width: .5em;
+  }
+}
+
+// Icon share
+.icon-share {
+  border: $icon-border-width solid currentColor;
+  border-radius: $border-radius;
+  border-right: 0;
+  border-top: 0;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-left: 0;
+    border-top: 0;
+    height: .4em;
+    left: 100%;
+    top: .25em;
+    transform: translate(-125%, -50%) rotate(-45deg);
+    width: .4em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    border-radius: 75% 0;
+    height: .5em;
+    width: .6em;
+  }
+}
+
+// Icon flag
+.icon-flag {
+  &::before {
+    background: currentColor;
+    height: 1em;
+    left: 15%;
+    width: $icon-border-width;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom-right-radius: $border-radius;
+    border-left: 0;
+    border-top-right-radius: $border-radius;
+    height: .65em;
+    top: 35%;
+    left: 60%;
+    width: .8em;
+  }
+}
+
+// Icon bookmark
+.icon-bookmark {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    height: .9em;
+    width: .8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-left: 0;
+    border-radius: $border-radius;
+    height: .5em;
+    transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
+    width: .5em;
+  }
+}
+
+// Icon download & upload
+.icon-download,
+.icon-upload {
+  border-bottom: $icon-border-width solid currentColor;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    height: .5em;
+    width: .5em;
+    transform: translate(-50%, -60%) rotate(-135deg);
+  }
+  &::after {
+    background: currentColor;
+    height: .6em;
+    top: 40%;
+    width: $icon-border-width;
+  }
+}
+
+.icon-upload {
+  &::before {
+    transform: translate(-50%, -60%) rotate(45deg);
+  }
+  &::after {
+    top: 50%;
+  }
+}
+
+// Icon copy
+.icon-copy {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    border-right: 0;
+    border-bottom: 0;
+    height: .8em;
+    left: 40%;
+    top: 35%;
+    width: .8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    height: .8em;
+    left: 60%;
+    top: 60%;
+    width: .8em;
+  }
+}

sass/icons/_icons-core.scss

@@ -0,0 +1,54 @@
+// Icon variables
+$icon-border-width: $border-width-lg;
+$icon-prefix: "icon";
+
+// Icon base style
+.#{$icon-prefix} {
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: inherit;
+  font-style: normal;
+  height: 1em;
+  position: relative;
+  text-indent: -9999px;
+  vertical-align: middle;
+  width: 1em;
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  // Icon sizes
+  &.icon-2x {
+    font-size: 1.6rem;
+  }
+
+  &.icon-3x {
+    font-size: 2.4rem;
+  }
+
+  &.icon-4x {
+    font-size: 3.2rem;
+  }
+}
+
+// Component icon support
+.accordion,
+.btn,
+.toast,
+.menu {
+  .#{$icon-prefix} {
+    vertical-align: -10%;
+  }
+}
+
+.btn-lg {
+  .#{$icon-prefix} {
+    vertical-align: -15%;
+  }
+}

sass/icons/_icons-navigation.scss

@@ -0,0 +1,127 @@
+// Icon arrows
+.icon-arrow-down,
+.icon-arrow-left,
+.icon-arrow-right,
+.icon-arrow-up,
+.icon-downward,
+.icon-back,
+.icon-forward,
+.icon-upward {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    height: .65em;
+    width: .65em;
+  }
+}
+
+.icon-arrow-down {
+  &::before {
+    transform: translate(-50%, -75%) rotate(225deg);
+  }
+}
+
+.icon-arrow-left {
+  &::before {
+    transform: translate(-25%, -50%) rotate(-45deg);
+  }
+}
+
+.icon-arrow-right {
+  &::before {
+    transform: translate(-75%, -50%) rotate(135deg);
+  }
+}
+
+.icon-arrow-up {
+  &::before {
+    transform: translate(-50%, -25%) rotate(45deg);
+  }
+}
+
+.icon-back,
+.icon-forward {
+  &::after {
+    background: currentColor;
+    height: $icon-border-width;
+    width: .8em;
+  }
+}
+
+.icon-downward,
+.icon-upward {
+  &::after {
+    background: currentColor;
+    height: .8em;
+    width: $icon-border-width;
+  }
+}
+
+.icon-back {
+  &::after {
+    left: 55%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+}
+
+.icon-downward {
+  &::after {
+    top: 45%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(-135deg);
+  }
+}
+
+.icon-forward {
+  &::after {
+    left: 45%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(135deg);
+  }
+}
+
+.icon-upward {
+  &::after {
+    top: 55%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
+
+// Icon caret
+.icon-caret {
+  &::before {
+    border-top: .3em solid currentColor;
+    border-right: .3em solid transparent;
+    border-left: .3em solid transparent;
+    height: 0;
+    transform: translate(-50%, -25%);
+    width: 0;
+  }
+}
+
+// Icon menu
+.icon-menu {
+  &::before {
+    background: currentColor;
+    box-shadow: 0 -.35em, 0 .35em;
+    height: $icon-border-width;
+    width: 100%;
+  }
+}
+
+// Icon apps
+.icon-apps {
+  &::before {
+    background: currentColor;
+    box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
+    height: 3px;
+    width: 3px;
+  }
+}

sass/icons/_icons-object.scss

@@ -0,0 +1,161 @@
+// Icon time
+.icon-time {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    background: currentColor;
+    height: .4em;
+    transform: translate(-50%, -75%);
+    width: $icon-border-width;
+  }
+  &::after {
+    background: currentColor;
+    height: .3em;
+    transform: translate(-50%, -75%) rotate(90deg);
+    transform-origin: 50% 90%;
+    width: $icon-border-width;
+  }
+}
+
+// Icon mail
+.icon-mail {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    height: .8em;
+    width: 1em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-right: 0;
+    border-top: 0;
+    height: .5em;
+    transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
+    width: .5em;
+  }
+}
+
+// Icon people
+.icon-people {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    height: .45em;
+    top: 25%;
+    width: .45em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50% 50% 0 0;
+    height: .4em;
+    top: 75%;
+    width: .9em;
+  }
+}
+
+// Icon message
+.icon-message {
+  border: $icon-border-width solid currentColor;
+  border-bottom: 0;
+  border-radius: $border-radius;
+  border-right: 0;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom-right-radius: $border-radius;
+    border-left: 0;
+    border-top: 0;
+    height: .8em;
+    left: 65%;
+    top: 40%;
+    width: .7em;
+  }
+  &::after {
+    background: currentColor;
+    border-radius: $border-radius;
+    height: .3em;
+    left: 10%;
+    top: 100%;
+    transform: translate(0, -90%) rotate(45deg);
+    width: $icon-border-width;
+  }
+}
+
+// Icon photo
+.icon-photo {
+  border: $icon-border-width solid currentColor;
+  border-radius: $border-radius;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    height: .25em;
+    left: 35%;
+    top: 35%;
+    width: .25em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-left: 0;
+    height: .5em;
+    left: 60%;
+    transform: translate(-50%, 25%) rotate(-45deg);
+    width: .5em;
+  }
+}
+
+// Icon link
+.icon-link {
+  &::before,
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 5em 0 0 5em;
+    border-right: 0;
+    height: .5em;
+    width: .75em;
+  }
+  &::before {
+    transform: translate(-70%, -45%) rotate(-45deg);
+  }
+  &::after {
+    transform: translate(-30%, -55%) rotate(135deg);
+  }
+}
+
+// Icon location
+.icon-location {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50% 50% 50% 0;
+    height: .8em;
+    transform: translate(-50%, -60%) rotate(-45deg);
+    width: .8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    height: .2em;
+    transform: translate(-50%, -80%);
+    width: .2em;
+  }
+}
+
+// Icon emoji
+.icon-emoji {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    border-radius: 50%;
+    box-shadow: -.17em -.1em, .17em -.1em;
+    height: .15em;
+    width: .15em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    border-right-color: transparent;
+    height: .5em;
+    transform: translate(-50%, -40%) rotate(-135deg);
+    width: .5em;
+  }
+}

sass/mixins/_avatar.scss

@@ -0,0 +1,6 @@
+// Avatar mixin
+@mixin avatar-base($size: $unit-8) {
+  font-size: $size / 2;
+  height: $size;
+  width: $size;
+}

sass/mixins/_button.scss

@@ -0,0 +1,54 @@
+// Button variant mixin
+@mixin button-variant($color: $primary-color) {
+  background: $color;
+  border-color: darken($color, 3%);
+  color: $light-color;
+  &:focus {
+    @include control-shadow($color);
+  }
+  &:focus,
+  &:hover {
+    background: darken($color, 2%);
+    border-color: darken($color, 5%);
+    color: $light-color;
+  }
+  &:active,
+  &.active {
+    background: darken($color, 7%);
+    border-color: darken($color, 10%);
+    color: $light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: $light-color;
+      border-left-color: $light-color;
+    }
+  }
+}
+
+@mixin button-outline-variant($color: $primary-color) {
+  background: $light-color;
+  border-color: $color;
+  color: $color;
+  &:focus {
+    @include control-shadow($color);
+  }
+  &:focus,
+  &:hover {
+    background: lighten($color, 50%);
+    border-color: darken($color, 2%);
+    color: $color;
+  }
+  &:active,
+  &.active {
+    background: $color;
+    border-color: darken($color, 5%);
+    color: $light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: $color;
+      border-left-color: $color;
+    }
+  }
+}

sass/mixins/_clearfix.scss

@@ -0,0 +1,8 @@
+// Clearfix mixin
+@mixin clearfix() {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}

sass/mixins/_color.scss

@@ -0,0 +1,27 @@
+// Background color utility mixin
+@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
+  #{$name} {
+    background: $color !important;
+
+    @if (lightness($color) < 60) {
+      color: $light-color;
+    }
+  }
+}
+
+// Text color utility mixin
+@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
+  #{$name} {
+    color: $color !important;
+  }
+
+  a#{$name} {
+    &:focus,
+    &:hover {
+      color: darken($color, 5%);
+    }
+    &:visited {
+      color: lighten($color, 5%);
+    }
+  }
+}

sass/mixins/_label.scss

@@ -0,0 +1,11 @@
+// Label base style
+@mixin label-base() {
+  border-radius: $border-radius;
+  line-height: 1.25;
+  padding: .1rem .2rem;
+}
+
+@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
+  background: $bg-color;
+  color: $color;
+}

sass/mixins/_position.scss

@@ -0,0 +1,65 @@
+// Margin utility mixin
+@mixin margin-variant($id: 1, $size: $unit-1) {
+  .m-#{$id} {
+    margin: $size !important;
+  }
+
+  .mb-#{$id} {
+    margin-bottom: $size !important;
+  }
+
+  .ml-#{$id} {
+    margin-left: $size !important;
+  }
+
+  .mr-#{$id} {
+    margin-right: $size !important;
+  }
+
+  .mt-#{$id} {
+    margin-top: $size !important;
+  }
+
+  .mx-#{$id} {
+    margin-left: $size !important;
+    margin-right: $size !important;
+  }
+
+  .my-#{$id} {
+    margin-bottom: $size !important;
+    margin-top: $size !important;
+  }
+}
+
+// Padding utility mixin
+@mixin padding-variant($id: 1, $size: $unit-1) {
+  .p-#{$id} {
+    padding: $size !important;
+  }
+
+  .pb-#{$id} {
+    padding-bottom: $size !important;
+  }
+
+  .pl-#{$id} {
+    padding-left: $size !important;
+  }
+
+  .pr-#{$id} {
+    padding-right: $size !important;
+  }
+
+  .pt-#{$id} {
+    padding-top: $size !important;
+  }
+
+  .px-#{$id} {
+    padding-left: $size !important;
+    padding-right: $size !important;
+  }
+  
+  .py-#{$id} {
+    padding-bottom: $size !important;
+    padding-top: $size !important;
+  }
+}

sass/mixins/_shadow.scss

@@ -0,0 +1,9 @@
+// Component focus shadow
+@mixin control-shadow($color: $primary-color) {
+  box-shadow: 0 0 0 .1rem rgba($color, .2);
+}
+
+// Shadow mixin
+@mixin shadow-variant($offset) {
+  box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);
+}

sass/mixins/_text.scss

@@ -0,0 +1,6 @@
+// Text Ellipsis
+@mixin text-ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

sass/mixins/_toast.scss

@@ -0,0 +1,5 @@
+// Toast variant mixin
+@mixin toast-variant($color: $dark-color, $border: $red) {
+  background: rgba($color, .95);
+  border: $border-width solid $border;
+}

sass/pattern.scss

@@ -0,0 +1,206 @@
+/* from https://bansal.io/pattern-css */
+
+$pattern-prefix : 'pattern' !default;
+
+$pattern-sizes : (sm:10px,
+    md:25px,
+    lg:50px,
+    xl:100px,
+) !default;
+
+$pattern-list: ('checks',
+    'grid',
+    'grid',
+    'dots',
+    'cross-dots',
+    'vertical-lines',
+    'horizontal-lines',
+    'diagonal-lines',
+    'vertical-stripes',
+    'horizontal-stripes',
+    'diagonal-stripes',
+    'triangles',
+    'zigzag'
+) !default;
+
+$dots : (sm:.5px,
+    md:1px,
+    lg:1.5px,
+    xl:2px) !default;
+
+// .bg-checks-{sm, md, lg, xl}
+@if index($pattern-list, 'checks') {
+
+    @each $name,
+    $size in $pattern-sizes {
+        .#{$pattern-prefix}-checks-#{$name} {
+            background-image:
+                repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),
+                repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
+            background-position: 0 0,
+            #{$size} #{$size};
+            background-size: calc(2 * #{$size}) calc(2 * #{$size});
+        }
+    }
+}
+
+// .bg-grid-{sm, md, lg, xl}
+@if index($pattern-list, 'grid') {
+
+    @each $name,
+    $size in $pattern-sizes {
+        .#{$pattern-prefix}-grid-#{$name} {
+            background-image:
+                linear-gradient(currentColor 1px, transparent 1px),
+                linear-gradient(to right, currentColor 1px, transparent 1px);
+            background-size: #{$size} #{$size};
+            // background-position: calc(-0.5 * #{$size}) calc(-0.5 * #{$size});
+        }
+    }
+}
+
+// .bg-dots-{sm, md, lg, xl}
+@if index($pattern-list, 'dots') {
+
+    @each $name,
+    $size in $dots {
+        .#{$pattern-prefix}-dots-#{$name} {
+            background-image: radial-gradient(currentColor #{$size}, transparent #{$size});
+            background-size: calc(10 * #{$size}) calc(10 * #{$size});
+        }
+    }
+}
+
+// .bg-cross-dots-{sm, md, lg, xl}
+@if index($pattern-list, 'cross-dots') {
+
+    @each $name,
+    $size in $dots {
+        .#{$pattern-prefix}-cross-dots-#{$name} {
+            background-image: radial-gradient(currentColor #{$size}, transparent #{$size}),
+            radial-gradient(currentColor #{$size}, transparent #{$size});
+            background-size: calc(20 * #{$size}) calc(20 * #{$size});
+            background-position: 0 0,
+            calc(10 * #{$size}) calc(10 * #{$size});
+        }
+    }
+}
+
+@each $name,
+$size in $pattern-sizes {
+
+    // .bg-vertical-lines-{sm, md, lg, xl}
+    @if index($pattern-list, 'vertical-lines') {
+        .#{$pattern-prefix}-vertical-lines-#{$name} {
+            background-image: repeating-linear-gradient(to right,
+                    currentColor,
+                    currentColor 1px,
+                    transparent 1px,
+                    transparent);
+            background-size: #{$size} #{$size};
+        }
+    }
+
+    // .bg-horizontal-lines-{sm, md, lg, xl}
+    @if index($pattern-list, 'horizontal-lines') {
+        .#{$pattern-prefix}-horizontal-lines-#{$name} {
+            background-image: repeating-linear-gradient(0deg,
+                    currentColor,
+                    currentColor 1px,
+                    transparent 1px,
+                    transparent);
+            background-size: #{$size} #{$size};
+        }
+    }
+
+    // .bg-diagonal-lines-{sm, md, lg, xl}
+    @if index($pattern-list, 'diagonal-lines') {
+        .#{$pattern-prefix}-diagonal-lines-#{$name} {
+            background-image: repeating-linear-gradient(45deg,
+                    currentColor 0,
+                    currentColor 1px,
+                    transparent 0,
+                    transparent 50%);
+            background-size: #{$size} #{$size};
+        }
+    }
+}
+
+
+@each $name,
+$size in $pattern-sizes {
+
+    // .bg-vertical-stripes-{sm, md, lg, xl}
+    @if index($pattern-list, 'vertical-stripes') {
+        .#{$pattern-prefix}-vertical-stripes-#{$name} {
+            background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);
+            background-size: #{$size} #{$size};
+        }
+    }
+
+    // .bg-horizontal-stripes-{sm, md, lg, xl}
+    @if index($pattern-list, 'horizontal-stripes') {
+        .#{$pattern-prefix}-horizontal-stripes-#{$name} {
+            background-image: linear-gradient(0deg, transparent 50%, currentColor 50%);
+            background-size: #{$size} #{$size};
+        }
+    }
+
+    // .bg-diagonal-stripes-{sm, md, lg, xl}
+    @if index($pattern-list, 'diagonal-stripes') {
+        .#{$pattern-prefix}-diagonal-stripes-#{$name} {
+            background: repeating-linear-gradient(45deg,
+                transparent,
+                transparent #{$size},
+                currentColor #{$size},
+                currentColor calc(2 * #{$size}));
+        }
+    }
+}
+
+// .bg-zigzag-{sm, md, lg, xl}
+@if index($pattern-list, 'zigzag') {
+
+    @each $name,
+    $size in $pattern-sizes {
+        .#{$pattern-prefix}-zigzag-#{$name} {
+            background: linear-gradient(135deg, currentColor 25%, transparent 25%) -#{$size} 0,
+            linear-gradient(225deg, currentColor 25%, transparent 25%) -#{$size} 0,
+            linear-gradient(315deg, currentColor 25%, transparent 25%),
+            linear-gradient(45deg, currentColor 25%, transparent 25%);
+            background-size: calc(2 * #{$size}) calc(2 * #{$size});
+        }
+    }
+}
+
+// .bg-triangles-{sm, md, lg, xl}
+@if index($pattern-list, 'triangles') {
+
+    @each $name,
+    $size in $pattern-sizes {
+        .#{$pattern-prefix}-triangles-#{$name} {
+            background-image: linear-gradient(45deg,
+                    currentColor 50%,
+                    transparent 50%);
+            background-size: #{$size} #{$size};
+        }
+    }
+}
+
+// .text-pattern
+.text-pattern {
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+// Width and Height
+@each $name,
+$size in $pattern-sizes {
+    .#{$pattern-prefix}-w-#{$name} {
+        width: $size;
+    }
+
+    .#{$pattern-prefix}-h-#{$name} {
+        height: $size;
+    }
+}

sass/spectre-exp.scss

@@ -0,0 +1,18 @@
+// Variables and mixins
+@import "variables";
+@import "mixins";
+
+/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
+// Experimentals
+@import "autocomplete";
+@import "calendars";
+@import "carousels";
+@import "comparison-sliders";
+@import "filters";
+@import "meters";
+@import "off-canvas";
+@import "parallax";
+@import "progress";
+@import "sliders";
+@import "timelines";
+@import "viewer-360";

sass/spectre-icons.scss

@@ -0,0 +1,10 @@
+// Variables and mixins
+@import "variables";
+@import "mixins";
+
+/*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */
+// Icons
+@import "icons/icons-core";
+@import "icons/icons-navigation";
+@import "icons/icons-action";
+@import "icons/icons-object";

sass/spectre.scss

@@ -0,0 +1,48 @@
+// Variables and mixins
+@import "variables";
+@import "mixins";
+
+/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
+// Reset and dependencies
+@import "normalize";
+@import "base";
+
+// Elements
+@import "typography";
+@import "tables";
+@import "buttons";
+@import "forms";
+@import "labels";
+@import "codes";
+@import "media";
+
+// Layout
+@import "layout";
+@import "hero";
+@import "navbar";
+
+// Components
+@import "accordions";
+@import "avatars";
+@import "badges";
+@import "breadcrumbs";
+@import "bars";
+@import "cards";
+@import "chips";
+@import "dropdowns";
+@import "empty";
+@import "menus";
+@import "modals";
+@import "navs";
+@import "pagination";
+@import "panels";
+@import "popovers";
+@import "steps";
+@import "tabs";
+@import "tiles";
+@import "toasts";
+@import "tooltips";
+
+// Utility classes
+@import "animations";
+@import "utilities";

sass/utilities/_colors.scss

@@ -0,0 +1,37 @@
+// Text colors
+@include text-color-variant(".text-primary", $primary-color);
+
+@include text-color-variant(".text-secondary", $secondary-color-dark);
+
+@include text-color-variant(".text-gray", $gray-color);
+
+@include text-color-variant(".text-gray-dark", $gray-color-dark);
+
+@include text-color-variant(".text-light", $light-color);
+
+@include text-color-variant(".text-dark", $body-font-color);
+
+@include text-color-variant(".text-success", $success-color);
+
+@include text-color-variant(".text-warning", $warning-color);
+
+@include text-color-variant(".text-error", $error-color);
+
+// Background colors
+@include bg-color-variant(".bg-primary", $primary-color);
+
+@include bg-color-variant(".bg-secondary", $secondary-color);
+
+@include bg-color-variant(".bg-dark", $dark-color);
+
+@include bg-color-variant(".bg-gray", $bg-color);
+
+@include bg-color-variant(".bg-light-gray", $gray-color-light);
+
+@include bg-color-variant(".bg-dark-gray", $bg-color-dark);
+
+@include bg-color-variant(".bg-success", $success-color);
+
+@include bg-color-variant(".bg-warning", $warning-color);
+
+@include bg-color-variant(".bg-error", $error-color);

sass/utilities/_cursors.scss

@@ -0,0 +1,30 @@
+// Cursors
+.c-hand {
+  cursor: pointer;
+}
+
+.c-move {
+  cursor: move;
+}
+
+.c-zoom-in {
+  cursor: zoom-in;
+}
+
+.c-zoom-out {
+  cursor: zoom-out;
+}
+
+.c-not-allowed {
+  cursor: not-allowed;
+}
+
+.c-auto {
+  cursor: auto;
+}
+
+
+.clickable {
+  cursor: pointer;
+}
+

sass/utilities/_display.scss

@@ -0,0 +1,44 @@
+// Display
+.d-block {
+  display: block;
+}
+.d-inline {
+  display: inline;
+}
+.d-inline-block {
+  display: inline-block;
+}
+.d-flex {
+  display: flex;
+}
+.d-inline-flex {
+  display: inline-flex;
+}
+.d-none,
+.d-hide {
+  display: none !important;
+}
+.d-visible {
+  visibility: visible;
+}
+.d-invisible {
+  visibility: hidden;
+}
+.text-hide {
+  background: transparent;
+  border: 0;
+  color: transparent;
+  font-size: 0;
+  line-height: 0;
+  text-shadow: none;
+}
+.text-assistive {
+  border: 0;
+  clip: rect(0,0,0,0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}

sass/utilities/_divider.scss

@@ -0,0 +1,50 @@
+// Divider
+.divider,
+.divider-vert {
+  display: block;
+  position: relative;
+
+  &[data-content]::after {
+    background: $bg-color-light;
+    color: $gray-color;
+    content: attr(data-content);
+    display: inline-block;
+    font-size: $font-size-sm;
+    padding: 0 $unit-2;
+    transform: translateY(-$font-size-sm + $border-width);
+  }
+}
+
+.divider {
+  border-top: $border-width solid $border-color-light;
+  height: $border-width;
+  margin: $unit-2 0;
+
+  &[data-content] {
+    margin: $unit-4 0;
+  }
+}
+
+.divider-vert {
+  display: block;
+  padding: $unit-4;
+
+  &::before {
+    border-left: $border-width solid $border-color;
+    bottom: $unit-2;
+    content: "";
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: $unit-2;
+    transform: translateX(-50%);
+  }
+
+  &[data-content]::after {
+    left: 50%;
+    padding: $unit-1 0;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

sass/utilities/_loading.scss

@@ -0,0 +1,34 @@
+// Loading
+.loading {
+  color: transparent !important;
+  min-height: $unit-4;
+  pointer-events: none;
+  position: relative;
+  &::after {
+    animation: loading 500ms infinite linear;
+    border: $border-width-lg solid $primary-color;
+    border-radius: 50%;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: $unit-4;
+    left: 50%;
+    margin-left: -$unit-2;
+    margin-top: -$unit-2;
+    position: absolute;
+    top: 50%;
+    width: $unit-4;
+    z-index: $zindex-0;
+  }
+
+  &.loading-lg {
+    min-height: $unit-10;
+    &::after {
+      height: $unit-8;
+      margin-left: -$unit-4;
+      margin-top: -$unit-4;
+      width: $unit-8;
+    }
+  }
+}

sass/utilities/_position.scss

@@ -0,0 +1,54 @@
+// Position
+.clearfix {
+  @include clearfix();
+}
+
+.float-left {
+  float: left !important;
+}
+
+.float-right {
+  float: right !important;
+}
+
+.p-relative {
+  position: relative !important;
+}
+
+.p-absolute {
+  position: absolute !important;
+}
+
+.p-fixed {
+  position: fixed !important;
+}
+
+.p-sticky {
+  position: sticky !important;
+}
+
+.p-centered {
+  display: block;
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.flex-centered {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+// Spacing
+@include margin-variant(0, 0);
+
+@include margin-variant(1, $unit-1);
+
+@include margin-variant(2, $unit-2);
+
+@include padding-variant(0, 0);
+
+@include padding-variant(1, $unit-1);
+
+@include padding-variant(2, $unit-2);

sass/utilities/_shapes.scss

@@ -0,0 +1,8 @@
+// Shapes
+.s-rounded {
+  border-radius: $border-radius;
+}
+
+.s-circle {
+  border-radius: 50%;
+}

sass/utilities/_text.scss

@@ -0,0 +1,64 @@
+// Text
+// Text alignment utilities
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+// Text transform utilities
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+// Text style utilities
+.text-normal {
+  font-weight: normal;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.text-large {
+  font-size: 1.2em;
+}
+
+// Text overflow utilities
+.text-ellipsis {
+  @include text-ellipsis();
+}
+
+.text-clip {
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+
+.text-break {
+  hyphens: auto;
+  word-break: break-word;
+  word-wrap: break-word;
+}

src/client.js

@@ -0,0 +1,5 @@
+import * as sapper from '@sapper/app';
+
+sapper.start({
+	target: document.querySelector('#sapper')
+});

src/components/Icon.svelte

@@ -0,0 +1,40 @@
+<script>
+export let size="24";
+export let fill="none";
+export let color="#1f314d";
+export let light=false;
+export let width="2";
+export let linecap="round";
+export let linejoin="round";
+export let name;
+export let responsive=false;
+export let inactive=false;
+export let tooltip="";
+export let tooltip_right=false;
+export let tooltip_bottom=false;
+export let tooltip_left=false;
+export let light_color="#f8f9f6";
+</script>
+
+<style lang="scss">
+  @import 'sass/_variables';
+
+  .inactive {
+    stroke: $gray-color;
+    fill: $gray-color-light;
+  }
+</style>
+
+<span class:tooltip="{tooltip !== ''}"  class:tooltip-bottom="{ tooltip_bottom }" class:tooltip-left="{ tooltip_left }" class:tooltip-right={ tooltip_right } data-tooltip="{tooltip}">
+  <svg class="icon-{name}" class:inactive="{inactive}" class:img-responsive="{responsive}" data-tooltip="{tooltip}"
+  width="{size}"
+  height="{size}"
+  fill="{fill}"
+  stroke="{light ? light_color : color}"
+  stroke-width="{width}"
+  stroke-linecap="{linecap}"
+  stroke-linejoin="{linejoin}"
+>
+  <use xlink:href="/icons/feather-sprite.svg#{name}"/>
+</svg>
+</span>

src/node_modules/buttons.js

@@ -0,0 +1,185 @@
+
+
+class ButtonMachine {
+
+  constructor(code) {
+    this.stack = [];
+    this.ip = 0;
+    this.code = code;
+    this.max_ticks = 128;
+    this.tick = 0;
+    this.registers = {};
+    this.error = '';
+    this.error_line = 0;
+    this.halted = false;
+  }
+
+  assert(test, message) {
+
+    // I should use exceptions but not sure if I want to do that too early in the course
+    if(!test) {
+      let display_op = this.cur_op ? this.cur_op.join(' ') : 'NONE';
+      this.error_line = this.ip;
+      console.log(`HALT[FIRE]: ${message} at line #${this.ip}: ${display_op}`);
+      this.error = message;
+      this.halted = true;
+    }
+
+    return test;
+  }
+
+  get operations() {
+    return Object.getOwnPropertyNames(ButtonMachine.prototype)
+      .filter(x => x.startsWith('op_'))
+      .map(x => x.slice(3));
+  }
+
+  get stack_top() {
+    return this.stack[0];
+  }
+
+  get cur_op() {
+    return this.code[this.ip];
+  }
+
+  get register_entries() {
+   return Object.entries(this.registers);
+  }
+
+  infix(op_name, cb) {
+    let b = this.stack.pop();
+    this.assert(b !== undefined, `${op_name} right operand POP empty stack`);
+
+    let a = this.stack.pop();
+    this.assert(b !== undefined, `${op_name} left operand POP empty stack`);
+
+    let res = cb(a, b);
+    this.assert(res != NaN,  `${op_name} results in NaN value`);
+    this.assert(res !== undefined, `${op_name} results in undefined value`);
+
+    this.stack.push(res);
+    this.next();
+  }
+
+  op_ADD() {
+    this.infix('ADD', (a,b) => a + b);
+  }
+
+  op_SUB() {
+    this.infix('SUB', (a,b) => a - b);
+  }
+
+  op_DIV() {
+    this.infix('DIV', (a,b) => a / b);
+  }
+
+  op_MUL() {
+    this.infix('MUL', (a,b) => a * b);
+  }
+
+  op_MOD() {
+    this.infix('MOD', (a,b) => a % b);
+  }
+
+  op_POP() {
+    let val = this.stack.pop();
+    this.next();
+    return val;
+  }
+
+  op_PUSH(value) {
+    this.stack.push(value);
+    this.next();
+  }
+
+  op_HALT(message) {
+    this.halted = true;
+    this.error = message;
+  }
+
+  op_JUMP(line) {
+    if(!this.assert(line !== undefined, `Invalid jump! You need to give a line number.`)) return;
+    if(!this.assert(line <= this.code.length, `Invalid jump to line ${line} last line is ${this.code.length}`)) return;
+
+    this.ip = line;
+  }
+
+  op_JZ(line) {
+    if(!this.assert(line !== undefined, `Invalid jump! You need to give a line number.`)) return;
+    if(!this.assert(line <= this.code.length, `Invalid jump to line ${line} last line is ${this.code.length}`)) return;
+
+    if(this.stack_top == 0) {
+      this.op_JUMP(line);
+    } else {
+      this.next();
+    }
+  }
+
+  op_JNZ(line) {
+    if(!this.assert(line !== undefined, `Invalid jump! You need to give a line number.`)) return;
+    if(!this.assert(line <= this.code.length, `Invalid jump to line ${line} last line is ${this.code.length}`)) return;
+
+    if(this.stack_top != 0) {
+      this.op_JUMP(line);
+    } else {
+      this.next();
+    }
+  }
+
+  op_CLR() {
+    Object.keys(this.registers).forEach(key => delete this.registers[key]); // clears register
+    this.stack.splice(0, this.stack.length); // clears the stack contents
+
+    this.ip = 0;
+    this.tick = 0;
+    this.error = '';
+    this.error_line = 0;
+    this.halted = false;
+  }
+
+  op_STOR(reg) {
+    this.registers[reg] = this.stack_top;
+    this.next();
+  }
+
+  op_RSTOR(reg) {
+    let val = this.registers[reg];
+    this.assert(val !== undefined, `Invalid register ${reg}`);
+
+    this.stack.push(val);
+    this.next();
+  }
+
+  get running() {
+    return this.halted === false && this.tick < this.max_ticks && this.ip < this.code.length && this.cur_op !== undefined;
+  }
+
+  next() {
+    this.ip++;
+  }
+
+  dump(leader) {
+    console.log(leader, "TICK", this.tick, "CUR", this.cur_op, "IP", this.ip, "STACK", this.stack);
+  }
+
+  step() {
+    if(this.running) {
+      let [op, data] = this.cur_op;
+      let op_func = this[`op_${op}`];
+      this.assert(op_func !== undefined, `Invalid operation ${op}`);
+      op_func.call(this, data);
+      this.tick++;
+    }
+  }
+
+  run(debug=false) {
+    while(this.running === true) {
+      if(debug) this.dump(">>>");
+      this.step();
+      if(debug) this.dump("<<<");
+      // this.tick is managed by this.step
+    }
+  }
+}
+
+module.exports = { ButtonMachine };

src/routes/_error.svelte

@@ -0,0 +1,40 @@
+<script>
+	export let status;
+	export let error;
+
+	const dev = process.env.NODE_ENV === 'development';
+</script>
+
+<style>
+	h1, p {
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<p>{error.message}</p>
+
+{#if dev && error.stack}
+	<pre>{error.stack}</pre>
+{/if}

src/routes/_layout.svelte

@@ -0,0 +1,9 @@
+<script>
+</script>
+
+<style>
+</style>
+
+<main>
+	<slot></slot>
+</main>

src/routes/index.svelte

@@ -0,0 +1,180 @@
+<svelte:head>
+  <title>Buttons the Programming Language</title>
+</svelte:head>
+
+<script>
+  import {goto, stores} from '@sapper/app';
+  import { ButtonMachine } from 'buttons';
+  import Icon from '../components/Icon.svelte';
+  const { session } = stores();
+
+  let code = [
+    ['PUSH', -20], // start at -20
+    ['PUSH', 1],  // increment by 1
+    ['ADD'],      
+    ['JZ'],    // if we're at 0 jumps to the end
+    ['JUMP', 1]    // the previous test fails so it jumps to loop again
+  ];
+
+  let machine = new ButtonMachine(code);
+
+  let has_error = false;
+
+  $: has_error = machine.error != '';
+
+  const data_ops = new Set(['PUSH', 'JZ', 'JNZ', 'JUMP', 'STOR', 'RSTOR', 'HALT']);
+
+  const ops = machine.operations;
+
+  const change_op = (i, count) => {
+    let cur_op = code[i][0];
+    let cur_index = ops.indexOf(cur_op);
+    let new_index = (cur_index + count) < 0 ? ops.length - 1 : (cur_index + count) % ops.length; 
+
+    code[i][0] = ops[new_index];
+  }
+
+  const op_has_data = (op) => data_ops.has(op);
+
+  const run_machine = () => {
+    machine.run();
+    machine = machine; // make svelte go
+  }
+
+  const step_machine = () => {
+    machine.step();
+    machine = machine;
+  }
+
+  const reset_machine = () => {
+    machine = new ButtonMachine(code);
+  }
+
+  const clone_line = (i) => {
+    let clone = code[i];
+    code.splice(i, 0, [...clone]);
+    code = code;
+  }
+
+  const delete_line = (i) => {
+    let item = code.splice(i, 1);
+    code = code;
+  }
+</script>
+
+<style lang="scss">
+  @import "sass/_variables";
+
+  .active-line {
+    background-color: $warning-color !important;
+  }
+
+  .empty-data {
+    width: 100%;
+    background-color: lighten($primary-color, 40%);
+  }
+</style>
+
+<div class="container grid-xl" id="content" data-testid="buttons-page">
+  <div class="columns">
+    <div class="column col-12">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>IP</th>
+            <th>TICK</th>
+            <th>HALT</th>
+            <th>ERROR</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="active">
+            <td>{ machine.ip }</td>
+            <td>{ machine.tick }</td>
+            <td>{ machine.halted }</td>
+            <td>{ machine.error }</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <br/>
+
+  <div class="columns">
+    <div class="column col-6">
+    <button class="btn btn-primary" on:click={ run_machine }><Icon name="play-circle" tooltip="Run it" light={ true }/></button>
+    <button class="btn btn-primary" on:click={ step_machine }><Icon name="clock" tooltip="Step through" light={ true }/></button>
+    <button class="btn btn-primary" on:click={ reset_machine }><Icon name="power" tooltip="Reset" light={ true }/></button>
+
+    <div class="divider"></div>
+      {#each code as [op, data], i} 
+        <div class="input-group" class:has-error={ has_error }>
+          {#if has_error && machine.error_line == i}
+            <Icon name="alert-triangle" color="red" />
+          {:else}
+            {i}:
+          {/if}
+
+            <button class:active-line={ machine.ip == i } 
+                       on:click={ () => change_op(i, +1) } 
+                       on:contextmenu|preventDefault={ () => change_op(i, -1) }
+                       class="btn btn-primary input-group-btn">{op}</button>
+
+          {#if op_has_data(op)}
+            {#if op === 'STOR' || op === 'RSTOR' || op == 'HALT'}
+              <input class:active-line={ machine.ip == i } 
+                     type="text" class="form-input" placeholder="register" bind:value={data}>
+            {:else}
+              <input class:active-line={ machine.ip == i } 
+                     type="number" class="form-input" placeholder="data" bind:value={data}>
+            {/if}
+          {:else}
+            <div class:active-line={ machine.ip == i } class="empty-data"></div>
+          {/if}
+
+          <button class="btn btn-primary input-group-addon"
+                  on:click={ () => clone_line(i) }>
+                  <Icon name="copy" tooltip='Clone it'/>
+          </button>
+          <button class="btn btn-primary input-group-addon"
+                  on:click={ () => delete_line(i) }>
+                  <Icon name="delete" tooltip='Delete it'/>
+          </button>
+        </div>
+      {/each}
+    </div>
+    <div class="column col-2">
+      <table class="table">      <thead>
+         <tr>
+           <th>STACK</th>
+         </tr>
+       </thead>
+
+        {#each machine.stack as datum, i} 
+          <tr>
+            <td>{datum}</td>
+          </tr>
+        {/each}
+      </table>
+    </div>
+    <div class="column col-4">
+     <table class="table">
+       <thead>
+         <tr>
+           <th>REGISTER</th>
+           <th>VALUE</th>
+         </tr>
+       </thead>
+       <tbody>
+         {#each machine.register_entries as [name, value] }
+         <tr class="active">
+           <td>{ name }</td>
+           <td>{ value }</td>
+         </tr>
+         {/each}
+       </tbody>
+     </table>
+    </div>
+  </div>
+</div>

src/server.js

@@ -0,0 +1,17 @@
+import sirv from 'sirv';
+import polka from 'polka';
+import compression from 'compression';
+import * as sapper from '@sapper/server';
+
+const { PORT, NODE_ENV } = process.env;
+const dev = NODE_ENV === 'development';
+
+polka() // You can also use Express
+	.use(
+		compression({ threshold: 0 }),
+		sirv('static', { dev }),
+		sapper.middleware()
+	)
+	.listen(PORT, err => {
+		if (err) console.log('error', err);
+	});

src/service-worker.js

@@ -0,0 +1,82 @@
+import { timestamp, files, shell, routes } from '@sapper/service-worker';
+
+const ASSETS = `cache${timestamp}`;
+
+// `shell` is an array of all the files generated by the bundler,
+// `files` is an array of everything in the `static` directory
+const to_cache = shell.concat(files);
+const cached = new Set(to_cache);
+
+self.addEventListener('install', event => {
+	event.waitUntil(
+		caches
+			.open(ASSETS)
+			.then(cache => cache.addAll(to_cache))
+			.then(() => {
+				self.skipWaiting();
+			})
+	);
+});
+
+self.addEventListener('activate', event => {
+	event.waitUntil(
+		caches.keys().then(async keys => {
+			// delete old caches
+			for (const key of keys) {
+				if (key !== ASSETS) await caches.delete(key);
+			}
+
+			self.clients.claim();
+		})
+	);
+});
+
+self.addEventListener('fetch', event => {
+	if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
+
+	const url = new URL(event.request.url);
+
+	// don't try to handle e.g. data: URIs
+	if (!url.protocol.startsWith('http')) return;
+
+	// ignore dev server requests
+	if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
+
+	// always serve static files and bundler-generated assets from cache
+	if (url.host === self.location.host && cached.has(url.pathname)) {
+		event.respondWith(caches.match(event.request));
+		return;
+	}
+
+	// for pages, you might want to serve a shell `service-worker-index.html` file,
+	// which Sapper has generated for you. It's not right for every
+	// app, but if it's right for yours then uncomment this section
+	/*
+	if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
+		event.respondWith(caches.match('/service-worker-index.html'));
+		return;
+	}
+	*/
+
+	if (event.request.cache === 'only-if-cached') return;
+
+	// for everything else, try the network first, falling back to
+	// cache if the user is offline. (If the pages never change, you
+	// might prefer a cache-first approach to a network-first one.)
+	event.respondWith(
+		caches
+			.open(`offline${timestamp}`)
+			.then(async cache => {
+				try {
+					const response = await fetch(event.request);
+					cache.put(event.request, response.clone());
+					return response;
+				} catch(err) {
+					const response = await cache.match(event.request);
+					if (response) return response;
+
+					throw err;
+				}
+			})
+	);
+});

src/template.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="theme-color" content="#333333">
+
+    <link rel="stylesheet" href="/css/spectre.min.css">
+    <link rel="stylesheet" href="/css/spectre-exp.min.css">
+    <link rel="stylesheet" href="/css/spectre-icons.min.css">
+    <link rel="stylesheet" href="/css/pattern.min.css">
+
+
+    %sapper.base%
+
+    <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
+    <link rel="icon" type="image/png" href="favicon.png">
+
+    <!-- Sapper creates a <script> tag containing `src/client.js`
+      and anything else it needs to hydrate the app and
+       initialise the router -->
+        %sapper.scripts%
+
+        <!-- Sapper generates a <style> tag containing critical CSS
+for the current page. CSS for the rest of the app is
+        lazily loaded when it precaches secondary pages -->
+        %sapper.styles%
+
+        <!-- This contains the contents of the <svelte:head> component, if
+          the current page has one -->
+        %sapper.head%
+        </head>
+        <body>
+        <!-- The application will be rendered inside this element,
+        because `src/client.js` references it -->
+        <div id="sapper">%sapper.html%</div>
+        </body>
+        </html>