Possibility to override internal styles using mixin

README.md

@@ -231,6 +231,8 @@ Disable HTML5 URL mode. When this option parameter is enabled, style guide will
 
 Path to file that defines custom UI color overrides using SASS variables. See all possible variables [here](https://github.com/SC5/sc5-styleguide/blob/master/lib/app/sass/_styleguide_variables.scss).
 
+Internal styles could be overriden by defining new styles inside the `styleguide_custom_styles` mixin. This mixin is added to the end of the application stylesheet.
+
 <a name="option-filesConfig"></a>
 **filesConfig** (array, optional) **(Experimental feature)**
 

lib/app/sass/_styleguide_variables.scss

@@ -36,4 +36,9 @@ $header-height: 90px !default;
 $menu-height: 40px !default;
 
 $content-max-width: 68em !default;
-$mobile: "screen and (max-width: 768px)" !default;
+$mobile: "screen and (max-width: 768px)" !default;
+
+@mixin styleguide_custom_styles {
+  // This mixin is included in the end of UI stylesheet
+  // You can override any styleguide internal style here
+}

lib/app/sass/app.scss

@@ -2,6 +2,11 @@ $fa-font-path: '../assets/fonts';
 @import 'components/font-awesome/font-awesome';
 @import 'bourbon';
 
+@mixin styleguide_custom_styles {
+  // User can re-define this mixin in styleguide_custom_variables to create custom style overrides
+  // This mixin is included in the end of this file
+}
+
 @import 'styleguide_custom_variables';
 @import 'styleguide_variables';
 @import 'styleguide_mixins';
@@ -1242,3 +1247,10 @@ Styleguide 4.4
   display: initial;
   cursor: pointer;
 }
+
+// styleguide:ignore:start
+
+@include styleguide_custom_styles;
+
+// styleguide:ignore:end
+