Made separate repository for UI kit

2019-06-08 22:54:43 +07:00 · 2019-06-08 22:54:43 +07:00 · bf563b25a2
parent f62361099c
commit bf563b25a2
37 changed files with 1073 additions and 828 deletions
--- a/.gitignore
+++ b/.gitignore
@ -9,4 +9,5 @@
 /site/client/dist
 /silverstripe-cache
 yarn-error\.log
-package-lock.json
+package-lock.json
+/app/client
--- a/README.md
+++ b/README.md
@ -3,6 +3,37 @@
 ## Simple WebPack boiler plate for SilverStripe

 Checkout files at /app/ folder for details
+Take a look to https://github.com/a2nt/webpack-bootstrap-ui-kit.git for UI Kit details
+
+### Requirements:
+
+ composer
+ node
+ yarn
+
+### Installation:
+
+```
+git clone https://github.com/a2nt/silverstripe-webpack.git
+cd silverstripe-webpack
+composer install
+npm install
+cd app
+git clone https://github.com/a2nt/webpack-bootstrap-ui-kit.git ./client
+cd ..
+```
+
+ edit .env, robots.txt, humans.txt, cache.appcache, manifest.json and package.json to setup your own project
+
+## Installing composer at some cpanel hostings
+```
+php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
+php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
+php composer-setup.php
+php -r "unlink('composer-setup.php');"
+
+php -d memory_limit=-1 composer.phar update --ignore-platform-reqs
+```

 ### Features:
 + You can use /app/_config/webpack.yml to setup webpack server parameters which will be used by webpack server and by SilverStripe to serve static content
@ -47,35 +78,13 @@ Checkout files at /app/ folder for details
 + /app/clent/src/scss (Your styling to be compiled)
 + /app/clent/src/scss/_components (Your custom SCSS components)
 + /app/clent/src/scss/app.scss (main application file to include site-wide components)
-+ /app/clent/src/scss/_variables.sccs (your custom variables, ex. bootstrap)
+ /app/clent/src/scss/_variables.sccs (your custom and bootstrap variables)
 + /app/clent/src/scss/_layout.sccs (Your site-wide styling)


-### Requirements:

-+ composer
-+ yarn
-
-### Instalation:
-
-Install composer:
-```
-php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
-php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
-php composer-setup.php
-php -r "unlink('composer-setup.php');"
-
-php -d memory_limit=-1 composer.phar update --ignore-platform-reqs
-```
-
-```
-git clone https://github.com/a2nt/silverstripe-webpack.git
-cd silverstripe-webpack
-composer install
-npm install
-```
-
-+ edit robots.txt, humans.txt, cache.appcache, manifest.json and package.json to setup your own project
+ /app/client/src/index.html UI demo page
+ /app/client/src/html HTML templates to build UI demo

 ### Commands:

