Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Overhaul the form styles.

Remove the theming styles and just include basic normalization instead.
  • Loading branch information...
commit c6b6ca864d830d64f59965abdb143d2767649570 1 parent 8c66fc4
@tylerhunt authored
View
41 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
View
157 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
View
58 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
View
25 vendor/assets/stylesheets/formulate/_reset.css.sass
@@ -1,25 +0,0 @@
-form.formulate
- a,
- div,
- fieldset,
- form,
- label,
- legend,
- ol,
- p,
- span,
- ul
- border: 0
- font-family: inherit
- font-size: 100%
- font-style: inherit
- font-weight: inherit
- line-height: 1
- margin: 0
- padding: 0
- vertical-align: baseline
-
- ol,
- ul
- list-style: none
-
View
9 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
View
36 vendor/assets/stylesheets/formulate/defaults.css.sass
@@ -1,36 +0,0 @@
-$line-height: 1.5 !default
-$spacer-size: 1.5em !default
-$border-width: 0.125em !default
-
-$fieldset-border-color: #EEE !default
-$fieldset-legend-color: #999 !default
-
-$input-font-family: 'Helvetica', sans-serif !default
-$input-background-color: #FFF !default
-$input-border-color: #CCC !default
-$input-disabled-border-color: #EEE !default
-$input-focus-border-color: #666 !default
-
-$button-color: #999 !default
-$button-text-color: #FFF !default
-
-$submit-border-color: #EEE !default
-$submit-button-color: #999 !default
-
-$label-color: #000
-$label-optional-color: #666
-
-$error-color: #F33 !default
-$instructions-color: #666 !default
-
-@mixin button($color: $button-color)
- -webkit-appearance: none
- background: $color
- border: $border-width solid $color
- color: $button-text-color
- display: inline-block
- font-weight: bold
- line-height: 1.125em
- margin-right: 0.25em
- padding: 0.25em 0.5em
- text-decoration: none
Please sign in to comment.
Something went wrong with that request. Please try again.