hypothesis/h — pull request #1289 by aron (2014-07-08 14:59:23+00:00)
Title: [WIP] Pattern library first run

Hey all, for a first step towards getting this pattern library up I went ahead and started with the form elements to act as an example of how this could work.

I also tweaked the styles of the form elements, and wanted to start a discussion around this now. Some main points:

* Form fields now permanently have labels and space for hints/help etc.
* Everything is a little larger has a little more space around it to let things breath.
* Buttons no longer have the gloss when hovered, I found this to large a change for a hover state, and was looking a little dated.
* Disabled button now looks disabled.
* Errors have states and styles but I'm working on them, especially around how the messages appear.
* I gave the current focused element a yellow background, not sure about this one but I like that it's clear where you are in the form.

I updated the login form to use as an example:

![login-form](https://cloud.githubusercontent.com/assets/47144/3511519/526d92b6-06b0-11e4-8d9a-0b81ba2dc13b.png)

And here's the full page for reference:

https://cloud.githubusercontent.com/assets/47144/3511509/4aafd5b6-06b0-11e4-9350-68fc05e33704.png

From a code point of view:

* Everything is now namespaced under `.form` and all css is located in `forms.scss`. Ideally inserting an unclassed form element should retain the browser styles.
* Every `:pseudo` class has a `.js-` counterpart which makes testing and triggering state changes easier.
* CSS is still a little messy, I'll clean it up if we're happy with the direction.

I still need to get this up on dokku so you can all have a play around. Plus each item on the page should have a corresponding code snippet which I still need to add.