fix(KSS docs): Implemented KSS docs hosted on github from docs folder

chore/chore.config.js

@@ -25,7 +25,7 @@ module.exports = (function () {
         app = 'app',
         assets = 'assets';
 
-    var styleguideFolder = 'sc5-styleguide';
+    var styleguideFolder = 'docs';
     var styleguideCopies = [
         {
             src: [

chore/gulp/tasks/sc5-styleguide.js

@@ -28,6 +28,7 @@ var autoprefixer = require('gulp-autoprefixer');
 var config = require(path.join('..','..','chore.config'));
 
 var sc5Folder = 'sc5-styleguide';
+var destFolder = 'docs';
 var defaultConfig = {
         srcFolder: [path.join(config.dist,'**','*.scss', config.src,'**','*.scss')],
         generateSrc:[path.join(config.src,'sc5-styleguide','*.scss')],
@@ -38,7 +39,7 @@ var defaultConfig = {
             , path.join('node_modules','font-awesome','css','font-awesome.min.css')
             , path.join('node_modules','ionicons','css','ionicons.min.css')
         ],
-        destFolder: path.join(sc5Folder),
+        destFolder: path.join(destFolder),
         sassOptions : {
             indentWidth: 4,
             outputStyle: 'expanded',
@@ -65,8 +66,8 @@ var defaultConfig = {
                         '<script src="../node_modules/ionicons/dist/css/ionicons.min.css"></script>',
             */
             server: true,
-            rootPath: sc5Folder,
-            overviewPath: path.join('README.md'),
+            rootPath: destFolder,
+            overviewPath: path.join('src','sc5-styleguide', 'SC5-README.md'),
             port: 3500
 
         }
@@ -99,6 +100,7 @@ gulp.task('styleguide:init', function () {
 
 gulp.task('styleguide:generate', ['styleguide:copy'], function (done) {
     helper.log('Generate components from ' + styleguideConfig.generateSrc);
+    console.log('DEST:', styleguideConfig.destFolder)
     return gulp.src(styleguideConfig.generateSrc)
         .pipe(styleguide.generate(styleguideConfig.styleguideOptions))
         .pipe(gulp.dest(styleguideConfig.destFolder), done);
@@ -134,4 +136,4 @@ gulp.task('styleguide:copy',  function(done) {
         return done();
     }
 
-});
+});

docs/css/_styleguide_custom_variables.css

@@ -0,0 +1,7 @@
+/* This file will be overwritten by styleguide:generate task if user specifies custom UI colors */
+/* This file should always exists since it is importendin app.scss */
+
+@define-mixin styleguide_custom_styles {
+  /* User can re-define this mixin to create custom style overrides */
+  /* This mixin is included in the end of the application stylesheet */
+}

docs/css/_styleguide_mixins.css

@@ -0,0 +1,23 @@
+@import '_styleguide_variables.css';
+/* TODO: it does not understand viribales from imports */
+/* styleguide:ignore:start */
+
+@define-mixin reset {
+  display: block;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+@custom-media --mobile screen and (max-width: 768px);
+
+/* We need to denite fonts separatedly to every element since we do not want to pollute previews */
+/* with inherited styles */
+@define-mixin default-font {
+  font-family: $primary-font;
+  font-size: 14px;
+  line-height: 1.45;
+  color: #222;
+  font-weight: 400;
+}
+/* styleguide:ignore:end */

docs/css/_styleguide_variables.css

@@ -0,0 +1,113 @@
+/* Main color definitions */
+$primary-color: #1C3849 !default;
+$secondary-color: #E4E4E4 !default;
+$tertiary-color: #F7FCF1 !default;
+
+/* Button and link colors */
+$primary-action-color: #EB7F00 !default;
+$default-action-color: #1695A3 !default;
+$action-color-change: 5% !default;
+
+/* Navigation */
+$header-text-color: #FFFFFF !default;
+$navigation-arrows-visible: false;
+$header-background-color: $primary-color !default;
+$nav-background-color: $primary-color !default;
+
+$nav-button-color: $primary-color !default;
+$nav-button-text-color: color($default-action-color blackness(10%)) !default;
+$nav-button-ref-color: $secondary-color !default;
+$active-nav-button-color: $default-action-color !default;
+$active-nav-button-text-color: #FFFFFF !default;
+$active-nav-button-ref-color: #FFFFFF !default;
+
+$nav-item-color: $secondary-color !default;
+$nav-item-text-color: $default-action-color !default;
+$nav-item-ref-color: color($default-action-color blackness(10%)) !default;
+
+/* Header */
+$section-header-color: $primary-color !default;
+$section-header-ref-color: #FFFFFF !default;
+$section-header-text-color: $secondary-color !default;
+$section-header-source-text-color: rgba($secondary-color, 0.6) !default;
+$active-section-header-color: color($primary-color lightness(17%));
+$active-section-header-ref-color: $section-header-ref-color !default;
+$active-section-header-text-color: $section-header-text-color !default;
+$active-section-header-source-text-color: rgba($primary-color, 0.6) !default;
+$main-section-header-source-text-color: $secondary-color !default;
+
+/* Fonts */
+$primary-font: Helvetica, Arial, sans-serif !default;
+$secondary-font: Helvetica, Arial, sans-serif !default;
+
+$min-content-margin: 13px !default;
+$content-margin: 30px !default;
+
+/* Misc */
+$designer-tool-width: 30% !default;
+$designer-tool-width-mobile: 90% !default;
+$header-height: 70px !default;
+$menu-height: 40px !default;
+$sub-menu-height: 30px !default;
+$wrapper-vertical-padding: 60px !default;
+
+$content-max-width: 68em !default;
+
+/* Temporary declaration of variables in native CSS syntax */
+:root {
+/* Main color definitions */
+--primary-color: #1C3849 !default;
+--secondary-color: #E4E4E4 !default;
+--tertiary-color: #F7FCF1 !default;
+
+/* Button and link colors */
+--primary-action-color: #EB7F00 !default;
+--default-action-color: #1695A3 !default;
+--action-color-change: 5% !default;
+
+/* Navigation */
+--header-text-color: #FFFFFF !default;
+--navigation-arrows-visible: false;
+--header-background-color: $primary-color !default;
+--nav-background-color: $primary-color !default;
+
+--nav-button-color: $primary-color !default;
+--nav-button-text-color: color($default-action-color blackness(10%)) !default;
+--nav-button-ref-color: $secondary-color !default;
+--active-nav-button-color: $default-action-color !default;
+--active-nav-button-text-color: #FFFFFF !default;
+--active-nav-button-ref-color: #FFFFFF !default;
+
+--nav-item-color: $secondary-color !default;
+--nav-item-text-color: $default-action-color !default;
+--nav-item-ref-color: color($default-action-color blackness(10%)) !default;
+
+/* Header */
+--section-header-color: $primary-color !default;
+--section-header-ref-color: #FFFFFF !default;
+--section-header-text-color: $secondary-color !default;
+--section-header-source-text-color: rgba($secondary-color, 0.6) !default;
+--active-section-header-color: color($primary-color lightness(17%));
+--active-section-header-ref-color: $section-header-ref-color !default;
+--active-section-header-text-color: $section-header-text-color !default;
+--active-section-header-source-text-color: rgba($primary-color, 0.6) !default;
+--main-section-header-source-text-color: $secondary-color !default;
+
+/* Fonts */
+--primary-font: Helvetica, Arial, sans-serif !default;
+--secondary-font: Helvetica, Arial, sans-serif !default;
+
+--min-content-margin: 13px !default;
+--content-margin: 30px !default;
+
+/* Misc */
+--designer-tool-width: 30% !default;
+--designer-tool-width-mobile: 90% !default;
+--header-height: 70px !default;
+--menu-height: 40px !default;
+--sub-menu-height: 30px !default;
+--wrapper-vertical-padding: 60px !default;
+
+--content-max-width: 68em !default;
+}
+