Overhaul the form styles.

Remove the theming styles and just include basic normalization instead.

README.md

@@ -2,8 +2,9 @@
 
 Rails form builder with flexible markup and styles.
 
-Formulate consists of a custom form builder, which replaces the default form
-builder in Rails, and a Sass style sheet that can be customized with variables.
+Formulate consists of a custom form builder, which builds on top of the default
+form builder in Rails, and a Sass stylesheet to provide some level of stylistic
+normalization.
 
 
 ## Installation
@@ -25,37 +26,29 @@ Or install it yourself as:
 
 ## Usage
 
-The form builder will be used automatically, so you don't need to do anything.
+The form builder will be used automatically whenever the `#form_for` helper is
+called, so you don't need to do anything special to start using its methods. It
+also doesn't clobber any of the built-in form builder methods, so your forms
+should continue to work without modification, giving you the ability to
+selectively begin using Formulate in your applications where you see fit.
 
-If you'd like to use Formulate's style sheet, you'll need to include it in
-a Sass file, like `app/assets/stylesheets/form.css.sass`, and add the following:
 
-``` sass
-@import formulate
-```
-
-Formulate's styles are all scoped under the selector
-`form.formulate`, so it shouldn't clobber anything in your own applications.
+## Styles
 
-
-### Customizing Styles
-
-To customize the styles, you may set any of the variables used by the style
-sheet before importing it:
+If you'd like to use Formulate's stylesheet, you'll need to import it into a
+Sass file like `app/assets/stylesheets/forms.css.sass`:
 
 ``` sass
-$input-focus-border-color: $blue
-$submit-button-color: $blue
-
 @import formulate
 ```
 
-Take a look at the variables at the top of
-`/vendor/assets/stylesheets/formulate.css.sass` to see what's available for
-customization.
+Formulate's styles are all scoped under the selector `form.formulate`, so they
+shouldn't clobber anything in your own applications. Basically, this just loads
+a stripped down version of [normalize.css] with only the parts relevant to
+forms. It also specifies a handful of styles to improve the vertical rhythm of
+the elements generated by the form builder.
 
-You can always override any of the styles after importing the Formulate style
-sheet, too.
+[normalize.css]: http://git.io/normalize
 
 
 ## Contributing

vendor/assets/stylesheets/formulate.css.sass

@@ -1,155 +1,2 @@
-@import formulate/defaults
-
-form.formulate
-  margin: $spacer-size 0
-
-  label
-    color: $label-color
-    display: block
-    line-height: $line-height
-
-  input,
-  select,
-  textarea
-    -moz-box-sizing: content-box
-    -ms-box-sizing: content-box
-    -webkit-box-sizing: content-box
-    box-sizing: content-box
-    background: $input-background-color
-    border: $border-width solid $input-border-color
-    font-family: $input-font-family
-    font-size: 1em
-    margin: 0
-    padding: 0.25em
-    vertical-align: top
-
-    &:focus
-      border-color: $input-focus-border-color
-      outline: none
-
-  input
-    height: 1.25em
-
-    &[type="checkbox"],
-    &[type="radio"]
-      height: auto
-      padding: 0
-      vertical-align: baseline
-      width: auto
-
-      &:focus
-        outline: thin dotted #333
-        outline: 5px auto -webkit-focus-ring-color
-
-    &[type="file"]
-      height: 1.625em
-      line-height: 1.625em
-      padding: 0 0.25em
-
-    &[type="submit"]
-      -webkit-appearance: button
-      height: 1.125em
-
-    &[disabled]
-      border-color: $input-disabled-border-color
-
-  fieldset
-    border-top: $border-width solid $fieldset-border-color
-    margin: ($spacer-size / 2) 0
-    padding-top: $spacer-size
-
-    legend
-      color: $fieldset-legend-color
-      font-size: 0.75em
-      font-weight: bold
-      padding-right: (0.5em / 0.75)
-      text-transform: uppercase
-
-    fieldset
-      margin-left: $spacer-size * 2
-
-    & > p
-      margin-bottom: $spacer-size
-
-    .section
-      clear: left
-
-      .field
-        float: left
-        margin-right: $spacer-size * 2
-
-  .field
-    margin-bottom: $spacer-size
-
-    &.required label
-      font-weight: bold
-
-    &.optional label
-      color: $label-optional-color
-      font-style: italic
-
-    &.checkbox,
-    &.radio
-      white-space: nowrap
-
-      input
-        display: inline
-        margin-right: 0.5em
-        width: inherit
-
-    &.error
-      label
-        color: $error-color
-
-      input,
-      select,
-      textarea
-        border-color: $error-color
-
-    p
-      font-size: 0.875em
-      font-style: italic
-      line-height: $line-height / 0.875
-
-      &.instructions
-        color: $instructions-color
-
-  .submit
-    border-top: $border-width solid $submit-border-color
-    overflow: auto
-    padding-top: $spacer-size
-
-    input
-      @include button($submit-button-color)
-      vertical-align: baseline
-
-    a
-      font-weight: bold
-      margin: 0 0.25em
-
-    nav
-      margin: $spacer-size 0
-
-      ul
-        float: left
-        margin-right: $spacer-size
-
-        li a
-          font-weight: normal
-          margin: 0
-          line-height: $line-height
-
-  .errors
-    color: $error-color
-    border-color: $error-color
-
-    legend
-      color: $error-color
-      border-color: $error-color
-
-    ul
-      margin-bottom: $spacer-size
-
-      li
-        list-style: disc
-        line-height: $line-height
+@import formulate/normalize
+@import formulate/rhythm

vendor/assets/stylesheets/formulate/_normalize.css.sass

@@ -0,0 +1,58 @@
+// Adapted from normalize.css v2.0.1 (git.io/normalize)
+
+form.formulate
+  fieldset
+    border: 0
+    margin: 0
+    padding: 0
+
+  legend
+    border: 0
+    padding: 0
+
+  button,
+  input,
+  select,
+  textarea
+    font-family: inherit
+    font-size: 100%
+    margin: 0
+
+  button,
+  input
+    line-height: normal
+
+  button,
+  html input[type="button"],
+  input[type="reset"],
+  input[type="submit"]
+    -webkit-appearance: button
+    cursor: pointer
+
+  button[disabled],
+  input[disabled]
+    cursor: default
+
+  input[type="checkbox"],
+  input[type="radio"]
+    box-sizing: border-box
+    padding: 0
+
+  input[type="search"]
+    -webkit-appearance: textfield
+    -moz-box-sizing: content-box
+    -webkit-box-sizing: content-box
+    box-sizing: content-box
+
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-decoration
+    -webkit-appearance: none
+
+  button::-moz-focus-inner,
+  input::-moz-focus-inner
+    border: 0
+    padding: 0
+
+  textarea
+    overflow: auto
+    vertical-align: top

vendor/assets/stylesheets/formulate/_rhythm.css.sass

@@ -0,0 +1,9 @@
+form.formulate
+  .field,
+  .submit,
+  legend
+    height: 1.5em
+    line-height: 1.5em
+
+  .section .field
+    display: inline-block