Skip to content

Commit 93d4bc7

Browse files
simonsmithsimonsmith
committed
Initial
0 parents  commit 93d4bc7

File tree

12 files changed

+3184
-0
lines changed

12 files changed

+3184
-0
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
build

‎.travis.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
language: node_js
2+
sudo: false
3+
node_js:
4+
- "stable"

‎CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
### HEAD
2+
3+
### 0.1.0 (April 30, 2017)
4+
5+
* Public release.

‎LICENSE.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright (c) Simon Smith
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of
4+
this software and associated documentation files (the "Software"), to deal in
5+
the Software without restriction, including without limitation the rights to
6+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7+
of the Software, and to permit persons to whom the Software is furnished to do
8+
so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.

‎README.md

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
# SUIT CSS components-form-field
2+
3+
[![Build Status](https://travis-ci.org/simonsmith/suitcss-components-form-field.svg?branch=master)](https://travis-ci.org/simonsmith/suitcss-components-form-field)
4+
5+
A CSS component for rendering form fields. Ensures inputs, labels and help text
6+
behave consistently across browsers.
7+
8+
Read more about [SUIT CSS](https://github.com/suitcss/suit/).
9+
10+
## Installation
11+
12+
* [npm](http://npmjs.org/): `npm install suitcss-components-form-field`
13+
* Download: [zip](https://github.com/simonsmith/suitcss-components-form-field/releases/latest)
14+
15+
## Available classes
16+
17+
### Component structure
18+
19+
* `FormField` - Containing element. Apply state classes to this
20+
* `FormField-input` - Consistent rendering of various form inputs
21+
* `FormField-label` - Label text for the input
22+
* `FormField-text` - Used to display help text or validation messages
23+
* `FormField-check` - Wraps around `input` and `label` when using either radio
24+
or checkbox inputs
25+
26+
### States
27+
28+
* `is-error` - Applies the error colours to each element
29+
* `is-warning` - Applies the warning colours to each element
30+
* `is-success` - Applies the success colours to each element
31+
32+
## Usage
33+
34+
### Basic
35+
36+
This works with other inputs such as `textarea`, `range` and `file`.
37+
38+
```html
39+
<div class="FormField">
40+
<label class="FormField-label" for="surname">Surname</label>
41+
<input class="FormField-input" type="text" id="surname" placeholder="Enter your surname">
42+
<p class="FormField-text">Some optional text to the user about the input field</p>
43+
</div>
44+
```
45+
46+
### Using a `label` container
47+
48+
```html
49+
<label class="FormField">
50+
<span class="FormField-label">Surname</span>
51+
<input class="FormField-input" type="text" placeholder="Enter your surname">
52+
<p class="FormField-text">Some text to the user about the input field</p>
53+
</label>
54+
```
55+
56+
### Checkbox or radio input types
57+
58+
Checkbox and radio inputs require an additional container. This controls
59+
positioning and allows the `FormField-text` to be rendered beneath:
60+
61+
```html
62+
<div class="FormField">
63+
<label class="FormField-check">
64+
<input class="FormField-input" name="shopping" type="radio">
65+
<span class="FormField-label">Apples</span>
66+
</label>
67+
<label class="FormField-check">
68+
<input class="FormField-input" name="shopping" type="radio">
69+
<span class="FormField-label">Oranges</span>
70+
</label>
71+
<span class="FormField-text">Some text about the choices above</span>
72+
</div>
73+
```
74+
75+
### Validation states
76+
77+
A state class of `is-error`, `is-success` or `is-warning` can be applied to the
78+
root element:
79+
80+
```html
81+
<div class="FormField is-error">
82+
<label class="FormField-label">Surname</label>
83+
<input class="FormField-input" type="text" placeholder="Enter your surname">
84+
<p class="FormField-text">There was a problem!</p>
85+
</div>
86+
```
87+
88+
### Controlling layout
89+
90+
`FormField` leaves the layout concerns to another component or utility, for
91+
example [suitcss-components-grid](https://github.com/suitcss/components-grid) or
92+
[suitcss-utils-flex](https://github.com/suitcss/utils-flex).
93+
94+
#### Vertical spacing
95+
96+
Can be handled by a component that controls the `<form/>` itself:
97+
98+
```html
99+
<form class="UserForm">
100+
<div class="UserForm-field">
101+
<div class="FormField">
102+
// ...
103+
</div>
104+
</div>
105+
<div class="UserForm-field">
106+
<div class="FormField">
107+
// ...
108+
</div>
109+
</div>
110+
</form>
111+
```
112+
113+
#### Horizontal positioning within `FormField`
114+
115+
Utilities can be used to control the layout of inputs and labels:
116+
117+
```html
118+
// Produces an inline form layout
119+
<div class="FormField">
120+
<div class="u-flex u-flexAlignItemsCenter">
121+
<label class="FormField-label u-mr40">Surname</label>
122+
<div class="u-flexGrow1">
123+
<input class="FormField-input" type="text" placeholder="Enter your surname">
124+
<p class="FormField-text">Some text to the user about the input field</p>
125+
</div>
126+
</div>
127+
</div>
128+
```
129+
130+
#### Horizontal positioning of `FormField` components
131+
132+
A `Grid` component can be used for a column based layout:
133+
134+
```html
135+
<div class="Grid Grid--withGutter">
136+
<div class="Grid-cell u-size1of2">
137+
<div class="FormField">
138+
// ...
139+
</div>
140+
</div>
141+
<div class="Grid-cell u-size1of2">
142+
<div class="FormField">
143+
// ...
144+
</div>
145+
</div>
146+
</div>
147+
```
148+
149+
### Configurable variables
150+
151+
#### `FormField-label`
152+
153+
* `--FormField-label-color`
154+
* `--FormField-label-marginBottom`
155+
156+
#### `FormField-input`
157+
158+
* `--FormField-input-borderColor`
159+
* `--FormField-input-borderRadius`
160+
* `--FormField-input-borderWidth`
161+
* `--FormField-input-color`
162+
* `--FormField-input-fontFamily`
163+
* `--FormField-input-fontSize`
164+
* `--FormField-input-padding`
165+
166+
#### `FormField-text`
167+
168+
* `--FormField-text-fontSize`
169+
* `--FormField-text-marginTop`
170+
171+
#### `FormField-check`
172+
173+
* `--FormField-check-gutter` - Space between checkbox/radio and the label
174+
175+
#### Validation states
176+
177+
* `--FormField-input-onDisabled-backgroundColor`
178+
* `--FormField-onError-color`
179+
* `--FormField-onWarning-color`
180+
* `--FormField-onSuccess-color`
181+
182+
## Testing
183+
184+
Install [Node](http://nodejs.org) (comes with npm).
185+
186+
```
187+
npm install
188+
```
189+
190+
To generate a build:
191+
192+
```
193+
npm run build
194+
```
195+
196+
To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
197+
198+
```
199+
npm run lint
200+
```
201+
202+
To generate the testing build.
203+
204+
```
205+
npm run build-test
206+
```
207+
208+
To watch the files for making changes to test:
209+
210+
```
211+
npm run watch
212+
```
213+
214+
Basic visual tests are in `test/index.html`.
215+
216+
## Browser support
217+
218+
* Google Chrome (latest)
219+
* Opera (latest)
220+
* Firefox (latest)
221+
* Safari 7.1+
222+
* Internet Explorer 10+
223+
* Android 5+ (Chrome 55, Firefox 51)
224+
* iOS 7+ (Safari)
225+
* Windows phone 8.1+

‎index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "./lib/form-field.css";

‎index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require('./lib/form-field.css');

0 commit comments

Comments
 (0)