Tweak layout component

* Decrease base font size
* Tweak widths / heights / sizes for the sidebar elements
* Add some extra properties to allow external customisation

For example in Canvas it turns this
![screen shot 2014-10-08 at 12 34 24](https://cloud.githubusercontent.com/assets/1321353/4558348/24da4e30-4edf-11e4-96bf-219e5ab43573.png)

Into this
![screen shot 2014-10-08 at 12 32 37](https://cloud.githubusercontent.com/assets/1321353/4558351/2b6829d4-4edf-11e4-94b0-36b845fb5536.png)

Do you think it's the same if we use `$column-gutter / 2` directly for the paddings? Because I think that it's very rare that you want to change just the specific padding of the sidebar. I guess every padding is somewhat correlated to the other.