diff --git a/.eslintignore b/.eslintignore
index 86b811fae..b860a9fb7 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,10 +1 @@
-.idea/
-*.css
-*.opts
-*.scss
-*.snap
-*.svg
-*.sh
-*.md
-node_modules/**
-*.png
+!/.storybook
diff --git a/.storybook/config.js b/.storybook/config.js
index 035d56567..81b8791bf 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,5 +1,5 @@
-import { addDecorator, configure } from '@storybook/react';
 import { withA11y } from '@storybook/addon-a11y';
+import { addDecorator, configure } from '@storybook/react';
 
 addDecorator(withA11y);
 
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index c7cabe7fc..541669a86 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -1,10 +1,8 @@
-const path = require('path');
-
 module.exports = function({ config }) {
     config.module.rules.push({
         test: /\.stories\.js?$/,
         loaders: [require.resolve('@storybook/source-loader')],
-        enforce: 'pre',
+        enforce: 'pre'
     });
     return config;
 };
diff --git a/.stylelintrc b/.stylelintrc
new file mode 100644
index 000000000..54e4676fa
--- /dev/null
+++ b/.stylelintrc
@@ -0,0 +1,6 @@
+{
+    "extends": ["stylelint-prettier/recommended"],
+    "rules": {
+        "prettier/prettier": [true, {"singleQuote": true, "tabWidth": 4}]
+    }
+}
diff --git a/.stylelintrc.yml b/.stylelintrc.yml
deleted file mode 100644
index 543cf62e0..000000000
--- a/.stylelintrc.yml
+++ /dev/null
@@ -1,30 +0,0 @@
-  rules:
-    block-closing-brace-empty-line-before: never
-    block-no-empty: true
-    block-opening-brace-space-before: always
-    color-no-invalid-hex: true
-    declaration-bang-space-before: always
-    declaration-block-trailing-semicolon: always
-    declaration-colon-space-after: always
-    declaration-colon-space-before: never
-    declaration-property-value-blacklist: [ { '/^outline$/': 'none' }]
-    font-family-no-duplicate-names: true
-    indentation: 4
-    keyframe-declaration-no-important: true
-    length-zero-no-unit: true
-    max-empty-lines: 2
-    no-duplicate-selectors: true
-    no-empty-source: true
-    no-eol-whitespace: true
-    no-extra-semicolons: true
-    number-leading-zero: always
-    number-no-trailing-zeros: true
-    property-case: lower
-    selector-list-comma-space-after: always-single-line
-    selector-list-comma-space-before: never
-    selector-pseudo-class-no-unknown: true
-    selector-pseudo-element-case: lower
-    selector-pseudo-element-colon-notation: single
-    string-no-newline: true
-    unit-case: lower
-    unit-no-unknown: true
diff --git a/config/jest/jest.config.js b/config/jest/jest.config.js
index c0e679b76..9c7d293b5 100644
--- a/config/jest/jest.config.js
+++ b/config/jest/jest.config.js
@@ -1,11 +1,11 @@
 module.exports = {
-    'rootDir': '../../src/',
-    'verbose': true,
-    'testURL': 'http://localhost/',
-    'testMatch': ['**/*.test.js'],
-    'setupFiles': ['../config/jest/setup.js'],
-    'moduleFileExtensions': ['js', 'json', 'jsx', 'css', 'node'],
-    'moduleNameMapper': {
+    rootDir: '../../src/',
+    verbose: true,
+    testURL: 'http://localhost/',
+    testMatch: ['**/*.test.js'],
+    setupFiles: ['../config/jest/setup.js'],
+    moduleFileExtensions: ['js', 'json', 'jsx', 'css', 'node'],
+    moduleNameMapper: {
         '^.+\\.(css)$': 'babel-jest'
     }
 };
diff --git a/package-lock.json b/package-lock.json
index 9beb3b4da..f0b172c69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9009,6 +9009,12 @@
       "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
