Merge pull request f-o-a-m#6 from f-o-a-m/kss

Adding automatic styleguide generation

.gitignore

@@ -1 +1,2 @@
 node_modules/*
+styleguide/

.travis.yml

@@ -2,14 +2,15 @@ language: node_js
 dist: trusty
 sudo: required
 node_js: stable
-env:
-  - PATH=$HOME/purescript:$PATH
 install:
-  - TAG=$(wget -q -O - https://github.com/purescript/purescript/releases/latest --server-response --max-redirect 0 2>&1 | sed -n -e 's/.*Location:.*tag\///p')
-  - wget -O $HOME/purescript.tar.gz https://github.com/purescript/purescript/releases/download/$TAG/linux64.tar.gz
-  - tar -xvf $HOME/purescript.tar.gz -C $HOME/
-  - chmod a+x $HOME/purescript
-  - npm install -g bower
   - npm install
 script:
-  - npm -s test
+  - npm run kss
+
+deploy:
+  provider: pages
+  skip_cleanup: true
+  github_token: $GITHUB_TOKEN # Set in travis-ci.org dashboard
+  local_dir: styleguide
+  on:
+    branch: master

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "build-css": "./node_modules/.bin/node-sass styles -o dist",
     "postinstall": "npm run build-css",
+    "kss": "npm run build-css && mkdir styleguide ; cp dist/index.css styleguide/ && ./node_modules/.bin/kss --source styles --destination styleguide --css index.css --homepage styleguide.md",
     "test": "echo \"Error: no test specified\" && exit 0"
   },
   "repository": {
@@ -20,5 +21,8 @@
   "homepage": "https://github.com/f-o-a-m/foam.css#readme",
   "dependencies": {
     "node-sass": "^4.6.0"
+  },
+  "devDependencies": {
+    "kss": "^3.0.0-beta.18"
   }
 }

styles/components/_card.scss

@@ -1,3 +1,11 @@
+// .cardContainer(@color)
+//
+// @color is the color of the card
+//
+// Markup:
+// <div class="cardContainer"><h1>hello</h1></div>
+//
+// Style guide: foam.components.cardContainer
 .cardContainer{
   @include shadow-l
   @include radius-card;
@@ -32,6 +40,15 @@
   margin-top: $d-2;
 }
 
+// .button-card
+//
+// :hover     - Highlight the button when hovered.
+// :active    - "Press" the button down when clicked.
+//
+// Markup:
+// <button class="button-card">A button</button>
+//
+// Style guide: foam.components.button-card
 .button-card{
   @include pill;
   @include shadow-l;
@@ -82,7 +99,9 @@
   margin: 1.2rem -1.2rem -1.2rem -1.2rem;
 }
 
-
+// .card-input
+//
+// Style guide: foam.card.card-input
 .card-input{
   @include pill;
   @include padding-interface;

styles/components/_topbar.scss

@@ -7,12 +7,26 @@
   right:0;
 }
 
+// .button-newCSC
+//
+// Creates button for new CSC
+//
+// Markup: <button class="button-newCSC">New CSC</button>
+//
+// Style guide: foam.components.button-newCSC
 .button-newCSC{
   @include padding-interface;
   @include pill-glass;
   @include hover-glass;
 }
 
+// .button-foam
+//
+// Creates button for showing FT balance
+//
+// Markup: <button class="button-foam">5 FT</button>
+//
+// Style guide: foam.components.button-foam
 .button-foam{
   @include padding-interface;
   @include pill-glass;

styles/styleguide.md

@@ -0,0 +1,3 @@
+# FOAM.CSS style guide
+
+Hello World