diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..22877ab
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,5 @@
+js/animation.js
+js/jquery.mobile-events.min.js
+js/jquery.ripple.js
+js/misc.js
+js/prism.js
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..6598077
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,41 @@
+{
+  "extends": "eslint-config-airbnb",
+  "root": true,
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "globals": {
+    "Drupal": true,
+    "drupalSettings": true,
+    "drupalTranslations": true,
+    "domready": true,
+    "jQuery": true,
+    "_": true,
+    "matchMedia": true,
+    "Backbone": true,
+    "Modernizr": true,
+    "CKEDITOR": true
+  },
+  "rules": {
+    "consistent-return": [0],
+    "no-underscore-dangle": [0],
+    "max-nested-callbacks": [1, 3],
+    "import/no-mutable-exports": [1],
+    "no-plusplus": [1, {
+      "allowForLoopAfterthoughts": true
+    }],
+    "no-param-reassign": [0],
+    "no-prototype-builtins": [0],
+    "valid-jsdoc": [1, {
+      "prefer": {
+        "returns": "return",
+        "property": "prop"
+      },
+      "requireReturn": false
+    }],
+    "brace-style": ["error", "stroustrup"],
+    "no-unused-vars": [1]
+  }
+}
diff --git a/.sass-lint.yml b/.sass-lint.yml
new file mode 100644
index 0000000..1202fe8
--- /dev/null
+++ b/.sass-lint.yml
@@ -0,0 +1,93 @@
+options:
+  formatter: stylish
+rules:
+  # Extends
+  extends-before-mixins: 1
+  extends-before-declarations: 1
+  placeholder-in-extend: 1
+
+  # Mixins
+  mixins-before-declarations: 1
+
+  # Line Spacing
+  one-declaration-per-line: 1
+  empty-line-between-blocks: 1
+  single-line-per-selector: 1
+
+  # Disallows
+  no-attribute-selectors: 0
+  no-color-hex: 0
+  no-color-keywords: 1
+  no-color-literals: 1
+  no-combinators: 0
+  no-css-comments: 0
+  no-debug: 1
+  no-disallowed-properties: 0
+  no-duplicate-properties: 0
+  no-empty-rulesets: 1
+  no-extends: 0
+  no-ids: 0
+  no-important: 1
+  no-invalid-hex: 1
+  no-mergeable-selectors: 1
+  no-misspelled-properties: 1
+  no-qualifying-elements: 1
+  no-trailing-whitespace: 1
+  no-trailing-zero: 1
+  no-transition-all: 1
+  no-universal-selectors: 0
+  no-url-domains: 1
+  no-url-protocols: 1
+  no-vendor-prefixes: 0
+  no-warn: 1
+  property-units: 0
+
+  # Nesting
+  declarations-before-nesting: 1
+  force-attribute-nesting: 1
+  force-element-nesting: 1
+  force-pseudo-nesting: 1
+
+  # Name Formats
+  class-name-format: 1
+  function-name-format: 1
+  id-name-format: 0
+  mixin-name-format: 1
+  placeholder-name-format: 1
+  variable-name-format: 1
+
+  # Style Guide
+  attribute-quotes: 1
+  bem-depth: 0
+  border-zero: 1
+  brace-style: 1
+  clean-import-paths: 1
+  empty-args: 1
+  hex-length: 1
+  hex-notation: 1
+  indentation: 1
+  leading-zero: 0
+  max-line-length: 0
+  max-file-line-count: 0
+  nesting-depth: 1
+  property-sort-order: 1
+  pseudo-element: 0
+  quotes: 1
+  shorthand-values: 1
+  url-quotes: 1
+  variable-for-property: 1
+  zero-unit: 1
+
+  # Inner Spacing
+  space-after-comma: 0
+  space-before-colon: 1
+  space-after-colon: 1
+  space-before-brace: 1
+  space-before-bang: 1
+  space-after-bang: 1
+  space-between-parens: 1
+  space-around-operator: 1
+
+  # Final Items
+  trailing-semicolon: 1
+  final-newline: 1
diff --git a/css/code-highlight.css b/css/code-highlight.css
index 3e7eacd..a5f3489 100755
--- a/css/code-highlight.css
+++ b/css/code-highlight.css
@@ -1,6 +1,6 @@
 /* break points */
 /* mixins and functions */
