formulate 0.0.9 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/README.md CHANGED
@@ -2,8 +2,15 @@
2
2
 
3
3
  Rails form builder with flexible markup and styles.
4
4
 
5
- Formulate consists of a custom form builder, which replaces the default form
6
- builder in Rails, and a Sass style sheet that can be customized with variables.
5
+ Formulate consists of a custom form builder, which builds on top of the default
6
+ form builder in Rails, and a Sass stylesheet to provide some level of stylistic
7
+ normalization.
8
+
9
+
10
+ ## Haml Requirement
11
+
12
+ Formulate's `FormBuilder` relies on some helper methods provided by Haml, so
13
+ it will only work when used within Haml templates.
7
14
 
8
15
 
9
16
  ## Installation
@@ -25,37 +32,37 @@ Or install it yourself as:
25
32
 
26
33
  ## Usage
27
34
 
28
- The form builder will be used automatically, so you don't need to do anything.
29
-
30
- If you'd like to use Formulate's style sheet, you'll need to include it in
31
- a Sass file, like `app/assets/stylesheets/form.css.sass`, and add the following:
35
+ Formulate provides a helper module to be included in your Rails controllers.
36
+ You can also load the helper in your `ApplicationController` to use it across
37
+ your entire app.
32
38
 
33
- ``` sass
34
- @import formulate
39
+ ``` ruby
40
+ class ApplicationController < ActionController::Base
41
+ helper Formulate::FormHelper
42
+ end
35
43
  ```
36
44
 
37
- Formulate's styles are all scoped under the selector
38
- `form.formulate`, so it shouldn't clobber anything in your own applications.
45
+ Formulate doesn't clobber any of the built-in form builder methods, so your
46
+ forms should continue to work without modification, giving you the ability to
47
+ selectively begin using Formulate in your applications where you see fit.
39
48
 
40
49
 
41
- ### Customizing Styles
50
+ ## Styles
42
51
 
43
- To customize the styles, you may set any of the variables used by the style
44
- sheet before importing it:
52
+ If you'd like to use Formulate's stylesheet, you'll need to import it into a
53
+ Sass file like `app/assets/stylesheets/forms.css.sass`:
45
54
 
46
55
  ``` sass
47
- $input-focus-border-color: $blue
48
- $submit-button-color: $blue
49
-
50
56
  @import formulate
