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)

That's a tad too small :) We could play with it later, but all calculations are made based on the default `rem-calc` value, which is 16px by default. Setting the base font size to 14px makes it a bit more familiar. I would go for the pixels for now.