-@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&subset=latin,cyrillic-ext);
+@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&subset=latin,cyrillic-ext");
 /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+apacheconf+c+bash+cpp+csharp+ruby+css-extras+git+java+json+markdown+nginx+php+php-extras+sass+scss+twig+yaml&plugins=line-numbers */
 /**
  * prism.js default theme for JavaScript, CSS and HTML
diff --git a/css/color-themes.css b/css/color-themes.css
index be8ea8b..3e9a9c2 100755
--- a/css/color-themes.css
+++ b/css/color-themes.css
@@ -57,6 +57,8 @@
     color: rgba(255, 255, 255, 0.3); }
   .primary-red .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-red .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-red #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-red #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-red .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-red .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.3); }
+  .primary-red .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-red .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-red #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-red #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-red .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-red .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.3); }
   .primary-red .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-red .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-red #header .block-search form .form-item input[type="text"]::placeholder, .primary-red #header .block-search form .form-item input[type="search"]::placeholder, .primary-red .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-red .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(255, 255, 255, 0.3); }
 
@@ -179,6 +181,8 @@
     color: rgba(255, 255, 255, 0.3); }
   .primary-pink .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-pink .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-pink #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-pink #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-pink .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-pink .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.3); }
+  .primary-pink .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-pink .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-pink #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-pink #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-pink .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-pink .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.3); }
   .primary-pink .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-pink .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-pink #header .block-search form .form-item input[type="text"]::placeholder, .primary-pink #header .block-search form .form-item input[type="search"]::placeholder, .primary-pink .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-pink .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(255, 255, 255, 0.3); }
 
@@ -301,6 +305,8 @@
     color: rgba(255, 255, 255, 0.3); }
   .primary-purple .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-purple .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-purple #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-purple #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-purple .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-purple .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.3); }
+  .primary-purple .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-purple .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-purple #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-purple #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-purple .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-purple .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.3); }
   .primary-purple .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-purple .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-purple #header .block-search form .form-item input[type="text"]::placeholder, .primary-purple #header .block-search form .form-item input[type="search"]::placeholder, .primary-purple .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-purple .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(255, 255, 255, 0.3); }
 
@@ -423,6 +429,8 @@
     color: rgba(255, 255, 255, 0.3); }
   .primary-deep-purple .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-deep-purple .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-deep-purple #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-deep-purple #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-deep-purple .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-deep-purple .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.3); }
+  .primary-deep-purple .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-deep-purple .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-deep-purple #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-deep-purple #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-deep-purple .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-deep-purple .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.3); }
   .primary-deep-purple .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-deep-purple .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-deep-purple #header .block-search form .form-item input[type="text"]::placeholder, .primary-deep-purple #header .block-search form .form-item input[type="search"]::placeholder, .primary-deep-purple .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-deep-purple .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(255, 255, 255, 0.3); }
 
@@ -545,6 +553,8 @@
     color: rgba(255, 255, 255, 0.3); }
   .primary-indigo .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-indigo .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-indigo #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-indigo #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-indigo .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-indigo .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.3); }
+  .primary-indigo .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-indigo .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-indigo #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-indigo #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-indigo .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-indigo .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.3); }
   .primary-indigo .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-indigo .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-indigo #header .block-search form .form-item input[type="text"]::placeholder, .primary-indigo #header .block-search form .form-item input[type="search"]::placeholder, .primary-indigo .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-indigo .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(255, 255, 255, 0.3); }
 
@@ -667,6 +677,8 @@
     color: rgba(0, 0, 0, 0.26); }
   .primary-blue .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-blue .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-blue #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-blue #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-blue .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-blue .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(0, 0, 0, 0.26); }
+  .primary-blue .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-blue .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-blue #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-blue #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-blue .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-blue .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(0, 0, 0, 0.26); }
   .primary-blue .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-blue .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-blue #header .block-search form .form-item input[type="text"]::placeholder, .primary-blue #header .block-search form .form-item input[type="search"]::placeholder, .primary-blue .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-blue .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(0, 0, 0, 0.26); }
 
@@ -789,6 +801,8 @@
     color: rgba(0, 0, 0, 0.26); }
   .primary-light-blue .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-light-blue .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-light-blue #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-light-blue #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-light-blue .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-light-blue .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(0, 0, 0, 0.26); }
+  .primary-light-blue .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-light-blue .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-light-blue #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-light-blue #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-light-blue .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-light-blue .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(0, 0, 0, 0.26); }
   .primary-light-blue .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-light-blue .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-light-blue #header .block-search form .form-item input[type="text"]::placeholder, .primary-light-blue #header .block-search form .form-item input[type="search"]::placeholder, .primary-light-blue .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-light-blue .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(0, 0, 0, 0.26); }
 
@@ -911,6 +925,8 @@
     color: rgba(0, 0, 0, 0.26); }
   .primary-cyan .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-cyan .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-cyan #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-cyan #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-cyan .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-cyan .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(0, 0, 0, 0.26); }
+  .primary-cyan .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-cyan .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-cyan #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-cyan #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-cyan .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-cyan .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(0, 0, 0, 0.26); }
   .primary-cyan .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-cyan .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-cyan #header .block-search form .form-item input[type="text"]::placeholder, .primary-cyan #header .block-search form .form-item input[type="search"]::placeholder, .primary-cyan .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-cyan .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(0, 0, 0, 0.26); }
 
@@ -1033,6 +1049,8 @@
     color: rgba(255, 255, 255, 0.3); }
   .primary-teal .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-teal .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-teal #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-teal #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-teal .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-teal .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.3); }
+  .primary-teal .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-teal .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-teal #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-teal #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-teal .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-teal .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.3); }
   .primary-teal .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-teal .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-teal #header .block-search form .form-item input[type="text"]::placeholder, .primary-teal #header .block-search form .form-item input[type="search"]::placeholder, .primary-teal .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-teal .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(255, 255, 255, 0.3); }
 
@@ -1155,6 +1173,8 @@
     color: rgba(255, 255, 255, 0.3); }
   .primary-green .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-green .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-green #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-green #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-green .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-green .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.3); }
+  .primary-green .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-green .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-green #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-green #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-green .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-green .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.3); }
   .primary-green .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-green .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-green #header .block-search form .form-item input[type="text"]::placeholder, .primary-green #header .block-search form .form-item input[type="search"]::placeholder, .primary-green .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-green .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(255, 255, 255, 0.3); }
 
@@ -1277,6 +1297,8 @@
     color: rgba(0, 0, 0, 0.26); }
   .primary-light-green .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-light-green .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-light-green #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-light-green #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-light-green .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-light-green .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(0, 0, 0, 0.26); }
+  .primary-light-green .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-light-green .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-light-green #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-light-green #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-light-green .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-light-green .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(0, 0, 0, 0.26); }
   .primary-light-green .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-light-green .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-light-green #header .block-search form .form-item input[type="text"]::placeholder, .primary-light-green #header .block-search form .form-item input[type="search"]::placeholder, .primary-light-green .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-light-green .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(0, 0, 0, 0.26); }
 
@@ -1399,6 +1421,8 @@
     color: rgba(0, 0, 0, 0.26); }
   .primary-lime .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-lime .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-lime #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-lime #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-lime .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-lime .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(0, 0, 0, 0.26); }
+  .primary-lime .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-lime .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-lime #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-lime #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-lime .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-lime .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(0, 0, 0, 0.26); }
   .primary-lime .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-lime .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-lime #header .block-search form .form-item input[type="text"]::placeholder, .primary-lime #header .block-search form .form-item input[type="search"]::placeholder, .primary-lime .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-lime .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(0, 0, 0, 0.26); }
 
@@ -1521,6 +1545,8 @@
     color: rgba(0, 0, 0, 0.26); }
   .primary-yellow .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-yellow .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-yellow #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-yellow #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-yellow .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-yellow .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(0, 0, 0, 0.26); }
+  .primary-yellow .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-yellow .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-yellow #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-yellow #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-yellow .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-yellow .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(0, 0, 0, 0.26); }
   .primary-yellow .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-yellow .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-yellow #header .block-search form .form-item input[type="text"]::placeholder, .primary-yellow #header .block-search form .form-item input[type="search"]::placeholder, .primary-yellow .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-yellow .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(0, 0, 0, 0.26); }
 
@@ -1643,6 +1669,8 @@
     color: rgba(0, 0, 0, 0.26); }
   .primary-amber .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-amber .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-amber #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-amber #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-amber .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-amber .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(0, 0, 0, 0.26); }
+  .primary-amber .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-amber .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-amber #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-amber #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-amber .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-amber .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(0, 0, 0, 0.26); }
   .primary-amber .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-amber .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-amber #header .block-search form .form-item input[type="text"]::placeholder, .primary-amber #header .block-search form .form-item input[type="search"]::placeholder, .primary-amber .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-amber .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(0, 0, 0, 0.26); }
 
@@ -1765,6 +1793,8 @@
     color: rgba(0, 0, 0, 0.26); }
   .primary-orange .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-orange .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-orange #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-orange #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-orange .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-orange .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(0, 0, 0, 0.26); }
+  .primary-orange .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-orange .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-orange #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-orange #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-orange .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-orange .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(0, 0, 0, 0.26); }
   .primary-orange .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-orange .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-orange #header .block-search form .form-item input[type="text"]::placeholder, .primary-orange #header .block-search form .form-item input[type="search"]::placeholder, .primary-orange .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-orange .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(0, 0, 0, 0.26); }
 
@@ -1887,6 +1917,8 @@
     color: rgba(255, 255, 255, 0.3); }
   .primary-deep-orange .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-deep-orange .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-deep-orange #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-deep-orange #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-deep-orange .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-deep-orange .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.3); }
+  .primary-deep-orange .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-deep-orange .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-deep-orange #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-deep-orange #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-deep-orange .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-deep-orange .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.3); }
   .primary-deep-orange .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-deep-orange .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-deep-orange #header .block-search form .form-item input[type="text"]::placeholder, .primary-deep-orange #header .block-search form .form-item input[type="search"]::placeholder, .primary-deep-orange .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-deep-orange .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(255, 255, 255, 0.3); }
 
@@ -2009,6 +2041,8 @@
     color: rgba(255, 255, 255, 0.3); }
   .primary-brown .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-brown .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-brown #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-brown #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-brown .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-brown .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.3); }
+  .primary-brown .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-brown .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-brown #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-brown #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-brown .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-brown .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.3); }
   .primary-brown .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-brown .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-brown #header .block-search form .form-item input[type="text"]::placeholder, .primary-brown #header .block-search form .form-item input[type="search"]::placeholder, .primary-brown .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-brown .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(255, 255, 255, 0.3); }
 
@@ -2131,6 +2165,8 @@
     color: rgba(0, 0, 0, 0.26); }
   .primary-grey .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-grey .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-grey #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-grey #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-grey .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-grey .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(0, 0, 0, 0.26); }
+  .primary-grey .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-grey .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-grey #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-grey #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-grey .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-grey .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(0, 0, 0, 0.26); }
   .primary-grey .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-grey .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-grey #header .block-search form .form-item input[type="text"]::placeholder, .primary-grey #header .block-search form .form-item input[type="search"]::placeholder, .primary-grey .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-grey .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(0, 0, 0, 0.26); }
 
@@ -2253,6 +2289,8 @@
     color: rgba(255, 255, 255, 0.3); }
   .primary-blue-grey .navbar-item.block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-blue-grey .navbar-item.block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-blue-grey #header .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-blue-grey #header .block-search form .form-item input[type="search"]:-ms-input-placeholder, .primary-blue-grey .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder, .primary-blue-grey .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.3); }
+  .primary-blue-grey .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-blue-grey .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-blue-grey #header .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-blue-grey #header .block-search form .form-item input[type="search"]::-ms-input-placeholder, .primary-blue-grey .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder, .primary-blue-grey .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.3); }
   .primary-blue-grey .navbar-item.block-search form .form-item input[type="text"]::placeholder, .primary-blue-grey .navbar-item.block-search form .form-item input[type="search"]::placeholder, .primary-blue-grey #header .block-search form .form-item input[type="text"]::placeholder, .primary-blue-grey #header .block-search form .form-item input[type="search"]::placeholder, .primary-blue-grey .card-bg-primary .block-search form .form-item input[type="text"]::placeholder, .primary-blue-grey .card-bg-primary .block-search form .form-item input[type="search"]::placeholder {
     color: rgba(255, 255, 255, 0.3); }
 
diff --git a/css/styles.css b/css/styles.css
index f5d722b..14f93c6 100755
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
-@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=latin,cyrillic);
-@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=latin,cyrillic");
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -1519,6 +1519,8 @@ tr.selected:hover {
       color: rgba(0, 0, 0, 0.26); }
     .form-item input[type="text"]:-ms-input-placeholder, .form-item input[type="email"]:-ms-input-placeholder, .form-item input[type="password"]:-ms-input-placeholder, .form-item input[type="search"]:-ms-input-placeholder, .form-item input[type="tel"]:-ms-input-placeholder, .form-item textarea:-ms-input-placeholder, .form-item select:-ms-input-placeholder {
       color: rgba(0, 0, 0, 0.26); }
+    .form-item input[type="text"]::-ms-input-placeholder, .form-item input[type="email"]::-ms-input-placeholder, .form-item input[type="password"]::-ms-input-placeholder, .form-item input[type="search"]::-ms-input-placeholder, .form-item input[type="tel"]::-ms-input-placeholder, .form-item textarea::-ms-input-placeholder, .form-item select::-ms-input-placeholder {
+      color: rgba(0, 0, 0, 0.26); }
     .form-item input[type="text"]::placeholder, .form-item input[type="email"]::placeholder, .form-item input[type="password"]::placeholder, .form-item input[type="search"]::placeholder, .form-item input[type="tel"]::placeholder, .form-item textarea::placeholder, .form-item select::placeholder {
       color: rgba(0, 0, 0, 0.26); }
   .form-item input[type="radio"], .form-item input[type="checkbox"] {
@@ -1803,7 +1805,7 @@ closing drawer by swipe
   margin: 160px auto 160px; }
 
 .header-bg-image #header {
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 64px), #607d8b url(../img/header-bg.jpg) top center;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 64px), #607d8b url(../img/header-bg.jpg) top center;
   background-size: auto, cover; }
 
 .header-bg-image #bg-video {
@@ -1820,7 +1822,7 @@ closing drawer by swipe
 
 .header-bg-image.navbar-fixed #header-bg {
   display: block;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 64px), url(../img/header-bg.jpg) top center;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 64px), url(../img/header-bg.jpg) top center;
   background-size: auto, cover;
   opacity: 1;
   top: 0;
@@ -1831,7 +1833,7 @@ closing drawer by swipe
   z-index: -1; }
 
 .header-bg-object #navbar {
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 64px); }
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 64px); }
 
 .header-bg-object #header {
   background: #607d8b; }
@@ -1889,7 +1891,7 @@ closing drawer by swipe
   right: 0;
   z-index: 1;
   height: 64px;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 64px); }
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 64px); }
 
 .main-shift-up #header {
   padding-bottom: 128px; }
@@ -2009,6 +2011,12 @@ navbar overlaying header-content (for sliders)
   .card-bg-primary .block-search form .form-item input[type="text"]:-ms-input-placeholder,
   .card-bg-primary .block-search form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.3); }
+  .navbar-item.block-search form .form-item input[type="text"]::-ms-input-placeholder, .navbar-item.block-search form .form-item input[type="search"]::-ms-input-placeholder,
+  #header .block-search form .form-item input[type="text"]::-ms-input-placeholder,
+  #header .block-search form .form-item input[type="search"]::-ms-input-placeholder,
+  .card-bg-primary .block-search form .form-item input[type="text"]::-ms-input-placeholder,
+  .card-bg-primary .block-search form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.3); }
   .navbar-item.block-search form .form-item input[type="text"]::placeholder, .navbar-item.block-search form .form-item input[type="search"]::placeholder,
   #header .block-search form .form-item input[type="text"]::placeholder,
   #header .block-search form .form-item input[type="search"]::placeholder,
@@ -2073,6 +2081,12 @@ navbar overlaying header-content (for sliders)
   .card-bg-primary .block-search.search-persistent form .form-item.focused input[type="text"]:-ms-input-placeholder,
   .card-bg-primary .block-search.search-persistent form .form-item input[type="search"]:-ms-input-placeholder {
     color: rgba(0, 0, 0, 0.26); }
+  .navbar-item.block-search.search-persistent form .form-item.focused input[type="text"]::-ms-input-placeholder, .navbar-item.block-search.search-persistent form .form-item input[type="search"]::-ms-input-placeholder,
+  #header .block-search.search-persistent form .form-item.focused input[type="text"]::-ms-input-placeholder,
+  #header .block-search.search-persistent form .form-item input[type="search"]::-ms-input-placeholder,
+  .card-bg-primary .block-search.search-persistent form .form-item.focused input[type="text"]::-ms-input-placeholder,
+  .card-bg-primary .block-search.search-persistent form .form-item input[type="search"]::-ms-input-placeholder {
+    color: rgba(0, 0, 0, 0.26); }
   .navbar-item.block-search.search-persistent form .form-item.focused input[type="text"]::placeholder, .navbar-item.block-search.search-persistent form .form-item input[type="search"]::placeholder,
   #header .block-search.search-persistent form .form-item.focused input[type="text"]::placeholder,
   #header .block-search.search-persistent form .form-item input[type="search"]::placeholder,
@@ -2092,6 +2106,8 @@ navbar overlaying header-content (for sliders)
       color: rgba(0, 0, 0, 0.26); }
     .navbar-light:not(.theme-dark) .navbar-item.block-search.search-persistent form .form-item input[type="text"]:-ms-input-placeholder, .navbar-light:not(.theme-dark) .navbar-item.block-search.search-persistent form .form-item input[type="search"]:-ms-input-placeholder {
       color: rgba(0, 0, 0, 0.26); }
+    .navbar-light:not(.theme-dark) .navbar-item.block-search.search-persistent form .form-item input[type="text"]::-ms-input-placeholder, .navbar-light:not(.theme-dark) .navbar-item.block-search.search-persistent form .form-item input[type="search"]::-ms-input-placeholder {
+      color: rgba(0, 0, 0, 0.26); }
     .navbar-light:not(.theme-dark) .navbar-item.block-search.search-persistent form .form-item input[type="text"]::placeholder, .navbar-light:not(.theme-dark) .navbar-item.block-search.search-persistent form .form-item input[type="search"]::placeholder {
       color: rgba(0, 0, 0, 0.26); }
   .navbar-light:not(.theme-dark) .navbar-item.block-search.search-persistent form .form-item.icon-left:before {
diff --git a/css/theme-dark.css b/css/theme-dark.css
index c247404..452fc7f 100755
--- a/css/theme-dark.css
+++ b/css/theme-dark.css
@@ -144,6 +144,8 @@
       color: rgba(255, 255, 255, 0.3); }
     .theme-dark .form-item input[type="text"]:-ms-input-placeholder, .theme-dark .form-item input[type="email"]:-ms-input-placeholder, .theme-dark .form-item input[type="password"]:-ms-input-placeholder, .theme-dark .form-item input[type="search"]:-ms-input-placeholder, .theme-dark .form-item input[type="tel"]:-ms-input-placeholder, .theme-dark .form-item textarea:-ms-input-placeholder, .theme-dark .form-item select:-ms-input-placeholder {
       color: rgba(255, 255, 255, 0.3); }
+    .theme-dark .form-item input[type="text"]::-ms-input-placeholder, .theme-dark .form-item input[type="email"]::-ms-input-placeholder, .theme-dark .form-item input[type="password"]::-ms-input-placeholder, .theme-dark .form-item input[type="search"]::-ms-input-placeholder, .theme-dark .form-item input[type="tel"]::-ms-input-placeholder, .theme-dark .form-item textarea::-ms-input-placeholder, .theme-dark .form-item select::-ms-input-placeholder {
+      color: rgba(255, 255, 255, 0.3); }
     .theme-dark .form-item input[type="text"]::placeholder, .theme-dark .form-item input[type="email"]::placeholder, .theme-dark .form-item input[type="password"]::placeholder, .theme-dark .form-item input[type="search"]::placeholder, .theme-dark .form-item input[type="tel"]::placeholder, .theme-dark .form-item textarea::placeholder, .theme-dark .form-item select::placeholder {
       color: rgba(255, 255, 255, 0.3); }
   .theme-dark .form-item input[type="radio"], .theme-dark .form-item input[type="checkbox"] {
@@ -191,6 +193,8 @@
       color: rgba(0, 0, 0, 0.26); }
     .theme-dark .block-search.search-persistent form .form-item.focused input[type="text"]:-ms-input-placeholder, .theme-dark .block-search.search-persistent form input[type="search"]:-ms-input-placeholder {
       color: rgba(0, 0, 0, 0.26); }
+    .theme-dark .block-search.search-persistent form .form-item.focused input[type="text"]::-ms-input-placeholder, .theme-dark .block-search.search-persistent form input[type="search"]::-ms-input-placeholder {
+      color: rgba(0, 0, 0, 0.26); }
     .theme-dark .block-search.search-persistent form .form-item.focused input[type="text"]::placeholder, .theme-dark .block-search.search-persistent form input[type="search"]::placeholder {
       color: rgba(0, 0, 0, 0.26); }
   .theme-dark .tabs ul li a, .theme-dark ul.tabs li a {
diff --git a/gulpfile.js b/gulpfile.js
index 9b073a9..0bcd193 100755
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,5 +1,7 @@
 var gulp = require('gulp');
 var sass = require('gulp-sass');
+var sasslint = require('gulp-sass-lint');
+var eslint = require('gulp-eslint');
 var changed = require('gulp-changed');
 var autoprefixer = require('gulp-autoprefixer');
 var imagemin = require('gulp-imagemin');
@@ -7,6 +9,21 @@ var imagemin = require('gulp-imagemin');
 var SASS = 'sass';
 var CSS = 'css';
 var IMG = 'img';
+var JS = 'js';
+
+gulp.task('sass-lint', function () {
+  return gulp.src(SASS + '/**/*.scss')
+    .pipe(sasslint())
+    .pipe(sasslint.format())
+    .pipe(sasslint.failOnError());
+});
+
+gulp.task('js-lint', function () {
+  return gulp.src(JS + '/**/*.js')
+    .pipe(eslint())
+    .pipe(eslint.format())
+    .pipe(eslint.failAfterError());
+});
 
 gulp.task('sass', function () {
   return gulp.src(SASS + '/**/*.scss')
@@ -37,4 +54,13 @@ gulp.task('watch', function() {
   gulp.watch(SASS + '/**/*.scss', ['sass', 'autoprefixer', 'imagemin']);
 });
 
+gulp.task('build-lint', ['sass-lint', 'sass', 'autoprefixer', 'imagemin', 'js-lint']);
+
+gulp.task('watch-lint', function() {
+  gulp.watch(SASS + '/**/*.scss', ['sass-lint', 'sass', 'autoprefixer', 'imagemin']);
+  gulp.watch(JS + '/**/*.js', ['js-lint']);
+});
+
 gulp.task('default', ['build', 'watch']);
+
+//gulp.task('default', ['build-lint', 'watch-lint']);
diff --git a/js/animation.js b/js/animation.js
index 6e5a059..8420004 100755
--- a/js/animation.js
+++ b/js/animation.js
@@ -1,5 +1,5 @@
 (function (window, $) {
-  $(function() {
+  $(function () {
     
   });
-})(window, jQuery);
+}(window, jQuery));
diff --git a/js/misc.js b/js/misc.js
index 5790215..73c7add 100755
--- a/js/misc.js
+++ b/js/misc.js
@@ -1,11 +1,11 @@
 (function ($) {
-  $(document).ready(function() {
+  $(document).ready(function () {
 
     //form-item focused
-    $('.form-item > *').focus(function() {
+    $('.form-item > *').focus(function () {
       $(this).parent().addClass('focused');
     });
-    $('.form-item > *').blur(function() {
+    $('.form-item > *').blur(function () {
       $(this).parent().removeClass('focused');
     });
 
@@ -17,7 +17,7 @@
     var navbar = $('.navbar-fixed #navbar');
     var headerBgHeight = headerHeight - 192;
 
-    $(document).scroll(function(e){
+    $(document).scroll(function (e) {
       var scrollPercent = (headerBgHeight - window.scrollY) / headerBgHeight;
       if (scrollPercent >= 0) {
         headerBg.css('opacity', scrollPercent);
@@ -37,28 +37,28 @@
     });
 
     // drawer
-    $('#navbar-menu-toggle').click(function(e) {
+    $('#navbar-menu-toggle').click(function (e) {
       $('body').addClass('drawer-open');
       e.stopPropagation();
       e.preventDefault();
     });
 
-    $('#drawer-overlay').click(function(e) {
+    $('#drawer-overlay').click(function (e) {
       $('body').removeClass('drawer-open');
     });
 
-    $('#drawer-menu-close').click(function(e) {
+    $('#drawer-menu-close').click(function (e) {
       $('body').removeClass('drawer-open');
       e.stopPropagation();
       e.preventDefault();
     });
 
     // jquery touch events https://github.com/benmajor/jQuery-Touch-Events
-    $('#drawer').swipeleft(function() {
+    $('#drawer').swipeleft(function () {
       $('body').removeClass('drawer-open');
     });
 
-    $('#drawer-overlay').swipeleft(function() {
+    $('#drawer-overlay').swipeleft(function () {
       $('body').removeClass('drawer-open');
     });
 
@@ -77,7 +77,7 @@
       }
     }
 
-    $('a[href^="#"]:not([href="#"])').on('click', function(e) {
+    $('a[href^="#"]:not([href="#"])').on('click', function (e) {
       e.preventDefault();
       var target = this.hash;
       var $target = $(target);
@@ -94,7 +94,7 @@
     });
 
     var pathname = window.location.pathname;
-    $('a[href^="' + pathname + '#"]').on('click', function(e) {
+    $('a[href^="' + pathname + '#"]').on('click', function (e) {
       e.preventDefault();
       var target = this.hash;
       var $target = $(target);
@@ -111,21 +111,21 @@
     });
 
     // collapsible panels
-    $('.collapsible-toggle').click(function() {
+    $('.collapsible-toggle').click(function () {
       var target = '#'.concat($(this).attr('data-target'));
       $(target).slideToggle('fast');
       $(this).toggleClass('expanded');
     });
 
     // tootips
-    $('.tooltip').hover(function() {
+    $('.tooltip').hover(function () {
       $(this).addClass('tooltip-expanded');
     }, function() {
       $(this).removeClass('tooltip-expanded');
     });
 
     // dropdown menus
-    $('.menu-dropdown-toggle').click(function(e) {
+    $('.menu-dropdown-toggle').click(function (e) {
       $(this).removeClass('tooltip-expanded');
       $(this).find('.tooltip').removeClass('tooltip-expanded');
       var target = '#'.concat($(this).attr('data-target'));
@@ -135,9 +135,9 @@
       e.preventDefault();
     });
 
-    $(document).click(function(){
+    $(document).click(function () {
       $('.menu-dropdown').slideUp('fast');
     });
 
   });
-})(jQuery);
+}(jQuery));
diff --git a/package.json b/package.json
old mode 100755
new mode 100644
index 7dffae4..be3b552
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "Material base",
-  "version": "1.3",
+  "name": "material_base",
+  "version": "1.4.0",
   "description": "Drupal theme.",
   "main": "index.js",
   "scripts": {
@@ -8,16 +8,22 @@
   },
   "repository": {
     "type": "git",
-    "url" : "https://github.com/i-amdroid/material_base.git"
+    "url": "git+https://github.com/i-amdroid/material_base.git"
   },
   "author": "iamdroid",
   "license": "ISC",
-  "dependencies": {
+  "devDependencies": {
     "breakpoint-sass": "^2.7.1",
-    "gulp": "^3.9.0",
-    "gulp-autoprefixer": "^3.1.0",
-    "gulp-changed": "^1.3.0",
-    "gulp-imagemin": "^3.1.1",
-    "gulp-sass": "^4.0.1"
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.7.0",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^5.0.0",
+    "gulp-changed": "^3.2.0",
+    "gulp-eslint": "^4.0.2",
+    "gulp-imagemin": "^4.1.0",
+    "gulp-sass": "^4.0.1",
+    "gulp-sass-lint": "^1.3.4"
   }
 }
diff --git a/sass/_modules.scss b/sass/_modules.scss
index 69d89c8..fabd5e4 100755
--- a/sass/_modules.scss
+++ b/sass/_modules.scss
@@ -9,8 +9,8 @@
  */
 
 /* fonts */
-@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=latin,cyrillic);
-@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=latin,cyrillic');
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 /* helpful classes */
 .clearfix {
diff --git a/sass/code-highlight.scss b/sass/code-highlight.scss
index 77e5259..70d8faa 100755
--- a/sass/code-highlight.scss
+++ b/sass/code-highlight.scss
@@ -4,7 +4,7 @@
 @import "variables";
 @import "breakpoint";
 
-@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&subset=latin,cyrillic-ext);
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&subset=latin,cyrillic-ext');
 
 /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+apacheconf+c+bash+cpp+csharp+ruby+css-extras+git+java+json+markdown+nginx+php+php-extras+sass+scss+twig+yaml&plugins=line-numbers */
 /**
diff --git a/starterkits/material_cascade/.eslintrc.json b/starterkits/material_cascade/.eslintrc.json
new file mode 100644
index 0000000..6598077
--- /dev/null
+++ b/starterkits/material_cascade/.eslintrc.json
@@ -0,0 +1,41 @@
+{
+  "extends": "eslint-config-airbnb",
+  "root": true,
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "globals": {
+    "Drupal": true,
+    "drupalSettings": true,
+    "drupalTranslations": true,
+    "domready": true,
+    "jQuery": true,
+    "_": true,
+    "matchMedia": true,
+    "Backbone": true,
+    "Modernizr": true,
+    "CKEDITOR": true
+  },
+  "rules": {
+    "consistent-return": [0],
+    "no-underscore-dangle": [0],
+    "max-nested-callbacks": [1, 3],
+    "import/no-mutable-exports": [1],
+    "no-plusplus": [1, {
+      "allowForLoopAfterthoughts": true
+    }],
+    "no-param-reassign": [0],
+    "no-prototype-builtins": [0],
+    "valid-jsdoc": [1, {
+      "prefer": {
+        "returns": "return",
+        "property": "prop"
+      },
+      "requireReturn": false
+    }],
+    "brace-style": ["error", "stroustrup"],
+    "no-unused-vars": [1]
+  }
+}
diff --git a/starterkits/material_cascade/.sass-lint.yml b/starterkits/material_cascade/.sass-lint.yml
new file mode 100644
index 0000000..1202fe8
--- /dev/null
+++ b/starterkits/material_cascade/.sass-lint.yml
@@ -0,0 +1,93 @@
+options:
+  formatter: stylish
+rules:
+  # Extends
+  extends-before-mixins: 1
+  extends-before-declarations: 1
+  placeholder-in-extend: 1
+
+  # Mixins
+  mixins-before-declarations: 1
+
+  # Line Spacing
+  one-declaration-per-line: 1
+  empty-line-between-blocks: 1
+  single-line-per-selector: 1
+
+  # Disallows
+  no-attribute-selectors: 0
+  no-color-hex: 0
+  no-color-keywords: 1
+  no-color-literals: 1
+  no-combinators: 0
+  no-css-comments: 0
+  no-debug: 1
+  no-disallowed-properties: 0
+  no-duplicate-properties: 0
+  no-empty-rulesets: 1
+  no-extends: 0
+  no-ids: 0
+  no-important: 1
+  no-invalid-hex: 1
+  no-mergeable-selectors: 1
+  no-misspelled-properties: 1
+  no-qualifying-elements: 1
+  no-trailing-whitespace: 1
+  no-trailing-zero: 1
+  no-transition-all: 1
+  no-universal-selectors: 0
+  no-url-domains: 1
+  no-url-protocols: 1
+  no-vendor-prefixes: 0
+  no-warn: 1
+  property-units: 0
+
+  # Nesting
+  declarations-before-nesting: 1
+  force-attribute-nesting: 1
+  force-element-nesting: 1
+  force-pseudo-nesting: 1
+
+  # Name Formats
+  class-name-format: 1
+  function-name-format: 1
+  id-name-format: 0
+  mixin-name-format: 1
+  placeholder-name-format: 1
+  variable-name-format: 1
+
+  # Style Guide
+  attribute-quotes: 1
+  bem-depth: 0
+  border-zero: 1
+  brace-style: 1
+  clean-import-paths: 1
+  empty-args: 1
+  hex-length: 1
+  hex-notation: 1
+  indentation: 1
+  leading-zero: 0
+  max-line-length: 0
+  max-file-line-count: 0
+  nesting-depth: 1
+  property-sort-order: 1
+  pseudo-element: 0
+  quotes: 1
+  shorthand-values: 1
+  url-quotes: 1
+  variable-for-property: 1
+  zero-unit: 1
+
+  # Inner Spacing
+  space-after-comma: 0
+  space-before-colon: 1
+  space-after-colon: 1
+  space-before-brace: 1
+  space-before-bang: 1
+  space-after-bang: 1
+  space-between-parens: 1
+  space-around-operator: 1
+
+  # Final Items
+  trailing-semicolon: 1
+  final-newline: 1
diff --git a/starterkits/material_cascade/gulpfile.js b/starterkits/material_cascade/gulpfile.js
index 9b073a9..0bcd193 100755
--- a/starterkits/material_cascade/gulpfile.js
+++ b/starterkits/material_cascade/gulpfile.js
@@ -1,5 +1,7 @@
 var gulp = require('gulp');
 var sass = require('gulp-sass');
+var sasslint = require('gulp-sass-lint');
+var eslint = require('gulp-eslint');
 var changed = require('gulp-changed');
 var autoprefixer = require('gulp-autoprefixer');
 var imagemin = require('gulp-imagemin');
@@ -7,6 +9,21 @@ var imagemin = require('gulp-imagemin');
 var SASS = 'sass';
 var CSS = 'css';
 var IMG = 'img';
+var JS = 'js';
+
+gulp.task('sass-lint', function () {
+  return gulp.src(SASS + '/**/*.scss')
+    .pipe(sasslint())
+    .pipe(sasslint.format())
+    .pipe(sasslint.failOnError());
+});
+
+gulp.task('js-lint', function () {
+  return gulp.src(JS + '/**/*.js')
+    .pipe(eslint())
+    .pipe(eslint.format())
+    .pipe(eslint.failAfterError());
+});
 
 gulp.task('sass', function () {
   return gulp.src(SASS + '/**/*.scss')
@@ -37,4 +54,13 @@ gulp.task('watch', function() {
   gulp.watch(SASS + '/**/*.scss', ['sass', 'autoprefixer', 'imagemin']);
 });
 
+gulp.task('build-lint', ['sass-lint', 'sass', 'autoprefixer', 'imagemin', 'js-lint']);
+
+gulp.task('watch-lint', function() {
+  gulp.watch(SASS + '/**/*.scss', ['sass-lint', 'sass', 'autoprefixer', 'imagemin']);
+  gulp.watch(JS + '/**/*.js', ['js-lint']);
+});
+
 gulp.task('default', ['build', 'watch']);
+
+//gulp.task('default', ['build-lint', 'watch-lint']);
diff --git a/starterkits/material_cascade/js/custom.js b/starterkits/material_cascade/js/custom.js
index 80b27ef..6f23880 100644
--- a/starterkits/material_cascade/js/custom.js
+++ b/starterkits/material_cascade/js/custom.js
@@ -1,7 +1,7 @@
 (function ($) {
-  $(document).ready(function() {
+  $(document).ready(function () {
 
     // put your code here
 
   }); 
-})(jQuery);
\ No newline at end of file
+}(jQuery));
diff --git a/starterkits/material_cascade/package.json b/starterkits/material_cascade/package.json
index e46fe6d..f5f8bb6 100644
--- a/starterkits/material_cascade/package.json
+++ b/starterkits/material_cascade/package.json
@@ -8,12 +8,18 @@
   },
   "author": "iamdroid",
   "license": "ISC",
-  "dependencies": {
+  "devDependencies": {
     "breakpoint-sass": "^2.7.1",
-    "gulp": "^3.9.0",
-    "gulp-autoprefixer": "^3.1.0",
-    "gulp-changed": "^1.3.0",
-    "gulp-imagemin": "^3.1.1",
-    "gulp-sass": "^4.0.1"
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.7.0",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^5.0.0",
+    "gulp-changed": "^3.2.0",
+    "gulp-eslint": "^4.0.2",
+    "gulp-imagemin": "^4.1.0",
+    "gulp-sass": "^4.0.1",
+    "gulp-sass-lint": "^1.3.4"
   }
 }
diff --git a/starterkits/material_compile/.eslintrc.json b/starterkits/material_compile/.eslintrc.json
new file mode 100644
index 0000000..6598077
--- /dev/null
+++ b/starterkits/material_compile/.eslintrc.json
@@ -0,0 +1,41 @@
+{
+  "extends": "eslint-config-airbnb",
+  "root": true,
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "globals": {
+    "Drupal": true,
+    "drupalSettings": true,
+    "drupalTranslations": true,
+    "domready": true,
+    "jQuery": true,
+    "_": true,
+    "matchMedia": true,
+    "Backbone": true,
+    "Modernizr": true,
+    "CKEDITOR": true
+  },
+  "rules": {
+    "consistent-return": [0],
+    "no-underscore-dangle": [0],
+    "max-nested-callbacks": [1, 3],
+    "import/no-mutable-exports": [1],
+    "no-plusplus": [1, {
+      "allowForLoopAfterthoughts": true
+    }],
+    "no-param-reassign": [0],
+    "no-prototype-builtins": [0],
+    "valid-jsdoc": [1, {
+      "prefer": {
+        "returns": "return",
+        "property": "prop"
+      },
+      "requireReturn": false
+    }],
+    "brace-style": ["error", "stroustrup"],
+    "no-unused-vars": [1]
+  }
+}
diff --git a/starterkits/material_compile/.sass-lint.yml b/starterkits/material_compile/.sass-lint.yml
new file mode 100644
index 0000000..1202fe8
--- /dev/null
+++ b/starterkits/material_compile/.sass-lint.yml
@@ -0,0 +1,93 @@
+options:
+  formatter: stylish
+rules:
+  # Extends
+  extends-before-mixins: 1
+  extends-before-declarations: 1
+  placeholder-in-extend: 1
+
+  # Mixins
+  mixins-before-declarations: 1
+
+  # Line Spacing
+  one-declaration-per-line: 1
+  empty-line-between-blocks: 1
+  single-line-per-selector: 1
+
+  # Disallows
+  no-attribute-selectors: 0
+  no-color-hex: 0
+  no-color-keywords: 1
+  no-color-literals: 1
+  no-combinators: 0
+  no-css-comments: 0
+  no-debug: 1
+  no-disallowed-properties: 0
+  no-duplicate-properties: 0
+  no-empty-rulesets: 1
+  no-extends: 0
+  no-ids: 0
+  no-important: 1
+  no-invalid-hex: 1
+  no-mergeable-selectors: 1
+  no-misspelled-properties: 1
+  no-qualifying-elements: 1
+  no-trailing-whitespace: 1
+  no-trailing-zero: 1
+  no-transition-all: 1
+  no-universal-selectors: 0
+  no-url-domains: 1
+  no-url-protocols: 1
+  no-vendor-prefixes: 0
+  no-warn: 1
+  property-units: 0
+
+  # Nesting
+  declarations-before-nesting: 1
+  force-attribute-nesting: 1
+  force-element-nesting: 1
+  force-pseudo-nesting: 1
+
+  # Name Formats
+  class-name-format: 1
+  function-name-format: 1
+  id-name-format: 0
+  mixin-name-format: 1
+  placeholder-name-format: 1
+  variable-name-format: 1
+
+  # Style Guide
+  attribute-quotes: 1
+  bem-depth: 0
+  border-zero: 1
+  brace-style: 1
+  clean-import-paths: 1
+  empty-args: 1
+  hex-length: 1
+  hex-notation: 1
+  indentation: 1
+  leading-zero: 0
+  max-line-length: 0
+  max-file-line-count: 0
+  nesting-depth: 1
+  property-sort-order: 1
+  pseudo-element: 0
+  quotes: 1
+  shorthand-values: 1
+  url-quotes: 1
+  variable-for-property: 1
+  zero-unit: 1
+
+  # Inner Spacing
+  space-after-comma: 0
+  space-before-colon: 1
+  space-after-colon: 1
+  space-before-brace: 1
+  space-before-bang: 1
+  space-after-bang: 1
+  space-between-parens: 1
+  space-around-operator: 1
+
+  # Final Items
+  trailing-semicolon: 1
+  final-newline: 1
diff --git a/starterkits/material_compile/gulpfile.js b/starterkits/material_compile/gulpfile.js
index 9b073a9..0bcd193 100755
--- a/starterkits/material_compile/gulpfile.js
+++ b/starterkits/material_compile/gulpfile.js
@@ -1,5 +1,7 @@
 var gulp = require('gulp');
 var sass = require('gulp-sass');
+var sasslint = require('gulp-sass-lint');
+var eslint = require('gulp-eslint');
 var changed = require('gulp-changed');
 var autoprefixer = require('gulp-autoprefixer');
 var imagemin = require('gulp-imagemin');
@@ -7,6 +9,21 @@ var imagemin = require('gulp-imagemin');
 var SASS = 'sass';
 var CSS = 'css';
 var IMG = 'img';
+var JS = 'js';
+
+gulp.task('sass-lint', function () {
+  return gulp.src(SASS + '/**/*.scss')
+    .pipe(sasslint())
+    .pipe(sasslint.format())
+    .pipe(sasslint.failOnError());
+});
+
+gulp.task('js-lint', function () {
+  return gulp.src(JS + '/**/*.js')
+    .pipe(eslint())
+    .pipe(eslint.format())
+    .pipe(eslint.failAfterError());
+});
 
 gulp.task('sass', function () {
   return gulp.src(SASS + '/**/*.scss')
@@ -37,4 +54,13 @@ gulp.task('watch', function() {
   gulp.watch(SASS + '/**/*.scss', ['sass', 'autoprefixer', 'imagemin']);
 });
 
+gulp.task('build-lint', ['sass-lint', 'sass', 'autoprefixer', 'imagemin', 'js-lint']);
+
+gulp.task('watch-lint', function() {
+  gulp.watch(SASS + '/**/*.scss', ['sass-lint', 'sass', 'autoprefixer', 'imagemin']);
+  gulp.watch(JS + '/**/*.js', ['js-lint']);
+});
+
 gulp.task('default', ['build', 'watch']);
+
+//gulp.task('default', ['build-lint', 'watch-lint']);
diff --git a/starterkits/material_compile/js/custom.js b/starterkits/material_compile/js/custom.js
index 80b27ef..6f23880 100644
--- a/starterkits/material_compile/js/custom.js
+++ b/starterkits/material_compile/js/custom.js
@@ -1,7 +1,7 @@
 (function ($) {
-  $(document).ready(function() {
+  $(document).ready(function () {
 
     // put your code here
 
   }); 
-})(jQuery);
\ No newline at end of file
+}(jQuery));
diff --git a/starterkits/material_compile/package.json b/starterkits/material_compile/package.json
index e46fe6d..f5f8bb6 100644
--- a/starterkits/material_compile/package.json
+++ b/starterkits/material_compile/package.json
@@ -8,12 +8,18 @@
   },
   "author": "iamdroid",
   "license": "ISC",
-  "dependencies": {
+  "devDependencies": {
     "breakpoint-sass": "^2.7.1",
-    "gulp": "^3.9.0",
-    "gulp-autoprefixer": "^3.1.0",
-    "gulp-changed": "^1.3.0",
-    "gulp-imagemin": "^3.1.1",
-    "gulp-sass": "^4.0.1"
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.7.0",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^5.0.0",
+    "gulp-changed": "^3.2.0",
+    "gulp-eslint": "^4.0.2",
+    "gulp-imagemin": "^4.1.0",
+    "gulp-sass": "^4.0.1",
+    "gulp-sass-lint": "^1.3.4"
   }
 }