Add KSS styleguide

Build a living styleguide and deploy it to CF.

.gitignore

@@ -2,6 +2,8 @@
 
 # compiled output
 /dist
+/dist-style
+/styleguide
 /tmp
 
 # dependencies

.travis.yml

@@ -30,6 +30,7 @@ after_success:
 
 before_deploy:
   - ng build --prod
+  - npm run styleguide
 
 deploy:
     edge: true

kss/config.json

@@ -0,0 +1,9 @@
+{
+  "source": "../src",
+  "title": "Salary Stats Style Guide",
+  "css": [
+    "styles.bundle.css"
+  ],
+  "homepage": "../kss/homepage.md",
+  "destination": "../styleguide"
+}

kss/homepage.md

@@ -0,0 +1,5 @@
+## Salary Stats
+
+Style guide generated using [KSS][1].
+
+  [1]: http://warpspire.com/kss/

manifest.yml

@@ -6,3 +6,9 @@ applications:
   memory: 64M
   path: dist
   random-route: true
+- name: salary-stats-style
+  buildpack: staticfile_buildpack
+  disk_quota: 64M
+  memory: 64M
+  path: styleguide
+  random-route: true

package.json

@@ -15,6 +15,9 @@
     "autoe2e": "cross-env PORT=$(node port.js) concurrently -k -s first -p name -n ngs,e2e \"ng serve\" \"npm run safee2e\"",
     "safee2e": "node wait.js && npm run e2e",
     "e2e": "protractor",
+    "prestyleguide": "ng build --extract-css true --output-path dist-style",
+    "styleguide": "rimraf styleguide/ && kss --config kss/config.json",
+    "poststyleguide": "cp dist-style/styles.bundle.css styleguide/",
     "reinstall": "rm -rf ./node_modules && npm install"
   },
   "private": true,
@@ -57,6 +60,7 @@
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-mocha-reporter": "^2.2.3",
+    "kss": "^3.0.0-beta.18",
     "protractor": "~5.1.0",
     "ts-node": "~2.0.0",
     "tslint": "~4.5.0",

src/styles/button.scss

@@ -0,0 +1,13 @@
+// Button
+//
+// The standard Bulma button styling.
+//
+// :hover       - Subtle hover styling.
+// .is-outlined - Switch to outline mode.
+// .is-small    - Make the button small.
+// .is-warning  - Yellow, basically.
+// .is-danger   - Red, basically.
+//
+// Markup: <button class="button is-success {{modifier_class}}">Button</button>
+//
+// Style guide: Button