--- a/app/client/dist/css/HomePage.css
+++ b/app/client/dist/css/HomePage.css
--- a/app/client/dist/css/app.css
+++ b/app/client/dist/css/app.css
--- a/app/client/dist/css/editor.css
+++ b/app/client/dist/css/editor.css
--- a/app/client/dist/fonts/fontawesome-webfont.eot
+++ b/app/client/dist/fonts/fontawesome-webfont.eot
@ -1 +0,0 @@
-module.exports = "../fonts/fontawesome-webfont.eot";
--- a/app/client/dist/fonts/fontawesome-webfont.svg
+++ b/app/client/dist/fonts/fontawesome-webfont.svg
@ -1 +0,0 @@
-module.exports = "../fonts/fontawesome-webfont.svg";
--- a/app/client/dist/fonts/fontawesome-webfont.ttf
+++ b/app/client/dist/fonts/fontawesome-webfont.ttf
@ -1 +0,0 @@
-module.exports = "../fonts/fontawesome-webfont.ttf";
--- a/app/client/dist/fonts/fontawesome-webfont.woff
+++ b/app/client/dist/fonts/fontawesome-webfont.woff
@ -1 +0,0 @@
-module.exports = "../fonts/fontawesome-webfont.woff";
--- a/app/client/dist/fonts/fontawesome-webfont.woff2
+++ b/app/client/dist/fonts/fontawesome-webfont.woff2
@ -1 +0,0 @@
-module.exports = "../fonts/fontawesome-webfont.woff2";
--- a/app/client/dist/icons/.cache
+++ b/app/client/dist/icons/.cache
@ -1 +1 @@
-{"hash":"3deb17371acdc75398d81da38fad464c","version":"0.0.9","optionHash":"48da8109542971737c0c3794682790d4","result":{"outputFilePrefix":"/icons/","html":["<meta name=\"mobile-web-app-capable\" content=\"yes\">","<meta name=\"theme-color\" content=\"#fff\">","<meta name=\"application-name\" content=\"ss-webpack-boilerplate\">","<link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"app/client/dist//icons/apple-touch-icon-57x57.png\">","<link rel=\"apple-touch-icon\" sizes=\"60x60\" href=\"app/client/dist//icons/apple-touch-icon-60x60.png\">","<link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"app/client/dist//icons/apple-touch-icon-72x72.png\">","<link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"app/client/dist//icons/apple-touch-icon-76x76.png\">","<link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"app/client/dist//icons/apple-touch-icon-114x114.png\">","<link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"app/client/dist//icons/apple-touch-icon-120x120.png\">","<link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"app/client/dist//icons/apple-touch-icon-144x144.png\">","<link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"app/client/dist//icons/apple-touch-icon-152x152.png\">","<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"app/client/dist//icons/apple-touch-icon-180x180.png\">","<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">","<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">","<meta name=\"apple-mobile-web-app-title\" content=\"ss-webpack-boilerplate\">","<link rel=\"icon\" type=\"image/png\" sizes=\"228x228\" href=\"app/client/dist//icons/coast-228x228.png\">","<meta name=\"msapplication-TileColor\" content=\"#fff\">","<meta name=\"msapplication-TileImage\" content=\"mstile-144x144.png\">","<meta name=\"msapplication-config\" content=\"browserconfig.xml\">","<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"app/client/dist//icons/favicon-32x32.png\">","<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"app/client/dist//icons/favicon-16x16.png\">","<link rel=\"shortcut icon\" href=\"app/client/dist//icons/favicon.ico\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-320x460.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-640x920.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-640x1096.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-750x1294.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)\" href=\"app/client/dist//icons/apple-touch-startup-image-1182x2208.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)\" href=\"app/client/dist//icons/apple-touch-startup-image-1242x2148.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-748x1024.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-768x1004.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-1496x2048.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-1536x2008.png\">"],"files":["/icons/android-chrome-36x36.png","/icons/android-chrome-48x48.png","/icons/android-chrome-72x72.png","/icons/android-chrome-144x144.png","/icons/android-chrome-192x192.png","/icons/android-chrome-96x96.png","/icons/android-chrome-384x384.png","/icons/android-chrome-256x256.png","/icons/android-chrome-512x512.png","/icons/apple-touch-icon-60x60.png","/icons/apple-touch-icon-57x57.png","/icons/apple-touch-icon-72x72.png","/icons/apple-touch-icon-114x114.png","/icons/apple-touch-icon-76x76.png","/icons/apple-touch-icon-120x120.png","/icons/apple-touch-icon-144x144.png","/icons/apple-touch-icon-180x180.png","/icons/apple-touch-icon-167x167.png","/icons/apple-touch-icon-152x152.png","/icons/apple-touch-icon-precomposed.png","/icons/apple-touch-icon.png","/icons/coast-228x228.png","/icons/yandex-browser-50x50.png","/icons/mstile-70x70.png","/icons/mstile-144x144.png","/icons/mstile-150x150.png","/icons/mstile-310x150.png","/icons/mstile-310x310.png","/icons/favicon-16x16.png","/icons/favicon-32x32.png","/icons/favicon.ico","/icons/apple-touch-startup-image-640x920.png","/icons/apple-touch-startup-image-320x460.png","/icons/apple-touch-startup-image-640x1096.png","/icons/apple-touch-startup-image-748x1024.png","/icons/apple-touch-startup-image-768x1004.png","/icons/apple-touch-startup-image-750x1294.png","/icons/apple-touch-startup-image-1182x2208.png","/icons/apple-touch-startup-image-1242x2148.png","/icons/apple-touch-startup-image-1536x2008.png","/icons/apple-touch-startup-image-1496x2048.png","/icons/firefox_app_128x128.png","/icons/firefox_app_60x60.png","/icons/firefox_app_512x512.png","/icons/manifest.json","/icons/yandex-browser-manifest.json","/icons/browserconfig.xml","/icons/manifest.webapp"]}}
+{"hash":"3deb17371acdc75398d81da38fad464c","version":"0.0.9","optionHash":"c067d9b2d6a96a86192ece0162f1b1ac","result":{"outputFilePrefix":"/icons/","html":["<meta name=\"mobile-web-app-capable\" content=\"yes\">","<meta name=\"theme-color\" content=\"#fff\">","<meta name=\"application-name\" content=\"Webpack App\">","<link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"app/client/dist//icons/apple-touch-icon-57x57.png\">","<link rel=\"apple-touch-icon\" sizes=\"60x60\" href=\"app/client/dist//icons/apple-touch-icon-60x60.png\">","<link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"app/client/dist//icons/apple-touch-icon-72x72.png\">","<link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"app/client/dist//icons/apple-touch-icon-76x76.png\">","<link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"app/client/dist//icons/apple-touch-icon-114x114.png\">","<link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"app/client/dist//icons/apple-touch-icon-120x120.png\">","<link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"app/client/dist//icons/apple-touch-icon-144x144.png\">","<link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"app/client/dist//icons/apple-touch-icon-152x152.png\">","<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"app/client/dist//icons/apple-touch-icon-180x180.png\">","<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">","<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">","<meta name=\"apple-mobile-web-app-title\" content=\"Webpack App\">","<link rel=\"icon\" type=\"image/png\" sizes=\"228x228\" href=\"app/client/dist//icons/coast-228x228.png\">","<meta name=\"msapplication-TileColor\" content=\"#fff\">","<meta name=\"msapplication-TileImage\" content=\"mstile-144x144.png\">","<meta name=\"msapplication-config\" content=\"browserconfig.xml\">","<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"app/client/dist//icons/favicon-32x32.png\">","<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"app/client/dist//icons/favicon-16x16.png\">","<link rel=\"shortcut icon\" href=\"app/client/dist//icons/favicon.ico\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-320x460.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-640x920.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-640x1096.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-750x1294.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)\" href=\"app/client/dist//icons/apple-touch-startup-image-1182x2208.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)\" href=\"app/client/dist//icons/apple-touch-startup-image-1242x2148.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-748x1024.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-768x1004.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-1496x2048.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-1536x2008.png\">"],"files":["/icons/android-chrome-36x36.png","/icons/android-chrome-48x48.png","/icons/android-chrome-72x72.png","/icons/android-chrome-144x144.png","/icons/android-chrome-96x96.png","/icons/android-chrome-192x192.png","/icons/android-chrome-384x384.png","/icons/android-chrome-256x256.png","/icons/android-chrome-512x512.png","/icons/apple-touch-icon-60x60.png","/icons/apple-touch-icon-57x57.png","/icons/apple-touch-icon-72x72.png","/icons/apple-touch-icon-76x76.png","/icons/apple-touch-icon-114x114.png","/icons/apple-touch-icon-120x120.png","/icons/apple-touch-icon-144x144.png","/icons/apple-touch-icon-152x152.png","/icons/apple-touch-icon-167x167.png","/icons/apple-touch-icon-180x180.png","/icons/apple-touch-icon.png","/icons/apple-touch-icon-precomposed.png","/icons/coast-228x228.png","/icons/yandex-browser-50x50.png","/icons/mstile-70x70.png","/icons/mstile-144x144.png","/icons/mstile-150x150.png","/icons/mstile-310x150.png","/icons/mstile-310x310.png","/icons/favicon-16x16.png","/icons/favicon-32x32.png","/icons/favicon.ico","/icons/apple-touch-startup-image-320x460.png","/icons/apple-touch-startup-image-640x920.png","/icons/apple-touch-startup-image-640x1096.png","/icons/apple-touch-startup-image-750x1294.png","/icons/apple-touch-startup-image-768x1004.png","/icons/apple-touch-startup-image-748x1024.png","/icons/apple-touch-startup-image-1242x2148.png","/icons/apple-touch-startup-image-1182x2208.png","/icons/apple-touch-startup-image-1496x2048.png","/icons/apple-touch-startup-image-1536x2008.png","/icons/firefox_app_60x60.png","/icons/firefox_app_128x128.png","/icons/firefox_app_512x512.png","/icons/manifest.json","/icons/yandex-browser-manifest.json","/icons/browserconfig.xml","/icons/manifest.webapp"]}}
--- a/app/client/dist/icons/manifest.json
+++ b/app/client/dist/icons/manifest.json
@ -1,6 +1,6 @@
 {
-  "name": "ss-webpack-boilerplate",
-  "short_name": "ss-webpack-boilerplate",
+  "name": "Webpack App",
+  "short_name": "Webpack App",
  "description": null,
  "dir": "auto",
  "lang": "en-US",
--- a/app/client/dist/icons/manifest.webapp
+++ b/app/client/dist/icons/manifest.webapp
@ -1,6 +1,6 @@
 {
  "version": "1.0",
-  "name": "ss-webpack-boilerplate",
+  "name": "Webpack App",
  "description": null,
  "icons": {
    "60": "firefox_app_60x60.png",
--- a/app/client/dist/img/fontawesome-webfont.svg
+++ b/app/client/dist/img/fontawesome-webfont.svg
@ -1 +0,0 @@
-module.exports = "../fonts/fontawesome-webfont.svg";
--- a/app/client/dist/img/logo.png
+++ b/app/client/dist/img/logo.png
--- a/app/client/dist/js/HomePage.js
+++ b/app/client/dist/js/HomePage.js
@ -1 +0,0 @@
-!function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var e={};n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="app/client/dist/",n(n.s=32)}({32:function(t,n){}});
--- a/app/client/dist/js/app.js
+++ b/app/client/dist/js/app.js
--- a/app/client/dist/js/editor.js
+++ b/app/client/dist/js/editor.js
@ -1 +0,0 @@
-!function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var e={};n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="app/client/dist/",n(n.s=33)}({33:function(t,n){}});
--- a/app/client/src/img/.gitkeep
+++ b/app/client/src/img/.gitkeep
--- a/app/client/src/img/logo.png
+++ b/app/client/src/img/logo.png
--- a/app/client/src/js/_components/_ui.form.basics.js
+++ b/app/client/src/js/_components/_ui.form.basics.js
@ -5,6 +5,7 @@ import 'jquery.inputmask/dist/jquery.inputmask.bundle';

 import Events from "../_events";
 import SpinnerUI from './_ui.spinner';
+import FormFieldUI from './_ui.form.fields';

 const FormBasics = (($) => {
  // Constants
@ -23,7 +24,12 @@ const FormBasics = (($) => {

      $('[data-inputmask]').inputmask();

-      const $fields = $element.find('input,textarea,select');
+      const $fields = $element.find(Events.FORM_FIELDS);
+      // init fields ui
+      $fields.each((i, el) => {
+        new FormFieldUI(el);
+      });
+
      const $selectFields = $element.find('select:not([readonly])');
      const $radioOptions = $element.find('input[type="radio"]');
      const separator = '::;::';
@ -61,7 +67,7 @@ const FormBasics = (($) => {
              });

              html += `<span class="option" data-val=${  $opt.attr('value')  }>${  opt
-            } <i class="fas fa-times btn-remove"></i></span>`;
+              } <i class="fas fa-times btn-remove"></i></span>`;

            });

--- a/app/client/src/js/_components/_ui.form.validate.js
+++ b/app/client/src/js/_components/_ui.form.validate.js
@ -79,7 +79,9 @@ const FormValidate = (($) => {
            badCallback();
          }

-          console.log('Invalid form data');
+          console.log('Invalid form data:');
+          console.log($el);
+
          SpinnerUI.hide();
          valid = false;
          return false;
--- a/app/client/src/js/_components/routes/index.js
+++ b/app/client/src/js/_components/routes/index.js
@ -2,12 +2,12 @@ import Events from '../../_events';
 import Routie from "routie";

 $(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
-    Routie({
-        'navigation': function() {
-            $('#NavbarCollapse').addClass('in');
-        },
-        'carousel:id:num': function(id, num) {
-            $(`#Carousel${  id}`).carousel(num);
-        },
-    });
+  Routie({
+    'navigation': function() {
+      $('#NavbarCollapse').addClass('in');
+    },
+    'carousel:id:num': function(id, num) {
+      $(`#Carousel${  id}`).carousel(num);
+    },
+  });
 });
--- a/app/client/src/js/_events.js
+++ b/app/client/src/js/_events.js
@ -3,17 +3,18 @@
 */

 module.exports = {
-    AJAX: 'ajax-load',
-    LOADED: 'load',
-    SET_TARGET_UPDATE: 'set-target-update',
-    RESTORE_FIELD: 'restore-field',
-    FORM_INIT_BASICS: 'form-basics',
-    FORM_INIT_STEPPED: 'form-init-stepped',
-    FORM_INIT_VALIDATE: 'form-init-validate',
-    FORM_INIT_VALIDATE_FIELD: 'form-init-validate-field',
-    FORM_INIT_STORAGE: 'form-init-storage',
-    FORM_VALIDATION_FAILED: 'form-validation-failed',
-    FORM_STEPPED_NEW_STEP: 'form-new-step',
-    FORM_STEPPED_FIRST_STEP: 'form-first-step',
-    FORM_STEPPED_LAST_STEP: 'form-last-step',
+  AJAX: 'ajax-load',
+  LOADED: 'load',
+  SET_TARGET_UPDATE: 'set-target-update',
+  RESTORE_FIELD: 'restore-field',
+  FORM_INIT_BASICS: 'form-basics',
+  FORM_INIT_STEPPED: 'form-init-stepped',
+  FORM_INIT_VALIDATE: 'form-init-validate',
+  FORM_INIT_VALIDATE_FIELD: 'form-init-validate-field',
+  FORM_INIT_STORAGE: 'form-init-storage',
+  FORM_VALIDATION_FAILED: 'form-validation-failed',
+  FORM_STEPPED_NEW_STEP: 'form-new-step',
+  FORM_STEPPED_FIRST_STEP: 'form-first-step',
+  FORM_STEPPED_LAST_STEP: 'form-last-step',
+  FORM_FIELDS: 'input,textarea,select',
 };
--- a/app/client/src/js/_layout.js
+++ b/app/client/src/js/_layout.js
@ -7,43 +7,43 @@ import FormStepped from './_components/_ui.form.stepped';


 const LayoutUI = (($) => {
-    // Constants
-    const W = window;
-    const D = document;
-    const $Body = $('body');
+  // Constants
+  const W = window;
+  const D = document;
+  const $Body = $('body');

-    const NAME = 'LayoutUI';
+  const NAME = 'LayoutUI';

-    const datepickerOptions = {
-        autoclose: true,
-        startDate: 0,
-        //todayBtn: true,
-        todayHighlight: true,
-        clearBtn: true,
-    };
+  const datepickerOptions = {
+    autoclose: true,
+    startDate: 0,
+    //todayBtn: true,
+    todayHighlight: true,
+    clearBtn: true,
+  };

-    class LayoutUI {
-        static init() {
-            const ui = this;
-            ui.dispose();
+  class LayoutUI {
+    static init() {
+      const ui = this;
+      ui.dispose();

-            console.log(`Initializing: ${NAME}`);
-            // your custom UI
+      console.log(`Initializing: ${NAME}`);
+      // your custom UI

-        }
-
-        static dispose() {
-            console.log(`Destroying: ${NAME}`);
-        }
    }

-    $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
-        LayoutUI.init();
-    });
+    static dispose() {
+      console.log(`Destroying: ${NAME}`);
+    }
+  }

-    W.LayoutUI = LayoutUI;
+  $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
+    LayoutUI.init();
+  });

-    return LayoutUI;
+  W.LayoutUI = LayoutUI;
+
+  return LayoutUI;
 })($);

 export default LayoutUI;
--- a/app/client/src/js/_main.js
+++ b/app/client/src/js/_main.js
@ -28,316 +28,321 @@ import SmoothScroll from 'smooth-scroll';
 const smoothScroll = SmoothScroll();

 const MainUI = (($) => {
-    // Constants
-    const W = window;
-    const D = document;
-    const $Body = $('body');
+  // Constants
+  const W = window;
+  const D = document;
+  const $Body = $('body');

-    const NAME = 'MainUI';
+  const NAME = 'MainUI';

-    // get browser locale
-    //const Locale = $('html').attr('lang').substring(0, 2);
+  // get browser locale
+  //const Locale = $('html').attr('lang').substring(0, 2);

-    const $AlertNotify = $('#AlertNotify');
-    const $SiteWideMessage = $('#SiteWideMessage');
+  const $AlertNotify = $('#AlertNotify');
+  const $SiteWideMessage = $('#SiteWideMessage');

-    // get browser window visibility preferences
-    // Opera 12.10, Firefox >=18, Chrome >=31, IE11
-    const HiddenName = 'hidden';
-    const VisibilityChangeEvent = 'visibilitychange';
+  // get browser window visibility preferences
+  // Opera 12.10, Firefox >=18, Chrome >=31, IE11
+  const HiddenName = 'hidden';
+  const VisibilityChangeEvent = 'visibilitychange';

-    // update visibility state
-    D.addEventListener(VisibilityChangeEvent, () => {
-        if (D.visibilityState === HiddenName) {
-            console.log('Tab: hidden');
-            $Body.addClass('is-hidden');
-            $Body.trigger('tabHidden');
-        } else {
-            console.log('Tab: focused');
-            $Body.removeClass('is-hidden');
-            $Body.trigger('tabFocused');
-        }
+  // update visibility state
+  D.addEventListener(VisibilityChangeEvent, () => {
+    if (D.visibilityState === HiddenName) {
+      console.log('Tab: hidden');
+      $Body.addClass('is-hidden');
+      $Body.trigger('tabHidden');
+    } else {
+      console.log('Tab: focused');
+      $Body.removeClass('is-hidden');
+      $Body.trigger('tabFocused');
+    }
+  });
+
+
+  // update online/offline state
+  const updateOnlineStatus = function() {
+    if (!navigator.onLine) {
+      console.log('Tab: offline');
+      $Body.addClass('is-offline');
+      $Body.trigger('offline');
+    } else {
+      console.log('Tab: online');
+      $Body.removeClass('is-offline');
+      $Body.trigger('online');
+    }
+  };
+
+  if (typeof navigator.onLine !== 'undefined') {
+    W.addEventListener('offline', () => {
+      updateOnlineStatus();
+    }, false);
+
+    W.addEventListener('online', () => {
+      updateOnlineStatus();
+    }, false);
+
+    W.addEventListener('load', () => {
+      updateOnlineStatus();
    });
+  }

+  // scrollTo
+  const ScrollTo = function(trigger, selector) {
+    smoothScroll.animateScroll(
+      D.querySelector(selector),
+      trigger, {
+        speed: 500,
+        offset: -20,
+        //easing: 'easeInOutCubic',
+        // Callback API
+        //before: function (anchor, toggle) {}, // Callback to run before scroll
+        //`after: function (anchor, toggle) {} // Callback to run after scroll
+      }
+    );
+  };

-    // update online/offline state
-    const updateOnlineStatus = function() {
-        if (!navigator.onLine) {
-            console.log('Tab: offline');
-            $Body.addClass('is-offline');
-            $Body.trigger('offline');
-        } else {
-            console.log('Tab: online');
-            $Body.removeClass('is-offline');
-            $Body.trigger('online');
-        }
-    };
-
-    if (typeof navigator.onLine !== 'undefined') {
-        W.addEventListener('offline', () => {
-            updateOnlineStatus();
-        }, false);
-
-        W.addEventListener('online', () => {
-            updateOnlineStatus();
-        }, false);
-
-        W.addEventListener('load', () => {
-            updateOnlineStatus();
-        });
+  // session ping
+  setInterval(() => {
+    if ($Body.hasClass('is-offline')) {
+      return;
    }

-    // scrollTo
-    const ScrollTo = function(trigger, selector) {
-        smoothScroll.animateScroll(
-            D.querySelector(selector),
-            trigger, {
-                speed: 500,
-                offset: -20,
-                //easing: 'easeInOutCubic',
-                // Callback API
-                //before: function (anchor, toggle) {}, // Callback to run before scroll
-                //`after: function (anchor, toggle) {} // Callback to run after scroll
-            }
-        );
-    };
-
-    // session ping
-    setInterval(() => {
-        if ($Body.hasClass('is-offline')) {
-            return;
+    $.ajax({
+      sync: false,
+      async: true,
+      cache: false,
+      url: '/Security/ping',
+      global: false,
+      type: 'POST',
+      complete(data, datastatus) {
+        if (datastatus !== 'success') {
+          W.location.reload(false);
        }
+      },
+    });
+  }, 300000); // 5 min in ms

-        $.ajax({
-            sync: false,
-            async: true,
-            cache: false,
-            url: '/Security/ping',
-            global: false,
-            type: 'POST',
-            complete(data, datastatus) {
-                if (datastatus !== 'success') {
-                    W.location.reload(false);
-                }
+  W.URLDetails = {
+    'base': $('base').attr('href'),
+    'relative': '/',
+    'hash': '',
+  };
+
+  class MainUI {
+    // Static methods
+
+    static init() {
+      this.dispose();
+
+      console.log(`Initializing: ${NAME}`);
+
+      // update location details
+      this.updateLocation();
+
+      // mark available offline areas
+      if ('caches' in W) {
+        $('a.offline').addClass('offline-available');
+      }
+
+      this.loadImages();
+
+      // mark external links
+      $('a.external,a[rel="external"]').attr('target', '_blank');
+
+      // show encoded emails
+      /*$(D).find('.obm').each(function () {
+        if ($(this).attr('data-val') !== undefined) {
+          const email = $(this).attr('data-val').split('')
+            .reverse()
+            .join('')
+            .slice(0, -8)
+            .replace(/[a-zA-Z]/g, (c) => String.fromCharCode((c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26))
+            .replace('#AT#', '@');
+          const attr = $(this).attr('data-val-append');
+          if (attr !== undefined && attr !== false) {
+            $(this).append(email);
+          }
+          if ($(this).find('.sr-only').length > 0) {
+            $(this).find('.sr-only').append(email);
+          }
+          if ($(this).attr('href') !== undefined) {
+            $(this).attr('href', `mailto:${email}`);
+          }
+        }
+      });*/
+      //
+
+      // scroll links
+      $(D).on('click', '.js-scrollTo', (e) => {
+        e.preventDefault();
+        const el = e.currentTarget;
+        const $el = $(e.currentTarget);
+        const target = $el.data('target') || $el.attr('href');
+
+        if ($(target).length) {
+          ScrollTo(el, target);
+        } else {
+          console.log(`[ScrollTo] Undefined target: ${  target}`);
+        }
+      });
+
+      // load external fonts
+      if ($('[data-extfont]').length) {
+        $.getScript('//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', () => {
+          const fonts = [];
+
+          $('[data-extfont]').each((i, el) => {
+            fonts[i] = $(el).attr('data-extfont');
+          });
+
+          W.WebFont.load({
+            google: {
+              families: fonts,
            },
+          });
        });
-    }, 300000); // 5 min in ms
+      }

-    W.URLDetails = {
-        'base': $('base').attr('href'),
-        'relative': '/',
-        'hash': '',
-    };
+      // data-set links
+      $('[data-set-target]').on('click', (e) => {
+        const $el = $(e.currentTarget);
+        const $target = $($el.data('set-target'));

-    class MainUI {
-        // Static methods
-
-        static init() {
-            this.dispose();
-
-            console.log(`Initializing: ${NAME}`);
-
-            // update location details
-            this.updateLocation();
-
-            // mark available offline areas
-            if ('caches' in W) {
-                $('a.offline').addClass('offline-available');
-            }
-
-            this.loadImages();
-
-            // mark external links
-            $('a.external,a[rel="external"]').attr('target', '_blank');
-
-            // show encoded emails
-            /*$(D).find('.obm').each(function () {
-              if ($(this).attr('data-val') !== undefined) {
-                const email = $(this).attr('data-val').split('')
-                  .reverse()
-                  .join('')
-                  .slice(0, -8)
-                  .replace(/[a-zA-Z]/g, (c) => String.fromCharCode((c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26))
-                  .replace('#AT#', '@');
-                const attr = $(this).attr('data-val-append');
-                if (attr !== undefined && attr !== false) {
-                  $(this).append(email);
-                }
-                if ($(this).find('.sr-only').length > 0) {
-                  $(this).find('.sr-only').append(email);
-                }
-                if ($(this).attr('href') !== undefined) {
-                  $(this).attr('href', `mailto:${email}`);
-                }
-              }
-            });*/
-            //
-
-            // scroll links
-            $(D).on('click', '.js-scrollTo', (e) => {
-                e.preventDefault();
-                const el = e.currentTarget;
-                const $el = $(e.currentTarget);
-
-                ScrollTo(el, $el.attr('data-target'));
-            });
-
-            // load external fonts
-            if ($('[data-extfont]').length) {
-                $.getScript('//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', () => {
-                    const fonts = [];
-
-                    $('[data-extfont]').each(function(i, el) {
-                        fonts[i] = $(el).attr('data-extfont');
-                    });
-
-                    W.WebFont.load({
-                        google: {
-                            families: fonts,
-                        },
-                    });
-                });
-            }
-
-            // data-set links
-            $('[data-set-target]').on('click', (e) => {
-                const $el = $(e.currentTarget);
-                const $target = $($el.data('set-target'));
-
-                if (!$target.length) {
-                    return;
-                }
-
-                $target.each((i, targetEl) => {
-                    const $targetEl = $(targetEl);
-                    const tag = $targetEl.prop('tagName').toLowerCase();
-
-                    if (tag === 'input' || tag === 'select') {
-                        $targetEl.val($el.data('set-val'));
-                    } else if (!$targetEl.hasClass('field')) {
-                        $targetEl.text($el.data('set-val'));
-                    }
-                });
-
-                $el.trigger(Events.SET_TARGET_UPDATE);
-                $target.closest('form').trigger(Events.SET_TARGET_UPDATE);
-            });
-
-            // hide spinner
-            Spinner.hide(() => {
-                $Body.addClass('loaded');
-            });
-
-            // fire page printing
-            if (W.URLDetails['hash'].indexOf('printpage') > -1) {
-                W.print();
-            }
+        if (!$target.length) {
+          return;
        }

-        static updateLocation(url) {
-            let location = url || W.location.href;
-            location = location.replace(W.URLDetails['base'], '/');
-            const hash = location.indexOf('#');
+        $target.each((i, targetEl) => {
+          const $targetEl = $(targetEl);
+          const tag = $targetEl.prop('tagName').toLowerCase();

-            W.URLDetails.relative = location.split('#')[0];
-            W.URLDetails.hash = (hash >= 0) ? location.substr(location.indexOf('#')) : '';
-        }
+          if (tag === 'input' || tag === 'select') {
+            $targetEl.val($el.data('set-val'));
+          } else if (!$targetEl.hasClass('field')) {
+            $targetEl.text($el.data('set-val'));
+          }
+        });

-        // show site-wide alert
-        static alert(msg, cls) {
-            $SiteWideMessage.fadeOut('fast');
+        $el.trigger(Events.SET_TARGET_UPDATE);
+        $target.closest('form').trigger(Events.SET_TARGET_UPDATE);
+      });

-            $SiteWideMessage.html(`<div class="page-alert"><div class="alert alert-${cls}"><i class="close" data-dismiss="alert">&times;</i>${msg}</div></div>`);
-            $SiteWideMessage.find('.page-alert').alert();
+      // hide spinner
+      Spinner.hide(() => {
+        $Body.addClass('loaded');
+      });

-            $SiteWideMessage.find('.close[data-dismiss="alert"]').click(() => {
-                $SiteWideMessage.fadeOut('slow', () => {
-                    $SiteWideMessage.find('.page-alert').alert('close');
-                });
-            });
-
-            $SiteWideMessage.fadeIn('slow');
-
-            if ($AlertNotify.length) {
-                $AlertNotify[0].play();
-            }
-
-            $(W).trigger('alert-appeared');
-        }
-
-        // hide site-wide alert
-        static alertHide() {
-            if ($SiteWideMessage.length !== 0) {
-                $SiteWideMessage.fadeOut('slow', () => {
-                    $SiteWideMessage.find('.alert').alert('close');
-                });
-            }
-
-            if (
-                $AlertNotify.length &&
-                typeof $AlertNotify[0].stop !== 'undefined'
-            ) {
-                $AlertNotify[0].stop();
-            }
-
-            $(W).trigger('alert-removed');
-        }
-
-        // load all images
-        static loadImages() {
-            const $imgs = $Body.find('img');
-            const $imgUrls = [];
-            const $imgLazyUrls = [];
-
-            // collect image details
-            $imgs.each((i, el) => {
-                const $el = $(el);
-                const src = $el.attr('src');
-                const lazySrc = $el.data('lazy-src');
-
-                if (src && src.length) {
-                    $imgUrls.push(src);
-                }
-                if (lazySrc && lazySrc.length) {
-                    $imgLazyUrls.push(lazySrc);
-                    $el.addClass('loading');
-
-                    AjaxUI.preload([lazySrc]).then(() => {
-                        $el.attr('src', lazySrc);
-
-                        $el.addClass('loaded');
-                        $el.removeClass('loading');
-
-                        $el.trigger('image-lazy-loaded');
-                    });
-                }
-            });
-
-            // load defined images
-            AjaxUI.preload($imgUrls).then(() => {
-                $(W).trigger('images-loaded');
-
-                // load lazy images
-                AjaxUI.preload($imgLazyUrls).then(() => {
-                    console.log('All images are loaded!');
-
-                    $(W).trigger('images-lazy-loaded');
-                });
-            });
-        }
-
-        static dispose() {
-            console.log(`Destroying: ${NAME}`);
-        }
+      // fire page printing
+      if (W.URLDetails['hash'].indexOf('printpage') > -1) {
+        W.print();
+      }
    }

-    $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
-        MainUI.init();
-    });
+    static updateLocation(url) {
+      let location = url || W.location.href;
+      location = location.replace(W.URLDetails['base'], '/');
+      const hash = location.indexOf('#');

-    W.MainUI = MainUI;
+      W.URLDetails.relative = location.split('#')[0];
+      W.URLDetails.hash = (hash >= 0) ? location.substr(location.indexOf('#')) : '';
+    }

-    return MainUI;
+    // show site-wide alert
+    static alert(msg, cls) {
+      $SiteWideMessage.fadeOut('fast');
+
+      $SiteWideMessage.html(`<div class="page-alert"><div class="alert alert-${cls}"><i class="close" data-dismiss="alert">&times;</i>${msg}</div></div>`);
+      $SiteWideMessage.find('.page-alert').alert();
+
+      $SiteWideMessage.find('.close[data-dismiss="alert"]').click(() => {
+        $SiteWideMessage.fadeOut('slow', () => {
+          $SiteWideMessage.find('.page-alert').alert('close');
+        });
+      });
+
+      $SiteWideMessage.fadeIn('slow');
+
+      if ($AlertNotify.length) {
+        $AlertNotify[0].play();
+      }
+
+      $(W).trigger('alert-appeared');
+    }
+
+    // hide site-wide alert
+    static alertHide() {
+      if ($SiteWideMessage.length !== 0) {
+        $SiteWideMessage.fadeOut('slow', () => {
+          $SiteWideMessage.find('.alert').alert('close');
+        });
+      }
+
+      if (
+        $AlertNotify.length &&
+        typeof $AlertNotify[0].stop !== 'undefined'
+      ) {
+        $AlertNotify[0].stop();
+      }
+
+      $(W).trigger('alert-removed');
+    }
+
+    // load all images
+    static loadImages() {
+      const $imgs = $Body.find('img');
+      const $imgUrls = [];
+      const $imgLazyUrls = [];
+
+      // collect image details
+      $imgs.each((i, el) => {
+        const $el = $(el);
+        const src = $el.attr('src');
+        const lazySrc = $el.data('lazy-src');
+
+        if (src && src.length) {
+          $imgUrls.push(src);
+        }
+        if (lazySrc && lazySrc.length) {
+          $imgLazyUrls.push(lazySrc);
+          $el.addClass('loading');
+
+          AjaxUI.preload([lazySrc]).then(() => {
+            $el.attr('src', lazySrc);
+
+            $el.addClass('loaded');
+            $el.removeClass('loading');
+
+            $el.trigger('image-lazy-loaded');
+          });
+        }
+      });
+
+      // load defined images
+      AjaxUI.preload($imgUrls).then(() => {
+        $(W).trigger('images-loaded');
+
+        // load lazy images
+        AjaxUI.preload($imgLazyUrls).then(() => {
+          console.log('All images are loaded!');
+
+          $(W).trigger('images-lazy-loaded');
+        });
+      });
+    }
+
+    static dispose() {
+      console.log(`Destroying: ${NAME}`);
+    }
+  }
+
+  $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
+    MainUI.init();
+  });
+
+  W.MainUI = MainUI;
+
+  return MainUI;
 })($);

 export default MainUI;
--- a/app/client/src/js/app.js
+++ b/app/client/src/js/app.js
@ -29,7 +29,7 @@ import './_main';
 import './_layout';

 function importAll(r) {
-    return r.keys().map(r);
+  return r.keys().map(r);
 }

 const images = importAll(require.context('../img/', false, /\.(png|jpe?g|svg)$/));
--- a/app/client/src/js/lang/_en.js
+++ b/app/client/src/js/lang/_en.js
@ -3,13 +3,13 @@
 */

 module.exports = {
-    en: {
-        jsSteppedForm: {
-            STEPCOUNTER: '<div class="steps-counter">Step <b class="current-step"></b> of <b class="total-steps"></b></div>',
-            STEPBUTTONS: '<div class="steps-buttons">' +
+  en: {
+    jsSteppedForm: {
+      STEPCOUNTER: '<div class="steps-counter">Step <b class="current-step"></b> of <b class="total-steps"></b></div>',
+      STEPBUTTONS: '<div class="steps-buttons">' +
                '<a href="#" class="step-ctrl step-prev"><i class="fas fa-chevron-left"></i> Prev</a>' +
                ' <a href="#" class="step-ctrl step-next">Next <i class="fas fa-chevron-right"></i></a>' +
                '</div>',
-        },
    },
+  },
 };
--- a/app/client/src/scss/_components/_ui.main.scss
+++ b/app/client/src/scss/_components/_ui.main.scss
@ -111,27 +111,29 @@ button, input, optgroup, select, textarea,
    @extend .alert-danger;
 }

-// stick navbar to top using mobile layout
-#Header {
-    position: relative;
-    padding-top: $grid-gutter-height / 2;
-    padding-bottom: 1rem;
+// element col paddings
+.col-block {
+    padding: $grid-gutter-height / 4;
+}

-    @media (min-width: map-get($grid-breakpoints, "lg")) {
-        padding-top: 1rem;
-        padding-bottom: 0;
+// rewrite btn opacity on hover
+.btn {
+    &:hover,
+    &:focus {
+        opacity: 1;
    }
 }

-#Navigation {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: 10;
+// SS-messages
+.message {
+    @extend .alert;

-    @media (min-width: map-get($grid-breakpoints, "lg")) {
-        position: relative;
-        margin-top: 1rem;
-    }
+    @extend .alert-info;
+}
+
+.message.required,
+.message.error {
+    @extend .alert;
+
+    @extend .alert-danger;
 }
--- a/app/client/src/scss/_layout.scss
+++ b/app/client/src/scss/_layout.scss
@ -4,6 +4,20 @@
 /**
 * Your custom style
 */
+
+.bg-alt {
+    @extend .bg-dark;
+
+    background-color: $bg-alt !important;
+}
+
+.bootstrap-select .dropdown-toggle .filter-option .option {
+    background: #dedede;
+    padding: .2rem .5rem;
+    margin: .2rem;
+    color: #212529;
+}
+
 // shrink elements on scroll
 body.shrink {}

@ -16,44 +30,23 @@ body.shrink {}

    .wrapper {
        min-height: 100%;
-        padding-top: $grid-gutter-height;
-        padding-bottom: 2rem;
+        padding-bottom: $footer-size + $footer-bar-size + $grid-gutter-height / 2;
+
+        //padding-top: $grid-gutter-height;
+
    }

-    .site-footer {
-        height: 2rem;
-        margin-top: -2rem;
+    .footer {
+        height: $footer-size + $footer-bar-size + $grid-gutter-height / 2;
+        margin-top: -($footer-size + $footer-bar-size + $grid-gutter-height / 2);
    }
 }

-// element col paddings
-.col-block {
-    padding: $grid-gutter-height / 4;
-}
-
-// rewrite btn opacity on hover
-.btn {
-    &:hover,
-    &:focus {
-        opacity: 1;
-    }
-}
-
-// SS-messages
-.message {
-    @extend .alert;
-
-    @extend .alert-info;
-}
-
-.message.required,
-.message.error {
-    @extend .alert;
-
-    @extend .alert-danger;
-}
-
+// site blocks (elements)
 .element {
+    background-size: cover;
+    background-repeat: no-repeat;
+
    &.site__elements__sliderelement {
        .element-container {
            width: 100%;
@ -61,11 +54,89 @@ body.shrink {}
            max-width: none;
        }
    }
+
+    &.site__elements__accordion {
+        .card {
+            padding-left: 0;
+            padding-right: 0;
+
+            .card-header {
+                @extend .bg-dark;
+            }
+        }
+    }
 }

-.bootstrap-select .dropdown-toggle .filter-option .option {
-    background: #dedede;
-    padding: .2rem .5rem;
-    margin: .2rem;
-    color: #212529;
+// stick navbar to top using mobile layout
+/*#Header {
+    position: relative;
+    padding-top: $grid-gutter-height / 2;
+    padding-bottom: 1rem;
+
+    @media (min-width: map-get($grid-breakpoints, "lg")) {
+        padding-top: 1rem;
+        padding-bottom: 0;
+    }
+}
+
+#Navigation {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 10;
+
+    @media (min-width: map-get($grid-breakpoints, "lg")) {
+        position: relative;
+        margin-top: 1rem;
+    }
+}*/
+
+#Footer {
+    background-color: $dark;
+    color: darken($white, 5%);
+
+    .container,
+    .container-fluid {
+        padding-top: $grid-gutter-height / 2;
+        padding-bottom: $grid-gutter-height / 2;
+    }
+
+    a {
+        color: $white;
+    }
+
+    ul {
+        margin-bottom: 0;
+    }
+
+    .footer {
+        background-color: darken($dark, 5%);
+
+        .container,
+        .container-fluid {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+
+        .copyright {
+            padding-right: .5rem;
+        }
+
+        li {
+            padding: 0 .5rem;
+        }
+    }
+
+    @media (min-width: map-get($grid-breakpoints, "sm")) {
+        .wrapper {
+            padding-bottom: $footer-bar-size;
+        }
+
+        .footer {
+            height: $footer-bar-size;
+            margin-top: -$footer-bar-size;
+            line-height: $footer-bar-size;
+        }
+    }
 }
--- a/app/client/src/scss/_typography.scss
+++ b/app/client/src/scss/_typography.scss
@ -1,6 +1,15 @@
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
-    color: $dark-blue;
+    color: $dark;
+}
+
+.bg-dark {
+	h1, h2, h3, h4, h5, h6,
+	.h1, .h2, .h3, .h4, .h5, .h6,
+	.typography,
+	a {
+	    color: $white;
+	}
 }

 .typography {
--- a/app/client/src/scss/_variables.scss
+++ b/app/client/src/scss/_variables.scss
@ -11,13 +11,18 @@ $white: #fff;
 $blue: #016cb1;
 $yellow: #ecac02;

-$dark-blue: #113362;
+//$dark: #047072;
+//$primary: $dark;
+$bg-alt: $yellow;

 $body-color: $gray-900;
 $navbar-light-active-color: $blue;

 $dropdown-border-color: $white;

+$footer-size: 16rem;
+$footer-bar-size: 2.5rem;
+
 /*
 * bootstrap includes
 * keep it at the end
--- a/package.json
+++ b/package.json
@ -43,6 +43,7 @@
        "jquery-zoom": "^1.7.21",
        "jquery.appear": "^1.0.1",
        "jquery.inputmask": "^3.3.4",
+        "mapbox-gl": "^1.0.0",
        "meta-lightbox": "^1.0.0",
        "offcanvas-bootstrap": "^2.5.2",
        "popper.js": "^1.15.0",
--- a/webpack.config.common.js
+++ b/webpack.config.common.js
@ -11,152 +11,153 @@ const filesystem = require('fs');

 const includes = {};
 const modules = [
-    path.resolve(__dirname, 'public'),
-    path.resolve(__dirname, conf.APPDIR, 'client', 'src'),
-    path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'js'),
-    path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'scss'),
-    path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'img'),
-    path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'thirdparty'),
-    path.resolve(__dirname, 'node_modules')
+  path.resolve(__dirname, 'public'),
+  path.resolve(__dirname, conf.APPDIR, 'client', 'src'),
+  path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'js'),
+  path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'scss'),
+  path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'img'),
+  path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'thirdparty'),
+  path.resolve(__dirname, conf.APPDIR, 'client', 'node_modules'),
+  path.resolve(__dirname, 'node_modules')
 ];

 const _addAppFiles = (theme) => {

-    const dirPath = path.resolve(__dirname, theme);
-    const themeName = path.basename(theme);
+  const dirPath = path.resolve(__dirname, theme);
+  const themeName = path.basename(theme);

-    if (filesystem.existsSync(path.join(dirPath, conf.SRC, 'js', 'app.js'))) {
-        includes[`${themeName}`] = path.join(dirPath, conf.SRC, 'js', 'app.js');
-    } else if (filesystem.existsSync(path.join(dirPath, conf.SRC, 'scss', 'app.scss'))) {
-        includes[`${themeName}`] = path.join(dirPath, conf.SRC, 'scss', 'app.scss');
-    }
+  if (filesystem.existsSync(path.join(dirPath, conf.SRC, 'js', 'app.js'))) {
+    includes[`${themeName}`] = path.join(dirPath, conf.SRC, 'js', 'app.js');
+  } else if (filesystem.existsSync(path.join(dirPath, conf.SRC, 'scss', 'app.scss'))) {
+    includes[`${themeName}`] = path.join(dirPath, conf.SRC, 'scss', 'app.scss');
+  }

-    modules.push(path.join(dirPath, 'client', 'src', 'js'));
-    modules.push(path.join(dirPath, 'client', 'src', 'scss'));
-    modules.push(path.join(dirPath, 'client', 'src', 'img'));
-    modules.push(path.join(dirPath, 'client', 'src', 'thirdparty'));
+  modules.push(path.join(dirPath, 'client', 'src', 'js'));
+  modules.push(path.join(dirPath, 'client', 'src', 'scss'));
+  modules.push(path.join(dirPath, 'client', 'src', 'img'));
+  modules.push(path.join(dirPath, 'client', 'src', 'thirdparty'));

-    const _getAllFilesFromFolder = function(dir, includeSubFolders = true) {
-        const dirPath = path.resolve(__dirname, dir);
-        let results = [];
+  const _getAllFilesFromFolder = function(dir, includeSubFolders = true) {
+    const dirPath = path.resolve(__dirname, dir);
+    let results = [];

-        filesystem.readdirSync(dirPath).forEach((file) => {
-            if (file.charAt(0) === '_') {
-                return;
-            }
+    filesystem.readdirSync(dirPath).forEach((file) => {
+      if (file.charAt(0) === '_') {
+        return;
+      }

-            const filePath = path.join(dirPath, file);
-            const stat = filesystem.statSync(filePath);
+      const filePath = path.join(dirPath, file);
+      const stat = filesystem.statSync(filePath);

-            if (stat && stat.isDirectory() && includeSubFolders) {
-                results = results.concat(_getAllFilesFromFolder(filePath, includeSubFolders));
-            } else {
-                results.push(filePath);
-            }
-        });
+      if (stat && stat.isDirectory() && includeSubFolders) {
+        results = results.concat(_getAllFilesFromFolder(filePath, includeSubFolders));
+      } else {
+        results.push(filePath);
+      }
+    });

-        return results;
-    };
+    return results;
+  };

-    // add page specific scripts
-    const typesJSPath = path.join(theme, conf.TYPESJS);
-    if (filesystem.existsSync(typesJSPath)) {
-        const pageScripts = _getAllFilesFromFolder(typesJSPath, true);
-        pageScripts.forEach((file) => {
-            includes[`${themeName}_${path.basename(file, '.js')}`] = file;
-        });
-    }
+  // add page specific scripts
+  const typesJSPath = path.join(theme, conf.TYPESJS);
+  if (filesystem.existsSync(typesJSPath)) {
+    const pageScripts = _getAllFilesFromFolder(typesJSPath, true);
+    pageScripts.forEach((file) => {
+      includes[`${themeName}_${path.basename(file, '.js')}`] = file;
+    });
+  }

-    // add page specific scss
-    const typesSCSSPath = path.join(theme, conf.TYPESSCSS);
-    if (filesystem.existsSync(typesSCSSPath)) {
-        const scssIncludes = _getAllFilesFromFolder(typesSCSSPath, true);
-        scssIncludes.forEach((file) => {
-            includes[`${themeName}_${path.basename(file, '.scss')}`] = file;
-        });
-    }
+  // add page specific scss
+  const typesSCSSPath = path.join(theme, conf.TYPESSCSS);
+  if (filesystem.existsSync(typesSCSSPath)) {
+    const scssIncludes = _getAllFilesFromFolder(typesSCSSPath, true);
+    scssIncludes.forEach((file) => {
+      includes[`${themeName}_${path.basename(file, '.scss')}`] = file;
+    });
+  }
 };

 _addAppFiles(conf.APPDIR);

 // add themes
 commonVariables.themes.forEach((theme) => {
-    _addAppFiles(theme);
+  _addAppFiles(theme);
 });

 module.exports = {
-    entry: includes,
-    devtool: 'source-map',
-    externals: {
-        'jquery': 'jQuery',
-    },
-    optimization: {
-        namedModules: true, // NamedModulesPlugin()
-        splitChunks: { // CommonsChunkPlugin()
-            name: 'vendor',
-            minChunks: 2
-        },
-        noEmitOnErrors: true, // NoEmitOnErrorsPlugin
-        concatenateModules: true //ModuleConcatenationPlugin
+  entry: includes,
+  devtool: 'source-map',
+  externals: {
+    'jquery': 'jQuery',
+  },
+  optimization: {
+    namedModules: true, // NamedModulesPlugin()
+    splitChunks: { // CommonsChunkPlugin()
+      name: 'vendor',
+      minChunks: 2
    },
+    noEmitOnErrors: true, // NoEmitOnErrorsPlugin
+    concatenateModules: true //ModuleConcatenationPlugin
+  },

-    module: {
-        rules: [{
-            test: /\.jsx?$/,
-            exclude: /node_modules/,
-            use: {
-                loader: 'babel-loader',
-                options: {
-                    presets: [
-                        ['es2015', {
-                            modules: false,
-                        }],
-                        ['stage-2'],
-                    ],
-                    plugins: [
-                        ['transform-react-jsx'],
-                        ['react-hot-loader/babel'],
-                    ],
-                },
-            },
-        }, {
-            test: /\.tsx?$/,
-            use: 'ts-loader',
-            exclude: /node_modules/,
-        }, {
-            test: /\.coffee?$/,
-            use: 'coffee-loader',
-        }, {
-            test: /\.worker\.js$/,
-            use: {
-                loader: 'worker-loader',
-            },
-        }],
-    },
-    resolve: {
-        modules: modules,
-        alias: {
-            'jquery': require.resolve('jquery'),
-            'jQuery': require.resolve('jquery'),
+  module: {
+    rules: [{
+      test: /\.jsx?$/,
+      exclude: /node_modules/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            ['es2015', {
+              modules: false,
+            }],
+            ['stage-2'],
+          ],
+          plugins: [
+            ['transform-react-jsx'],
+            ['react-hot-loader/babel'],
+          ],
        },
+      },
+    }, {
+      test: /\.tsx?$/,
+      use: 'ts-loader',
+      exclude: /node_modules/,
+    }, {
+      test: /\.coffee?$/,
+      use: 'coffee-loader',
+    }, {
+      test: /\.worker\.js$/,
+      use: {
+        loader: 'worker-loader',
+      },
+    }],
+  },
+  resolve: {
+    modules: modules,
+    alias: {
+      'jquery': require.resolve('jquery'),
+      'jQuery': require.resolve('jquery'),
    },
-    plugins: [
-        new webpack.ProvidePlugin({
-            $: 'jquery',
-            jQuery: 'jquery',
-            'window.jQuery': 'jquery',
-            Popper: ['popper.js', 'default'],
-            Util: 'exports-loader?Util!bootstrap/js/dist/util',
-            Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
-            Button: 'exports-loader?Button!bootstrap/js/dist/button',
-            Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
-            Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
-            Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
-            Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
-            Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
-            Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
-            Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
-            Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
-        }),
-    ],
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery',
+      Popper: ['popper.js', 'default'],
+      Util: 'exports-loader?Util!bootstrap/js/dist/util',
+      Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
+      Button: 'exports-loader?Button!bootstrap/js/dist/button',
+      Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
+      Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
+      Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
+      Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
+      Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
+      Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
+      Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
+      Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
+    }),
+  ],
 };
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@ -14,109 +14,109 @@ const IP = process.env.IP || conf.HOSTNAME;
 const PORT = process.env.PORT || conf.PORT;

 const config = merge.strategy({
-    entry: 'prepend'
+  entry: 'prepend'
 })(common, {
-    mode: 'development',
+  mode: 'development',

-    entry: {
-        app: [
-            'react-hot-loader/patch',
-            'webpack-dev-server/client?https://' + conf.HOSTNAME + ':' + conf.PORT,
-            'webpack/hot/only-dev-server',
-        ]
-    },
+  entry: {
+    app: [
+      'react-hot-loader/patch',
+      'webpack-dev-server/client?https://' + conf.HOSTNAME + ':' + conf.PORT,
+      'webpack/hot/only-dev-server',
+    ]
+  },

-    output: {
-        path: path.join(__dirname),
-        filename: '[name].js',
-        // necessary for HMR to know where to load the hot update chunks
-        publicPath: 'https://' + conf.HOSTNAME + ':' + conf.PORT + '/'
-    },
+  output: {
+    path: path.join(__dirname),
+    filename: '[name].js',
+    // necessary for HMR to know where to load the hot update chunks
+    publicPath: 'https://' + conf.HOSTNAME + ':' + conf.PORT + '/'
+  },

-    module: {
-        rules: [{
-            test: /\.scss$/,
-            use: [{
-                loader: 'style-loader',
-                options: {
-                    sourceMap: true
-                }
-            }, {
-                loader: 'css-loader',
-                options: {
-                    sourceMap: true
-                }
-            }, {
-                loader: 'postcss-loader',
-                options: {
-                    sourceMap: true,
-                    plugins: [
-                        autoprefixer({
-                            // If we want to use the same browser list for more tools
-                            // this list should be moved to package.json
-                            // https://evilmartians.com/chronicles/autoprefixer-7-browserslist-2-released
-                            browsers: [
-                                'ie >= 11',
-                                'ie_mob >= 11',
-                                'Safari >= 10',
-                                'Android >= 4.4',
-                                'Chrome >= 44', // Retail
-                                'Samsung >= 4'
-                            ]
-                        })
-                    ]
-                }
-            }, {
-                loader: 'resolve-url-loader'
-            }, {
-                loader: 'sass-loader',
-                options: {
-                    sourceMap: true
-                }
-            }, ]
-        }, {
-            test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
-            use: [{
-                loader: 'url-loader'
-            }]
-        }, {
-            test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|woff(2)?)$/,
-            use: [{
-                loader: 'file-loader',
-                options: {
-                    name(file) {
-                        return 'public/[path][name].[ext]';
-                    },
-                },
-            }]
-        }]
-    },
-    plugins: [
-        new webpack.HotModuleReplacementPlugin(),
-    ],
-
-    devServer: {
-        host: IP,
-        port: PORT,
-        historyApiFallback: true,
-        hot: false,
-        clientLogLevel: 'info',
-        disableHostCheck: true,
-        contentBase: [
-            path.resolve(__dirname, 'public'),
-            path.resolve(__dirname, 'public', 'resources'),
-            path.resolve(__dirname, 'public', 'resources', conf.APPDIR, conf.DIST),
-            'node_modules',
-        ],
-        //watchContentBase: true,
-        overlay: {
-            warnings: true,
-            errors: true
-        },
-        headers: {
-            'Access-Control-Allow-Origin': '*',
+  module: {
+    rules: [{
+      test: /\.scss$/,
+      use: [{
+        loader: 'style-loader',
+        options: {
+          sourceMap: true
        }
+      }, {
+        loader: 'css-loader',
+        options: {
+          sourceMap: true
+        }
+      }, {
+        loader: 'postcss-loader',
+        options: {
+          sourceMap: true,
+          plugins: [
+            autoprefixer({
+              // If we want to use the same browser list for more tools
+              // this list should be moved to package.json
+              // https://evilmartians.com/chronicles/autoprefixer-7-browserslist-2-released
+              browsers: [
+                'ie >= 11',
+                'ie_mob >= 11',
+                'Safari >= 10',
+                'Android >= 4.4',
+                'Chrome >= 44', // Retail
+                'Samsung >= 4'
+              ]
+            })
+          ]
+        }
+      }, {
+        loader: 'resolve-url-loader'
+      }, {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: true
+        }
+      }, ]
+    }, {
+      test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
+      use: [{
+        loader: 'url-loader'
+      }]
+    }, {
+      test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|woff(2)?)$/,
+      use: [{
+        loader: 'file-loader',
+        options: {
+          name(file) {
+            return 'public/[path][name].[ext]';
+          },
+        },
+      }]
+    }]
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+  ],
+
+  devServer: {
+    host: IP,
+    port: PORT,
+    historyApiFallback: true,
+    hot: false,
+    clientLogLevel: 'info',
+    disableHostCheck: true,
+    contentBase: [
+      path.resolve(__dirname, 'public'),
+      path.resolve(__dirname, 'public', 'resources'),
+      path.resolve(__dirname, 'public', 'resources', conf.APPDIR, conf.DIST),
+      'node_modules',
+    ],
+    //watchContentBase: true,
+    overlay: {
+      warnings: true,
+      errors: true
    },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    }
+  },
 });

 module.exports = config;
--- a/webpack.config.prod.js
+++ b/webpack.config.prod.js
@ -17,174 +17,174 @@ const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

 let plugins = [
-    new webpack.DefinePlugin({
-        'process.env': {
-            'NODE_ENV': JSON.stringify('production')
-        }
-    }),
-    new webpack.LoaderOptionsPlugin({
-        minimize: true,
-        debug: false
-    }),
-    new ExtractTextPlugin({
-        filename: 'css/[name].css',
-        allChunks: true
-    }),
+  new webpack.DefinePlugin({
+    'process.env': {
+      'NODE_ENV': JSON.stringify('production')
+    }
+  }),
+  new webpack.LoaderOptionsPlugin({
+    minimize: true,
+    debug: false
+  }),
+  new ExtractTextPlugin({
+    filename: 'css/[name].css',
+    allChunks: true
+  }),

-    new FaviconsWebpackPlugin({
-        title: 'Webpack App',
-        logo: path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png'),
-        prefix: '/icons/',
-        emitStats: false,
-        persistentCache: true,
-        inject: false,
-        statsFilename: path.join(conf.APPDIR, conf.DIST, 'icons', 'iconstats.json'),
-        icons: {
-            android: true,
-            appleIcon: true,
-            appleStartup: true,
-            coast: true,
-            favicons: true,
-            firefox: true,
-            opengraph: true,
-            twitter: true,
-            yandex: true,
-            windows: true
-        }
-    }),
+  new FaviconsWebpackPlugin({
+    title: 'Webpack App',
+    logo: path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png'),
+    prefix: '/icons/',
+    emitStats: false,
+    persistentCache: true,
+    inject: false,
+    statsFilename: path.join(conf.APPDIR, conf.DIST, 'icons', 'iconstats.json'),
+    icons: {
+      android: true,
+      appleIcon: true,
+      appleStartup: true,
+      coast: true,
+      favicons: true,
+      firefox: true,
+      opengraph: true,
+      twitter: true,
+      yandex: true,
+      windows: true
+    }
+  }),
 ];

 // add themes favicons
 commonVariables.themes.forEach((theme) => {
-    const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
-    if (filesystem.existsSync(faviconPath)) {
-        plugins.push(new FaviconsWebpackPlugin({
-            title: 'Webpack App',
-            logo: faviconPath,
-            prefix: '/' + theme + '-icons/',
-            emitStats: false,
-            persistentCache: true,
-            inject: false,
-            statsFilename: path.join(conf.APPDIR, conf.DIST, theme + '-icons', 'iconstats.json'),
-            icons: {
-                android: true,
-                appleIcon: true,
-                appleStartup: true,
-                coast: true,
-                favicons: true,
-                firefox: true,
-                opengraph: true,
-                twitter: true,
-                yandex: true,
-                windows: true
-            }
-        }));
-    }
+  const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
+  if (filesystem.existsSync(faviconPath)) {
+    plugins.push(new FaviconsWebpackPlugin({
+      title: 'Webpack App',
+      logo: faviconPath,
+      prefix: '/' + theme + '-icons/',
+      emitStats: false,
+      persistentCache: true,
+      inject: false,
+      statsFilename: path.join(conf.APPDIR, conf.DIST, theme + '-icons', 'iconstats.json'),
+      icons: {
+        android: true,
+        appleIcon: true,
+        appleStartup: true,
+        coast: true,
+        favicons: true,
+        firefox: true,
+        opengraph: true,
+        twitter: true,
+        yandex: true,
+        windows: true
+      }
+    }));
+  }
 });

 module.exports = merge(common, {
-    mode: 'production',
-    optimization: {
-        namedModules: true, // NamedModulesPlugin()
-        splitChunks: { // CommonsChunkPlugin()
-            name: 'vendor',
-            minChunks: 2
-        },
-        noEmitOnErrors: true, // NoEmitOnErrorsPlugin
-        concatenateModules: true, //ModuleConcatenationPlugin
-        minimizer: [
-            new UglifyJSPlugin({
-                uglifyOptions: {
-                    sourceMap: false,
-                    comments: false
-                }
-            })
-        ]
+  mode: 'production',
+  optimization: {
+    namedModules: true, // NamedModulesPlugin()
+    splitChunks: { // CommonsChunkPlugin()
+      name: 'vendor',
+      minChunks: 2
    },
+    noEmitOnErrors: true, // NoEmitOnErrorsPlugin
+    concatenateModules: true, //ModuleConcatenationPlugin
+    minimizer: [
+      new UglifyJSPlugin({
+        uglifyOptions: {
+          sourceMap: false,
+          comments: false
+        }
+      })
+    ]
+  },

-    devtool: '',
+  devtool: '',

-    output: {
-        path: path.join(__dirname, conf.APPDIR, conf.DIST),
-        filename: path.join('js', '[name].js'),
-        publicPath: path.join(conf.APPDIR, conf.DIST),
-    },
+  output: {
+    path: path.join(__dirname, conf.APPDIR, conf.DIST),
+    filename: path.join('js', '[name].js'),
+    publicPath: path.join(conf.APPDIR, conf.DIST),
+  },

-    module: {
-        rules: [{
-            test: /\.s?css$/,
-            use: ExtractTextPlugin.extract({
-                fallback: "style-loader",
-                use: [{
-                    loader: 'css-loader',
-                    options: {
-                        sourceMap: false,
-                        minimize: true
-                    }
-                }, {
-                    loader: 'postcss-loader',
-                    options: {
-                        sourceMap: false,
-                        plugins: [
-                            autoprefixer({
-                                // If we want to use the same browser list for more tools
-                                // this list should be moved to package.json
-                                // https://evilmartians.com/chronicles/autoprefixer-7-browserslist-2-released
-                                browsers: [
-                                    'ie >= 11',
-                                    'ie_mob >= 11',
-                                    'Safari >= 10',
-                                    'Android >= 4.4',
-                                    'Chrome >= 44', // Retail
-                                    'Samsung >= 4'
-                                ]
-                            })
-                        ]
-                    }
-                }, {
-                    loader: 'resolve-url-loader'
-                }, {
-                    loader: 'sass-loader',
-                    options: {
-                        sourceMap: false
-                    }
-                }, ]
-            })
+  module: {
+    rules: [{
+      test: /\.s?css$/,
+      use: ExtractTextPlugin.extract({
+        fallback: "style-loader",
+        use: [{
+          loader: 'css-loader',
+          options: {
+            sourceMap: false,
+            minimize: true
+          }
        }, {
-            test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
-            use: [{
-                loader: 'file-loader',
-                options: {
-                    name: '[name].[ext]',
-                    outputPath: 'fonts/',
-                    publicPath: '../fonts/'
-                }
-            }]
+          loader: 'postcss-loader',
+          options: {
+            sourceMap: false,
+            plugins: [
+              autoprefixer({
+                // If we want to use the same browser list for more tools
+                // this list should be moved to package.json
+                // https://evilmartians.com/chronicles/autoprefixer-7-browserslist-2-released
+                browsers: [
+                  'ie >= 11',
+                  'ie_mob >= 11',
+                  'Safari >= 10',
+                  'Android >= 4.4',
+                  'Chrome >= 44', // Retail
+                  'Samsung >= 4'
+                ]
+              })
+            ]
+          }
        }, {
-            test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
-            use: [{
-                loader: 'file-loader',
-                options: {
-                    name: '[name].[ext]',
-                    outputPath: 'fonts/',
-                    publicPath: '../fonts/'
-                }
-            }]
+          loader: 'resolve-url-loader'
        }, {
-            test: /\.(png|jpg|jpeg|gif|svg)$/,
-            loader: 'file-loader',
-            options: {
-                name: '[name].[ext]',
-                outputPath: 'img/',
-                publicPath: '../img/'
-                    /*,
-                                    name(file) {
-                                        //return 'public/[path][name].[ext]';
-                                        return '[hash].[ext]';
-                                    },*/
-            },
+          loader: 'sass-loader',
+          options: {
+            sourceMap: false
+          }
        }, ]
-    },
+      })
+    }, {
+      test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
+      use: [{
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+          outputPath: 'fonts/',
+          publicPath: '../fonts/'
+        }
+      }]
+    }, {
+      test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
+      use: [{
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+          outputPath: 'fonts/',
+          publicPath: '../fonts/'
+        }
+      }]
+    }, {
+      test: /\.(png|jpg|jpeg|gif|svg)$/,
+      loader: 'file-loader',
+      options: {
+        name: '[name].[ext]',
+        outputPath: 'img/',
+        publicPath: '../img/'
+          /*,
+                          name(file) {
+                              //return 'public/[path][name].[ext]';
+                              return '[hash].[ext]';
+                          },*/
+      },
+    }, ]
+  },

