got things working

.docksal/docksal.yml

@@ -59,6 +59,7 @@ services:
       - DATABASE_HOST
       - DRUPAL_TRUSTED_HOSTS=${VIRTUAL_HOST}
       - SITE_ENV
+      - COMPOSER_MEMORY_LIMIT=-1
     dns:
       - ${DOCKSAL_DNS1}
       - ${DOCKSAL_DNS2}

composer.json

@@ -25,7 +25,6 @@
         "drupal/backup_migrate": "^4.0",
         "drupal/blazy": "~1.0",
         "drupal/block_blacklist": "^1.0",
-        "drupal/claro": "^1.0",
         "drupal/components": "^1.1",
         "drupal/config_export_ignore": "^1.0@RC",
         "drupal/config_ignore": "^2.1",
@@ -35,11 +34,11 @@
         "drupal/core": "~8.0",
         "drupal/ctools": "~3.0",
         "drupal/devel": "^1.2",
-        "drush/drush": "^9.0.0",
         "drupal/field_group": "^1.0",
         "drupal/focal_point": "^1.0",
         "drupal/imageapi_optimize": "^2.0@alpha",
         "drupal/inline_entity_form": "^1.0@RC",
+        "drupal/koality_theme_generator": "1.x-dev",
         "drupal/layout_builder_restrictions": "^2.2",
         "drupal/layout_builder_st": "^1.0@alpha",
         "drupal/linkit": "~4.0",
@@ -52,15 +51,17 @@
         "drupal/prlp": "^1.2",
         "drupal/token": "~1.0",
         "drupal/twig_tweak": "^2.0",
+        "drupal/twig_xdebug": "^1.1",
         "drupal/ui_patterns": "^1.1",
         "drupal/webform": "^5.3",
+        "drush/drush": "^9.0.0",
         "vlucas/phpdotenv": "^2.4",
         "webflo/drupal-finder": "^1.0.0",
         "webmozart/path-util": "^2.3",
         "zaporylie/composer-drupal-optimizations": "^1.0"
     },
     "require-dev": {
-        "webflo/drupal-core-require-dev": "^8.7.0"
+        "webflo/drupal-core-require-dev": "^8.8.0"
     },
     "conflict": {
         "drupal/drupal": "*"

config/default/default/.htaccess

@@ -0,0 +1,24 @@
+# Deny all requests from Apache 2.4+.
+<IfModule mod_authz_core.c>
+  Require all denied
+</IfModule>
+
+# Deny all requests from Apache 2.0-2.2.
+<IfModule !mod_authz_core.c>
+  Deny from all
+</IfModule>
+
+# Turn off all options we don't need.
+Options -Indexes -ExecCGI -Includes -MultiViews
+
+# Set the catch-all handler to prevent scripts from being executed.
+SetHandler Drupal_Security_Do_Not_Remove_See_SA_2006_006
+<Files *>
+  # Override the handler again if we're run later in the evaluation list.
+  SetHandler Drupal_Security_Do_Not_Remove_See_SA_2013_003
+</Files>
+
+# If we know how to do it safely, disable the PHP engine entirely.
+<IfModule mod_php5.c>
+  php_flag engine off
+</IfModule>

docroot/.htaccess

@@ -3,7 +3,7 @@
 #
 
 # Protect files and directories from prying eyes.
-<FilesMatch "\.(engine|inc|install|make|module|profile|po|sh|.*sql|theme|twig|tpl(\.php)?|xtmpl|yml)(~|\.sw[op]|\.bak|\.orig|\.save)?$|^(\.(?!well-known).*|Entries.*|Repository|Root|Tag|Template|composer\.(json|lock))$|^#.*#$|\.php(~|\.sw[op]|\.bak|\.orig|\.save)$">
+<FilesMatch "\.(engine|inc|install|make|module|profile|po|sh|.*sql|theme|twig|tpl(\.php)?|xtmpl|yml)(~|\.sw[op]|\.bak|\.orig|\.save)?$|^(\.(?!well-known).*|Entries.*|Repository|Root|Tag|Template|composer\.(json|lock)|web\.config)$|^#.*#$|\.php(~|\.sw[op]|\.bak|\.orig|\.save)$">
   <IfModule mod_authz_core.c>
     Require all denied
   </IfModule>

docroot/modules/custom/vue_js_example/src/Plugin/Block/NonVueBlock.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace Drupal\vue_js_example\Plugin\Block;
+
+use Drupal\Core\Block\BlockBase;
+
+/**
+ * Provides a 'NonVueBlock' block.
+ *
+ * @Block(
+ *  id = "non_vue_block",
+ *  admin_label = @Translation("Non vue block"),
+ * )
+ */
+class NonVueBlock extends BlockBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function build() {
+    $build = [];
+    $build['#theme'] = 'non_vue_block';
+     $build['non_vue_block']['#markup'] = 'Implement NonVueBlock.';
+
+    return $build;
+  }
+
+}

docroot/modules/custom/vue_js_example/src/Plugin/Block/VueBlock.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace Drupal\vue_js_example\Plugin\Block;
+
+use Drupal\Core\Block\BlockBase;
+
+/**
+ * Provides a 'VueBlock' block.
+ *
+ * @Block(
+ *  id = "vue_block",
+ *  admin_label = @Translation("Vue block"),
+ * )
+ */
+class VueBlock extends BlockBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function build() {
+    $build = [];
+    $build['#theme'] = 'vue_block';
+     $build['vue_block']['#markup'] = 'Implement VueBlock.';
+
+    return $build;
+  }
+
+}

docroot/modules/custom/vue_js_example/tests/src/Functional/LoadTest.php

@@ -0,0 +1,46 @@
+<?php
+
+namespace Drupal\Tests\vue_js_example\Functional;
+
+use Drupal\Core\Url;
+use Drupal\Tests\BrowserTestBase;
+
+/**
+ * Simple test to ensure that main page loads with module enabled.
+ *
+ * @group vue_js
+ */
+class LoadTest extends BrowserTestBase {
+
+  /**
+   * Modules to enable.
+   *
+   * @var array
+   */
+  public static $modules = ['vue_js'];
+
+  /**
+   * A user with permission to administer site configuration.
+   *
+   * @var \Drupal\user\UserInterface
+   */
+  protected $user;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+    $this->user = $this->drupalCreateUser(['administer site configuration']);
+    $this->drupalLogin($this->user);
+  }
+
+  /**
+   * Tests that the home page loads with a 200 response.
+   */
+  public function testLoad() {
+    $this->drupalGet(Url::fromRoute('<front>'));
+    $this->assertSession()->statusCodeEquals(200);
+  }
+
+}

docroot/modules/custom/vue_js_example/vue_js_example.info.yml

@@ -0,0 +1,5 @@
+name: 'Vue.js Example'
+type: module
+description: 'My Awesome Module'
+core: 8.x
+package: 'Custom'

docroot/modules/custom/vue_js_example/vue_js_example.module

@@ -0,0 +1,24 @@
+<?php
+
+/**
+ * @file
+ * Contains vue_js.module.
+ */
+
+use Drupal\Core\Routing\RouteMatchInterface;
+
+/**
+ * Implements hook_help().
+ */
+function vue_js_example_help($route_name, RouteMatchInterface $route_match) {
+  switch ($route_name) {
+    // Main module help for the vue_js module.
+    case 'help.page.vue_js':
+      $output = '';
+      $output .= '<h3>' . t('About') . '</h3>';
+      $output .= '<p>' . t('My Awesome Module') . '</p>';
+      return $output;
+
+    default:
+  }
+}

docroot/sites/default/default.settings.php

@@ -229,29 +229,15 @@ $databases = [];
 /**
  * Location of the site configuration files.
  *
- * The $config_directories array specifies the location of file system
- * directories used for configuration data. On install, the "sync" directory is
- * created. This is used for configuration imports. The "active" directory is
- * not created by default since the default storage for active configuration is
- * the database rather than the file system. (This can be changed. See "Active
- * configuration settings" below).
+ * The $settings['config_sync_directory'] specifies the location of file system
+ * directory used for syncing configuration data. On install, the directory is
+ * created. This is used for configuration imports.
  *
- * The default location for the "sync" directory is inside a randomly-named
- * directory in the public files path. The setting below allows you to override
- * the "sync" location.
- *
- * If you use files for the "active" configuration, you can tell the
- * Configuration system where this directory is located by adding an entry with
- * array key CONFIG_ACTIVE_DIRECTORY.
- *
- * Example:
- * @code
- *   $config_directories = [
- *     CONFIG_SYNC_DIRECTORY => '/directory/outside/webroot',
- *   ];
- * @endcode
+ * The default location for this directory is inside a randomly-named
+ * directory in the public files path. The setting below allows you to set
+ * its location.
  */
-$config_directories = [];
+# $settings['config_sync_directory'] = '/directory/outside/webroot';
 
 /**
  * Settings:
@@ -536,6 +522,19 @@ if ($settings['hash_salt']) {
  */
 # $settings['file_private_path'] = '';
 
