formulate 0.0.9 → 0.0.10
Sign up to get free protection for your applications and to get access to all the features.
- 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
|