51
57
  ```
52
58
 
53
- Take a look at the variables at the top of
54
- `/vendor/assets/stylesheets/formulate.css.sass` to see what's available for
55
- customization.
59
+ Formulate's styles are all scoped under the selector `form.formulate`, so they
60
+ shouldn't clobber anything in your own applications. Basically, this just loads
61
+ a stripped down version of [normalize.css] with only the parts relevant to
62
+ forms. It also specifies a handful of styles to improve the vertical rhythm of
63
+ the elements generated by the form builder.
56
64
 
57
- You can always override any of the styles after importing the Formulate style
58
- sheet, too.
65
+ [normalize.css]: http://git.io/normalize
59
66
 
60
67
 
61
68
  ## Contributing
@@ -1,11 +1,4 @@
1
1
  module Formulate
2
2
  class Engine < ::Rails::Engine
3
- initializer 'formulate.initialize', before: 'action_view.set_configs' do |app|
4
- app.config.action_view.default_form_builder = Formulate::FormBuilder
5
-
6
- ActiveSupport.on_load(:action_view) do
7
- include Formulate::FormHelper
8
- end
9
- end
10
3
  end
11
4
  end
@@ -4,6 +4,7 @@ module Formulate
4
4
 
5
5
  def form_for(record, options={}, &proc)
6
6
  options[:html] ||= {}
7
+ options[:builder] ||= FormBuilder
7
8
 
8
9
  case record
9
10
  when String, Symbol
@@ -1,3 +1,3 @@
1
1
  module Formulate
2
- VERSION = '0.0.9'
2
+ VERSION = '0.0.10'
3
3
  end
@@ -1,155 +1,2 @@
1
- @import formulate/defaults
2
-
3
- form.formulate
4
- margin: $spacer-size 0
5
-
6
- label
7
- color: $label-color
8
- display: block
9
- line-height: $line-height
10
-
11
- input,
12
- select,
13
- textarea
14
- -moz-box-sizing: content-box
15
- -ms-box-sizing: content-box
16
- -webkit-box-sizing: content-box
17
- box-sizing: content-box
18
- background: $input-background-color
19
- border: $border-width solid $input-border-color
20
- font-family: $input-font-family
21
- font-size: 1em
22
- margin: 0
23
- padding: 0.25em
24
- vertical-align: top
25
-
26
- &:focus
27
- border-color: $input-focus-border-color
28
- outline: none
29
-
30
- input
31
- height: 1.25em
32
-
33
- &[type="checkbox"],
34
- &[type="radio"]
35
- height: auto
36
- padding: 0
37
- vertical-align: baseline
38
- width: auto
39
-
40
- &:focus
41
- outline: thin dotted #333
42
- outline: 5px auto -webkit-focus-ring-color
43
-
44
- &[type="file"]
45
- height: 1.625em
46
- line-height: 1.625em
47
- padding: 0 0.25em
48
-
49
- &[type="submit"]
50
- -webkit-appearance: button
51
- height: 1.125em
52
-
53
- &[disabled]
54
- border-color: $input-disabled-border-color
55
-
56
- fieldset
57
- border-top: $border-width solid $fieldset-border-color
58
- margin: ($spacer-size / 2) 0
59
- padding-top: $spacer-size
60
-
61
- legend
62
- color: $fieldset-legend-color
63
- font-size: 0.75em
64
- font-weight: bold
65
- padding-right: (0.5em / 0.75)
66
- text-transform: uppercase
67
-
68
- fieldset
69
- margin-left: $spacer-size * 2
70
-
71
- & > p
72
- margin-bottom: $spacer-size
73
-
74
- .section
75
- clear: left
76
-
77
- .field
78
- float: left
79
- margin-right: $spacer-size * 2
80
-
81
- .field
82
- margin-bottom: $spacer-size
83
-
84
- &.required label
85
- font-weight: bold
86
-
87
- &.optional label
88
- color: $label-optional-color
89
- font-style: italic
90
-
91
- &.checkbox,
92
- &.radio
93
- white-space: nowrap
94
-
95
- input
96
- display: inline
97
- margin-right: 0.5em
98
- width: inherit
99
-
100
- &.error
101
- label
102
- color: $error-color
103
-
104
- input,
105
- select,
106
- textarea
107
- border-color: $error-color
108
-
109
- p
110
- font-size: 0.875em
111
- font-style: italic
112
- line-height: $line-height / 0.875
113
-
114
- &.instructions
115
- color: $instructions-color
116
-
117
- .submit
118
- border-top: $border-width solid $submit-border-color
119
- overflow: auto
120
- padding-top: $spacer-size
121
-
122
- input
123
- @include button($submit-button-color)
124
- vertical-align: baseline
125
-
126
- a
127
- font-weight: bold
128
- margin: 0 0.25em
129
-
130
- nav
131
- margin: $spacer-size 0
132
-
133
- ul
134
- float: left
135
- margin-right: $spacer-size
136
-
137
- li a
138
- font-weight: normal
139
- margin: 0
140
- line-height: $line-height
141
-
142
- .errors
143
- color: $error-color
144
- border-color: $error-color
145
-
146
- legend
147
- color: $error-color
148
- border-color: $error-color
149
-
150
- ul
151
- margin-bottom: $spacer-size
152
-
153
- li
154
- list-style: disc
155
- line-height: $line-height
1
+ @import formulate/normalize
2
+ @import formulate/rhythm
@@ -0,0 +1,58 @@
1
+ // Adapted from normalize.css v2.0.1 (git.io/normalize)
2
+
3
+ form.formulate
4
+ fieldset
5
+ border: 0
6
+ margin: 0
7
+ padding: 0
8
+
9
+ legend
10
+ border: 0
11
+ padding: 0
12
+
13
+ button,
14
+ input,
15
+ select,
16
+ textarea
17
+ font-family: inherit
18
+ font-size: 100%
19
+ margin: 0
20
+
21
+ button,
22
+ input
23
+ line-height: normal
24
+
25
+ button,
26
+ html input[type="button"],
27
+ input[type="reset"],
28
+ input[type="submit"]
29
+ -webkit-appearance: button
30
+ cursor: pointer
31
+
32
+ button[disabled],
33
+ input[disabled]
34
+ cursor: default
35
+
36
+ input[type="checkbox"],
37
+ input[type="radio"]
38
+ box-sizing: border-box
39
+ padding: 0
40
+
41
+ input[type="search"]
42
+ -webkit-appearance: textfield
43
+ -moz-box-sizing: content-box
44
+ -webkit-box-sizing: content-box
45
+ box-sizing: content-box
46
+
47
+ input[type="search"]::-webkit-search-cancel-button,
48
+ input[type="search"]::-webkit-search-decoration
49
+ -webkit-appearance: none
50
+
51
+ button::-moz-focus-inner,
52
+ input::-moz-focus-inner
53
+ border: 0
54
+ padding: 0
55
+
56
+ textarea
57
+ overflow: auto
58
+ vertical-align: top
@@ -0,0 +1,9 @@
1
+ form.formulate
2
+ .field,
3
+ .submit,
4
+ legend
5
+ height: 1.5em
6
+ line-height: 1.5em
7
+
8
+ .section .field
9
+ display: inline-block
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: formulate
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.9
4
+ version: 0.0.10
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2012-10-17 00:00:00.000000000 Z
12
+ date: 2013-03-11 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -109,8 +109,8 @@ files:
109
109
  - lib/formulate/form_helper.rb
110
110
  - lib/formulate/version.rb
111
111
  - vendor/assets/stylesheets/formulate.css.sass
112
- - vendor/assets/stylesheets/formulate/_reset.css.sass
113
- - vendor/assets/stylesheets/formulate/defaults.css.sass
112
+ - vendor/assets/stylesheets/formulate/_normalize.css.sass
113
+ - vendor/assets/stylesheets/formulate/_rhythm.css.sass
114
114
  homepage: http://github.com/tylerhunt/formulate
115
115
  licenses: []
116
116
  post_install_message:
@@ -1,25 +0,0 @@
1
- form.formulate
2
- a,
3
- div,
4
- fieldset,
5
- form,
6
- label,
7
- legend,
8
- ol,
9
- p,
10
- span,
11
- ul
12
- border: 0
13
- font-family: inherit
14
- font-size: 100%
15
- font-style: inherit
16
- font-weight: inherit
17
- line-height: 1
18
- margin: 0
19
- padding: 0
20
- vertical-align: baseline
21
-
22
- ol,
23
- ul
24
- list-style: none
25
-
@@ -1,36 +0,0 @@
1
- $line-height: 1.5 !default
2
- $spacer-size: 1.5em !default
3
- $border-width: 0.125em !default
4
-
5
- $fieldset-border-color: #EEE !default
6
- $fieldset-legend-color: #999 !default
7
-
8
- $input-font-family: 'Helvetica', sans-serif !default
9
- $input-background-color: #FFF !default
10
- $input-border-color: #CCC !default
11
- $input-disabled-border-color: #EEE !default
12
- $input-focus-border-color: #666 !default
13
-
14
- $button-color: #999 !default
15
- $button-text-color: #FFF !default
16
-
17
- $submit-border-color: #EEE !default
18
- $submit-button-color: #999 !default
19
-
20
- $label-color: #000
21
- $label-optional-color: #666
22
-
23
- $error-color: #F33 !default
24
- $instructions-color: #666 !default
25
-
26
- @mixin button($color: $button-color)
27
- -webkit-appearance: none
28
- background: $color
29
- border: $border-width solid $color
30
- color: $button-text-color
31
- display: inline-block
32
- font-weight: bold
33
- line-height: 1.125em
34
- margin-right: 0.25em
35
- padding: 0.25em 0.5em
36
- text-decoration: none