+/**
+ * Temporary file path:
+ *
+ * A local file system path where temporary files will be stored. This directory
+ * must be absolute, outside of the Drupal installation directory and not
+ * accessible over the web.
+ *
+ * If this is not set, the default for the operating system will be used.
+ *
+ * @see \Drupal\Component\FileSystem\FileSystem::getOsTemporaryDirectory()
+ */
+# $settings['file_temp_path'] = '/tmp';
+
 /**
  * Session write interval:
  *
@@ -596,25 +595,6 @@ if ($settings['hash_salt']) {
 # ini_set('pcre.backtrack_limit', 200000);
 # ini_set('pcre.recursion_limit', 200000);
 
-/**
- * Active configuration settings.
- *
- * By default, the active configuration is stored in the database in the
- * {config} table. To use a different storage mechanism for the active
- * configuration, do the following prior to installing:
- * - Create an "active" directory and declare its path in $config_directories
- *   as explained under the 'Location of the site configuration files' section
- *   above in this file. To enhance security, you can declare a path that is
- *   outside your document root.
- * - Override the 'bootstrap_config_storage' setting here. It must be set to a
- *   callable that returns an object that implements
- *   \Drupal\Core\Config\StorageInterface.
- * - Override the service definition 'config.storage.active'. Put this
- *   override in a services.yml file in the same directory as settings.php
- *   (definitions in this file will override service definition defaults).
- */
-# $settings['bootstrap_config_storage'] = ['Drupal\Core\Config\BootstrapConfigStorageFactory', 'getFileStorage'];
-
 /**
  * Configuration overrides.
  *
@@ -637,9 +617,7 @@ if ($settings['hash_salt']) {
  * configuration values in settings.php will not fire any of the configuration
  * change events.
  */
-# $config['system.file']['path']['temporary'] = '/tmp';
 # $config['system.site']['name'] = 'My Drupal site';
