add additional-styles docs section

docs/_config.yml

@@ -70,15 +70,18 @@ navigation:
   - title: Browser Support
     url: browser-support.html
     icon: fab fa-chrome
-  - title: Upgrade Guide
-    url: upgrade-guide.html
-    icon: fas fa-hand-point-up
   - title: Implementations
     url: implementations.html
     icon: fas fa-bookmark
+  - title: Additional Styles
+    url: additional-styles.html
+    icon: fas fa-mortar-pestle
+  - title: Upgrade Guide
+    url: upgrade-guide.html
+    icon: fas fa-hand-point-up
   - title: FAQ
     url: faq.html
     icon: fas fa-question-circle
   - title: License
     url: license.html
-    icon: fas fa-file-alt
+    icon: fas fa-file-contract

docs/additional-styles.md

@@ -0,0 +1,67 @@
+---
+layout: page
+title: Additional Styles / Custom Skin
+---
+
+If you want to create additional styles like a company specific color for buttons, the background utility or something else you can simply create your own subversion of AdminLTE with the following SCSS template.
+
+In this example we create a custom button class called `.btn-custom-color` with an extra button style and a custom class called `.my-custom-style`.
+
+```scss
+// Bootstrap
+// ---------------------------------------------------
+@import '~bootstrap/scss/functions';
+@import '~admin-lte/build/scss/bootstrap-variables';
+
+// Custom Theme Color START
+$custom-color: #00FF00;
+$theme-colors: map-merge((
+    'custom-color': $custom-color,
+), $theme-colors);
+// Custom Theme Color END
+
+// Variables and Mixins
+// ---------------------------------------------------
+@import '~admin-lte/build/scss/variables';
+@import '~admin-lte/build/scss/mixins';
+
+@import '~bootstrap/scss/bootstrap';
+
+@import '~admin-lte/build/scss/parts/core';
+@import '~admin-lte/build/scss/parts/components';
+@import '~admin-lte/build/scss/parts/extra-components';
+@import '~admin-lte/build/scss/parts/pages';
+@import '~admin-lte/build/scss/parts/plugins';
+@import '~admin-lte/build/scss/parts/miscellaneous';
+
+// Custom Style START
+.my-custom-style {
+  background-color: $custom-color;
+  padding: .5rem 0;
+}
+// Custom Style END
+```
+{: .max-height-300}
+
+You can also create a skin on top of AdminLTE with the following SCSS template.
+
+In this example we create a custom class called `.btn-custom-color` with a extra button style.
+
+```scss
+// Bootstrap
+// ---------------------------------------------------
+@import '~bootstrap/scss/functions';
+@import '~admin-lte/build/scss/bootstrap-variables';
+@import '~bootstrap/scss/mixins';
+
+$custom-color: #00FF00;
+
+.btn-custom-color {
+    @include button-variant($custom-color, $custom-color);
+}
+```
+
+
+> ##### Warning!
+> These examples are only raw SCSS templates, you will still need a SCSS -> CSS build script to compile the SCSS to CSS!
+{: .quote-warning}