alphagov/fco-services-node — pull request #31 by dsingleton (2014-12-09 15:13:10+00:00)
Title: Make application CSS maintainable

This replaces the the single line `application.css` (taken from GOV.UK) with a maintainable SCSS file, which implements only the things it needs, which are taken from the [govuk_frontend_toolkit](https://github.com/alphagov/govuk_frontend_toolkit), or [elements](http://govuk-elements.herokuapp.com/). This can be modified easily in the future.

It's not intended to be an exact replica of the original styling, but to be a close approximation that has the same behaviour. The original styles were GOV.UK specific and often doesn't match with the recommendations we give to services, so i've effectively reimplemented it using services best practice, while trying to maintain the spirit of the design.

In order to use `frontend_toolkit` i've had to add a SCSS compilation process as part of `./build`, as the app didn't do that originally.

**This adds**
- SCSS compilation process
- Improved documentation.
- A new application CSS file

**This intentionally doesn't deal with**
- That generated assets (templates, css files) have to be commited to the repo, rather than created during build or deploy. I'm going to create an issue to track that separately
- Making the build process less painful. I've been running the node sass command locally, as i don't want to re-install `node_modules` each time I make a CSS change. Again, i'm going to create an issue on the repo to track that and recommend the use of formal build system like Grunt/Gulp.
- I've also spotted that print.css from `govuk_template` is 404ing, which i'll fix in a follow up PR.

**Screenshots**

Before:
![start-before](https://cloud.githubusercontent.com/assets/63201/5359468/95b710c8-7fb5-11e4-88d5-7d205c337d41.png)
After:
![start-after](https://cloud.githubusercontent.com/assets/63201/5359469/95bbf1d8-7fb5-11e4-84e1-3e9d493479ef.png)

Before:
![confirm-before](https://cloud.githubusercontent.com/assets/63201/5359465/95af6f08-7fb5-11e4-9b17-a723daf93505.png)
After:
![confirm-after](https://cloud.githubusercontent.com/assets/63201/5359470/95bcb974-7fb5-11e4-8e35-aca00a96e6d9.png)

Before:
![done-before](https://cloud.githubusercontent.com/assets/63201/5359467/95b6a048-7fb5-11e4-8624-892aa13e1196.png)
After:
![done-after](https://cloud.githubusercontent.com/assets/63201/5359466/95b0ddde-7fb5-11e4-914c-48358bbb08c3.png)