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 +28 -21
- data/lib/formulate/engine.rb +0 -7
- data/lib/formulate/form_helper.rb +1 -0
- data/lib/formulate/version.rb +1 -1
- data/vendor/assets/stylesheets/formulate.css.sass +2 -155
- data/vendor/assets/stylesheets/formulate/_normalize.css.sass +58 -0
- data/vendor/assets/stylesheets/formulate/_rhythm.css.sass +9 -0
- metadata +4 -4
- data/vendor/assets/stylesheets/formulate/_reset.css.sass +0 -25
- data/vendor/assets/stylesheets/formulate/defaults.css.sass +0 -36
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
|
6
|
-
builder in Rails, and a Sass
|
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
|
-
|
29
|
-
|
30
|
-
|
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
|
-
```
|
34
|
-
|
39
|
+
``` ruby
|
40
|
+
class ApplicationController < ActionController::Base
|
41
|
+
helper Formulate::FormHelper
|
42
|
+
end
|
35
43
|
```
|
36
44
|
|
37
|
-
Formulate'
|
38
|
-
|
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
|
-
|
50
|
+
## Styles
|
42
51
|
|
43
|
-
|
44
|
-
|
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
|
-
|
54
|
-
|
55
|
-
|
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
|
-
|
58
|
-
sheet, too.
|
65
|
+
[normalize.css]: http://git.io/normalize
|
59
66
|
|
60
67
|
|
61
68
|
## Contributing
|
data/lib/formulate/engine.rb
CHANGED
@@ -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
|
data/lib/formulate/version.rb
CHANGED
@@ -1,155 +1,2 @@
|
|
1
|
-
@import formulate/
|
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
|
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.
|
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:
|
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/
|
113
|
-
- vendor/assets/stylesheets/formulate/
|
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
|