-# $config['system.theme']['default'] = 'stark';
 # $config['user.settings']['anonymous'] = 'Visitor';
 
 /**
@@ -736,7 +714,7 @@ $settings['container_yamls'][] = $app_root . '/' . $site_path . '/services.yml';
  * with common frontend tools and recursive scanning of directories looking for
  * extensions.
  *
- * @see file_scan_directory()
+ * @see \Drupal\Core\File\FileSystemInterface::scanDirectory()
  * @see \Drupal\Core\Extension\ExtensionDiscovery::scanDirectory()
  */
 $settings['file_scan_ignore_directories'] = [

docroot/sites/default/services.yml

@@ -0,0 +1,174 @@
+parameters:
+  session.storage.options:
+    # Default ini options for sessions.
+    #
+    # Some distributions of Linux (most notably Debian) ship their PHP
+    # installations with garbage collection (gc) disabled. Since Drupal depends
+    # on PHP's garbage collection for clearing sessions, ensure that garbage
+    # collection occurs by using the most common settings.
+    # @default 1
+    gc_probability: 1
+    # @default 100
+    gc_divisor: 100
+    #
+    # Set session lifetime (in seconds), i.e. the time from the user's last
+    # visit to the active session may be deleted by the session garbage
+    # collector. When a session is deleted, authenticated users are logged out,
+    # and the contents of the user's $_SESSION variable is discarded.
+    # @default 200000
+    gc_maxlifetime: 200000
+    #
+    # Set session cookie lifetime (in seconds), i.e. the time from the session
+    # is created to the cookie expires, i.e. when the browser is expected to
+    # discard the cookie. The value 0 means "until the browser is closed".
+    # @default 2000000
+    cookie_lifetime: 2000000
+    #
+    # Drupal automatically generates a unique session cookie name based on the
+    # full domain name used to access the site. This mechanism is sufficient
+    # for most use-cases, including multi-site deployments. However, if it is
+    # desired that a session can be reused across different subdomains, the
+    # cookie domain needs to be set to the shared base domain. Doing so assures
+    # that users remain logged in as they cross between various subdomains.
+    # To maximize compatibility and normalize the behavior across user agents,
+    # the cookie domain should start with a dot.
+    #
+    # @default none
+    # cookie_domain: '.example.com'
+    #
+  twig.config:
+    # Twig debugging:
+    #
+    # When debugging is enabled:
+    # - The markup of each Twig template is surrounded by HTML comments that
+    #   contain theming information, such as template file name suggestions.
+    # - Note that this debugging markup will cause automated tests that directly
+    #   check rendered HTML to fail. When running automated tests, 'debug'
+    #   should be set to FALSE.
+    # - The dump() function can be used in Twig templates to output information
+    #   about template variables.
+    # - Twig templates are automatically recompiled whenever the source code
+    #   changes (see auto_reload below).
+    #
+    # For more information about debugging Twig templates, see
+    # https://www.drupal.org/node/1906392.
+    #
+    # Not recommended in production environments
+    # @default false
+    debug: true
+    # Twig auto-reload:
+    #
+    # Automatically recompile Twig templates whenever the source code changes.
+    # If you don't provide a value for auto_reload, it will be determined
+    # based on the value of debug.
+    #
+    # Not recommended in production environments
+    # @default null
+    auto_reload: true
+    # Twig cache:
+    #
+    # By default, Twig templates will be compiled and stored in the filesystem
+    # to increase performance. Disabling the Twig cache will recompile the
+    # templates from source each time they are used. In most cases the
+    # auto_reload setting above should be enabled rather than disabling the
+    # Twig cache.
+    #
+    # Not recommended in production environments
+    # @default true
+    cache: false
+  renderer.config:
+    # Renderer required cache contexts:
+    #
+    # The Renderer will automatically associate these cache contexts with every
+    # render array, hence varying every render array by these cache contexts.
+    #
+    # @default ['languages:language_interface', 'theme', 'user.permissions']
+    required_cache_contexts: ['languages:language_interface', 'theme', 'user.permissions']
+    # Renderer automatic placeholdering conditions:
+    #
+    # Drupal allows portions of the page to be automatically deferred when
+    # rendering to improve cache performance. That is especially helpful for
+    # cache contexts that vary widely, such as the active user. On some sites
+    # those may be different, however, such as sites with only a handful of
+    # users. If you know what the high-cardinality cache contexts are for your
+    # site, specify those here. If you're not sure, the defaults are fairly safe
+    # in general.
+    #
+    # For more information about rendering optimizations see
+    # https://www.drupal.org/developing/api/8/render/arrays/cacheability#optimizing
+    auto_placeholder_conditions:
+      # Max-age at or below which caching is not considered worthwhile.
+      #
+      # Disable by setting to -1.
+      #
+      # @default 0
+      max-age: 0
+      # Cache contexts with a high cardinality.
+      #
+      # Disable by setting to [].
+      #
+      # @default ['session', 'user']
+      contexts: ['session', 'user']
+      # Tags with a high invalidation frequency.
+      #
+      # Disable by setting to [].
+      #
+      # @default []
+      tags: []
+  # Cacheability debugging:
+  #
+  # Responses with cacheability metadata (CacheableResponseInterface instances)
+  # get X-Drupal-Cache-Tags and X-Drupal-Cache-Contexts headers.
+  #
+  # For more information about debugging cacheable responses, see
+  # https://www.drupal.org/developing/api/8/response/cacheable-response-interface
+  #
+  # Not recommended in production environments
+  # @default false
+  http.response.debug_cacheability_headers: false
+  factory.keyvalue:
+    {}
+    # Default key/value storage service to use.
+    # @default keyvalue.database
+    # default: keyvalue.database
+    # Collection-specific overrides.
+    # state: keyvalue.database
+  factory.keyvalue.expirable:
+    {}
+    # Default key/value expirable storage service to use.
+    # @default keyvalue.database.expirable
+    # default: keyvalue.database.expirable
+  # Allowed protocols for URL generation.
+  filter_protocols:
+    - http
+    - https
+    - ftp
+    - news
+    - nntp
+    - tel
+    - telnet
+    - mailto
+    - irc
+    - ssh
+    - sftp
+    - webcal
+    - rtsp
+
+   # Configure Cross-Site HTTP requests (CORS).
+   # Read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
+   # for more information about the topic in general.
+   # Note: By default the configuration is disabled.
+  cors.config:
+    enabled: false
+    # Specify allowed headers, like 'x-allowed-header'.
+    allowedHeaders: []
+    # Specify allowed request methods, specify ['*'] to allow all possible ones.
+    allowedMethods: []
+    # Configure requests allowed from specific origins.
+    allowedOrigins: ['*']
+    # Sets the Access-Control-Expose-Headers header.
+    exposedHeaders: false
+    # Sets the Access-Control-Max-Age header.
+    maxAge: false
+    # Sets the Access-Control-Allow-Credentials header.
+    supportsCredentials: false

docroot/sites/example.settings.local.php

@@ -129,3 +129,27 @@ $settings['rebuild_access'] = TRUE;
  * directory.
  */
 $settings['skip_permissions_hardening'] = TRUE;
+
+/**
+ * Exclude modules from configuration synchronisation.
+ *
+ * On config export sync, no config or dependent config of any excluded module
+ * is exported. On config import sync, any config of any installed excluded
+ * module is ignored. In the exported configuration, it will be as if the
+ * excluded module had never been installed. When syncing configuration, if an
+ * excluded module is already installed, it will not be uninstalled by the
+ * configuration synchronisation, and dependent configuration will remain
+ * intact. This affects only configuration synchronisation; single import and
+ * export of configuration are not affected.
+ *
+ * Drupal does not validate or sanity check the list of excluded modules. For
+ * instance, it is your own responsibility to never exclude required modules,
+ * because it would mean that the exported configuration can not be imported
+ * anymore.
+ *
+ * This is an advanced feature and using it means opting out of some of the
+ * guarantees the configuration synchronisation provides. It is not recommended
+ * to use this feature with modules that affect Drupal in a major way such as
+ * the language or field module.
+ */
+# $settings['config_exclude_modules'] = ['devel', 'stage_file_proxy'];

docroot/themes/custom/vue_js/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

docroot/themes/custom/vue_js/.eslintrc.yml

@@ -0,0 +1,174 @@
+# http://eslint.org/docs/rules/
+# =============================
+# By default, ESLint will look for configuration files in all parent
+# folders up to the root directory. Prevent this by telling ESLint
+# that this is the root of the project.
+root: true
+
+# Which environments your script is designed to run in.
+# Each environment brings with it a certain set of predefined global variables.
+env:
+
+  # Define globals exposed by Node.js.
+  node: true
+
+  # Define globals exposed by modern browsers.
+  browser: true
+
+  # Define globals exposed by ES6 / ES2015 EXCEPT for modules.
+  es6: true
+
+  # Define globals exposed by jQuery.
+  jquery: true
+
+parserOptions:
+  ecmaVersion: 2018
+  ecmaFeatures:
+    spread: true
+
+# Let ESLint know about defined global variables.
+globals:
+
+  Drupal: true
+
+  drupalSettings: true
+
+# Inherit settings from ESLint Recommended config.
+# Rules above override any rules configured here.
+extends: 'eslint:recommended'
+
+#  0 - turn the rule off
+#  1 - turn the rule on as a warning (doesn't affect exit code)
+#  2 - turn the rule on as an error (exit code is 1 when triggered)
+rules:
+
+  # Two space indentation.
+  indent:
+    - 2
+    - 2
+    - SwitchCase: 1
+
+  # Prefer single quotes over double.
+  quotes:
+    - 2
+    - single
+
+  # Specify Unix line endings.
+  linebreak-style:
+    - 2
+    - unix
+
+  # Enforce using semicolons.
+  semi:
+    - 2
+    - always
+
+  # Enforce camelcase for variables.
+  camelcase:
+    - 2
+
+  # Prohibit use of == and != in favor of === and !==.
+  eqeqeq:
+    - 2
+
+  # Enforce placing 'use strict' at the top function scope
+  strict:
+    - 2
+    - function
+
+  # Prohibit use of a variable before it is defined.
+  no-undef:
+    - 1
+
+  # Enforce line length to 90 characters
+  max-len:
+    - 2
+    - 90
+    - 2
+
+  # Require capitalized names for constructor functions.
+  new-cap:
+    - 2
+
+  # Warn when variables are defined but never used.
+  no-unused-vars:
+    - 1
+
+  # Require one var declaration for each variable and
+  # declare each variable on a newline.
+  one-var:
+    - 2
+    - never
+
+  # Enforce stroustrup style for braces.
+  brace-style:
+    - 2
+    - stroustrup
+
+  # Validates JSDoc comments are syntactically correct
+  valid-jsdoc:
+    - 2
+
+  # Treat var as Block Scoped
+  block-scoped-var:
+    - 1
+
+  # Require Following Curly Brace Conventions
+  curly:
+    - 2
+
+  # Disallow Use of Alert
+  no-alert:
+    - 1
+
+  # Disallow eval()
+  no-eval:
+    - 2
+
+  # Disallow the type conversion with shorter notations
+  no-implicit-coercion:
+    - 2
+
+  # Disallow Functions in Loops
+  no-loop-func:
+    - 2
+
+  # Disallow Script URLs
+  no-script-url:
+    - 2
+
+  # Disallow Use of the Comma Operator
+  no-sequences:
+    - 2
+
+  # Disallow unnecessary concatenation of strings
+  no-useless-concat:
+    - 2
+
+  # Disallow Yoda Conditions
+  yoda:
+    - 2
+
+  # Disallow Early Use
+  no-use-before-define:
+    - 2
+
+  # Require file to end with single newline
+  eol-last:
+    - 2
+
+  # Disallow trailing spaces at the end of lines
+  no-trailing-spaces:
+    - 2
+
+  # Disallow Dangling Underscores in Identifiers
+  no-underscore-dangle:
+    - 2
+
+  # Require JSDoc comment
+  require-jsdoc:
+    - 1
+
+  # Require Or Disallow Space Before Blocks
+  space-before-blocks:
+    - 2

docroot/themes/custom/vue_js/.gitignore

@@ -0,0 +1,11 @@
+# Ignore the node modules folder (created by 'npm install').
+node_modules
+
+# We absolutely don't want to have the .sass-cache in git.
+.sass-cache
+
+# Ignore any errors thrown by npm.
+npm-debug.log
+
+# Ignore any map files. These don't need to be committed.
+*.map

docroot/themes/custom/vue_js/.nvmrc

@@ -0,0 +1 @@
+v11.2.0

docroot/themes/custom/vue_js/.sass-lint.yml

@@ -0,0 +1,247 @@
+# Custom configuration for Sass lint.
+# https://github.com/sasstools/sass-lint
+
+options:
+  formatter: stylish
+  merge-default-rules: true
+
+# For all rules, setting their severity to 0 turns it off,
+# setting to 1 sets it as a warning (something that should not be committed in),
+# and setting to 2 set it to an error (something that should not be written).
+#
+# More info can be found here:
+# https://github.com/sasstools/sass-lint/tree/develop/docs/rules
+rules:
+
+  # Prefer the terser border: 0 over border: none.
+  border-zero:
+    - 1
+    - convention: '0'
+
+  # Prefer
+  #
+  # .foo {
+  #   content: 'foo';
+  # }
+  #
+  # over
+  #
+  # .foo
+  # {
+  #   content: 'foo';
+  # }
+  # Allow single line for one off cases.
+  brace-style:
+    - 1
+    -
+      style: stroustrup
+      allow-single-line: true
+
+  # Prefer @import paths without leading underscores and/or
+  # file extensions.
+  clean-import-paths:
+    - 1
+    -
+      filename-extension: false
+      leading-underscore: false
+
+  # Prefer empty lines between code blocks when nestings.
+  empty-line-between-blocks:
+    - 1
+    - include: true
+
+  # Prefer newline at the end of a file.
+  final-newline:
+    - 1
+    - include: true
+
+  # Don't enforce attribute nesting.
+  force-attribute-nesting: 0
+
+  # Don't enforce element nesting.
+  force-element-nesting: 0
+
+  # Don't enforce pseudo nesting.
+  force-pseudo-nesting: 0
+
+  # Prefer function name formatting with dashes.
+  function-name-format:
+    - 1
+    -
+      allow-leading-underscore: true
+      convention: hyphenatedlowercase
+
+  # Prefer short hexadecimal values for colors.
+  # #FFF vs #FFFFFF
+  hex-length:
+    - 0
+    - style: short
+
+  # Don't enforce hex-notation.
+  # #FFF vs #fff
+  hex-notation:
+    - 0
+    - style: lowercase
+
+  # Prefer two spaces for indentation.
+  indentation:
+    - 1
+    - width: 2
+
+  # Prefer leading zero for readability.
+  leading-zero:
+    - 1
+    - include: true
+
+  # Prefer mixin names with dashes.
+  mixin-name-format:
+    - 1
+    -
+      allow-leading-underscore: true
+      convention: hyphenatedlowercase
+
+  # Prefer a max-depth of 3 for nesting. 2 would really be best.
+  nesting-depth:
+    - 1
+    - max-depth: 3
+
+  # No preference for color keywords.
+  no-color-keyword: 0
+
+  # No preference for color literals.
+  no-color-literals: 0
+
+  # Allow css comments.
+  no-css-comments: 0
+
+  # Prefer debug not be used.
+  no-debug: 1
+
+  # Prefer no duplicate properties except display.
+  no-duplicate-properties:
+    - 1
+    -
+      exclude:
+        - display
+        - background
+
+  # Enforce no empty rulesets.
+  no-empty-rulesets: 2
+
+  # Let's just go ahead and say 'no extends'.
+  no-extends: 1
+
+  # Prefer no ID selectors.
+  no-ids: 1
+
+  # Prefer no importants.
+  no-important: 1
+
+  # Enforce that all hex values must be valid.
+  no-invalid-hex: 2
+
+  # Prefer no duplicate selectors that can be merged.
+  no-mergeable-selectors: 1
+
+  # Enforce that all properties are spelled correctly.
+  no-misspelled-properties:
+    - 2
+    -
+      extra-properties: []
+
+  # Prefer only allowing elements to be qualified with attributes.
+  no-qualifying-elements:
+    - 1
+    -
+      allow-element-with-attribute: true
+      allow-element-with-class: false
+      allow-element-with-id: false
+
+  class-name-format:
+    - 2
+    - allow-leading-underscore: false
+      convention: hyphenatedbem
+
+  # No preference for trailing zeros.
+  no-trailing-zero: 0
+
+  # Prefer no url absolute url paths.
+  no-url-protocols: 1
+
+  # No preference for property sort order.
+  property-sort-order: 0
+
+  # Prefer single quotes.
+  quotes:
+    - 1
+    - style: single
+
+  # Prefer shorthand values be as concise as possible.
+  #
+  # margin: 1px 1px 1px 1px;
+  #
+  # // Will be enforced to 1 value
+  # margin: 1px;
+  shorthand-values: 1
+
+  # Prefer single line per selector.
+  single-line-per-selector: 1
+
+  # Prefer no space after bang(!).
+  space-after-bang:
+    - 1
+    - include: false
+
+  # Prefer space after colon.
+  space-after-colon:
+    - 1
+    - include: true
+
+  # Prefer space after comma.
+  space-after-comma:
+    - 1
+    - include: true
+
+  # Prefer space before bang(!).
+  space-before-bang:
+    - 1
+    - include: true
+
+  # Prefer space before a brace.
+  space-before-brace:
+    - 1
+    - include: true
+
+  # Prefer NO space before colon.
+  space-before-colon: 1
+
+  # Prefer NO space between parenthesis(()).
+  space-between-parens:
+    - 1
+    - include: false
+
+  # Enforce ending each declaration with a semicolon(;).
+  trailing-semicolon: 2
+
+  # Prefer that url() uses quotes.
+  #
+  # .foo {
+  #   background-image: url('foo.png');
+  # }
+  url-quotes: 1
+
+  # No preference for forcing certain properties to use variables.
+  variable-for-property:
+    - 0
+    - properties: []
+
+  # Prefer hyphenated lowercase for variable names.
+  variable-name-format:
+    - 1
+    -
+      allow-leading-underscore: true
+      convention: hyphenatedlowercase
+
+  # Prefer zero values to be unitless.
+  # 0 vs 0px
+  zero-unit: 1

docroot/themes/custom/vue_js/README.md

@@ -0,0 +1,46 @@
+## Getting Started
+
+### Browser Support
+Autoprefixer & Babel is set to support:
+
+* IE >= 11
+* Last 2 versions of modern browsers.
+
+These can be updated at any time within the `package.json`.
+
+### Run the following commands from the theme directory
+If you haven't yet, install nvm:
+https://github.com/creationix/nvm
+
+#### Use the right version of node with:
+`nvm use`
+
+_This command will look at your `.nvmrc` file and use the version node.js specified in it. This ensures all developers use the same version of node for consistency._
+
+#### If that version of node isn't installed, install it with:
+`nvm install`
+
+#### Install npm dependencies with
+`npm install`
+
+_This command looks at `package.json` and installs all the npm dependencies specified in it.  Some of the dependencies include gulp, autoprefixer, gulp-sass and others._
+
+#### Runs default task
+`npm run build`
+
+_This will run whatever the default task is._
+
+#### Compiles Sass
+`npm run compile`
+
+_This will perform a one-time Sass compilation._
+
+#### Runs the watch command
+`npm run watch`
+
+_This is ideal when you are doing a lot of Sass changes and you want to make sure every time a change is saved it automatically gets compiled to CSS_
+
+#### Cleans complied directory
+`npm run clean`
+
+_This will perform a one-time deletion of all compiled files within the dist/ directory._

docroot/themes/custom/vue_js/dist/css/collapsible.css

@@ -0,0 +1,8 @@
+.collapsible {
+  border: 1px solid black; }
+  .collapsible.closed .body {
+    display: none; }
+  .collapsible .title {
+    background: lightgray; }
+    .collapsible .title h2 {
+      margin: 0; }

docroot/themes/custom/vue_js/dist/css/modal.css

@@ -0,0 +1,69 @@
+.modal .modal__modal {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%; }
+  .modal .modal__modal .modal__content {
+    margin: auto;
+    padding: 20px 30px;
+    background-color: #FFF;
+    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+    -webkit-transition: opacity 300ms ease;
+    transition: opacity 300ms ease;
+    width: 80%;
+    max-width: 1000px;
+    max-height: 70%;
+    border-radius: 2px;
+    position: relative; }
+    @media (min-width: 992px) {
+      .modal .modal__modal .modal__content {
+        width: 55%; } }
+  .modal .modal__modal:focus {
+    outline: none; }
+  .modal .modal__modal h1,
+  .modal .modal__modal h2,
+  .modal .modal__modal h3,
+  .modal .modal__modal h4 {
+    margin-top: 0; }
+  .modal .modal__modal .modal__close {
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    right: 10px; }
+  .modal .modal__modal .modal__footer {
+    border-radius: 0 0 2px 2px;
+    background-color: #fafafa;
+    padding: 4px 6px;
+    height: 56px;
+    width: 100%;
+    text-align: right; }
+    .modal .modal__modal .modal__footer .btn,
+    .modal .modal__modal .modal__footer .btn-flat {
+      margin: 6px 0; }
+
+.modal .modal__mask {
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 1;
+  -webkit-transition: opacity 300ms ease;
+  transition: opacity 300ms ease;
+  will-change: opacity; }
+
+.modal .modal-enter {
+  opacity: 0; }
+
+.modal .modal-leave-active {
+  opacity: 0; }
+
+.modal .modal-enter .modal-container,
+.modal .modal-leave-active .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1); }

