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.
Ugh, I just noticed this is on the *container*, too. It's not even the first column that's shifted, it's the whole container, isn't it? This is mixed into the `.grid` class, yeah? I feel like a `&:first-child` selector and defining the gutters by using the `@content` in the `grid-setup` would be much cleaner. It would keep all the gutter related stuff in one place and make it non-global. But maybe I'm missing something.