Html templating+css extraction

README.md

@@ -114,23 +114,19 @@ How to use this template to create a basic Frontend Application:
     - list all selectors used: https://github.com/davidtheclark/list-selectors
  - [x] (^) Madge?
  - [x] (^) Manual in Docs
- - [ ] HTML template example
+ - [..] (^) HTML template example
    - webpack/lodash style? https://github.com/emaphp/underscore-template-loader
    - handlebars?
- - [ ] (^) Githooks
- - [ ] (^) Base CSS Style for all apps
- - [ ] Styleguide
+   - [ ] Components (javascript methods that return compiled html, has params for template variables)
+ - [ ] (^) Styleguide
     - Page in docsite
     - Examples: http://styleguides.io/examples.html
       - http://codeforamerica.clearleft.com/#
     - Fractal? https://github.com/adamlindqvist/fractal-webpack-plugin
- - [ ] CSS Frameworks
+ - [ ] (^) Base CSS Style for all apps
+ - [ ] (^) CSS Framework
    - [ ] Tailwind - integrates with javascript
-   - Fork of this Repo with different directories for each?
-     - [ ] bulma https://bulma.io/documentation/overview/start/
-     - [ ] Bootstrap?
-     - [ ] Foundation?
-     - [ ] Material Design?
+ - [ ] (^) Githooks
  - [ ] (^) Configuration File
  - [ ] (^) If running in development -> console errors/warnings appear in UI bubble
  - [..] Helpers
@@ -142,15 +138,22 @@ How to use this template to create a basic Frontend Application:
     - https://github.com/pa11y/pa11y
     - ASLint
     - https://www.24a11y.com/2017/reacts-accessibility-code-linter/
- - [ ] (^) Basic UI Framework (other repos?)
+ - [ ] Basic UI Framework (other repos?)
     - [ ] Backbone?
     - [ ] Vue?
     - [ ] React?
     - [ ] Aurelia
+  - [ ] Fork of this Repo with different directories for each css framework?
+    - [ ] bulma https://bulma.io/documentation/overview/start/
+    - [ ] Bootstrap?
+    - [ ] Foundation?
+    - [ ] Material Design?
  - [ ] (-) Mock API requests on localhost
     - Contract testing? https://docs.pact.io/
     - OpenAPI validation of mocks? https://bitbucket.org/atlassian/swagger-mock-validator/src/master/
  - [ ] (-) production configuration for webpack
+    - Improve build speed in develop https://webpack.js.org/guides/build-performance/
+    - Build caching https://webpack.js.org/guides/caching/
     - Minimize?
     - No Warnings? No output in tests?
     - CSS Generated to File and included at top of HTML

README.setup.md

@@ -48,4 +48,5 @@ because this is more than is needed to develop a working app or even write basic
 out to a separate npm script: `npm run doc-image` so it can be run when someone actually installs the dependencies
 
 Install madge with `npm install -g madge` and install graphviz with `brew install graphviz` or
-`port install graphviz` (for OSX).
+`port install graphviz` (for OSX). Then run `npm run doc-image` in the repo and add the created image from
+`docs/image/dependency.png` and commit to update the docsite.