Made separate repository for UI kit

.gitignore

@@ -10,3 +10,4 @@
 /silverstripe-cache
 yarn-error\.log
 package-lock.json
+/app/client

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
++ /app/client/src/index.html UI demo page
-+ yarn
++ /app/client/src/html HTML templates to build UI demo
-
-### 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
 
 ### Commands:
 

app/client/dist/fonts/fontawesome-webfont.eot

@@ -1 +0,0 @@
-module.exports = "../fonts/fontawesome-webfont.eot";

app/client/dist/fonts/fontawesome-webfont.svg

@@ -1 +0,0 @@
-module.exports = "../fonts/fontawesome-webfont.svg";

app/client/dist/fonts/fontawesome-webfont.ttf

@@ -1 +0,0 @@
-module.exports = "../fonts/fontawesome-webfont.ttf";

app/client/dist/fonts/fontawesome-webfont.woff

@@ -1 +0,0 @@
-module.exports = "../fonts/fontawesome-webfont.woff";

app/client/dist/fonts/fontawesome-webfont.woff2

@@ -1 +0,0 @@
-module.exports = "../fonts/fontawesome-webfont.woff2";

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"]}}

app/client/dist/icons/manifest.json

@@ -1,6 +1,6 @@
 {
-  "name": "ss-webpack-boilerplate",
+  "name": "Webpack App",
-  "short_name": "ss-webpack-boilerplate",
+  "short_name": "Webpack App",
   "description": null,
   "dir": "auto",
   "lang": "en-US",

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",

app/client/dist/img/fontawesome-webfont.svg

@@ -1 +0,0 @@
-module.exports = "../fonts/fontawesome-webfont.svg";

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){}});

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){}});

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 = '::;::';

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;

app/client/src/js/_events.js

@@ -16,4 +16,5 @@ module.exports = {
   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',
 };

app/client/src/js/_main.js

@@ -178,8 +178,13 @@ const MainUI = (($) => {
         e.preventDefault();
         const el = e.currentTarget;
         const $el = $(e.currentTarget);
+        const target = $el.data('target') || $el.attr('href');
 
-                ScrollTo(el, $el.attr('data-target'));
+        if ($(target).length) {
+          ScrollTo(el, target);
+        } else {
+          console.log(`[ScrollTo] Undefined target: ${  target}`);
+        }
       });
 
       // load external fonts
@@ -187,7 +192,7 @@ const MainUI = (($) => {
         $.getScript('//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', () => {
           const fonts = [];
 
-                    $('[data-extfont]').each(function(i, el) {
+          $('[data-extfont]').each((i, el) => {
             fonts[i] = $(el).attr('data-extfont');
           });
 

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
+// element col paddings
-#Header {
+.col-block {
-    position: relative;
+    padding: $grid-gutter-height / 4;
-    padding-top: $grid-gutter-height / 2;
+}
-    padding-bottom: 1rem;
 
-    @media (min-width: map-get($grid-breakpoints, "lg")) {
+// rewrite btn opacity on hover
-        padding-top: 1rem;
+.btn {
-        padding-bottom: 0;
+    &:hover,
+    &:focus {
+        opacity: 1;
     }
 }
 
-#Navigation {
+// SS-messages
-    position: fixed;
+.message {
-    top: 0;
+    @extend .alert;
-    left: 0;
-    width: 100%;
-    z-index: 10;
 
-    @media (min-width: map-get($grid-breakpoints, "lg")) {
+    @extend .alert-info;
-        position: relative;
-        margin-top: 1rem;
 }
+
+.message.required,
+.message.error {
+    @extend .alert;
+
+    @extend .alert-danger;
 }

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: $footer-size + $footer-bar-size + $grid-gutter-height / 2;
-        padding-bottom: 2rem;
+
+        //padding-top: $grid-gutter-height;
+
     }
 
-    .site-footer {
+    .footer {
-        height: 2rem;
+        height: $footer-size + $footer-bar-size + $grid-gutter-height / 2;
-        margin-top: -2rem;
+        margin-top: -($footer-size + $footer-bar-size + $grid-gutter-height / 2);
     }
 }
 
-// element col paddings
+// site blocks (elements)
-.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;
-}
-
 .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 {
+// stick navbar to top using mobile layout
-    background: #dedede;
+/*#Header {
-    padding: .2rem .5rem;
+    position: relative;
-    margin: .2rem;
+    padding-top: $grid-gutter-height / 2;
-    color: #212529;
+    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;
+        }
+    }
 }

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 {

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

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",

webpack.config.common.js

@@ -17,6 +17,7 @@ const modules = [
   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')
 ];