Complete TBG frontender task

.gitignore

@@ -1 +1,3 @@
 node_modules
+*.swp
+

README.md

@@ -1,25 +1,15 @@
 # Frontender Task
 
-This repo contains a lo-fi, half built, unstlyed, ES6 JS app. Your task is to complete the project to match the mock ups below.
+Hey :)
 
-To complete you'll need to:
+* Tested down to ie11 on browser. 
 
-1. Fork this repo and commit your work into the fork. Once you are complete, create a pull request back into this repo.
-2. Create JS classes for the `Comments` section of the app. Use the `Event` section as a template. Vanilla JS.
-3. Create CSS for the page. Do not use an existing framework, keep it light weight. Think about effiecency.
+* Looks ok down to 320px on mobile - if you remove the extra comment nesting I've included to demonstrate the ability to render comments at at depth - which isn't included on the mockups. If I was to work on this further, I'd decrement the padding that offsets the comment boxes, proportional to the depth of nesting.
 
+* I've used sass because I don't like searching through long stylesheets, and I prefer to nest media queries rather than having to wrap the repeated classname. I've avoided the use of other scss features in order to keep parity with writing css.
 
-## Getting started
+* There is some repetition of 'theme' styles such as background colour, text size, text colour - but subclassing by either adding 'atomic style' classes or duplicating classes further down the stylesheet would reduce readibility to save only a few lines.
 
-```
-$ npm install
-$ npm run dev
-```
+* Autoprefixing, minimizing, use of shorthands for css is always something I post process.
 
-Open [http://localhost:8080/](http://localhost:8080/)
-
-## Mock ups
-
-![desktop](https://raw.githubusercontent.com/thebeansgroup/frontender-task_vanilla/master/mockup_desktop.png)
-
-![mobile](https://raw.githubusercontent.com/thebeansgroup/frontender-task_vanilla/master/mockup_mobile.png)
+* Ideally, I'd probably work out a scale for type, and tokenize these values, either to be interpolated from scss to css or using custom properties in the browser. This lends itself to starting from a design system rather than standalone page, where the overhead in effort doesn't necessarily make it worthwhile,

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "description": "TBG Frontender task",
   "scripts": {
+    "build": "webpack",
     "start": "npm run dev",
     "dev": "webpack-dev-server --watch"
   },
@@ -11,11 +12,17 @@
     "url": "https://github.com/thebeansgroup/frontender-task_vanilla"
   },
   "author": "sam",
-  "dependencies": {
-  },
   "devDependencies": {
+    "autoprefixer": "6.5.1",
     "babel-core": "^5.5.8",
     "babel-loader": "^5.1.4",
+    "css-loader": "^0.24.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "node-sass": "4.14.0",
+    "postcss-loader": "^1.1.0",
+    "sass-loader": "^4.0.2",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.6.2",
     "webpack": "^1.9.11",
     "webpack-dev-server": "^1.9.0"
   }