-    plugins: plugins,
+  plugins: plugins,
 });
--- a/webpack.configuration.js
+++ b/webpack.configuration.js
@ -12,22 +12,22 @@ const conf = yaml.safeLoad(fs.readFileSync(path.join(__dirname, 'app/_config/web
 let themes = [];
 // add themes
 if (conf['Site\\Templates\\WebpackTemplateProvider'].THEMESDIR) {
-    const themeDir = conf['Site\\Templates\\WebpackTemplateProvider'].THEMESDIR;
-    const dir = path.resolve(__dirname, themeDir);
+  const themeDir = conf['Site\\Templates\\WebpackTemplateProvider'].THEMESDIR;
+  const dir = path.resolve(__dirname, themeDir);

-    if (filesystem.existsSync(dir)) {
-        filesystem.readdirSync(dir).forEach((file) => {
-            filePath = path.join(themeDir, file);
-            const stat = filesystem.statSync(filePath);
+  if (filesystem.existsSync(dir)) {
+    filesystem.readdirSync(dir).forEach((file) => {
+      filePath = path.join(themeDir, file);
+      const stat = filesystem.statSync(filePath);

-            if (stat && stat.isDirectory()) {
-                themes.push(filePath);
-            }
-        });
-    }
+      if (stat && stat.isDirectory()) {
+        themes.push(filePath);
+      }
+    });
+  }
 }

 module.exports = {
-    configuration: conf['Site\\Templates\\WebpackTemplateProvider'],
-    themes: themes,
+  configuration: conf['Site\\Templates\\WebpackTemplateProvider'],
+  themes: themes,
 };
				`@ -1 +0,0 @@`
				`module.exports = "../fonts/fontawesome-webfont.eot";`
				`@ -1 +0,0 @@`
				`!function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var e={};n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)\|\|Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="app/client/dist/",n(n.s=32)}({32:function(t,n){}});`