@@ -9551,7 +9557,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -9572,12 +9579,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -9592,17 +9601,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -9719,7 +9731,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -9731,6 +9744,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -9745,6 +9759,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -9752,12 +9767,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -9776,6 +9793,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -9856,7 +9874,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -9868,6 +9887,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -9953,7 +9973,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -9989,6 +10010,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -10008,6 +10030,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -10051,12 +10074,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -16541,6 +16566,15 @@
       "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
       "dev": true
     },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
     "pretty-bytes": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
@@ -21040,6 +21074,21 @@
         }
       }
     },
+    "stylelint-config-prettier": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-8.0.0.tgz",
+      "integrity": "sha512-C1FpThYJ7Y8omangeNngmp30PlO6uh3Au2b5w4Xw4xBTZy8aTx/R1AXcP9Ik0DJqINk7F7rwaKWqOLU/g7laGg==",
+      "dev": true
+    },
+    "stylelint-prettier": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/stylelint-prettier/-/stylelint-prettier-1.1.2.tgz",
+      "integrity": "sha512-8QZ+EtBpMCXYB6cY0hNE3aCDKMySIx4Q8/malLaqgU/KXXa6Cj2KK8ulG1AJvUMD5XSSP8rOotqaCzR/BW6qAA==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
     "sugarss": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
diff --git a/package.json b/package.json
index 8e7031ad7..ca6ed8643 100644
--- a/package.json
+++ b/package.json
@@ -15,22 +15,20 @@
     "build-doc": "node scripts/build.js && cp build/index.html build/404.html",
     "build:copy-files": "cp -rf package.json README.md NOTICE.txt LICENSE.txt CHANGELOG.md lib",
     "build:index": "babel-node devtools/buildIndexFiles.js",
-    "build:lint:fix": "npm run build:lint -- --fix",
-    "build:lint": "eslint 'src/**' --ext .js,.jsx --env browser,node",
     "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel src --out-dir lib --ignore \"src/**/*.spec.js\",\"src/**/*.test.js\",\"src/**/*.Component.js\",\"src/_playground/*\",\"src/**/*.stories.js\"",
     "build": "npm run build:index && rm -rf lib && npm run build:cjs",
-    "config:lint": "eslint 'config/**' --ext .js,.jsx --env browser,node",
     "deploy": "gh-pages -d build",
-    "devtools:lint": "eslint 'devtools/**' --ext .js,.jsx --env browser,node",
     "docs:dev": "FUNDAMENTAL_REACT_PLAYGROUND=true npm start",
     "dry-run": "npm run build && npm run build:copy-files && npm publish lib --dry-run",
-    "lint:fix": "npm run build:lint:fix  && npm run scripts:lint:fix && npm run config:lint:fix",
+    "lint": "npm run lint:code && npm run lint:style",
+    "lint:fix": "npm run lint:code:fix && npm run lint:style:fix",
+    "lint:code": "eslint . --ext .js,.jsx",
+    "lint:code:fix": "npm run lint:code -- --fix",
+    "lint:style": "stylelint \"src/**/*.scss\" \"src/**/*.css\"",
+    "lint:style:fix": "npm run lint:style -- --fix",
     "lint:pre-commit": "printf \"running pre-commit lint...\"  && npm run lint && printf \"done!\n\"",
-    "lint": "npm run build:lint && npm run scripts:lint && npm run config:lint && npm run devtools:lint && npm run style:lint",
     "release:create": "create-release",
     "release": "./scripts/publish-release.sh",
-    "scripts:lint:fix": "npm run scripts:lint -- --fix",
-    "scripts:lint": "eslint 'scripts/**' --ext .js,.jsx --env browser,node",
     "size": "npm run build && size-limit",
     "size:debug": "npm run build && size-limit --why",
     "start": "npm run build && node scripts/start.js",
@@ -38,7 +36,6 @@
     "std-version": "standard-version -m \"chore(release): version %s build ${TRAVIS_BUILD_NUMBER} [ci skip]\"",
     "storybook": "start-storybook -p 12123",
     "storybook:ci": "npm run storybook -- --ci --quiet",
-    "style:lint": "stylelint 'src/**/*.scss' 'src/**/*.css'",
     "test:coverage:watch": "npm run test:coverage -- --watch",
     "test:coverage": "npm run test:dev -- --coverage",
     "test:coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js || echo -e \"Coveralls failed.\"",