docroot/themes/custom/vue_js/dist/js/collapsible-vue.js

@@ -0,0 +1,15 @@
+document.addEventListener('DOMContentLoaded', function () {
+  'use strict';
+
+  drupalSettings.modal = new Vue({ // eslint-disable-line no-unused-vars, no-undef, max-len
+    el: '.collapsible-vue',
+    data: {
+      showBody: false
+    },
+    methods: {
+      toggleBody: function toggleBody() {
+        this.showBody = !this.showBody;
+      }
+    }
+  });
+});

docroot/themes/custom/vue_js/dist/js/collapsible.js

@@ -0,0 +1,17 @@
+!function (document, Drupal, $) {
+  'use strict';
+
+  Drupal.behaviors.drupalVueCollapsible = {
+    attach: function attach(context) {
+
+      var collapsibles = context.querySelectorAll('.collapsible-non-vue');
+
+      collapsibles.forEach(function (collapsible) {
+        collapsible.querySelector('.title').addEventListener('click', function (e) {
+          e.preventDefault();
+          this.parentElement.classList.toggle('closed');
+        });
+      });
+    }
+  };
+}(document, Drupal, jQuery);

docroot/themes/custom/vue_js/dist/js/modal-non-vue.js

@@ -0,0 +1,24 @@
+!function (document, Drupal, $) {
+  'use strict';
+
+  Drupal.behaviors.drupalVueModal = {
+    attach: function attach(context) {
+
+      var modal = context.querySelector('#non-vue-modal');
+      var modalButton = context.querySelector('#non-vue-modal-button');
+      var modalCloseButton = context.querySelector('#non-vue-modal .modal__close');
+
+      if (modalButton !== null) {
+        modalButton.addEventListener('click', function (e) {
+          e.preventDefault();
+          modal.querySelector('.modal__mask').classList.remove('hidden');
+        });
+
+        modalCloseButton.addEventListener('click', function (e) {
+          e.preventDefault();
+          modal.querySelector('.modal__mask').classList.add('hidden');
+        });
+      }
+    }
+  };
+}(document, Drupal, jQuery);

docroot/themes/custom/vue_js/dist/js/modal-vue.js

@@ -0,0 +1,20 @@
+document.addEventListener('DOMContentLoaded', function () {
+  'use strict';
+
+  drupalSettings.modal = new Vue({ // eslint-disable-line no-unused-vars, no-undef, max-len
+    el: '#vue-modal',
+    data: {
+      showModal: false,
+      content: 'Default Modal Text'
+    },
+    methods: {
+      show: function show(content) {
+        this.showModal = true;
+        this.content = content;
+      },
+      close: function close() {
+        this.showModal = false;
+      }
+    }
+  });
+});

docroot/themes/custom/vue_js/gulp-tasks/clean.js

@@ -0,0 +1,33 @@
+/*eslint strict: ["error", "global"]*/
+'use strict';
+
+//=======================================================
+// Include Our Plugins
+//=======================================================
+var del = require('del');
+
+// Export our tasks.
+module.exports = {
+
+  // Clean style guide files.
+  styleguide: function() {
+    // You can use multiple globbing patterns as you would with `gulp.src`
+    return del([
+      './dist/style-guide/*'
+    ], {force: true});
+  },
+
+  // Clean CSS files.
+  css: function() {
+    return del([
+      './dist/css/*'
+    ], {force: true});
+  },
+
+  // Clean JS files.
+  js: function() {
+    return del([
+      './dist/js/*'
+    ], {force: true});
+  }
+};

docroot/themes/custom/vue_js/gulp-tasks/compile.js

@@ -0,0 +1,68 @@
+/*eslint strict: ["error", "global"]*/
+'use strict';
+
+//=======================================================
+// Include gulp
+//=======================================================
+var gulp = require('gulp');
+
+//=======================================================
+// Include Our Plugins
+//=======================================================
+var sass        = require('gulp-sass');
+var prefix      = require('gulp-autoprefixer');
+var sourcemaps  = require('gulp-sourcemaps');
+var sync        = require('browser-sync');
+var babel       = require('gulp-babel');
+var rename      = require('gulp-rename');
+
+// Small error handler helper function.
+function handleError(err) {
+  console.log(err.toString());
+  this.emit('end');
+}
+
+// Export our tasks.
+module.exports = {
+
+  // Compile Sass.
+  sass: function() {
+    return gulp.src('./src/{global,layout,components}/**/*.scss')
+      .pipe(
+        sass({ outputStyle: 'nested' })
+          .on('error', handleError)
+      )
+      .pipe(prefix({
+        cascade: false
+      }))
+      .pipe(rename(function (path) {
+        path.dirname = '';
+        return path;
+      }))
+      .pipe(gulp.dest('./dist/css'))
+      .pipe(sync.stream({match: '**/*.css'}));
+  },
+
+  // Compile JavaScript.
+  js: function() {
+    return gulp.src([
+      './src/{global,layout,components}/**/*.es6.js'
+    ], { base: './' })
+      .pipe(
+        babel()
+          .on('error', handleError)
+      )
+      .pipe(rename(function (path) {
+        // Currently not using ES6 modules so for now
+        // es6 files are compiled into individual JS files.
+        // Eventually this can use ES6 Modules and compile
+        // all files within a component directory into a single
+        // foo.bundle.js file. In that case the bundle name should
+        // reflect the components directory name.
+        path.dirname = '';
+        path.basename = path.basename.replace(/\.es6/, '');
+        return path;
+      }))
+      .pipe(gulp.dest('./dist/js'));
+  }
+};

docroot/themes/custom/vue_js/gulp-tasks/compress.js

@@ -0,0 +1,35 @@
+/*eslint strict: ["error", "global"]*/
+'use strict';
+
+//=======================================================
+// Include gulp
+//=======================================================
+var gulp = require('gulp');
+
+//=======================================================
+// Include Our Plugins
+//=======================================================
+var rename      = require('gulp-rename');
+var imagemin    = require('gulp-imagemin');
+
+// Export our tasks.
+module.exports = {
+
+  // Compress svg/png/jpg files.
+  assets: function() {
+    return gulp.src([
+      './src/{global,layout,components}/**/*{.png,.jpg,.svg}'
+    ])
+      .pipe(imagemin({
+        progressive: true,
+        svgoPlugins: [{
+          removeViewBox: false
+        }]
+      }))
+      .pipe(rename(function (path) {
+        path.dirname = '';
+        return path;
+      }))
+      .pipe(gulp.dest('./dist/assets'));
+  }
+};

