Initial commit after running Zurb Foundation subtheme from STARTER script

2024-04-20 14:40:26 -04:00 · 2024-04-20 14:40:26 -04:00 · 61ce6fca2d
commit 61ce6fca2d
49 changed files with 2166 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,4 @@
+{
+  "presets": [ "@babel/preset-env" ],
+  "compact": false
+}
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1,2 @@
+# treat sourcemaps as binary file, since we don't care about their diff.
+css/*.css.map binary
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+node_modules
--- a/.sass-lint.yml
+++ b/.sass-lint.yml
@ -0,0 +1,338 @@
+# Note: This is not directly taken from the sass-lint from zurb foundation code:
+# https://github.com/zurb/foundation-sites/blob/develop/.scss-lint.yml
+# This should align as closely as possible with Drupal code standards:
+# https://www.drupal.org/docs/develop/standards/css/csscomb-settings-for-drupal-css-formatting-and-sort-tool
+
+options:
+  formatter: stylish
+files:
+  include: 'scss/**/*.scss'
+rules:
+  # Extends
+  extends-before-mixins: 1
+  extends-before-declarations: 1
+  placeholder-in-extend: 1
+
+  # Mixins
+  mixins-before-declarations: 1
+
+  # Line Spacing
+  one-declaration-per-line: 1
+  empty-line-between-blocks: 1
+  single-line-per-selector: 1
+
+  # Disallows
+  no-attribute-selectors: 0
+  no-color-hex: 0
+  no-color-keywords: 1
+  no-color-literals: 1
+  no-combinators: 0
+  no-css-comments: 0
+  no-debug: 1
+  no-disallowed-properties: 0
+  no-duplicate-properties: 0
+  no-empty-rulesets: 1
+  no-extends: 0
+  no-ids: 0
+  no-important: 1
+  no-invalid-hex: 1
+  no-mergeable-selectors: 1
+  no-misspelled-properties: 1
+  no-qualifying-elements: 1
+  no-trailing-whitespace: 1
+  no-trailing-zero: 1
+  no-transition-all: 1
+  no-universal-selectors: 0
+  no-url-domains: 1
+  no-url-protocols: 1
+  no-vendor-prefixes: 0
+  no-warn: 1
+  property-units: 0
+
+  # Nesting
+  declarations-before-nesting: 1
+  force-attribute-nesting: 1
+  force-element-nesting: 1
+  force-pseudo-nesting: 1
+
+  # Name Formats
+  class-name-format:
+    - 1
+    - convention: hyphenatedbem
+  function-name-format: 1
+  id-name-format: 0
+  mixin-name-format: 1
+  placeholder-name-format: 1
+  variable-name-format: 1
+
+  # Style Guide
+  attribute-quotes: 1
+  bem-depth: 0
+  border-zero: 1
+  brace-style: 1
+  clean-import-paths: 1
+  empty-args: 1
+  hex-length: 1
+  hex-notation: 1
+  indentation: 1
+  leading-zero: 1
+  max-line-length: 0
+  max-file-line-count: 0
+  nesting-depth: 1
+  property-sort-order:
+    - 1
+    -
+      ignore-custom-properties: true
+      order:
+        # Specific - CSS property order
+        # https://www.drupal.org/docs/develop/standards/css/csscomb-settings-for-drupal-css-formatting-and-sort-tool
+        - '$charset'
+        - '$import'
+        - '$namespace'
+        - '$extend'
+        - '$variable'
+        - '$include'
+
+        # Position
+        - 'position'
+        - 'z-index'
+        - 'top'
+        - 'right'
+        - 'bottom'
+        - 'left'
+
+        # Disposition
+        - 'display'
+
+        - 'flex'
+        - 'flex-basis'
+        - 'flex-direction'
+        - 'flex-flow'
+        - 'flex-grow'
+        - 'flex-shrink'
+        - 'flex-wrap'
+        - 'justify-content'
+        - 'order'
+
+        - 'box-align'
+        - 'box-flex'
+        - 'box-orient'
+        - 'box-pack'
+
+        - 'align-content'
+        - 'align-items'
+        - 'align-self'
+
+        - 'columns'
+        - 'column-gap'
+        - 'column-fill'
+        - 'column-rule'
+        - 'column-span'
+        - 'column-count'
+        - 'column-width'
+
+        - 'vertical-align'
+        - 'float'
+        - 'clear'
+
+        # Dimension
+        - 'box-sizing'
+
+        - 'width'
+        - 'min-width'
+        - 'max-width'
+
+        - 'height'
+        - 'min-height'
+        - 'max-height'
+
+        - 'margin'
+        - 'margin-top'
+        - 'margin-right'
+        - 'margin-bottom'
+        - 'margin-left'
+        - 'margin-collapse'
+        - 'margin-top-collapse'
+        - 'margin-right-collapse'
+        - 'margin-bottom-collapse'
+        - 'margin-left-collapse'
+
+        - 'padding'
+        - 'padding-top'
+        - 'padding-right'
+        - 'padding-bottom'
+        - 'padding-left'
+
+
+        # Global appearance
+        - 'appearance'
+        - 'opacity'
+        - 'filter'
+        - 'visibility'
+
+        - 'size'
+        - 'resize'
+        - 'zoom'
+
+        - 'transform'
+        - 'transform-box'
+        - 'transform-origin'
+        - 'transform-style'
+
+        # Border
+        - 'outline'
+        - 'outline-color'
+        - 'outline-offset'
+        - 'outline-style'
+        - 'outline-width'
+
+        - 'border'
+        - 'border-top'
+        - 'border-right'
+        - 'border-bottom'
+        - 'border-left'
+        - 'border-width'
+        - 'border-top-width'
+        - 'border-right-width'
+        - 'border-bottom-width'
+        - 'border-left-width'
+
+        - 'border-style'
+        - 'border-top-style'
+        - 'border-right-style'
+        - 'border-bottom-style'
+        - 'border-left-style'
+
+        - 'border-radius'
+        - 'border-top-left-radius'
+        - 'border-top-right-radius'
+        - 'border-bottom-right-radius'
+        - 'border-bottom-left-radius'
+        - 'border-radius-topleft'
+        - 'border-radius-topright'
+        - 'border-radius-bottomright'
+        - 'border-radius-bottomleft'
+
+        - 'border-color'
+        - 'border-top-color'
+        - 'border-right-color'
+        - 'border-bottom-color'
+        - 'border-left-color'
+
+        - 'border-collapse'
+        - 'border-spacing'
+
+        # Background
+        - 'background'
+        - 'background-image'
+        - 'background-color'
+        - 'background-attachment'
+        - 'background-clip'
+        - 'background-origin'
+        - 'background-position'
+        - 'background-repeat'
+        - 'background-size'
+
+        # Shadow
+        - 'box-shadow'
+
+        # Animation
+        - 'animation'
+        - 'animation-delay'
+        - 'animation-duration'
+        - 'animation-iteration-count'
+        - 'animation-name'
+        - 'animation-play-state'
+        - 'animation-timing-function'
+        - 'animation-fill-mode'
+
+        - 'transition'
+        - 'transition-delay'
+        - 'transition-duration'
+        - 'transition-property'
+        - 'transition-timing-function'
+
+
+        # Content
+        - 'content'
+
+        - 'list-style'
+        - 'list-style-image'
+        - 'list-style-position'
+        - 'list-style-type'
+
+        - 'overflow'
+        - 'overflow-x'
+        - 'overflow-y'
+        - 'clip'
+
+        # Text
+        - 'font'
+        - 'font-family'
+        - 'font-size'
+        - 'font-smoothing'
+        - 'osx-font-smoothing'
+        - 'font-style'
+        - 'font-variant'
+        - 'font-weight'
+        - 'src'
+
+        - 'word-spacing'
+        - 'letter-spacing'
+        - 'line-height'
+
+        - 'color'
+        - 'direction'
+        - 'text-align'
+        - 'text-decoration'
+        - 'text-indent'
+        - 'text-overflow'
+        - 'text-rendering'
+        - 'text-size-adjust'
+        - 'text-shadow'
+        - 'text-transform'
+
+        - 'white-space'
+        - 'word-break'
+        - 'word-wrap'
+        - 'hyphens'
+        - 'quotes'
+
+        # Divers
+        - 'pointer-events'
+        - 'cursor'
+
+        - 'backface-visibility'
+        - 'caption-side'
+        - 'empty-cells'
+        - 'table-layout'
+        - 'user-select'
+
+        - 'interpolation-mode'
+        - 'marks'
+        - 'page'
+        - 'set-link-source'
+        - 'unicode-bidi'
+        - 'speak'
+  pseudo-element: 0
+  quotes:
+    - 1
+    - style: double
+  shorthand-values: 1
+  url-quotes: 1
+  variable-for-property: 1
+  zero-unit: 1
+
+  # Inner Spacing
+  space-after-comma: 0
+  space-before-colon: 1
+  space-after-colon: 1
+  space-before-brace: 1
+  space-before-bang: 1
+  space-after-bang: 1
+  space-between-parens: 1
+  space-around-operator: 1
+
+  # Final Items
+  trailing-semicolon: 1
+  final-newline: 1
--- a/README.txt
+++ b/README.txt
@ -0,0 +1,135 @@
+BUILD A CHILD THEME WITH ZURB FOUNDATION
+----------------------------------------
+
+The base Foundation theme is designed to be easily extended by its sub-themes.
+You shouldn't modify any of the CSS or PHP files in the zurb_foundation/ folder;
+but instead you should create a sub-theme of zurb_foundation which is located in
+a folder outside of the root zurb_foundation/ folder. The examples below assume
+zurb_foundation and your sub-theme will be installed in themes/,
+but any valid theme directory is acceptable. Read the
+sites/default/default.settings.php for more info.
+
+This theme does not support IE7. If you need it downgrade to Foundation 2 see
+http://foundation.zurb.com/docs/faq.php or use the script in the starter
+template.php THEMENAME_preprocess_html function.
+
+*** IMPORTANT NOTE ***
+* After adding a new theme in Drupal 8, you'll need to clear the theme
+registry's cache, which you can do by clearing all cache in the UI or running
+`drush cr` , if you have Drush installed.
+
+Using Drush
+-------------------------------
+
+**Automatic drush sub-theme setup**
+
+To create a sub-theme, simply run the Drush command `drush fst sub_theme`, where
+"sub_theme" is the desired machine name of your sub-theme. Once a sub-theme is
+created, you can enable it at /admin/appearance .
+
+Then follow step 6 below to generate the necessary Foundation files that are not
+included in the repository by default.
+
+**Drush and Gulp**
+
+The `gulpfile.babel.js` includes drush commands that can be run every time scss/css
+is updated. To use drush, edit the `config.js` file. In the `drush` option:
+
+1. Set `enabled: false` to `enabled: true`
+1. (Optional) Set the `drush_alias` variable.
+
+
+Manual sub-theme setup
+----------------------
+
+ 1. Setup the location for your new sub-theme.
+
+    Copy the peceful folder out of the zurb_foundation/ folder and rename it to
+    be your new sub-theme. IMPORTANT: The name of your sub-theme must start with
+    an alphabetic character and can only contain lowercase letters, numbers and
+    underscores.
+
+    For example, copy the themes/zurb_foundation/peceful folder and
+    rename it as themes/foo.
+
+      Why? Each theme should reside in its own folder. To make it easier to
+      upgrade Foundation, sub-themes should reside in a folder separate from the
+      base theme.
+
+ 2. Setup the basic information for your sub-theme.
+
+    In your new sub-theme folder, rename the peceful.info.yml.txt file to
+    include the name of your new sub-theme and remove the ".txt" extension. Then
+    edit the .info file by editing the name and description field.
+
+    For example, rename the foo/peceful.info.yml.txt file to foo/foo.info.yml.
+    Edit the foo.info.yml file and change "name: Foundation Sub-theme Starter"
+    to "name: Foo" and "description: Read..." to "description: A sub-theme".
+
+      Why? The .info.yml file describes the basic things about your theme: its
+      name, description, features, template regions, and libraries.
+      See the Drupal 8 Theme Guide for more info: https://www.drupal.org/theme-guide/8
+
+    Then, visit your site's Appearance page at admin/appearance to refresh
+    Drupal 8's cache of .info file data.
+
+ 3. Edit your sub-theme to use the proper function names.
+
+    First, rename peceful.theme to include the name of your new sub-theme. In
+    this example we'll assume that it's renamed foo.theme.
+
+    Edit the foo.theme and theme-settings.php files in your sub-theme's
+    folder; replace ALL occurrences of "peceful" with the name of your
+    sub-theme.
+
+    For example, edit foo/foo.theme and foo/theme-settings.php and replace
+    every occurrence of "peceful" with "foo".
+
+    It is recommended to use a text editing application with search and
+    "replace all" functionality.
+
+ 5. Set your website's default theme.
+
+    Log in as an administrator on your Drupal site, go to the Appearance page at
+    admin/appearance and click the "Enable and set default" link next to your
+    new sub-theme.
+
+ 6. This theme uses npm which you will need to install as a prerequisite for
+    developing your theme, although once in production it is not necessary for
+    general use.
+
+    Once you have ensured npm is installed, run this command at the root of
+    your sub theme:
+    - `npm install`
+
+    Finally, run `gulp` to run the Sass compiler, or 'gulp watch' which
+    will re-run every time you save a Sass file. Press Ctrl-C to break out of
+    watching files.
+
+
+Optional steps:
+
+ 7. Modify the markup in Foundation core theme's template files.
+
+    If you decide you want to modify any of the .html.twig template files in the
+    zurb_foundation folder, copy them to your sub-theme's folder before
+    making any changes.And then rebuild the theme registry.
+
+    For example, copy zurb_foundation/templates/page.html.twig to
+    THEMENAME/templates/page.html.twig.
+
+ 8. Optionally override existing Drupal core *.html.twig templates in your
+    sub-theme.
+
+ 9. Add custom css and js files to your sub-theme
+
+    Rename peceful.libraries.yml to the name of your sub-theme, un-commenting
+    lines and making name changes as needed.
+
+    You'll also need to edit your info.yml file to include your new library.
+    There are instructions in the info.yml file to help you do this.
+
+ 9. Further extend your sub-theme.
+
+    Discover further ways to extend your sub-theme by reading
+    Drupal 8's Theme Guide online at: https://www.drupal.org/theme-guide/8
--- a/config.js
+++ b/config.js
@ -0,0 +1,34 @@
+// Override gulp options here rather than in gulpfile.js.
+
+// Set a drush alias if required to run locally, i.e.:
+// '@multisite.local --uri=multisitename'
+var drush_alias = '';
+
+module.exports = {
+  // set 'enabled: true' to run drush commands as a part of 'gulp watch'.
+  drush: {
+    enabled: false,
+    alias: {
+      css_js: 'drush ' + drush_alias + ' cc css-js',
+      cr: 'drush ' + drush_alias + ' cr'
+    }
+  },
+
+  // Override sass compile options.
+  /*
+  scss: {
+    outputStyle: 'expanded',
+    lintIgnore: '',
+  },
+  */
+
+  // If your files are on a network share, you may want to turn on polling for
+  // Gulp watch. Since polling is less efficient, we disable polling by default.
+  /*
+  gulpWatchOptions: {
+    interval: 1000,
+    mode: 'poll'
+  },
+  */
+
+};
--- a/config.yml
+++ b/config.yml
@ -0,0 +1,22 @@
+# The URL of your server (e.g. http://localhost:49871 or foobar.lndo.site) for browersync
+BROWSERSYNC: 'https://foobar.lndo.site'
+
+# Gulp will reference these paths when it copies files
+PATHS:
+  # Path to built css folder
+  dist: "css"
+  # Path to main scss files and settings for subtheme
+  scss: "scss/*.scss"
+  # Path to subtheme scss files
+  componentScss: "scss/**/*.scss"
+  # Paths to Sass libraries, which can then be loaded with @import
+  foundationScss:
+    - "node_modules/foundation-sites/scss"
+    - "node_modules/motion-ui/src"
+  # Path to custom JS
+  js:
+    "js/*.js"
+  # Paths to Foundation JavaScript for webpack to bundle modules
+  foundationJs:
+    - "node_modules/foundation-sites/dist/js/*.js"
+    - "node_modules/motion-ui/dist/*.js"
--- a/config/install/README.txt
+++ b/config/install/README.txt
@ -0,0 +1,8 @@
+DEFAULT INSTALL SETTINGS
+----------------------------------
+
+Before installing your theme, change the name of peceful.settings.yml to use
+your theme name. This will ensure that base css and js are turned off by default on
+install. You can add additional settings in that file if you need as well.
+
+See zurb-foundation/config/install/zurb_foundation.settings.yml for example.
--- a/config/install/peceful.settings.yml
+++ b/config/install/peceful.settings.yml
@ -0,0 +1,2 @@
+zurb_foundation_disable_base_css: 1
+zurb_foundation_disable_base_js: 1
--- a/css/peceful.css
+++ b/css/peceful.css
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@ -0,0 +1,161 @@
+// The Theme build process is based off of the Foundation Zurb
+// Template: https://github.com/foundation/foundation-zurb-template
+// Update the config.yml file with your peceful URI, and any
+// file paths that are different from the default.
+
+import plugins       from 'gulp-load-plugins';
+import yargs         from 'yargs';
+import browser       from 'browser-sync';
+import gulp          from 'gulp';
+import rimraf        from 'rimraf';
+import yaml          from 'js-yaml';
+import fs            from 'fs';
+import webpackStream from 'webpack-stream';
+import webpack2      from 'webpack';
+import named         from 'vinyl-named';
+import autoprefixer  from 'autoprefixer';
+import imagemin      from 'gulp-imagemin';
+
+const sass = require('gulp-sass');
+const postcss = require('gulp-postcss');
+const sassLint = require('gulp-sass-lint');
+
+// Load all Gulp plugins into one variable.
+const $ = plugins();
+
+// Check for --production flag.
+const PRODUCTION = !!(yargs.argv.production);
+
+// Load settings from config.yml.
+function loadConfig() {
+  const unsafe = require('js-yaml-js-types').all;
+  const schema = yaml.DEFAULT_SCHEMA.extend(unsafe);
+  const ymlFile = fs.readFileSync('config.yml', 'utf8');
+  return yaml.load(ymlFile, {schema});
+}
+
+const { BROWSERSYNC, PATHS } = loadConfig();
+
+// Build the compiled js and css by running all of the below tasks.
+// Sass must be run later so UnCSS can search for used classes in the others assets.
+gulp.task('build',
+  gulp.series(clean, gulp.parallel(javascript, images), sassBuild, lintSass)
+);
+
+// Build the site, run the server, and watch for file changes.
+gulp.task('default',
+  gulp.series('build', server, watch)
+);
+
+// Delete the compiled js and css.
+// This happens every time a build starts.
+function clean(done) {
+  rimraf(PATHS.dist, done);
+}
+
+// Compile Sass into CSS
+// In production, the CSS is compressed
+function sassBuild() {
+
+  const postCssPlugins = [
+    // Autoprefixer
+    autoprefixer(),
+  ].filter(Boolean);
+
+  return gulp.src(PATHS.scss)
+    .pipe($.sourcemaps.init())
+    .pipe(sass({
+      includePaths: PATHS.foundationScss
+    })
+      .on('error', $.sass.logError))
+    .pipe(postcss(postCssPlugins))
+    .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie11' })))
+    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
+    .pipe(gulp.dest(PATHS.dist))
+    .pipe(browser.reload({ stream: true }));
+}
+
+function lintSass() {
+  return gulp.src(PATHS.componentScss)
+    .pipe(sassLint({
+      config: 'sass-lint.yml'
+    }))
+    .pipe(sassLint.format());
+}
+
+let webpackConfig = {
+  mode: (PRODUCTION ? 'production' : 'development'),
+  externals: {
+    jquery: 'jQuery'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [ "@babel/preset-env" ],
+            compact: false
+          }
+        }
+      }
+    ]
+  },
+  devtool: !PRODUCTION && 'source-map'
+}
+
+// Load/copy Foundation JavaScript
+// In production, the file is minified
+function javascript() {
+  return gulp.src(PATHS.foundationJs)
+    .pipe(named())
+    .pipe($.sourcemaps.init())
+    .pipe(webpackStream(webpackConfig, webpack2))
+    .pipe($.if(PRODUCTION, $.terser()
+      .on('error', e => { console.log(e); })
+    ))
+    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
+    .pipe(gulp.dest('js/'));
+}
+
+// If using image optimization, copy them to image folder.
+// In production, the images are compressed.
+function images() {
+  return gulp.src('images-source/**/*')
+    .pipe($.if(PRODUCTION, imagemin([
+      imagemin.gifsicle({interlaced: true}),
+      imagemin.mozjpeg({quality: 85, progressive: true}),
+      imagemin.optipng({optimizationLevel: 5}),
+      imagemin.svgo({
+        plugins: [
+          {removeViewBox: true},
+          {cleanupIDs: false}
+        ]
+      })
+    ])))
+    .pipe(gulp.dest('images/'));
+}
+
+// Start a server with BrowserSync to preview the site in
+function server(done) {
+  browser.init({
+    proxy: {
+      target: BROWSERSYNC
+    },
+  }, done);
+}
+
+// Reload the browser with BrowserSync
+function reload(done) {
+  browser.reload();
+  done();
+}
+
+
+// Watch for changes to SCSS and JavaScript
+function watch() {
+  gulp.watch(PATHS.componentScss).on('all', sassBuild);
+  gulp.watch(PATHS.js).on('all', gulp.series(browser.reload));
+  gulp.watch('images-source').on('all', gulp.series(images, browser.reload));
+}
--- a/images/foundation/misc/required.svg
+++ b/images/foundation/misc/required.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#EE0000"  d="M0,7.562l1.114-3.438c2.565,0.906,4.43,1.688,5.59,2.35C6.398,3.553,6.237,1.544,6.22,0.447h3.511 c-0.05,1.597-0.234,3.6-0.558,6.003c1.664-0.838,3.566-1.613,5.714-2.325L16,7.562c-2.05,0.678-4.06,1.131-6.028,1.356 c0.984,0.856,2.372,2.381,4.166,4.575l-2.906,2.059c-0.935-1.274-2.041-3.009-3.316-5.206c-1.194,2.275-2.244,4.013-3.147,5.206 l-2.856-2.059c1.872-2.307,3.211-3.832,4.017-4.575C3.849,8.516,1.872,8.062,0,7.562"/></svg>
--- a/images/foundation/orbit/bullets.jpg
+++ b/images/foundation/orbit/bullets.jpg
--- a/images/foundation/orbit/left-arrow-small.png
+++ b/images/foundation/orbit/left-arrow-small.png
--- a/images/foundation/orbit/left-arrow.png
+++ b/images/foundation/orbit/left-arrow.png
--- a/images/foundation/orbit/loading.gif
+++ b/images/foundation/orbit/loading.gif
--- a/images/foundation/orbit/mask-black.png
+++ b/images/foundation/orbit/mask-black.png
--- a/images/foundation/orbit/pause-black.png
+++ b/images/foundation/orbit/pause-black.png
--- a/images/foundation/orbit/right-arrow-small.png
+++ b/images/foundation/orbit/right-arrow-small.png
--- a/images/foundation/orbit/right-arrow.png
+++ b/images/foundation/orbit/right-arrow.png
--- a/images/foundation/orbit/rotator-black.png
+++ b/images/foundation/orbit/rotator-black.png
--- a/images/foundation/orbit/timer-black.png
+++ b/images/foundation/orbit/timer-black.png
--- a/js/foundation_init.js
+++ b/js/foundation_init.js
@ -0,0 +1,17 @@
+/**
+ * @file
+ * Initializes foundation's JavaScript.
+ *
+ */
+(function ($, Drupal) {
+
+  /**
+   * Initializes foundation's JavaScript for new content added to the page.
+   */
+  Drupal.behaviors.foundationInit = {
+    attach: function (context, settings) {
+      $(context).foundation();
+    }
+  };
+
+})(jQuery, Drupal);
--- a/js/peceful.js
+++ b/js/peceful.js
@ -0,0 +1,17 @@
+/**
+ * @file
+ * Placeholder file for custom sub-theme behaviors.
+ *
+ */
+(function ($, Drupal) {
+
+  /**
+   * Use this behavior as a template for custom Javascript.
+   */
+  Drupal.behaviors.exampleBehavior = {
+    attach: function (context, settings) {
+      //alert("I'm alive!");
+    }
+  };
+
+})(jQuery, Drupal);
--- a/logo.svg
+++ b/logo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="57" height="66" viewBox="471.5 467 57 66" enable-background="new 471.5 467 57 66"><path opacity=".2" fill="#303030" d="M528.5 504.965c0 16.634-13.123 27.615-28.24 27.615-10.29 0-19.894-5.523-24.978-14.167l.605-.027c1.313 1.192 3.39 2.58 7.404 2.515 4.77-.064 5.645-.875 9.855-2.756 22.716-10.17 26.925-19.457 27.736-21.59s2.013-5.587.756-9.415c-.242-.737-.42-1.333-.54-1.808-3.018-3.372-6.017-5.225-6.92-5.784-.14-.093-.29-.177-.43-.26l.44.26c2.01 1.247 14.314 8.782 14.314 25.417z"/><path fill="#fff" d="M509.09 518.507c1.006 0 2.077.065 2.83.568.756.503 1.193 1.63 1.445 2.263.25.634 0 1.006-.503 1.258-.438.25-.503.12-.94-.69-.44-.81-.82-1.63-3.01-1.63s-2.887.755-3.948 1.63c-1.062.876-1.443 1.193-1.825.69s-.253-1.006.437-1.63 1.825-1.63 2.888-2.077c1.06-.45 1.62-.383 2.625-.383zm-10.413 7.152c1.257 1.005 3.14 1.825 7.153 1.825 4.015 0 6.836-1.137 8.094-2.077.568-.438.82-.065.875.187.056.25.186.624-.252 1.07-.316.317-3.194 2.33-6.594 2.636-3.4.31-7.964.504-10.73-2.01-.438-.44-.316-1.07 0-1.323.317-.25.568-.438.94-.438.374.008.317.008.513.13z"/><path opacity=".2" fill="#aaa" d="M520.89 496.545c-.81 2.133-5.02 11.42-27.735 21.59-4.21 1.88-5.085 2.69-9.854 2.756-4.013.066-6.09-1.32-7.403-2.514l-.605.028h-.01c-2.393-4.042-3.78-8.783-3.78-13.952 0-7.852 2.97-13.654 6.287-17.687.11-.13.213-.26.325-.382 2.683-3.148 5.55-5.17 7.218-6.203.038-.028.075-.047.112-.065.42-.25.754-.447.987-.568 2.757-1.51 4.77-2.263 7.963-4.77.12-.092.242-.186.354-.288l.008-.01c.875-.754 1.64-1.76 2.18-3.4v-.008c.325-.97.567-2.16.716-3.65l.02.018c2.253 2.69 4.954 5.886 6.89 7.144.69.447 1.38.848 2.068 1.202l.3.15c2.243 1.126 4.507 1.945 6.807 3.333l.428.26c.903.56 3.902 2.412 6.92 5.784.12.475.298 1.07.54 1.807 1.274 3.837.073 7.292-.737 9.425z"/><path opacity=".5" fill="#333" d="M514.176 479.538c-3.26-2.077-6.464-2.887-9.603-4.955-1.938-1.267-4.64-4.47-6.893-7.162-.438 4.332-1.686 6.148-3.26 7.35-3.195 2.515-5.207 3.26-7.963 4.77-2.338 1.256-14.958 8.726-14.958 24.913 0 5.17 1.387 9.91 3.77 13.96 5.077 8.635 14.68 14.158 24.97 14.158 15.126 0 28.24-10.98 28.24-27.614 0-9.127-3.707-15.526-7.386-19.633-3.016-3.382-6.015-5.217-6.918-5.785zm7.627 7.34c4.117 5.15 6.213 11.23 6.213 18.077 0 3.968-.755 7.712-2.245 11.148-1.414 3.25-3.444 6.13-6.053 8.56-5.15 4.806-12.062 7.45-19.475 7.45-3.67 0-7.265-.698-10.692-2.086-3.372-1.36-6.398-3.297-9.016-5.774-5.532-5.225-8.57-12.257-8.57-19.8 0-6.716 2.18-12.695 6.483-17.753 3.288-3.865 6.836-6.007 8.196-6.743.67-.363 1.285-.69 1.89-.997 1.892-.97 3.68-1.89 6.14-3.818 1.312-.997 2.71-2.58 3.305-6.585 2.077 2.468 4.48 5.234 6.314 6.426 1.63 1.08 3.307 1.835 4.918 2.562 1.527.69 3.11 1.406 4.676 2.403l.056.037c4.62 2.84 7.06 5.896 7.86 6.892z"/><path opacity=".5" fill="#fff" d="M497.98 468.678c.874 2.58.753 3.893.753 4.452 0 .56-.307 2.077-1.313 2.832-.438.317-.568.568-.568.624 0 .25.568.438.568 1.006 0 .69-.317 2.077-3.642 5.393-3.325 3.316-8.103 6.278-11.8 8.103-3.698 1.826-5.468 1.686-5.97.81s.185-2.83 2.514-5.392l9.667-6.278 9.164-6.398.503-2.44"/><path fill="#fff" d="M497.98 468.613c-.57 4.145-1.826 5.393-3.512 6.715-2.83 2.133-5.588 3.446-6.212 3.763-1.63.82-7.535 4.08-10.608 8.784-.94 1.444 0 2.012.186 2.133.187.12 2.33.372 6.9-2.385 4.574-2.757 6.595-4.387 9.175-7.078 1.377-1.444 1.573-2.263 1.573-2.636 0-.438-.316-.624-.82-.754-.25-.065-.316-.187 0-.373.317-.186 1.622-.82 1.938-1.07.318-.25 1.827-1.257 1.882-2.887.065-1.63-.056-2.766-.503-4.21zm-14.112 45.628c.065-4.898 4.648-9.472 10.422-9.536 7.348-.065 12.424 7.283 16.13 7.208 3.14-.064 9.166-6.212 12.118-6.212 3.14 0 4.014 3.26 4.014 5.206 0 1.938-.623 5.458-2.133 7.656-1.51 2.198-2.44 3.008-4.2 2.888-2.264-.187-6.78-7.21-9.67-7.35-3.64-.12-11.547 7.6-17.75 7.6-3.763 0-4.9-.567-6.147-1.378-1.92-1.312-2.85-3.315-2.785-6.08z"/></svg>
--- a/package.json
+++ b/package.json
@ -0,0 +1,53 @@
+{
+  "name": "peceful",
+  "version": "1.0.0",
+  "main": "gulpfile.babel.js",
+  "scripts": {
+    "start": "gulp",
+    "watch": "gulp",
+    "build": "gulp build --production",
+    "postinstall": "node_modules/.bin/rimraf ./node_modules/**/*.info"
+  },
+  "dependencies": {
+    "foundation-sites": "6.7.4",
+    "motion-ui": "~2.0.3",
+    "what-input": "^5.2.10"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/register": "^7.15.3",
+    "autoprefixer": "^10.3.4",
+    "babel-loader": "^8.2.2",
+    "browser-sync": "^2.27.5",
+    "fs": "^0.0.1-security",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-cli": "^2.3.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-extname": "^0.2.2",
+    "gulp-if": "^3.0.0",
+    "gulp-imagemin": "^7.1.0",
+    "gulp-load-plugins": "^2.0.7",
+    "gulp-postcss": "^9.0.1",
+    "gulp-sass": "^4.1.1",
+    "gulp-sass-lint": "^1.4.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "gulp-terser": "^2.0.1",
+    "js-yaml": "^4.1.0",
+    "js-yaml-js-types": "^1.0.0",
+    "node-sass": "^6.0.1",
+    "postcss": "^8.3.11",
+    "rimraf": "^3.0.2",
+    "uncss": "^0.17.3",
+    "vinyl-named": "^1.1.0",
+    "webpack": "^5.52.1",
+    "webpack-stream": "^7.0.0",
+    "yargs": "^17.1.1"
+  },
+  "private": true,
+  "browserslist": [
+    "last 2 versions"
+  ]
+}
--- a/peceful.info.yml
+++ b/peceful.info.yml
@ -0,0 +1,45 @@
+name: ZURB Foundation Sub-theme Starter
+description: "Custom sub-theme, inherits from the Foundation base theme read <a href=\"http://foundation.zurb.com/docs/index.php\">framework documentation</a>"
+core: 8.x
+core_version_requirement: ^8 || ^9
+type: theme
+base theme: zurb_foundation
+
+# Image appears on admin/appearance
+# screenshot: images/screenshot.jpg
+
+# Uncomment these lines and change "peceful" to your theme name if you
+# need to add custom CSS or JS
+libraries:
+ - peceful/global
+
+# Regions are output in the page.html.twig
+
+regions:
+  meta_header: 'Meta header'
+  header: Header
+  help: Help
+  page_top: 'Page top'
+  page_bottom: 'Page bottom'
+  highlighted: Highlighted
+  content: Content
+  sidebar_first: 'Left sidebar'
+  sidebar_second: 'Right sidebar'
+  footer_first: 'Footer first column'
+  footer_middle: 'Footer middle column'
+  footer_last: 'Footer last column'
+  left_off_canvas: 'Left off canvas'
+  right_off_canvas: 'Right off canvas'
+regions_hidden:
+  page_top: 'Page top'
+  page_bottom: 'Page bottom'
+
+# Hidden regions
+# regions_hidden[]: Page top
+# regions_hidden[]: Page bottom
+
+features:
+  - slogan
+  - favicon
+  - comment_user_picture
+  - node_user_picture
--- a/peceful.libraries.yml
+++ b/peceful.libraries.yml
@ -0,0 +1,14 @@
+global:
+  version: VERSION
+  css:
+    base:
+      css/peceful.css: {}
+  js:
+    js/peceful.js: { }
+    js/foundation.min.js: {minified: true}
+    js/foundation_init.js: {}
+    js/motion-ui.min.js: {minified: true}
+  dependencies:
+    - core/drupal
+    - core/jquery
+    - core/once
--- a/peceful.theme
+++ b/peceful.theme
@ -0,0 +1,48 @@
+<?php
+
+/**
+ * @file
+ * Add your custom theme override functions here.
+ */
+
+/**
+ * Implements hook_preprocess_block().
+ */
+function peceful_preprocess_block(&$variables) {
+}
+
+/**
+ * Implements template_preprocess_field().
+ */
+function peceful_preprocess_field(&$variables, $hook) {
+}
+
+/**
+ * Implements template_preprocess_html().
+ *
+ * Adds additional classes.
+ */
+function peceful_preprocess_html(&$variables) {
+}
+
+/**
+ * Implements template_preprocess_node.
+ *
+ * Add template suggestions and classes.
+ */
+function peceful_preprocess_node(&$variables) {
+}
+
+/**
+ * Implements template_preprocess_page.
+ *
+ * Add convenience variables and template suggestions.
+ */
+function peceful_preprocess_page(&$variables) {
+}
+
+/**
+ * Implements template_preprocess_views_view().
+ */
+function peceful_preprocess_views_view(&$variables) {
+}
--- a/scss/_settings.scss
+++ b/scss/_settings.scss
@ -0,0 +1,894 @@
+//  Foundation for Sites Settings
+//  -----------------------------
+//
+//  Table of Contents:
+//
+//   1. Global
+//   2. Breakpoints
+//   3. The Grid
+//   4. Base Typography
+//   5. Typography Helpers
+//   6. Abide
+//   7. Accordion
+//   8. Accordion Menu
+//   9. Badge
+//  10. Breadcrumbs
+//  11. Button
+//  12. Button Group
+//  13. Callout
+//  14. Card
+//  15. Close Button
+//  16. Drilldown
+//  17. Dropdown
+//  18. Dropdown Menu
+//  19. Flexbox Utilities
+//  20. Forms
+//  21. Label
+//  22. Media Object
+//  23. Menu
+//  24. Meter
+//  25. Off-canvas
+//  26. Orbit
+//  27. Pagination
+//  28. Progress Bar
+//  29. Prototype Arrow
+//  30. Prototype Border-Box
+//  31. Prototype Border-None
+//  32. Prototype Bordered
+//  33. Prototype Display
+//  34. Prototype Font-Styling
+//  35. Prototype List-Style-Type
+//  36. Prototype Overflow
+//  37. Prototype Position
+//  38. Prototype Rounded
+//  39. Prototype Separator
+//  40. Prototype Shadow
+//  41. Prototype Sizing
+//  42. Prototype Spacing
+//  43. Prototype Text-Decoration
+//  44. Prototype Text-Transformation
+//  45. Prototype Text-Utilities
+//  46. Responsive Embed
+//  47. Reveal
+//  48. Slider
+//  49. Switch
+//  50. Table
+//  51. Tabs
+//  52. Thumbnail
+//  53. Title Bar
+//  54. Tooltip
+//  55. Top Bar
+//  56. Xy Grid
+
+@import 'util/util';
+
+// 1. Global
+// ---------
+
+$global-font-size: 100%;
+$global-width: rem-calc(1200);
+$global-lineheight: 1.5;
+$foundation-palette: (
+  primary: #1779ba,
+  secondary: #767676,
+  success: #3adb76,
+  warning: #ffae00,
+  alert: #cc4b37,
+);
+$light-gray: #e6e6e6;
+$medium-gray: #cacaca;
+$dark-gray: #8a8a8a;
+$black: #0a0a0a;
+$white: #fefefe;
+$body-background: $white;
+$body-font-color: $black;
+$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$body-safe-padding: false;
+$body-antialiased: true;
+$global-margin: 1rem;
+$global-padding: 1rem;
+$global-position: 1rem;
+$global-weight-normal: normal;
+$global-weight-bold: bold;
+$global-radius: 0;
+$global-menu-padding: 0.7rem 1rem;
+$global-menu-nested-margin: 1rem;
+$global-text-direction: ltr;
+$global-flexbox: true;
+$global-prototype-breakpoints: false;
+$global-button-cursor: auto;
+$global-color-pick-contrast-tolerance: 0;
+$print-transparent-backgrounds: true;
+$print-hrefs: true;
+
+@include add-foundation-colors;
+
+// 2. Breakpoints
+// --------------
+
+$breakpoints: (
+  small: 0,
+  medium: 640px,
+  large: 1024px,
+  xlarge: 1200px,
+  xxlarge: 1440px,
+);
+$breakpoints-hidpi: (
+  hidpi-1: 1,
+  hidpi-1-5: 1.5,
+  hidpi-2: 2,
+  retina: 2,
+  hidpi-3: 3
+);
+$print-breakpoint: large;
+$breakpoint-classes: (small medium large);
+
+// 3. The Grid
+// -----------
+
+$grid-row-width: $global-width;
+$grid-column-count: 12;
+$grid-column-gutter: (
+  small: 20px,
+  medium: 30px,
+);
+$grid-column-align-edge: true;
+$grid-column-alias: 'columns';
+$block-grid-max: 8;
+
+// 4. Base Typography
+// ------------------
+
+$header-font-family: $body-font-family;
+$header-font-weight: $global-weight-normal;
+$header-font-style: normal;
+$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+$header-color: inherit;
+$header-lineheight: 1.4;
+$header-margin-bottom: 0.5rem;
+$header-styles: (
+  small: (
+    'h1': ('font-size': 24),
+    'h2': ('font-size': 20),
+    'h3': ('font-size': 19),
+    'h4': ('font-size': 18),
+    'h5': ('font-size': 17),
+    'h6': ('font-size': 16),
+  ),
+  medium: (
+    'h1': ('font-size': 48),
+    'h2': ('font-size': 40),
+    'h3': ('font-size': 31),
+    'h4': ('font-size': 25),
+    'h5': ('font-size': 20),
+    'h6': ('font-size': 16),
+  ),
+);
+$header-text-rendering: optimizeLegibility;
+$small-font-size: 80%;
+$header-small-font-color: $medium-gray;
+$paragraph-lineheight: 1.6;
+$paragraph-margin-bottom: 1rem;
+$paragraph-text-rendering: optimizeLegibility;
+$enable-code-inline: true;
+$anchor-color: $primary-color;
+$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+$anchor-text-decoration: none;
+$anchor-text-decoration-hover: none;
+$hr-width: $global-width;
+$hr-border: 1px solid $medium-gray;
+$hr-margin: rem-calc(20) auto;
+$list-lineheight: $paragraph-lineheight;
+$list-margin-bottom: $paragraph-margin-bottom;
+$list-style-type: disc;
+$list-style-position: outside;
+$list-side-margin: 1.25rem;
+$list-nested-side-margin: 1.25rem;
+$defnlist-margin-bottom: 1rem;
+$defnlist-term-weight: $global-weight-bold;
+$defnlist-term-margin-bottom: 0.3rem;
+$blockquote-color: $dark-gray;
+$blockquote-padding: rem-calc(9 20 0 19);
+$blockquote-border: 1px solid $medium-gray;
+$enable-cite-block: true;
+$keystroke-font: $font-family-monospace;
+$keystroke-color: $black;
+$keystroke-background: $light-gray;
+$keystroke-padding: rem-calc(2 4 0);
+$keystroke-radius: $global-radius;
+$abbr-underline: 1px dotted $black;
+
+// 5. Typography Helpers
+// ---------------------
+
+$lead-font-size: $global-font-size * 1.25;
+$lead-lineheight: 1.6;
+$subheader-lineheight: 1.4;
+$subheader-color: $dark-gray;
+$subheader-font-weight: $global-weight-normal;
+$subheader-margin-top: 0.2rem;
+$subheader-margin-bottom: 0.5rem;
+$stat-font-size: 2.5rem;
+$cite-color: $dark-gray;
+$cite-font-size: rem-calc(13);
+$cite-pseudo-content: '\2014 \0020';
+$code-color: $black;
+$code-font-family: $font-family-monospace;
+$code-font-weight: $global-weight-normal;
+$code-background: $light-gray;
+$code-border: 1px solid $medium-gray;
+$code-padding: rem-calc(2 5 1);
+$code-block-padding: 1rem;
+$code-block-margin-bottom: 1.5rem;
+
+// 6. Abide
+// --------
+
+$abide-inputs: true;
+$abide-labels: true;
+$input-background-invalid: get-color(alert);
+$form-label-color-invalid: get-color(alert);
+$input-error-color: get-color(alert);
+$input-error-font-size: rem-calc(12);
+$input-error-font-weight: $global-weight-bold;
+
+// 7. Accordion
+// ------------
+
+$accordion-background: $white;
+$accordion-plusminus: true;
+$accordion-plus-content: '\002B';
+$accordion-minus-content: '\2013';
+$accordion-title-font-size: rem-calc(12);
+$accordion-item-color: $primary-color;
+$accordion-item-background-hover: $light-gray;
+$accordion-item-padding: 1.25rem 1rem;
+$accordion-content-background: $white;
+$accordion-content-border: 1px solid $light-gray;
+$accordion-content-color: $body-font-color;
+$accordion-content-padding: 1rem;
+
+// 8. Accordion Menu
+// -----------------
+
+$accordionmenu-padding: $global-menu-padding;
+$accordionmenu-nested-margin: $global-menu-nested-margin;
+$accordionmenu-submenu-padding: $accordionmenu-padding;
+$accordionmenu-arrows: true;
+$accordionmenu-arrow-color: $primary-color;
+$accordionmenu-item-background: null;
+$accordionmenu-border: null;
+$accordionmenu-submenu-toggle-background: null;
+$accordion-submenu-toggle-border: $accordionmenu-border;
+$accordionmenu-submenu-toggle-width: 40px;
+$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
+$accordionmenu-arrow-size: 6px;
+
+// 9. Badge
+// --------
+
+$badge-background: $primary-color;
+$badge-color: $white;
+$badge-color-alt: $black;
+$badge-palette: $foundation-palette;
+$badge-padding: 0.3em;
+$badge-minwidth: 2.1em;
+$badge-font-size: 0.6rem;
+
+// 10. Breadcrumbs
+// ---------------
+
+$breadcrumbs-margin: 0 0 $global-margin 0;
+$breadcrumbs-item-font-size: rem-calc(11);
+$breadcrumbs-item-color: $primary-color;
+$breadcrumbs-item-color-current: $black;
+$breadcrumbs-item-color-disabled: $medium-gray;
+$breadcrumbs-item-margin: 0.75rem;
+$breadcrumbs-item-uppercase: true;
+$breadcrumbs-item-separator: true;
+$breadcrumbs-item-separator-item: '/';
+$breadcrumbs-item-separator-item-rtl: '\\';
+$breadcrumbs-item-separator-color: $medium-gray;
+
+// 11. Button
+// ----------
+
+$button-font-family: inherit;
+$button-font-weight: null;
+$button-padding: 0.85em 1em;
+$button-margin: 0 0 $global-margin 0;
+$button-fill: solid;
+$button-background: $primary-color;
+$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-color: $white;
+$button-color-alt: $black;
+$button-radius: $global-radius;
+$button-border: 1px solid transparent;
+$button-hollow-border-width: 1px;
+$button-sizes: (
+  tiny: 0.6rem,
+  small: 0.75rem,
+  default: 0.9rem,
+  large: 1.25rem,
+);
+$button-palette: $foundation-palette;
+$button-opacity-disabled: 0.25;
+$button-background-hover-lightness: -20%;
+$button-hollow-hover-lightness: -50%;
+$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
+$button-responsive-expanded: false;
+
+// 12. Button Group
+// ----------------
+
+$buttongroup-margin: 1rem;
+$buttongroup-spacing: 1px;
+$buttongroup-child-selector: '.button';
+$buttongroup-expand-max: 6;
+$buttongroup-radius-on-each: true;
+
+// 13. Callout
+// -----------
+
+$callout-background: $white;
+$callout-background-fade: 85%;
+$callout-border: 1px solid rgba($black, 0.25);
+$callout-margin: 0 0 1rem 0;
+$callout-sizes: (
+  small: 0.5rem,
+  default: 1rem,
+  large: 3rem,
+);
+$callout-font-color: $body-font-color;
+$callout-font-color-alt: $body-background;
+$callout-radius: $global-radius;
+$callout-link-tint: 30%;
+
+// 14. Card
+// --------
+
+$card-background: $white;
+$card-font-color: $body-font-color;
+$card-divider-background: $light-gray;
+$card-border: 1px solid $light-gray;
+$card-shadow: none;
+$card-border-radius: $global-radius;
+$card-padding: $global-padding;
+$card-margin-bottom: $global-margin;
+
+// 15. Close Button
+// ----------------
+
+$closebutton-position: right top;
+$closebutton-z-index: 10;
+$closebutton-default-size: medium;
+$closebutton-offset-horizontal: (
+  small: 0.66rem,
+  medium: 1rem,
+);
+$closebutton-offset-vertical: (
+  small: 0.33em,
+  medium: 0.5rem,
+);
+$closebutton-size: (
+  small: 1.5em,
+  medium: 2em,
+);
+$closebutton-lineheight: 1;
+$closebutton-color: $dark-gray;
+$closebutton-color-hover: $black;
+
+// 16. Drilldown
+// -------------
+
+$drilldown-transition: transform 0.15s linear;
+$drilldown-arrows: true;
+$drilldown-padding: $global-menu-padding;
+$drilldown-nested-margin: 0;
+$drilldown-background: $white;
+$drilldown-submenu-padding: $drilldown-padding;
+$drilldown-submenu-background: $white;
+$drilldown-arrow-color: $primary-color;
+$drilldown-arrow-size: 6px;
+
+// 17. Dropdown
+// ------------
+
+$dropdown-padding: 1rem;
+$dropdown-background: $body-background;
+$dropdown-border: 1px solid $medium-gray;
+$dropdown-font-size: 1rem;
+$dropdown-width: 300px;
+$dropdown-radius: $global-radius;
+$dropdown-sizes: (
+  tiny: 100px,
+  small: 200px,
+  large: 400px,
+);
+
+// 18. Dropdown Menu
+// -----------------
+
+$dropdownmenu-arrows: true;
+$dropdownmenu-arrow-color: $anchor-color;
+$dropdownmenu-arrow-size: 6px;
+$dropdownmenu-arrow-padding: 1.5rem;
+$dropdownmenu-min-width: 200px;
+$dropdownmenu-background: null;
+$dropdownmenu-submenu-background: $white;
+$dropdownmenu-padding: $global-menu-padding;
+$dropdownmenu-nested-margin: 0;
+$dropdownmenu-submenu-padding: $dropdownmenu-padding;
+$dropdownmenu-border: 1px solid $medium-gray;
+$dropdown-menu-item-color-active: get-color(primary);
+$dropdown-menu-item-background-active: transparent;
+
+// 19. Flexbox Utilities
+// ---------------------
+
+$flex-source-ordering-count: 6;
+$flexbox-responsive-breakpoints: true;
+
+// 20. Forms
+// ---------
+
+$fieldset-border: 1px solid $medium-gray;
+$fieldset-padding: rem-calc(20);
+$fieldset-margin: rem-calc(18 0);
+$legend-padding: rem-calc(0 3);
+$form-spacing: rem-calc(16);
+$helptext-color: $black;
+$helptext-font-size: rem-calc(13);
+$helptext-font-style: italic;
+$input-prefix-color: $black;
+$input-prefix-background: $light-gray;
+$input-prefix-border: 1px solid $medium-gray;
+$input-prefix-padding: 1rem;
+$form-label-color: $black;
+$form-label-font-size: rem-calc(14);
+$form-label-font-weight: $global-weight-normal;
+$form-label-line-height: 1.8;
+$select-background: $white;
+$select-triangle-color: $dark-gray;
+$select-radius: $global-radius;
+$input-color: $black;
+$input-placeholder-color: $medium-gray;
+$input-font-family: inherit;
+$input-font-size: rem-calc(16);
+$input-font-weight: $global-weight-normal;
+$input-line-height: $global-lineheight;
+$input-background: $white;
+$input-background-focus: $white;
+$input-background-disabled: $light-gray;
+$input-border: 1px solid $medium-gray;
+$input-border-focus: 1px solid $dark-gray;
+$input-padding: $form-spacing * 0.5;
+$input-shadow: inset 0 1px 2px rgba($black, 0.1);
+$input-shadow-focus: 0 0 5px $medium-gray;
+$input-cursor-disabled: not-allowed;
+$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+$input-number-spinners: true;
+$input-radius: $global-radius;
+$form-button-radius: $global-radius;
+
+// 21. Label
+// ---------
+
+$label-background: $primary-color;
+$label-color: $white;
+$label-color-alt: $black;
+$label-palette: $foundation-palette;
+$label-font-size: 0.8rem;
+$label-padding: 0.33333rem 0.5rem;
+$label-radius: $global-radius;
+
+// 22. Media Object
+// ----------------
+
+$mediaobject-margin-bottom: $global-margin;
+$mediaobject-section-padding: $global-padding;
+$mediaobject-image-width-stacked: 100%;
+
+// 23. Menu
+// --------
+
+$menu-margin: 0;
+$menu-nested-margin: $global-menu-nested-margin;
+$menu-items-padding: $global-menu-padding;
+$menu-simple-margin: 1rem;
+$menu-item-color-active: $white;
+$menu-item-color-alt-active: $black;
+$menu-item-background-active: get-color(primary);
+$menu-icon-spacing: 0.25rem;
+$menu-state-back-compat: true;
+$menu-centered-back-compat: true;
+$menu-icons-back-compat: true;
+
+// 24. Meter
+// ---------
+
+$meter-height: 1rem;
+$meter-radius: $global-radius;
+$meter-background: $medium-gray;
+$meter-fill-good: $success-color;
+$meter-fill-medium: $warning-color;
+$meter-fill-bad: $alert-color;
+
+// 25. Off-canvas
+// --------------
+
+$offcanvas-sizes: (
+  small: 250px,
+);
+$offcanvas-vertical-sizes: (
+  small: 250px,
+);
+$offcanvas-background: $light-gray;
+$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
+$offcanvas-inner-shadow-size: 20px;
+$offcanvas-inner-shadow-color: rgba($black, 0.25);
+$offcanvas-overlay-zindex: 11;
+$offcanvas-push-zindex: 12;
+$offcanvas-overlap-zindex: 13;
+$offcanvas-reveal-zindex: 12;
+$offcanvas-transition-length: 0.5s;
+$offcanvas-transition-timing: ease;
+$offcanvas-fixed-reveal: true;
+$offcanvas-exit-background: rgba($white, 0.25);
+$maincontent-class: 'off-canvas-content';
+
+// 26. Orbit
+// ---------
+
+$orbit-bullet-background: $medium-gray;
+$orbit-bullet-background-active: $dark-gray;
+$orbit-bullet-diameter: 1.2rem;
+$orbit-bullet-margin: 0.1rem;
+$orbit-bullet-margin-top: 0.8rem;
+$orbit-bullet-margin-bottom: 0.8rem;
+$orbit-caption-background: rgba($black, 0.5);
+$orbit-caption-padding: 1rem;
+$orbit-control-background-hover: rgba($black, 0.5);
+$orbit-control-padding: 1rem;
+$orbit-control-zindex: 10;
+
+// 27. Pagination
+// --------------
+
+$pagination-font-size: rem-calc(14);
+$pagination-margin-bottom: $global-margin;
+$pagination-item-color: $black;
+$pagination-item-padding: rem-calc(3 10);
+$pagination-item-spacing: rem-calc(1);
+$pagination-radius: $global-radius;
+$pagination-item-background-hover: $light-gray;
+$pagination-item-background-current: $primary-color;
+$pagination-item-color-current: $white;
+$pagination-item-color-disabled: $medium-gray;
+$pagination-ellipsis-color: $black;
+$pagination-mobile-items: false;
+$pagination-mobile-current-item: false;
+$pagination-arrows: true;
+$pagination-arrow-previous: '\00AB';
+$pagination-arrow-next: '\00BB';
+
+// 28. Progress Bar
+// ----------------
+
+$progress-height: 1rem;
+$progress-background: $medium-gray;
+$progress-margin-bottom: $global-margin;
+$progress-meter-background: $primary-color;
+$progress-radius: $global-radius;
+
+// 29. Prototype Arrow
+// -------------------
+
+$prototype-arrow-directions: (
+  down,
+  up,
+  right,
+  left
+);
+$prototype-arrow-size: 0.4375rem;
+$prototype-arrow-color: $black;
+
+// 30. Prototype Border-Box
+// ------------------------
+
+$prototype-border-box-breakpoints: $global-prototype-breakpoints;
+
+// 31. Prototype Border-None
+// -------------------------
+
+$prototype-border-none-breakpoints: $global-prototype-breakpoints;
+
+// 32. Prototype Bordered
+// ----------------------
+
+$prototype-bordered-breakpoints: $global-prototype-breakpoints;
+$prototype-border-width: rem-calc(1);
+$prototype-border-type: solid;
+$prototype-border-color: $medium-gray;
+
+// 33. Prototype Display
+// ---------------------
+
+$prototype-display-breakpoints: $global-prototype-breakpoints;
+$prototype-display: (
+  inline,
+  inline-block,
+  block,
+  table,
+  table-cell
+);
+
+// 34. Prototype Font-Styling
+// --------------------------
+
+$prototype-font-breakpoints: $global-prototype-breakpoints;
+$prototype-wide-letter-spacing: rem-calc(4);
+$prototype-font-normal: $global-weight-normal;
+$prototype-font-bold: $global-weight-bold;
+
+// 35. Prototype List-Style-Type
+// -----------------------------
+
+$prototype-list-breakpoints: $global-prototype-breakpoints;
+$prototype-style-type-unordered: (
+  disc,
+  circle,
+  square
+);
+$prototype-style-type-ordered: (
+  decimal,
+  lower-alpha,
+  lower-latin,
+  lower-roman,
+  upper-alpha,
+  upper-latin,
+  upper-roman
+);
+
+// 36. Prototype Overflow
+// ----------------------
+
+$prototype-overflow-breakpoints: $global-prototype-breakpoints;
+$prototype-overflow: (
+  visible,
+  hidden,
+  scroll
+);
+
+// 37. Prototype Position
+// ----------------------
+
+$prototype-position-breakpoints: $global-prototype-breakpoints;
+$prototype-position: (
+  static,
+  relative,
+  absolute,
+  fixed
+);
+$prototype-position-z-index: 975;
+
+// 38. Prototype Rounded
+// ---------------------
+
+$prototype-rounded-breakpoints: $global-prototype-breakpoints;
+$prototype-border-radius: rem-calc(3);
+
+// 39. Prototype Separator
+// -----------------------
+
+$prototype-separator-breakpoints: $global-prototype-breakpoints;
+$prototype-separator-align: center;
+$prototype-separator-height: rem-calc(2);
+$prototype-separator-width: 3rem;
+$prototype-separator-background: $primary-color;
+$prototype-separator-margin-top: $global-margin;
+
+// 40. Prototype Shadow
+// --------------------
+
+$prototype-shadow-breakpoints: $global-prototype-breakpoints;
+$prototype-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+// 41. Prototype Sizing
+// --------------------
+
+$prototype-sizing-breakpoints: $global-prototype-breakpoints;
+$prototype-sizing: (
+  width,
+  height
+);
+$prototype-sizes: (
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%
+);
+
+// 42. Prototype Spacing
+// ---------------------
+
+$prototype-spacing-breakpoints: $global-prototype-breakpoints;
+$prototype-spacers-count: 3;
+
+// 43. Prototype Text-Decoration
+// -----------------------------
+
+$prototype-decoration-breakpoints: $global-prototype-breakpoints;
+$prototype-text-decoration: (
+  overline,
+  underline,
+  line-through,
+);
+
+// 44. Prototype Text-Transformation
+// ---------------------------------
+
+$prototype-transformation-breakpoints: $global-prototype-breakpoints;
+$prototype-text-transformation: (
+  lowercase,
+  uppercase,
+  capitalize
+);
+
+// 45. Prototype Text-Utilities
+// ----------------------------
+
+$prototype-utilities-breakpoints: $global-prototype-breakpoints;
+$prototype-text-overflow: ellipsis;
+
+// 46. Responsive Embed
+// --------------------
+
+$responsive-embed-margin-bottom: rem-calc(16);
+$responsive-embed-ratios: (
+  default: 4 by 3,
+  widescreen: 16 by 9,
+);
+
+// 47. Reveal
+// ----------
+
+$reveal-background: $white;
+$reveal-width: 600px;
+$reveal-max-width: $global-width;
+$reveal-padding: $global-padding;
+$reveal-border: 1px solid $medium-gray;
+$reveal-radius: $global-radius;
+$reveal-zindex: 1005;
+$reveal-overlay-background: rgba($black, 0.45);
+
+// 48. Slider
+// ----------
+
+$slider-width-vertical: 0.5rem;
+$slider-transition: all 0.2s ease-in-out;
+$slider-height: 0.5rem;
+$slider-background: $light-gray;
+$slider-fill-background: $medium-gray;
+$slider-handle-height: 1.4rem;
+$slider-handle-width: 1.4rem;
+$slider-handle-background: $primary-color;
+$slider-opacity-disabled: 0.25;
+$slider-radius: $global-radius;
+
+// 49. Switch
+// ----------
+
+$switch-background: $medium-gray;
+$switch-background-active: $primary-color;
+$switch-height: 2rem;
+$switch-height-tiny: 1.5rem;
+$switch-height-small: 1.75rem;
+$switch-height-large: 2.5rem;
+$switch-radius: $global-radius;
+$switch-margin: $global-margin;
+$switch-paddle-background: $white;
+$switch-paddle-offset: 0.25rem;
+$switch-paddle-radius: $global-radius;
+$switch-paddle-transition: all 0.25s ease-out;
+$switch-opacity-disabled: 0.5;
+$switch-cursor-disabled: not-allowed;
+
+// 50. Table
+// ---------
+
+$table-background: $white;
+$table-color-scale: 5%;
+$table-border: 1px solid smart-scale($table-background, $table-color-scale);
+$table-padding: rem-calc(8 10 10);
+$table-hover-scale: 2%;
+$table-row-hover: darken($table-background, $table-hover-scale);
+$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-is-striped: true;
+$table-striped-background: smart-scale($table-background, $table-color-scale);
+$table-stripe: even;
+$table-head-background: smart-scale($table-background, $table-color-scale * 0.5);
+$table-head-row-hover: darken($table-head-background, $table-hover-scale);
+$table-foot-background: smart-scale($table-background, $table-color-scale);
+$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
+$table-head-font-color: $body-font-color;
+$table-foot-font-color: $body-font-color;
+$show-header-for-stacked: false;
+$table-stack-breakpoint: medium;
+
+// 51. Tabs
+// --------
+
+$tab-margin: 0;
+$tab-background: $white;
+$tab-color: $primary-color;
+$tab-background-active: $light-gray;
+$tab-active-color: $primary-color;
+$tab-item-font-size: rem-calc(12);
+$tab-item-background-hover: $white;
+$tab-item-padding: 1.25rem 1.5rem;
+$tab-content-background: $white;
+$tab-content-border: $light-gray;
+$tab-content-color: $body-font-color;
+$tab-content-padding: 1rem;
+
+// 52. Thumbnail
+// -------------
+
+$thumbnail-border: 4px solid $white;
+$thumbnail-margin-bottom: $global-margin;
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+$thumbnail-transition: box-shadow 200ms ease-out;
+$thumbnail-radius: $global-radius;
+
+// 53. Title Bar
+// -------------
+
+$titlebar-background: $black;
+$titlebar-color: $white;
+$titlebar-padding: 0.5rem;
+$titlebar-text-font-weight: bold;
+$titlebar-icon-color: $white;
+$titlebar-icon-color-hover: $medium-gray;
+$titlebar-icon-spacing: 0.25rem;
+
+// 54. Tooltip
+// -----------
+
+$has-tip-cursor: help;
+$has-tip-font-weight: $global-weight-bold;
+$has-tip-border-bottom: dotted 1px $dark-gray;
+$tooltip-background-color: $black;
+$tooltip-color: $white;
+$tooltip-padding: 0.75rem;
+$tooltip-max-width: 10rem;
+$tooltip-font-size: $small-font-size;
+$tooltip-pip-width: 0.75rem;
+$tooltip-pip-height: $tooltip-pip-width * 0.866;
+$tooltip-radius: $global-radius;
+
+// 55. Top Bar
+// -----------
+
+$topbar-padding: 0.5rem;
+$topbar-background: $light-gray;
+$topbar-submenu-background: $topbar-background;
+$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
+$topbar-input-width: 200px;
+$topbar-unstack-breakpoint: medium;
+
+// 56. Xy Grid
+// -----------
+
+$xy-grid: true;
+$grid-container: $global-width;
+$grid-columns: 12;
+$grid-margin-gutters: (
+  small: 20px,
+  medium: 30px
+);
+$grid-padding-gutters: $grid-margin-gutters;
+$grid-container-padding: $grid-padding-gutters;
+$grid-container-max: $global-width;
+$xy-block-grid-max: 8;
--- a/scss/base/_common.scss
+++ b/scss/base/_common.scss
@ -0,0 +1,7 @@
+// Common abstract classes to extend or parametrics are stored here.
+
+// Example parametrics.
+// ------------------------------------------------------
+// %font-FONTNAME   {}
+// %font-sans-serif { font-family: sans-serif; }
+// %font-serif      { font-family: serif; }
--- a/scss/base/_drupal.scss
+++ b/scss/base/_drupal.scss
@ -0,0 +1,130 @@
+// Place any Drupal-related quirks here.
+/*
+ * zurb_foundation.scss - Contains all Drupal-specific SASS for this theme.
+ *
+ * @todo Split this into multiple folders/files.
+*/
+
+// A fix for https://www.drupal.org/node/953034 - Themes currently cannot
+// determine if a region is empty
+
+.region-highlighted:empty {
+    display: none;
+}
+
+// This has been an issue since 7.x, Foundation rules about list elements
+// affect Navbar sizing.
+
+.toolbar-tray a {
+    font-size: 13px;
+}
+
+// Remove Foundation's top margin from the toggle orientation button.
+
+.toolbar .toolbar-toggle-orientation .toolbar-icon {
+    margin: 0;
+    // Fix offset problem where half of orientation button is not visible.
+    &:before {
+        min-height: 0;
+    }
+}
+
+// Override styles from /core/modules/system/css/components/menu.theme.css
+
+.top-bar-section ul li {
+    padding-top: 0;
+    a.is-active {
+        color: #FFFFFF;
+    }
+}
+
+// Preventing Top Bar FOUC
+// http://foundation.zurb.com/sites/docs/responsive-navigation.html#preventing-fouc
+// More info: https://www.drupal.org/node/2783573
+.no-js .top-bar {
+  display: none;
+}
+
+@media screen and (min-width: 40em) {
+  .no-js .top-bar {
+    display: block;
+  }
+  .no-js .title-bar {
+    display: none;
+  }
+}
+
+// Offset the top bar if the Navbar (toolbar) is present.
+
+body.toolbar-fixed .sticky.is-stuck .top-bar {
+    margin-top: 39px;
+}
+
+body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .sticky.is-stuck .top-bar {
+    margin-top: 78px;
+}
+
+body.toolbar-fixed .sticky.is-stuck.is-at-top {
+    margin-top: 0 !important;
+}
+
+// Removes core arrow image from menu items.
+
+.top-bar {
+    .menu-item--collapsed,.menu-item--expanded {
+        list-style: none;
+    }
+}
+
+
+// Style the search form, if embedded in the Top Bar.
+
+.top-bar .search-block-form {
+    .form-item-keys, .form-actions {
+        display: inline-block;
+    }
+}
+
+// Dropdown button styling.
+
+.dropbutton-wrapper {
+    // Sub-themes will have to override this color, unfortunately.
+    background-color: #008CBA;
+    margin: 0 0 1.25rem;
+    .button {
+        margin-bottom: 0;
+        width: 100%;
+        text-align: left;
+    }
+}
+
+// Add A11y-related Classy styling for required form fields.
+.form-required:after {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin: 0 0.3em;
+  content: "";
+  vertical-align: super;
+  // Use a background image to prevent screen readers from announcing the text.
+  background-image: url(../images/foundation/misc/required.svg);
+  background-repeat: no-repeat;
+  background-size: 6px 6px;
+}
+
+// Fix overlapping dropdown on node preview page.
+.node-preview-container {
+  position: relative;
+
+  .node-preview-backlink {
+    margin-right: 1rem;
+  }
+
+  select {
+    width: auto;
+  }
+}
+//Spacing between comment box and action buttons
+#edit-comment-body-wrapper {
+  margin: 0 0 0.625rem;
+}
--- a/scss/base/_elements.scss
+++ b/scss/base/_elements.scss
@ -0,0 +1,58 @@
+// Elements
+//
+// Things to review before you write code here:
+// - Be sure to load after "foundation" import.
+// - Also, before adding styles be sure to modify variables in the
+//   "base/_common.scss" file. You may not need to write any code.
+
+// Headings
+//------------------------------------------
+// h1, h2, h3,
+// h4, h5, h6 {}
+
+// Anchors
+//-----------------------------------------------------------------------------
+// a {}
+
+// a:focus {}
+
+// a.active,
+// a:active,
+// a:hover {}
+
+// Form Input
+//-----------------------------------------------------------------------------
+// input[type="text"],
+// input[type="password"],
+// input[type="date"],
+// input[type="datetime"],
+// input[type="datetime-local"],
+// input[type="month"],
+// input[type="week"],
+// input[type="email"],
+// input[type="number"],
+// input[type="search"],
+// input[type="tel"],
+// input[type="time"],
+// input[type="url"],
+// textarea {
+// }
+
+// input[type="text"],
+// input[type="password"],
+// input[type="date"],
+// input[type="datetime"],
+// input[type="datetime-local"],
+// input[type="month"],
+// input[type="week"],
+// input[type="email"],
+// input[type="number"],
+// input[type="search"],
+// input[type="tel"],
+// input[type="time"],
+// input[type="url"],
+// textarea {
+
+// }
+
+// select {}
--- a/scss/base/_init.scss
+++ b/scss/base/_init.scss
--- a/scss/base/_mixins.scss
+++ b/scss/base/_mixins.scss
@ -0,0 +1,2 @@
+// @file
+// Place your mixins here. Feel free to roll your own mixins.
--- a/scss/layout/_aside.scss
+++ b/scss/layout/_aside.scss
@ -0,0 +1 @@
+// Non-modular or client styles for asides or sidebars.
--- a/scss/layout/_footer.scss
+++ b/scss/layout/_footer.scss
@ -0,0 +1 @@
+// Non-modular or client styles for .l-footer region.
--- a/scss/layout/_header.scss
+++ b/scss/layout/_header.scss
@ -0,0 +1 @@
+// Non-modular or client styles for .l-header region.
--- a/scss/layout/_main.scss
+++ b/scss/layout/_main.scss
@ -0,0 +1 @@
+// Non-modular or client styles for the .l-content region.
--- a/scss/modules/_block.scss
+++ b/scss/modules/_block.scss
--- a/scss/modules/_button.scss
+++ b/scss/modules/_button.scss
--- a/scss/modules/_menu_block.scss
+++ b/scss/modules/_menu_block.scss
--- a/scss/modules/_topbar.scss
+++ b/scss/modules/_topbar.scss
--- a/scss/modules/_views.scss
+++ b/scss/modules/_views.scss
--- a/scss/peceful.scss
+++ b/scss/peceful.scss
@ -0,0 +1,152 @@
+// =========
+// This application file (THEMENAME.scss) is where all the partials are
+// imported.
+//
+// Do not name this file "peceful.scss". This file should be named
+// THEMENAME.scss.
+//
+// The first half of the file imports Zurb Foundation elements.
+// The second half is for you to included component files to
+// further customize the theme.
+//
+// Theme styles are categorized using SMACSS standards. Those categories are the
+// following:
+//
+// - Base: CSS reset/normalize plus HTML element styling.
+// - Layout: Macro arrangement of a web page, including any grid systems.
+// - Modules: Dictate minor layout modules or reusable elements.
+// - States: Describe the appearance of a module in various states.
+// - Theme: Specific customizations for your subtheme.
+// For more information about this new Drupal css file standard, please review
+// the following:
+// - https://drupal.org/node/1887922
+// - http://smacss.com/
+// =========
+
+// =========
+// Importing Zurb Foundation
+//
+// https://get.foundation/sites/docs/sass.html#adjusting-css-output
+//
+// Note: The following include statements import sass partials for corresponding
+// Foundation 6 features and components. If you do not need any of the features
+// listed below feel free to comment each line out and re-compile.
+// =========
+
+// Make sure the charset is set appropriately
+@charset 'utf-8';
+
+// --- Settings ---
+// This is your _settings.scss file where you can override foundation variables.
+// https://get.foundation/sites/docs/sass.html#the-settings-file
+@import "settings";
+
+// --- Core ---
+// The following imports Zurb Foundation theme.
+@import "foundation";
+@import "motion-ui";
+
+// --- Components ---
+// If you want all the components, and don't care about
+// toggling any on or off, you can use this setting and comment
+// out the rest of the Foundation components.
+// @include foundation-everything($flex: false, $prototype: false);
+
+// Global styles
+@include foundation-global-styles;
+@include foundation-forms;
+@include foundation-typography;
+
+// Grids (choose one)
+@include foundation-xy-grid-classes;
+// @include foundation-grid;
+// @include foundation-flex-grid;
+
+// Generic components
+@include foundation-button;
+@include foundation-button-group;
+@include foundation-close-button;
+@include foundation-label;
+@include foundation-progress-bar;
+@include foundation-slider;
+@include foundation-range-input;
+@include foundation-switch;
+@include foundation-table;
+// Basic components
+@include foundation-badge;
+@include foundation-breadcrumbs;
+@include foundation-callout;
+@include foundation-card;
+@include foundation-dropdown;
+@include foundation-pagination;
+@include foundation-tooltip;
+
+// Containers
+@include foundation-accordion;
+@include foundation-media-object;
+@include foundation-orbit;
+@include foundation-responsive-embed;
+@include foundation-tabs;
+@include foundation-thumbnail;
+// Menu-based containers
+@include foundation-menu;
+@include foundation-menu-icon;
+@include foundation-accordion-menu;
+@include foundation-drilldown-menu;
+@include foundation-dropdown-menu;
+
+// Layout components
+@include foundation-off-canvas;
+@include foundation-reveal;
+@include foundation-sticky;
+@include foundation-title-bar;
+@include foundation-top-bar;
+
+// Helpers
+@include foundation-float-classes;
+@include foundation-flex-classes;
+@include foundation-visibility-classes;
+
+// Prototyping Utilities
+// https://get.foundation/sites/docs/prototyping-utilities.html
+// @include foundation-prototype-classes;
+
+// Motion UI
+// https://get.foundation/sites/docs/motion-ui.html
+@include motion-ui-transitions;
+@include motion-ui-animations;
+
+// =========
+// Custom Components
+//
+// This is where to include any and all custom components for this
+// sub-theme. These can build off of, or overwrite Foundation's components.
+// As long as files start with an underscore, all the variables set in the
+// _settings.scss file can be used.
+// =========
+
+// --- Base ---
+// Drupal-specific styles copied from base theme. (Required)
+@import "base/drupal";
+// Import your mixins early so they can be used by other partials. (optional)
+// @import "base/mixins";
+// @import "base/common";
+// @import "base/elements";
+
+// --- Layout ---
+// Each section of the document has it's own partial seperated out to improve
+// developer experience. Additionally, grids can be declared in layouts as well.
+//@import "layout/header";
+//@import "layout/main";
+//@import "layout/aside";
+//@import "layout/footer";
+
+// --- Modules ---
+// @import "modules/block";
+// @import "modules/button";
+
+// --- States ---
+// @import "states/collapse";
+
+// --- Themes ---
+// @import "theme/button-light";
--- a/scss/states/_collapse.scss
+++ b/scss/states/_collapse.scss
--- a/scss/theme/_sidebar_menu.scss
+++ b/scss/theme/_sidebar_menu.scss
--- a/templates/README.txt
+++ b/templates/README.txt
@ -0,0 +1 @@
+Put your base template overrides in this directory (like page.html.twig).
--- a/theme-settings.php
+++ b/theme-settings.php
@ -0,0 +1,15 @@
+<?php
+
+/**
+ * @file
+ * Add custom theme settings to the ZURB Foundation sub-theme.
+ */
+
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Implements hook_form_FORM_ID_alter().
+ */
+function peceful_form_system_theme_settings_alter(&$form, FormStateInterface $form_state) {
+
+}
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#EE0000" d="M0,7.562l1.114-3.438c2.565,0.906,4.43,1.688,5.59,2.35C6.398,3.553,6.237,1.544,6.22,0.447h3.511 c-0.05,1.597-0.234,3.6-0.558,6.003c1.664-0.838,3.566-1.613,5.714-2.325L16,7.562c-2.05,0.678-4.06,1.131-6.028,1.356 c0.984,0.856,2.372,2.381,4.166,4.575l-2.906,2.059c-0.935-1.274-2.041-3.009-3.316-5.206c-1.194,2.275-2.244,4.013-3.147,5.206 l-2.856-2.059c1.872-2.307,3.211-3.832,4.017-4.575C3.849,8.516,1.872,8.062,0,7.562"/></svg>
				`@ -0,0 +1 @@`
				`// Non-modular or client styles for asides or sidebars.`
				`@ -0,0 +1 @@`
				`// Non-modular or client styles for .l-footer region.`
				`@ -0,0 +1 @@`
				`// Non-modular or client styles for the .l-content region.`
				`@ -0,0 +1 @@`
				`Put your base template overrides in this directory (like page.html.twig).`