Add styleguide generator

assets/css/partials/_tc-buttons.scss

@@ -25,6 +25,12 @@ a:hover {
   text-decoration: none;
 }
 
+// The default, primary topcoder button.
+//
+// :hover - Dark blue hover.
+// :disabled - 30% opacity applied
+//
+// Styleguide 2.0.0
 a.tc-btn, button.tc-btn {
   height: 40px;
   padding: 0 15px;

assets/css/partials/_tc-colors.scss

@@ -1,25 +1,93 @@
-// TOPCODER Brand palette
+// Colors
+//
+// These colors make up the Topcoder brand palette.
+//
+// Styleguide 1.0.0
+
+// Main colors
+//
+// $primary - Primary color
+// $primary-dark - Primary color darkened by 20%
+// $primary-light - Primary color lightened by 70%
+// $primary-lighter - Primary color lightened by 90%
+//
+// markup:
+// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+//
+// Styleguide 1.1
 $primary: #0096FF;
 $primary-dark: #097DCE;
+// TODO: use only darkened/lightened version
 $primary-dark2: darken($primary, 20%);
 $primary-light: #85CCFF;
 $primary-light2: lighten($primary, 70%);
 $primary-lighter: #F2FAFF;
 $primary-lighter2: lighten($primary, 90%);
 
+// Error colors
+//
+// $error - Error color
+// $error-dark - Error color darkened by ?%
+// $error-light - Error color lightened by ?%
+// $error-lighter - Error color lightened by ?%
+//
+// markup:
+// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+//
+// Styleguide 1.2
 $error: #F31D3D;
 $error-dark: #C70E2A;
 $error-light: #FCBBC5;
 $error-lighter: #FEE8EC;
 
+// Success colors
+//
+// $success - Success color
+// $success-dark - Success color darkened by ?%
+// $success-light - Success color lightened by ?%
+// $success-lighter - Success color lightened by ?%
+//
+// markup:
+// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+//
+// Styleguide 1.3
 $success: #5BC921;
 $success-dark: #42A30F;
 $success-light: #CEEFBC;
 $success-lighter: #EFFAE9;
 
+// Grays
+//
+// Various levels of gray used across the site
+//
+// Styleguide 1.4
+
+// Accent Grays
+//
+// $accent-gray - Gray
+// $accent-gray-dark - Darkened gray
+//
+// markup:
+// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+//
+// Styleguide 1.4.1
 $accent-gray: #A3A3AE;
 $accent-gray-dark: #394146;
 
+// Gray Palette
+//
+// $gray-darkest - Darkest gray
+// $gray-darker - Darker gray
+// $gray-dark - Dark gray
+// $gray - Gray
+// $gray-light - Light gray
+// $gray-lighter - Lighter gray
+// $gray-lightest - Lightest gray
+//
+// markup:
+// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+//
+// Styleguide 1.4.2
 $black: #000;
 $white: #fff;
 $gray-darkest: #3D3D3D;
@@ -30,12 +98,35 @@ $gray-light: #F0F0F0;
 $gray-lighter: #F6F6F6;
 $gray-lightest: #FCFCFC;
 
+// Ranks
+//
+// $level-5 - Level 5
+// $level-4 - Level 4
+// $level-3 - Level 3
+// $level-2 - Level 2
+// $level-1 - Level 1
+//
+// markup:
+// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+//
+// Styleguide 1.5
 $level-5: #EF3A3A;
 $level-4: #FCD617;
 $level-3: #616BD5;
 $level-2: #69C329;
 $level-1: #9D9FA0;
 
+// Tracks
+//
+// $design - Design
+// $data_science - Data Science
+// $develop - Software Development
+// $copilot - Copilot
+//
+// markup:
+// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+//
+// Styleguide 1.6
 $design: #21B2F1;
 $data_science: #FC9A00;
 $develop: #05C14F;

gulpfile.js

@@ -8,6 +8,7 @@ var browserSync  = require('browser-sync');
 var histFallback = require('connect-history-api-fallback');
 var merge        = require('merge-stream');
 var RevAll       = require('gulp-rev-all');
+var styleguide   = require('sc5-styleguide');
 var awspublishRouter = require('gulp-awspublish-router');
 
 
@@ -43,6 +44,39 @@ gulp.task('jade', ['clean-html'], function() {
     .pipe(gulp.dest(config.temp));
 });
 
+gulp.task('styleguide:generate', function() {
+  log('Generating styleguide.');
+
+  var outputDirectory = 'styleguide';
+
+  return gulp
+    .src(config.assets + 'css/partials/*.scss')
+    .pipe(styleguide.generate({
+      title: 'Topcoder Styleguide',
+      server: true,
+      port: 3132,
+      rootPath: outputDirectory
+    }))
+    .pipe(gulp.dest(outputDirectory));
+});
+
+gulp.task('styleguide:applystyles', function() {
+  return gulp
+    src(config.assets + 'css/partials/_tc-styles.scss')
+    .pipe($.sass({
+      errLogToConsole: true
+    }))
+    .pipe(styleguide.applyStyles())
+    .pipe(gulp.dest(outputDirectory))
+});
+
+gulp.task('styleguide', ['styleguide:generate', 'styleguide:applystyles']);
+
+gulp.task('watch-styleguide', ['styleguide'], function() {
+  // Start watching changes and update styleguide whenever changes are detected
+  gulp.watch(config.assets + 'css/partials/*.scss', ['styleguide']);
+});
+
 gulp.task('styles', ['clean-styles'], function() {
   log('Compiling Sass --> CSS');
   var assetPrefix = envConfig.CONSTANTS.ASSET_PREFIX.length ? envConfig.CONSTANTS.ASSET_PREFIX : '/';

package.json

@@ -78,6 +78,7 @@
     "phantomjs": "^1.9.17",
     "protractor-html-screenshot-reporter": "0.0.21",
     "protractor-linkuisref-locator": "^1.1.2",
+    "sc5-styleguide": "^0.3.39",
     "sinon": "^1.15.3",
     "sinon-chai": "^2.8.0",
     "wiredep": "^2.2.2",

styleguide/_reset.scss

@@ -0,0 +1,47 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}