docroot/themes/custom/vue_js/gulp-tasks/lint.js

@@ -0,0 +1,37 @@
+/*eslint strict: ["error", "global"]*/
+'use strict';
+
+//=======================================================
+// Include gulp
+//=======================================================
+var gulp = require('gulp');
+
+//=======================================================
+// Include Our Plugins
+//=======================================================
+var sassLint = require('gulp-sass-lint');
+var eslint   = require('gulp-eslint');
+
+// Export our tasks.
+module.exports = {
+
+  // Lint Sass based on .sass-lint.yml config.
+  sass: function() {
+    return gulp.src([
+      './src/{global,layout,components}/**/*.scss',
+      '!./src/global/utils/*'
+    ])
+      .pipe(sassLint())
+      .pipe(sassLint.format());
+  },
+
+  // Lint JavaScript based on .eslintrc config.
+  js: function() {
+    return gulp.src([
+      './src/{global,layout,components}/**/*.js',
+      '!./src/components/**/vendors/*'
+    ])
+      .pipe(eslint())
+      .pipe(eslint.format());
+  }
+};

docroot/themes/custom/vue_js/gulp-tasks/move.js

@@ -0,0 +1,33 @@
+/*eslint strict: ["error", "global"]*/
+'use strict';
+
+// If some JS components aren't es6 we want to simply move them
+// into the dist folder. This allows us to clean the dist/js
+// folder on build.
+
+//=======================================================
+// Include gulp
+//=======================================================
+var gulp = require('gulp');
+
+//=======================================================
+// Include Our Plugins
+//=======================================================
+var rename = require('gulp-rename');
+
+// Export our tasks.
+module.exports = {
+
+  // Moves JavaScript.
+  js: function() {
+    return gulp.src([
+      './src/{global,layout,components}/**/*.js',
+      '!./src/{global,layout,components}/**/*.es6.js'
+    ], { base: './' })
+      .pipe(rename(function (path) {
+        path.dirname = '';
+        return path;
+      }))
+      .pipe(gulp.dest('./dist/js'));
+  }
+};

docroot/themes/custom/vue_js/gulpfile.js

@@ -0,0 +1,144 @@
+/*eslint strict: ["error", "global"]*/
+'use strict';
+
+//=======================================================
+// Include gulp
+//=======================================================
+var gulp = require('gulp');
+
+//=======================================================
+// Include Our Plugins
+//=======================================================
+var sync        = require('browser-sync');
+var runSequence = require('run-sequence');
+
+//=======================================================
+// Include Our tasks.
+//
+// Each task is broken apart to it's own node module.
+// Check out the ./gulp-tasks directory for more.
+//=======================================================
+var taskCompile     = require('./gulp-tasks/compile.js');
+var taskMove        = require('./gulp-tasks/move.js');
+var taskLint        = require('./gulp-tasks/lint.js');
+var taskCompress    = require('./gulp-tasks/compress.js');
+var taskClean       = require('./gulp-tasks/clean.js');
+
+//=======================================================
+// Compile Our Sass and JS
+// We also move some files if they don't need
+// to be compiled.
+//=======================================================
+gulp.task('compile', ['compile:sass', 'compile:js', 'move:js']);
+
+// Compile Sass
+gulp.task('compile:sass', function() {
+  return taskCompile.sass();
+});
+
+// Compile JavaScript ES2015 to ES5.
+gulp.task('compile:js', function() {
+  return taskCompile.js();
+});
+
+// If some JS components aren't es6 we want to simply move them
+// into the dist folder. This allows us to clean the dist/js
+// folder on build.
+gulp.task('move:js', function() {
+  return taskMove.js();
+});
+
+//=======================================================
+// Lint Sass and JavaScript
+//=======================================================
+gulp.task('lint', ['lint:sass', 'lint:js']);
+
+// Lint Sass based on .sass-lint.yml config.
+gulp.task('lint:sass', function () {
+  return taskLint.sass();
+});
+
+// Lint JavaScript based on .eslintrc config.
+gulp.task('lint:js', function () {
+  return taskLint.js();
+});
+
+//=======================================================
+// Compress Files
+//=======================================================
+gulp.task('compress', function() {
+  return taskCompress.assets();
+});
+
+//=======================================================
+// Clean all directories.
+//=======================================================
+
+gulp.task('clean', ['clean:css', 'clean:js']);
+
+// Clean CSS files.
+gulp.task('clean:css', function () {
+  return taskClean.css();
+});
+
+// Clean JS files.
+gulp.task('clean:js', function () {
+  return taskClean.js();
+});
+
+//=======================================================
+// Watch and recompile sass.
+//=======================================================
+
+// Pull the sass watch task out so we can use run sequence.
+
+// Pull the sass watch task out so we can use run sequence.
+gulp.task('watch:sass', function(callback) {
+  runSequence(
+    ['lint:sass', 'compile:sass'],
+    callback
+  );
+});
+
+// Main watch task.
+gulp.task('watch', function() {
+
+  // BrowserSync proxy setup
+  // Uncomment this and swap proxy with your local env url.
+  // NOTE: for this to work in Drupal, you must install and enable
+  // https://www.drupal.org/project/link_css. This module should
+  // NOT be committed to the repo OR enabled on production.
+  //
+  // This should work out of the box for work within the style guide.
+  //
+  // sync.init({
+  //   open: false,
+  //   proxy: 'http://test.localhost'
+  // });
+
+  // Watch all my sass files and compile sass if a file changes.
+  gulp.watch(
+    './src/{global,layout,components}/**/*.scss',
+    ['watch:sass']
+  );
+
+  // Watch all my JS files and compile if a file changes.
+  gulp.watch([
+    './src/{global,layout,components}/**/*.js'
+  ], ['lint:js', 'compile:js']);
+
+});
+
+//=======================================================
+// Default Task
+//
+// runSequence runs 'clean' first, and when that finishes
+// 'lint', 'compile' and 'compress' run at the same time.
+//=======================================================
+gulp.task('default', function(callback) {
+  runSequence(
+    'clean',
+    ['lint', 'compile', 'compress'],
+    callback
+  );
+});

docroot/themes/custom/vue_js/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "vue_js_example",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "gulp",
+    "compile": "gulp compile",
+    "watch": "gulp watch",
+    "styleguide": "gulp styleguide",
+    "compress": "gulp compress",
+    "lint": "gulp lint",
+    "clean": "gulp clean",
+    "gulp": "gulp"
+  },
+  "sasslintConfig": ".sass-lint.yml",
+  "babel": {
+    "presets": [
+      [
+        "env",
+        {
+          "targets": {
+            "browsers": [
+              "IE >= 11",
+              "last 2 versions"
+            ]
+          }
+        }
+      ]
+    ],
+    "plugins": [
+      "transform-remove-strict-mode",
+      "transform-object-rest-spread",
+      "transform-es2015-arrow-functions"
+    ]
+  },
+  "browserslist": [
+    "IE >= 11",
+    "last 2 versions"
+  ],
+  "devDependencies": {
+    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-remove-strict-mode": "0.0.2",
+    "babel-preset-env": "^1.6.0",
+    "browser-sync": "^2.18.12",
+    "del": "^3.0.0",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^4.0.0",
+    "gulp-babel": "^6.1.2",
+    "gulp-eslint": "^4.0.0",
+    "gulp-imagemin": "^3.3.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^3.1.0",
+    "gulp-sass-lint": "^1.3.2",
+    "gulp-sourcemaps": "^2.6.0",
+    "run-sequence": "^2.0.0",
+    "massive-typo": "^0.0.3",
+    "koality-flexbox-grid": "^0.0.13",
+    "breakpoint-sass": "^2.7.1"
+  }
+}

docroot/themes/custom/vue_js/src/components/collapsible/collapsible-vue.es6.js

@@ -0,0 +1,15 @@
+document.addEventListener('DOMContentLoaded', () => {
+  'use strict';
+
+  drupalSettings.modal = new Vue({ // eslint-disable-line no-unused-vars, no-undef, max-len
+    el: '.collapsible-vue',
+    data: {
+      showBody: false
+    },
+    methods: {
+      toggleBody() {
+        this.showBody = !this.showBody;
+      },
+    }
+  });
+});

docroot/themes/custom/vue_js/src/components/collapsible/collapsible-vue.twig

@@ -0,0 +1,10 @@
+{{ attach_library('vue_js/collapsible') }}
+{{ attach_library('vue_js/collapsible-vue') }}
+<div class="collapsible collapsible-vue">
+  <div class="title" @click="toggleBody">
+    <h2>{{ title }}</h2>
+  </div>
+  <div class="body" v-if="showBody">
+    {{ body }}
+  </div>
+</div>

docroot/themes/custom/vue_js/src/components/collapsible/collapsible.es6.js

@@ -0,0 +1,18 @@
+!((document, Drupal, $) => {
+  'use strict';
+
+  Drupal.behaviors.drupalVueCollapsible = {
+    attach: function(context) {
+
+      const collapsibles = context.querySelectorAll('.collapsible-non-vue');
+
+      collapsibles.forEach((collapsible) => {
+        collapsible.querySelector('.title').addEventListener('click', function(e) {
+          e.preventDefault();
+          this.parentElement.classList.toggle('closed');
+        });
+      });
+    }
+  };
+
+})(document, Drupal, jQuery);

docroot/themes/custom/vue_js/src/components/collapsible/collapsible.scss

@@ -0,0 +1,20 @@
+// Import site utilities.
+@import '../../global/utils/init';
+
+.collapsible {
+  border: 1px solid black;
+
+  &.closed {
+    .body {
+      display: none;
+    }
+  }
+
+  .title {
+    background: lightgray;
+
+    h2 {
+      margin: 0;
+    }
+  }
+}

