Add a new simpler grid system

I've removed the YUI grid system, it wasn't being used anywhere and I wasn't a fan of the syntax. To me implementing a grid that worked across breakpoints seemed to require a large number of classes with each viewport bracket requiring it's own class.

I've swapped it out for the onboarding page with a custom scss mixin that uses the same approach as the YUI system but uses friendlier class names and takes a mobile first approach. The idea being that you define the grid at the smallest viewport you need it and then tweak it as you need to as the viewport grows. I've used this approach before and like it a lot.

I've also trimmed out most of the options to leave us with only what we need at the moment, a two, three column and four column grid. We can add more as necessary.

```html
<!-- gives single rows on mobile, a two column grid on tablets and four columns on desktops -->
<div class="grid">
  <div class="column-tablet-one-half column-desktop-one-quarter"></div>
  <div class="column-tablet-one-half column-desktop-one-quarter"></div>
  <div class="column-tablet-one-half column-desktop-one-quarter"></div>
  <div class="column-tablet-one-half column-desktop-one-quarter"></div>
</div>
```

I also added some additional media queries to responsive.scss along the lines of `@include tablet-and-up {}`, moved file into the mixins directory and added some examples to the pattern library.
Should use `$grid-gutter: 20px !default` here so that we can set it before importing this file if we want to override it.