Start building up a pattern library

Starting with the form elements, the new view is available at
/dev/pattern-library and currently only shows form fields.

h/static/styles/base.scss

@@ -82,7 +82,7 @@ $input-border-radius: 2px;
   font-family: "Source Sans Pro", "Open Sans", sans-serif;
   font-size: 1em;
   padding: .33em .5em;
-  &:focus {
+  &:focus, &.js-focus {
     outline: 0;
     border: 1px solid $gray;
     @include box-shadow( inset 1px 1px 6px -1px $grayLighter);
@@ -115,7 +115,7 @@ $input-border-radius: 2px;
   color: $grayDark;
   border-color: $grayLight $grayLight $gray;
 
-  &:hover {
+  &:hover, &:focus, &:active, &.js-focus, &.js-hover, &.js-active {
     @include background-image(
       linear-gradient(top, #fefefe 0%, #f4f4f4 50%, #e2e2e2 51%, #fdfdfd 100%));
     color: black;
@@ -125,7 +125,7 @@ $input-border-radius: 2px;
     }
   }
 
-  &:active:not([disabled]) {
+  &:active:not([disabled]), &.js-active {
     @include background-image(
       linear-gradient(top, #fcfcfc 0%, #f3f3f3 50%, #e1e1e1 51%, #fbfbfb 100%));
     @include box-shadow(

h/static/styles/common.scss

@@ -2,6 +2,7 @@
 
 @import 'reset';
 @import 'base';
+@import 'forms';
 @import 'responsive';
 @import 'yui_grid';
 
@@ -138,7 +139,10 @@ button, input[type=submit], .btn {
   cursor: pointer;
   color: $linkColor;
   position: static;
-  &:hover { color: $linkColorHover; }
+
+  &:hover, &:focus, &.js-focus, &.js-hover {
+    color: $linkColorHover;
+  }
 }
 
 .red {

h/static/styles/forms.scss

+// Common form styles.
+
+.form-field {
+  margin-bottom: 10px;
+}
+
+.form-label {
+  width: 100%;
+  display: block;
+}
+
+.form-input {
+  width: 100%;
+  display: block;
+}
+
+.btn {
+  @include sweetbutton;
+}