docroot/themes/custom/vue_js/src/components/collapsible/collapsible.twig

@@ -0,0 +1,10 @@
+{{ attach_library('vue_js/collapsible') }}
+{{ attach_library('vue_js/collapsible-non-vue') }}
+<div class="collapsible collapsible-non-vue closed">
+  <div class="title">
+    <h2>{{ title }}</h2>
+  </div>
+  <div class="body">
+    {{ body }}
+  </div>
+</div>

docroot/themes/custom/vue_js/src/components/modal/modal-non-vue.es6.js

@@ -0,0 +1,26 @@
+!((document, Drupal, $) => {
+  'use strict';
+
+  Drupal.behaviors.drupalVueModal = {
+    attach: function(context) {
+
+      const modal = context.querySelector('#non-vue-modal');
+      const modalButton = context.querySelector('#non-vue-modal-button');
+      const modalCloseButton = context.querySelector('#non-vue-modal .modal__close');
+
+      if (modalButton !== null) {
+        modalButton.addEventListener('click', (e)=> {
+          e.preventDefault();
+          modal.querySelector('.modal__mask').classList.remove('hidden');
+        });
+
+        modalCloseButton.addEventListener('click', (e)=> {
+          e.preventDefault();
+          modal.querySelector('.modal__mask').classList.add('hidden');
+        });
+      }
+
+    }
+  };
+
+})(document, Drupal, jQuery);

docroot/themes/custom/vue_js/src/components/modal/modal-non-vue.twig

@@ -0,0 +1,15 @@
+{{ attach_library('vue_js/modal') }}
+{{ attach_library('vue_js/modal-non-vue') }}
+<a id="non-vue-modal-button" href="#">Open Non Vue Modal</a>
+<section id="non-vue-modal" class="modal">
+  <div class="modal__mask hidden" >
+    <div class="modal__modal">
+      <div class="modal__content">
+        <div class="content">This is your modal!</div>
+        <div class="modal__button modal__close">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

docroot/themes/custom/vue_js/src/components/modal/modal-vue.es6.js

@@ -0,0 +1,20 @@
+document.addEventListener('DOMContentLoaded', () => {
+  'use strict';
+
+  drupalSettings.modal = new Vue({ // eslint-disable-line no-unused-vars, no-undef, max-len
+    el: '#vue-modal',
+    data: {
+      showModal: false,
+      content: 'Default Modal Text',
+    },
+    methods: {
+      show(content) {
+        this.showModal = true;
+        this.content = content;
+      },
+      close() {
+        this.showModal = false;
+      }
+    }
+  });
+});

docroot/themes/custom/vue_js/src/components/modal/modal-vue.twig

@@ -0,0 +1,22 @@
+{{ attach_library('vue_js/modal') }}
+{{ attach_library('vue_js/modal-vue') }}
+{% verbatim %}
+<section id="vue-modal" class="modal">
+  <input v-model="content" type="text" name="content" />
+  <a id="vue-modal=button" href="#" @click="showModal = true">Open Vue Modal</a>
+  <transition name="modal" v-if="showModal" @close="showModal = false">
+    <div class="modal__mask hidden"
+      :style="{'display': 'block'}"
+    >
+      <div class="modal__modal">
+        <div class="modal__content">
+          <div class="content">{{ content }}</div>
+          <div class="modal__button modal__close" @click="showModal = false">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</section>
+{% endverbatim %}

docroot/themes/custom/vue_js/src/components/modal/modal.scss