@@ -130,6 +127,7 @@
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "4.0.1",
     "pre-commit": "^1.2.2",
+    "prettier": "^1.19.1",
     "react": "^16.8.0",
     "react-dev-utils": "^7.0.5",
     "react-dom": "^16.8.0",
@@ -149,6 +147,8 @@
     "start-server-and-test": "^1.10.6",
     "style-loader": "1.0.0",
     "stylelint": "^12.0.0",
+    "stylelint-config-prettier": "^8.0.0",
+    "stylelint-prettier": "^1.1.2",
     "terser-webpack-plugin": "2.0.1",
     "tocbot": "^4.5.0",
     "url-loader": "2.1.0",
diff --git a/src/_playground/_content.scss b/src/_playground/_content.scss
index 3d0e14470..8fc72c3a9 100644
--- a/src/_playground/_content.scss
+++ b/src/_playground/_content.scss
@@ -9,7 +9,7 @@
     padding-top: $menu-height + 25px;
 
     &__header,
-    .frDocs-markdown>h1 {
+    .frDocs-markdown > h1 {
         margin: 0 0 12px;
         font-size: 2.2rem;
         line-height: 1;
@@ -20,7 +20,7 @@
     }
 
     &__description,
-    .frDocs-markdown>p {
+    .frDocs-markdown > p {
         margin-bottom: 1.5rem;
         font-size: 1rem;
         font-weight: 300;
@@ -58,7 +58,7 @@
     }
 
     &__tile-background {
-        background: #F3F4F5;
+        background: #f3f4f5;
         transition: background-color 0.25s;
     }
 
@@ -69,7 +69,7 @@
     &__separator {
         display: block;
         margin: 2rem 0;
-        border-bottom: 1px solid #E3E3E3;
+        border-bottom: 1px solid #e3e3e3;
     }
 
     &__docsText {
diff --git a/src/_playground/_nav.scss b/src/_playground/_nav.scss
index bab033f12..c11f1aa7f 100644
--- a/src/_playground/_nav.scss
+++ b/src/_playground/_nav.scss
@@ -28,7 +28,7 @@
     color: #fff;
 
     &:hover {
-        color: #32363A;
+        color: #32363a;
     }
 }
 
diff --git a/src/_playground/_properties.scss b/src/_playground/_properties.scss
index 300c2ffab..45d3d2b66 100644
--- a/src/_playground/_properties.scss
+++ b/src/_playground/_properties.scss
@@ -1,7 +1,6 @@
 @import '_variables.scss';
 
 .fd-table {
-
     &.property-table {
         border: 0;
 
@@ -14,8 +13,8 @@
         }
 
         tbody {
-            >tr {
-                >td {
+            > tr {
+                > td {
                     &:first-child {
                         font-weight: bold;
                     }
@@ -25,11 +24,11 @@
 
         thead,
         tbody {
-            >tr {
+            > tr {
                 vertical-align: top;
 
-                >th,
-                >td {
+                > th,
+                > td {
                     width: 20%;
                     padding-top: 4px;
                     padding-bottom: 4px;
@@ -44,7 +43,7 @@
                     }
 
                     &.fd-table__cell {
-                        >p {
+                        > p {
                             margin: 0;
                         }
                     }
diff --git a/src/_playground/_sidebar.scss b/src/_playground/_sidebar.scss
index eea114be0..ee3a8eef3 100644
--- a/src/_playground/_sidebar.scss
+++ b/src/_playground/_sidebar.scss
@@ -1,12 +1,11 @@
 @import '_variables.scss';
 
-
 .frDocs-Sidebar {
     padding-top: $menu-height;
     color: #21262c;
     min-width: $nav-width;
     width: $nav-width;
-    background-color: #EDEFF0;
+    background-color: #edeff0;
     display: flex;
     flex-direction: column;
     transition: 0.3s margin ease-in-out, 0.3s box-shadow ease-in-out;
diff --git a/src/_playground/_toc.scss b/src/_playground/_toc.scss
index e1d1e73c0..a0943d4de 100644
--- a/src/_playground/_toc.scss
+++ b/src/_playground/_toc.scss
@@ -21,11 +21,11 @@
 }
 
 a.toc-link {
-    color: #0A6ED1;
+    color: #0a6ed1;
 
     &:hover,
     &:focus {
-        color: #085CAF;
+        color: #085caf;
     }
 }
 
@@ -63,11 +63,11 @@ a.toc-link {
     }
 
     a.toc-link {
-        color: #32363A;
+        color: #32363a;
 
         &:hover,
         &:focus {
-            color: #32363A;
+            color: #32363a;
         }
     }
 
@@ -90,7 +90,7 @@ a.toc-link {
         padding: 0;
         margin: -1px;
         overflow: hidden;
-        clip: rect(0,0,0,0);
+        clip: rect(0, 0, 0, 0);
         border: 0;
     }
 }
diff --git a/src/_playground/_variables.scss b/src/_playground/_variables.scss
index f049ae78c..61a082b3b 100644
--- a/src/_playground/_variables.scss
+++ b/src/_playground/_variables.scss
@@ -2,8 +2,7 @@ $breakpoint-lg: 1280px;
 $breakpoint-md: 1024px;
 $breakpoint-sm: 600px;
 $menu-height: 50px;
-$shell-color: #354A5F;
+$shell-color: #354a5f;
 $library-color: #61dafb;
 $nav-width: 265px;
 $menu-spacing: 20px;
-
diff --git a/src/utils/WithStyles/customStylesTest.css b/src/utils/WithStyles/customStylesTest.css
index 011e84e50..1f365f1ba 100644
--- a/src/utils/WithStyles/customStylesTest.css
+++ b/src/utils/WithStyles/customStylesTest.css
@@ -1,17 +1,54 @@
-.fd-action-bar, .fd-alert,
-.fd-button, .fd-badge, .fd-breadcrumb, .fd-button-group,
-.fd-counter, .fd-calendar, .fd-checkbox,
-.fd-fieldset, .fd-fieldset__legend, .fd-form-group, .fd-form-input, .fd-form-item, .fd-form-label, .fd-form-message, .fd-form-select,
-.fd-label, .fd-status-label,
-.fd-identifier, .fd-inline-help, .fd-input, .fd-input-group, .fd-input-group__input,
-.fd-layout-grid, .fd-link, .fd-list-group, .fd-localization-editor,
-.fd-menu, .fd-modal, .fd-multi-input,
+.fd-action-bar,
+.fd-alert,
+.fd-button,
+.fd-badge,
+.fd-breadcrumb,
+.fd-button-group,
+.fd-counter,
+.fd-calendar,
+.fd-checkbox,
+.fd-fieldset,
+.fd-fieldset__legend,
+.fd-form-group,
+.fd-form-input,
+.fd-form-item,
+.fd-form-label,
+.fd-form-message,
+.fd-form-select,
+.fd-label,
+.fd-status-label,
+.fd-identifier,
+.fd-inline-help,
+.fd-input,
+.fd-input-group,
+.fd-input-group__input,
+.fd-layout-grid,
+.fd-link,
+.fd-list-group,
+.fd-localization-editor,
+.fd-menu,
+.fd-modal,
+.fd-multi-input,
 .fd-overlay,
-.fd-pagination, .fd-panel, .fd-popover, .fd-product-tile,
-.fd-shellbar, .fd-side-nav,
-.fd-table, .fd-table__header, .fd-table__row, .fd-table__cell,
-.fd-tabs__item, .fd-table__link, .fd-textarea,
-.fd-tabs, .fd-tile, .fd-time, .fd-toggle, .fd-token, .fd-tree,
+.fd-pagination,
+.fd-panel,
+.fd-popover,
+.fd-product-tile,
+.fd-shellbar,
+.fd-side-nav,
+.fd-table,
+.fd-table__header,
+.fd-table__row,
+.fd-table__cell,
+.fd-tabs__item,
+.fd-table__link,
+.fd-textarea,
+.fd-tabs,
+.fd-tile,
+.fd-time,
+.fd-toggle,
+.fd-token,
+.fd-tree,
 .sap-icon--cart {
     background-color: hotpink;
     color: purple;