@@ -0,0 +1,86 @@
+// Import site utilities.
+@import '../../global/utils/init';
+
+.modal {
+  .modal__modal {
+    display: flex;
+    height: 100%;
+
+    .modal__content {
+      margin: auto;
+      padding: 20px 30px;
+      background-color: $color-white;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+      transition: opacity 300ms ease;
+      width: 80%;
+      max-width: 1000px;
+      max-height: 70%;
+      border-radius: 2px;
+      position: relative;
+
+      @include breakpoint($lg) {
+        width: 55%;
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4 {
+      margin-top: 0;
+    }
+
+    .modal__close {
+      cursor: pointer;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+    }
+
+    .modal__footer {
+      border-radius: 0 0 2px 2px;
+      background-color: #fafafa;
+      padding: 4px 6px;
+      height: 56px;
+      width: 100%;
+      text-align: right;
+
+      .btn,
+      .btn-flat {
+        margin: 6px 0;
+      }
+    }
+  }
+
+  .modal__mask {
+    position: fixed;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    opacity: 1;
+    transition: opacity 300ms ease;
+    will-change: opacity;
+  }
+
+  .modal-enter {
+    opacity: 0;
+  }
+
+  .modal-leave-active {
+    opacity: 0;
+  }
+
+  .modal-enter .modal-container,
+  .modal-leave-active .modal-container {
+    transform: scale(1.1);
+  }
+}

docroot/themes/custom/vue_js/src/global/base/_base.scss

@@ -0,0 +1,23 @@
+@import 'fonts';
+@import 'normalize';
+
+html {
+  box-sizing: border-box;
+}
+
+// https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+* {
+  box-sizing: inherit;
+
+  &::before,
+  &::after {
+    box-sizing: inherit;
+  }
+}
+
+body {
+  width: 100%;
+  margin: 0;
+  font-size: 100%;
+  overflow-x: hidden;
+}

docroot/themes/custom/vue_js/src/global/base/_fonts.scss

@@ -0,0 +1 @@
+// Used to define all font faces available

docroot/themes/custom/vue_js/src/global/base/_normalize.scss

@@ -0,0 +1,351 @@
+// sass-lint:disable no-vendor-prefixes no-duplicate-properties
+
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Modified to remove things we already are defining */
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  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
+   ========================================================================== */
+
+/**
+ * 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.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: 0; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * 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,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * 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
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  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;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+ * 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.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 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 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+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 in Chrome and Safari on macOS.
+ */
+
+[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 Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

docroot/themes/custom/vue_js/src/global/common/_buttons.scss

@@ -0,0 +1,23 @@
+.button {
+  background-color: $button-color;
+  display: inline-block;
+  padding: $button-padding;
+  color: $color-white;
+  text-decoration: none;
+  font-size: 14px;
+  text-transform: uppercase;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  a {
+    display: inline-block;
+    color: $color-white;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

docroot/themes/custom/vue_js/src/global/common/_common.scss

@@ -0,0 +1,4 @@
+@import 'visibility';
+@import 'buttons';
+@import 'forms';
+@import 'typography';

docroot/themes/custom/vue_js/src/global/common/_forms.scss

@@ -0,0 +1,19 @@
+form {
+  label {
+    display: block;
+  }
+
+  input {
+    display: inline-block;
+    margin-bottom: 10px;
+    padding: 10px;
+    width: 100%;
+
+    &[type='radio'],
+    &[type='checkbox'],
+    &[type='reset'],
+    &[type='submit'] {
+      width: auto;
+    }
+  }
+}

docroot/themes/custom/vue_js/src/global/common/_typography.scss

@@ -0,0 +1,27 @@
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.white-text {
+  color: $color-white;
+}

docroot/themes/custom/vue_js/src/global/common/_visibility.scss

@@ -0,0 +1,41 @@
+.lg-desktop-only {
+  @include breakpoint($jumbo-down) {
+    display: none !important; // sass-lint:disable-line no-important
+  }
+}
+
+.desktop-only {
+  @include breakpoint($lg-down) {
+    display: none !important; // sass-lint:disable-line no-important
+  }
+
+  @include breakpoint($jumbo) {
+    display: none !important; // sass-lint:disable-line no-important
+  }
+}
+
+.tablet-only {
+  display: none !important; // sass-lint:disable-line no-important
+
+  @include breakpoint($tablet-only) {
+    display: block !important; // sass-lint:disable-line no-important
+  }
+}
+
+.mobile-only {
+  @include breakpoint($md) {
+    display: none !important; // sass-lint:disable-line no-important
+  }
+}
+
+.authenticated-user {
+  .show-for-anonymous {
+    display: none;
+  }
+}
+
+.anonymous-user {
+  .show-for-authenticated {
+    display: none;
+  }
+}

docroot/themes/custom/vue_js/src/global/global.scss

@@ -0,0 +1,23 @@
+// Utilities
+//
+// Import variables and mixins
+// Should contain NO css output.
+// Only variables / mixins / settings.
+// ========================================
+@import 'utils/init';
+
+// Imports Koality Grid
+// https://github.com/fabean/flexbox-grid
+@import '../../node_modules/koality-flexbox-grid/src/scss/flexbox-grid';
+
+// Base
+//
+// Plain html element styling. Shouldn't require
+// any classes.
+// ========================================
+@import 'base/base';
+
+@import '../../node_modules/massive-typo/src/scss/typography';
+
+// Common
+@import 'common/common';

docroot/themes/custom/vue_js/src/global/utils/_init.scss

@@ -0,0 +1,13 @@
+//=======================================================
+// Utilities: Import Sass mixins, variables, modules etc.
+//=======================================================
+@import '../../../node_modules/breakpoint-sass/stylesheets/breakpoint';
+
+// Import variables
+@import 'variables';
+
+// Import Typography
+@import 'typography';
+
+// Import mixins
+@import 'mixins';

docroot/themes/custom/vue_js/src/global/utils/_mixins.scss

@@ -0,0 +1,96 @@
+//=======================================================
+// Mixins
+//=======================================================
+
+// Clearfix
+@mixin clearfix {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+// Makes an element visually hidden, but accessible.
+// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+@mixin element-invisible {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+// Turns off the element-invisible effect.
+@mixin element-invisible-off {
+  position: static !important;
+  clip: auto;
+  height: auto;
+  width: auto;
+  overflow: auto;
+}
+
+// Makes an element visually hidden by default, but visible when focused.
+@mixin element-focusable {
+  @include element-invisible;
+
+  &:active,
+  &:focus {
+    @include element-invisible-off;
+  }
+}
+
+// Helper function for working with Sass maps.
+// Example: @include print($configuration);
+@mixin print($declarations) {
+  @each $property, $value in $declarations {
+    #{$property}: $value;
+  }
+}
+
+@mixin ghost-button-mono($inverted: false) {
+  width: auto;
+  padding: $button-padding;
+  text-decoration: none;
+  transition: all 150ms ease;
+  cursor: pointer;
+
+  @if ($inverted == true) {
+    border: 2px solid $color-white;
+    border-radius: 0;
+    background-color: $color-black;
+    color: $color-white;
+
+    &:hover {
+      background-color: $color-white;
+      color: $color-black;
+      text-decoration: none;
+      transition: all 150ms ease;
+    }
+  } @else {
+    border: 2px solid $color-black;
+    border-radius: 0;
+    background-color: $color-white;
+    color: $color-black;
+
+    &:hover {
+      background-color: $color-black;
+      color: $color-white;
+      text-decoration: none;
+      transition: all 150ms ease;
+    }
+  }
+}
+
+%bust-out {
+  margin: {
+    left: calc(50% - 50vw);
+    right: calc(50% - 50vw);
+  }
+
+  transform: translateX(calc(50vw - 50%));
+}
+
+@mixin bust-out($margin-right: null, $margin-left: $margin-right, $aspect-ratio: null) {
+  @extend %bust-out !optional;
+}

docroot/themes/custom/vue_js/src/global/utils/_variables.scss

@@ -0,0 +1,122 @@
+//=======================================================
+// Variables
+//=======================================================
+
+
+//===================
+// Koality Grid variables
+// https://github.com/fabean/flexbox-grid
+//===================
+$row-width: 1400px;
+$inner-row-width: 1200px;
+$gutter-width: 15px;
+$flex-grid-count: 12;
+$flex-grow-default: 0;
+$flex-shrink-default: 1;
+
+$default: 0;
+$sm: 576px;
+$md: 768px;
+$lg: 992px;
+$xl: 1200px;
+$jumbo: 2000px;
+
+$breakpoints: (
+  default: $default,
+  sm: $sm,
+  md: $md,
+  lg: $lg,
+  xl: $xl,
+  jumbo: $jumbo
+);
+
+//===================
+// Extra Breakpoints
+//===================
+$sm-only: 0 $sm;
+$md-only: $md $lg;
+$lg-only: $lg $jumbo;
+
+$md-down: 0 $md;
+$xl-down: 0 $xl;
+$lg-down: 0 $lg;
+$jumbo-down: 0 $jumbo;
+
+$md-portrait: screen 0 $md (orientation landscape);
+$lg-portrait: screen (min-width $lg) (orientation landscape);
+$tablet-only: screen (min-width $md) (max-width $lg);
+
+
+//===================
+// Colors
+//===================
+$color-white: #FFF;
+$color-black: #000;
+
+//===================
+// Buttons
+//===================
+$button-padding: 8px 20px;
+$button-border-radius: 5px;
+$button-color: $color-black;
+
+//===================
+// Typography - Massive Typo Variables
+// https://github.com/fabean/massive-typo
+//===================
+$body-font-family: sans-serif;
+$body-font-size: 16px;
+$body-font-color: #0a0a0a;
+$body-line-height: 24px;
+$body-font-size-small: 0.85rem;
+$bold-font-weight: 700;
+
+// Headers
+$header-font-breakpoint: $md;
+$header-font-family: serif;
+$h1-size-small: 24px;
+$h1-size-medium: 48px;
+$h2-size-small: 20px;
+$h2-size-medium: 40px;
+$h3-size-small: 19px;
+$h3-size-medium: 31px;
+$h4-size-small: 18px;
+$h4-size-medium: 25px;
+$h5-size-small: 17px;
+$h5-size-medium: 20px;
+$h6-size-small: 16px;
+$h6-size-medium: $h6-size-small;
+
+// Code
+$code-font-family: monospace;
+$code-font-size: 0.9rem;
+$code-font-color: #0a0a0a;
+$code-background-color: #e6e6e6;
+$code-padding: 2px 4px;
+$code-border-radius: 4px;
+$code-border: 1px solid #cacaca;
+
+// Links
+$link-font-color: #337ab7;
+$link-font-hover-color: #23527c;
+$link-show-underline: false;
+$link-show-underline-hover: true;
+
+// Highlight <mark>
+$font-highlight-background: #fcf8e3;
+$font-highlight-padding: 0.2rem;
+
+// Blockquote
+$blockquote-margin: 32px 0;
+$blockquote-padding: 8px 16px;
+$blockquote-font-size: $body-font-size;
+$blockquote-border: 1px solid #DDDDDD;
+$blockquote-font-color: #6f6f6f;
+$blockquote-cite-font-size: 12px;
+$blockquote-cite-font-color: #555555;
+
+
+//===================
+// Cards
+//===================
+$card-shadow: 0 2px 4px rgba(0, 0, 0, 0.33);

docroot/themes/custom/vue_js/src/templates/block/block--inline-block--collapsible-vue.html.twig

@@ -0,0 +1,50 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main content
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+  'block',
+  'block-' ~ configuration.provider|clean_class,
+  'block-' ~ plugin_id|clean_class,
+]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {{ title_suffix }}
+  {% block content %}
+    <div{{ content_attributes.addClass('content') }}>
+      {% include "@vue_js/collapsible/collapsible-vue.twig" with {
+        "title": label,
+        "body": content.body,
+      } %}
+    </div>
+  {% endblock %}
+</div>

docroot/themes/custom/vue_js/src/templates/block/block--inline-block--collapsible.html.twig

@@ -0,0 +1,50 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main content
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+  'block',
+  'block-' ~ configuration.provider|clean_class,
+  'block-' ~ plugin_id|clean_class,
+]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {{ title_suffix }}
+  {% block content %}
+    <div{{ content_attributes.addClass('content') }}>
+      {% include "@vue_js/collapsible/collapsible.twig" with {
+        "title": label,
+        "body": content.body,
+      } %}
+    </div>
+  {% endblock %}
+</div>

docroot/themes/custom/vue_js/src/templates/block/block--non-vue-block.html.twig

@@ -0,0 +1,50 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main content
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    <div{{ content_attributes.addClass('content') }}>
+      {% include "@vue_js/modal/modal-non-vue.twig" %}
+    </div>
+  {% endblock %}
+</div>

docroot/themes/custom/vue_js/src/templates/block/block--vue-block.html.twig

@@ -0,0 +1,50 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main content
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    <div{{ content_attributes.addClass('content') }}>
+      {% include "@vue_js/modal/modal-vue.twig" %}
+    </div>
+  {% endblock %}
+</div>

docroot/themes/custom/vue_js/vue_js.info.yml

@@ -0,0 +1,36 @@
+name: Vue.js Example
+type: theme
+description: 'Vue.js example theme'
+package: Other
+core: 8.x
+base theme: bartik
+
+libraries:
+  - vue_js/global
+
+component-libraries:
+  vue_js:
+    paths:
+      - src/components
+      - src/templates
+
+regions:
+  header: Header
+  primary_menu: 'Primary menu'
+  secondary_menu: 'Secondary menu'
+  page_top: 'Page top'
+  page_bottom: 'Page bottom'
+  highlighted: Highlighted
+  featured_top: 'Featured top'
+  breadcrumb: Breadcrumb
+  content: Content
+  sidebar_first: 'Sidebar first'
+  sidebar_second: 'Sidebar second'
+  featured_bottom_first: 'Featured bottom first'
+  featured_bottom_second: 'Featured bottom second'
+  featured_bottom_third: 'Featured bottom third'
+  footer_first: 'Footer first'
+  footer_second: 'Footer second'
+  footer_third: 'Footer third'
+  footer_fourth: 'Footer fourth'
+  footer_fifth: 'Footer fifth'

docroot/themes/custom/vue_js/vue_js.libraries.yml

@@ -0,0 +1,38 @@
+global:
+  css:
+    base:
+      dist/css/global.css: {}
+
+vue-js:
+  js:
+    https://cdn.jsdelivr.net/npm/vue/dist/vue.js: { type: external }
+
+modal:
+  css:
+    component:
+      dist/css/modal.css: {}
+
+modal-non-vue:
+  js:
+    dist/js/modal-non-vue.js: {}
+
+modal-vue:
+  js:
+    dist/js/modal-vue.js: {}
+  dependencies:
+    - vue_js/vue-js
+
+collapsible:
+  css:
+    component:
+      dist/css/collapsible.css: {}
+
+collapsible-non-vue:
+  js:
+    dist/js/collapsible.js: {}
+
+collapsible-vue:
+  js:
+    dist/js/collapsible-vue.js: {}
+  dependencies:
+    - vue_js/vue-js

docroot/themes/custom/vue_js/vue_js.theme

@@ -0,0 +1,197 @@
+<?php
+
+use \Drupal\Component\Utility\Html;
+/**
+ * @file
+ * Functions to support theming in the vue_js theme.
+ */
+
+/**
+ * Implements hook_preprocess_HOOK() for html.html.twig.
+ */
+function vue_js_preprocess_html(array &$variables) {
+  /* Add class to html tag */
+  //$variables['html_attributes']->addClass('no-js');
+
+  // Don't display the site name twice on the front page (and potentially others)
+  /*if (isset($variables['head_title_array']['title']) && isset($variables['head_title_array']['name']) && ($variables['head_title_array']['title'] == $variables['head_title_array']['name'])) {
+    $variables['head_title'] = $variables['head_title_array']['name'];
+  }*/
+}
+
+/**
+ * Implements hook_page_attachments_alter().
+ */
+function vue_js_page_attachments_alter(array &$page) {
+  // Tell IE to use latest rendering engine (not to use compatibility mode).
+  /*$ie_edge = [
+    '#type' => 'html_tag',
+    '#tag' => 'meta',
+    '#attributes' => [
+    'http-equiv' => 'X-UA-Compatible',
+    'content' => 'IE=edge',
+    ],
+  ];
+  $page['#attached']['html_head'][] = [$ie_edge, 'ie_edge'];*/
+}
+
+/**
+ * Implements hook_preprocess_page() for page.html.twig.
+ */
+function vue_js_preprocess_page(array &$variables) {
+  $route = \Drupal::routeMatch()->getRouteName();
+  if (stripos($route, 'layout_builder.') !== FALSE) {
+    $variables['#attached']['library'][] = 'vue_js/layout-builder-prettier';
+  } else {
+    // Not a Layout builder route, so let's mark to hide contextual links
+    $variables['attributes']['class'][] = 'hide-contextual-links';
+  }
+}
+
+/**
+ * Implements hook_theme_suggestions_page_alter().
+ */
+function vue_js_theme_suggestions_page_alter(array &$suggestions, array $variables) {
+
+}
+
+/**
+ * Implements hook_theme_suggestions_node_alter().
+ */
+function vue_js_theme_suggestions_node_alter(array &$suggestions, array $variables) {
+  /*$node = $variables['elements']['#node'];
+
+  if ($variables['elements']['#view_mode'] == "full") {
+
+  }*/
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for Block document templates.
+ */
+function vue_js_preprocess_block(array &$variables) {
+  if (isset($variables['content']['#block_content'])) {
+    /* @var $block \Drupal\block_content\Entity\BlockContent */
+    $block = $variables['content']['#block_content'];
+    $type = $block->bundle();
+    $variables['block'] = $variables['content']['#block_content'];
+
+    $function = __FUNCTION__ . "_{$type}";
+    if (function_exists($function)) {
+      $function($variables);
+    }
+  }
+}
+
+/**
+ * Implements hook_theme_suggestions_field_alter().
+ */
+function vue_js_theme_suggestions_field_alter(array &$suggestions, array $variables) {
+  /*$element = $variables['element'];
+  $suggestions[] = 'field__' . $element['#view_mode'];
+  $suggestions[] = 'field__' . $element['#view_mode'] . '__' . $element['#field_name'];*/
+}
+
+/**
+ * Implements hook_theme_suggestions_field_alter().
+ */
+function vue_js_theme_suggestions_fieldset_alter(array &$suggestions, array $variables) {
+  /*$element = $variables['element'];
+  if (isset($element['#attributes']['class']) && in_array('form-composite', $element['#attributes']['class'])) {
+    $suggestions[] = 'fieldset__form_composite';
+  }*/
+}
+
+/**
+ * Implements hook_preprocess_node().
+ */
+function vue_js_preprocess_node(array &$variables) {
+  /* @var \Drupal\node\Entity\Node $node */
+  $node = $variables['node'];
+  $type = $node->bundle();
+  $view_mode = $variables['view_mode'] ?? NULL;
+
+  $variables['attributes']['class'][] = 'node';
+  $variables['attributes']['class'][] = 'node__' . Html::cleanCssIdentifier($type);
+  if ($view_mode) {
+    $variables['attributes']['class'][] = 'node__' . Html::cleanCssIdentifier($type) . '__view_mode_' . Html::cleanCssIdentifier($view_mode);
+  }
+
+  $function = __FUNCTION__ . "_{$type}";
+  if (function_exists($function)) {
+    $function($variables);
+  }
+}
+
+/**
+ * Implements hook_preprocess_paragraph().
+ */
+function vue_js_preprocess_paragraph(array &$variables) {
+  /* @var \Drupal\paragraphs\Entity\ParagraphsType $paragraph_type */
+  $paragraph_type = $variables['elements']['#paragraph']->getParagraphType();
+  $function = __FUNCTION__ . "_{$paragraph_type->id()}";
+
+  if (function_exists($function)) {
+    $function($variables);
+  }
+}
+
+function nazarene_org_preprocess_media(array &$variables) {
+  $bundle = $variables['media']->bundle();
+
+  $function = __FUNCTION__ . "_{$bundle}";
+  if (function_exists($function)) {
+    $function($variables);
+  }
+}
+
+/**
+ * Implements hook_theme_suggestions_views_view_alter().
+ */
+function vue_js_theme_suggestions_views_view_alter(array &$suggestions, array $variables) {
+
+}
+
+/**
+ * Implements hook_preprocess_form().
+ */
+function vue_js_preprocess_form(array &$variables) {
+  //$variables['attributes']['novalidate'] = 'novalidate';
+}
+
+/**
+ * Implements hook_preprocess_select().
+ */
+function vue_js_preprocess_select(array &$variables) {
+  //$variables['attributes']['class'][] = 'select-chosen';
+}
+
+/**
+ * Implements hook_preprocess_field().
+ */
+function vue_js_preprocess_field(array &$variables, $hook) {
+  /*switch ($variables['element']['#field_name']) {
+  }*/
+}
+
+/**
+ * Implements hook_preprocess_details().
+ */
+function vue_js_preprocess_details(array &$variables) {
+  /*$variables['attributes']['class'][] = 'details';
+  $variables['summary_attributes']['class'] = 'summary';*/
+}
+
+/**
+ * Implements hook_theme_suggestions_details_alter().
+ */
+function vue_js_theme_suggestions_details_alter(array &$suggestions, array $variables) {
+
+}
+
+/**
+ * Implements hook_preprocess_menu_local_task().
+ */
+function vue_js_preprocess_menu_local_task(array &$variables) {
+  //$variables['element']['#link']['url']->setOption('attributes', ['class'=>'rounded']);
+}

docroot/web.config

@@ -22,7 +22,7 @@
     <rewrite>
       <rules>
         <rule name="Protect files and directories from prying eyes" stopProcessing="true">
-          <match url="\.(engine|inc|install|module|profile|po|sh|.*sql|theme|twig|tpl(\.php)?|xtmpl|yml|svn-base)$|^(code-style\.pl|Entries.*|Repository|Root|Tag|Template|all-wcprops|entries|format|composer\.(json|lock))$" />
+          <match url="\.(engine|inc|install|module|profile|po|sh|.*sql|theme|twig|tpl(\.php)?|xtmpl|yml|svn-base)$|^(code-style\.pl|Entries.*|Repository|Root|Tag|Template|all-wcprops|entries|format|composer\.(json|lock)|\.htaccess)$" />
           <action type="CustomResponse" statusCode="403" subStatusCode="0" statusReason="Forbidden" statusDescription="Access is forbidden." />
         </rule>
 

private/.htaccess

@@ -0,0 +1,24 @@
+# Deny all requests from Apache 2.4+.
+<IfModule mod_authz_core.c>
+  Require all denied
+</IfModule>
+
+# Deny all requests from Apache 2.0-2.2.
+<IfModule !mod_authz_core.c>
+  Deny from all
+</IfModule>
+
+# Turn off all options we don't need.
+Options -Indexes -ExecCGI -Includes -MultiViews
+
+# Set the catch-all handler to prevent scripts from being executed.
+SetHandler Drupal_Security_Do_Not_Remove_See_SA_2006_006
+<Files *>
+  # Override the handler again if we're run later in the evaluation list.
+  SetHandler Drupal_Security_Do_Not_Remove_See_SA_2013_003
+</Files>
+
+# If we know how to do it safely, disable the PHP engine entirely.
+<IfModule mod_php5.c>
+  php_flag engine off
+</IfModule>

sample.settings.php

@@ -1,60 +0,0 @@
-<?php
-
-$settings['update_free_access'] = FALSE;
-$settings['file_private_path'] = '../private';
-$settings['container_yamls'][] = $app_root . '/' . $site_path . '/services.yml';
-$settings['file_scan_ignore_directories'] = [
-  'node_modules',
-  'bower_components',
-];
-$settings['entity_update_batch_size'] = 50;
-$settings['hash_salt'] = 'asotenuarchqewsmaoeuSNTH56654+';
-$settings['trusted_host_patterns'] = [
-  getenv('DRUPAL_TRUSTED_HOSTS'),
-  'nazarene-org\.docksal$',
-];
-
-$databases = [];
-$databases['default']['default'] = [
-  'database' => getenv('DATABASE_NAME'),
-  'username' => getenv('DATABASE_USERNAME'),
-  'password' => getenv('DATABASE_PASSWORD'),
-  'prefix' => '',
-  'host' => getenv('DATABASE_HOST'),
-  'port' => '3306',
-  'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql',
-  'driver' => 'mysql',
-];
-
-$config_directories = [];
-$config_directories[CONFIG_SYNC_DIRECTORY] = '../config/default/default';
-
-$site_environment = getenv('SITE_ENV');
-$config['config_split.config_split.local']['status'] = FALSE;
-$config['config_split.config_split.dev']['status'] = FALSE;
-$config['config_split.config_split.stage']['status'] = FALSE;
-$config['config_split.config_split.prod']['status'] = FALSE;
-
-switch ($site_environment) {
-  case 'local':
-    $config['config_split.config_split.local']['status'] = TRUE;
-    break;
-  case 'dev':
-    $config['config_split.config_split.dev']['status'] = TRUE;
-    break;
-  case 'stage':
-    $config['config_split.config_split.stage']['status'] = TRUE;
-    break;
-  case 'prod':
-    $config['config_split.config_split.prod']['status'] = TRUE;
-    break;
-}
-
-/**
- * Include a custom settings file if it exists.
- */
-$custom_settings = DRUPAL_ROOT . '/sites/default/custom.settings.php';
-if (file_exists($custom_settings)) {
-  include $custom_settings;
-}
-