semantic-forms 1.0.5 → 2.0.0

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.
Files changed (7) hide show
  1. package/README.md +21 -21
  2. package/package.json +15 -9
  3. package/semanticForms.css +14 -6
  4. package/semanticFormsNoImages.css +14 -6
  5. package/semanticFormsNoImages.less +15 -6
  6. package/CHANGELOG.md +0 -17
  7. package/semanticForms.html +0 -164
package/README.md CHANGED
@@ -15,7 +15,7 @@ If you want to set your own images for the clear fields and dropdown arrows, the
15
15
  Apply the `semanticForms` class to your `<form>` elements:
16
16
 
17
17
  ```html
18
- <form class='semanticForms'>
18
+ <form class="semanticForms">
19
19
  <!-- your form here -->
20
20
  </form>
21
21
  ```
@@ -35,10 +35,10 @@ The float label input pattern is notoriously difficult to implement in a fashion
35
35
  ### Example
36
36
 
37
37
  ```html
38
- <form class='semanticForms'>
38
+ <form class="semanticForms">
39
39
  <dl>
40
- <dt><label for='name'>Name</label></dt>
41
- <dd><input id='name' name='name' type='text' placeholder='e.g. John Smith'></dd>
40
+ <dt><label for="name">Name</label></dt>
41
+ <dd><input id="name" name="name" type="text" placeholder="e.g. John Smith"></dd>
42
42
  </dl>
43
43
  </form>
44
44
  ```
@@ -46,10 +46,10 @@ The float label input pattern is notoriously difficult to implement in a fashion
46
46
  ### Or with a `<textarea>`
47
47
 
48
48
  ```html
49
- <form class='semanticForms'>
49
+ <form class="semanticForms">
50
50
  <dl>
51
- <dt><label for='textarea'>Textarea</label></dt>
52
- <dd><textarea id='textarea' name='textarea' rows='5' cols='50' placeholder='e.g. Long string of text'></textarea></dd>
51
+ <dt><label for="textarea">Textarea</label></dt>
52
+ <dd><textarea id="textarea" name="textarea" rows="5" cols="50" placeholder="e.g. Long string of text"></textarea></dd>
53
53
  </dl>
54
54
  </form>
55
55
  ```
@@ -59,15 +59,15 @@ If you would like to manipulate the size of the area on the input field reserved
59
59
  Adjust the horizontal offset of the clear field's click event click area (the default is 21):
60
60
 
61
61
  ```html
62
- <form class='semanticForms' data-clearfield-horizontal-offset='21'>
62
+ <form class="semanticForms" data-clearfield-horizontal-offset="21">
63
63
  <!-- your form here -->
64
64
  </form>
65
65
  ```
66
66
 
67
- Adjust the vertical offset of the clear field's click event click area (the default is 5):
67
+ Adjust the vertical offset of the clear field"s click event click area (the default is 5):
68
68
 
69
69
  ```html
70
- <form class='semanticForms' data-clearfield-vertical-offset='5'>
70
+ <form class="semanticForms" data-clearfield-vertical-offset="5">
71
71
  <!-- your form here -->
72
72
  </form>
73
73
  ```
@@ -81,8 +81,8 @@ You can align buttons side-by-side, or in left/right/center groups.
81
81
  Nothing fancy here:
82
82
 
83
83
  ```html
84
- <input type='submit' name='submit' value='Non-grouped submit button'>
85
- <input type='submit' name='submit' value='Another one'>
84
+ <button type="submit" name="submit">Non-grouped submit button</button>
85
+ <button type="submit" name="submit">Another one</button>
86
86
  ```
87
87
 
88
88
  ### Button groups
@@ -91,17 +91,17 @@ Driven by flexbox to intelligently align the buttons based on how many are in th
91
91
 
92
92
  ```html
93
93
  <!-- aligns left/right -->
94
- <div class='buttonGroup'>
95
- <input type='submit' name='submit' value='Button 1'>
96
- <input type='submit' name='submit' value='Button 2'>
97
- </div>
94
+ <menu>
95
+ <button type="submit" name="submit">Button 1</button>
96
+ <button type="submit" name="submit">Button 2</button>
97
+ </menu>
98
98
 
99
99
  <!-- aligns left/center/right -->
100
- <div class='buttonGroup'>
101
- <input type='submit' name='submit' value='Button 1'>
102
- <input type='submit' name='submit' value='Button 2'>
103
- <input type='submit' name='submit' value='Button 3'>
104
- </div>
100
+ <menu>
101
+ <button type="submit" name="submit">Button 1</button>
102
+ <button type="submit" name="submit">Button 2</button>
103
+ <button type="submit" name="submit">Button 3</button>
104
+ </menu>
105
105
  ```
106
106
 
107
107
  ## Other features
package/package.json CHANGED
@@ -2,26 +2,28 @@
2
2
  "name": "semantic-forms",
3
3
  "description": "Semantic Forms",
4
4
  "author": "Eric Newport <kethinov@gmail.com>",
5
- "version": "1.0.5",
5
+ "version": "2.0.0",
6
+ "files": [
7
+ "semanticForms.css",
8
+ "semanticForms.js",
9
+ "semanticFormsImages.less",
10
+ "semanticFormsNoImages.css",
11
+ "semanticFormsNoImages.less"
12
+ ],
6
13
  "homepage": "https://github.com/kethinov/semanticforms",
7
14
  "license": "CC-BY-4.0",
8
15
  "main": "semanticforms.js",
9
16
  "readmeFilename": "README.md",
10
17
  "dependencies": {},
11
18
  "devDependencies": {
12
- "less": "~3.9.0",
13
- "standard": "~12.0.1",
14
- "lint-staged": "~8.2.1",
15
- "husky": "~2.4.1"
19
+ "less": "4.1.3",
20
+ "standard": "17.0.0"
16
21
  },
17
22
  "scripts": {
18
23
  "test": "echo \"TODO: tests\"",
19
24
  "coverage": "echo \"TODO: test coverage\"",
20
25
  "build": "lessc semanticFormsImages.less semanticForms.css && lessc semanticFormsNoImages.less semanticFormsNoImages.css"
21
26
  },
22
- "lint-staged": {
23
- "*.js": "standard"
24
- },
25
27
  "repository": {
26
28
  "type": "git",
27
29
  "url": "git://github.com/kethinov/semanticforms.git"
@@ -31,5 +33,9 @@
31
33
  "forms",
32
34
  "float",
33
35
  "label"
34
- ]
36
+ ],
37
+ "funding": {
38
+ "type": "individual",
39
+ "url": "https://github.com/sponsors/kethinov"
40
+ }
35
41
  }
package/semanticForms.css CHANGED
@@ -84,7 +84,8 @@
84
84
  .semanticForms textarea:focus:-ms-input-placeholder {
85
85
  color: #aaa;
86
86
  }
87
- .semanticForms input[type='submit'] {
87
+ .semanticForms input[type='submit'],
88
+ .semanticForms button {
88
89
  width: auto;
89
90
  box-sizing: content-box;
90
91
  float: none;
@@ -105,7 +106,8 @@
105
106
  background-image: -ms-linear-gradient(bottom, #fff 0%, #c0c0c0 100%);
106
107
  background-image: linear-gradient(to bottom, #fff 0%, #c0c0c0 100%);
107
108
  }
108
- .semanticForms input[type='submit']:active {
109
+ .semanticForms input[type='submit']:active,
110
+ .semanticForms button:active {
109
111
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(#fff, 0), color-stop(#c0c0c0, 1));
110
112
  background-image: -o-linear-gradient(bottom, #c0c0c0 0%, #fff 100%);
111
113
  background-image: -moz-linear-gradient(bottom, #c0c0c0 0%, #fff 100%);
@@ -169,7 +171,7 @@
169
171
  }
170
172
  .semanticForms .floatLabelForm label.floatLabelFormAnimatedLabel {
171
173
  width: 170px;
172
- padding: 5px 15px;
174
+ padding: 6px 15px;
173
175
  font-size: 75%;
174
176
  color: #aaa;
175
177
  cursor: text;
@@ -263,13 +265,15 @@
263
265
  height: 0;
264
266
  clear: both;
265
267
  }
266
- .semanticForms .buttonGroup {
268
+ .semanticForms menu {
267
269
  width: 100%;
268
270
  clear: both;
269
271
  display: flex;
270
272
  justify-content: space-between;
273
+ padding: 0;
271
274
  }
272
- .semanticForms .buttonGroup input[type='submit'] {
275
+ .semanticForms menu input[type='submit'],
276
+ .semanticForms menu button {
273
277
  float: none;
274
278
  clear: none;
275
279
  margin: 0 0 25px 0;
@@ -283,11 +287,15 @@
283
287
  .semanticForms fieldset {
284
288
  text-align: left;
285
289
  }
286
- .semanticForms fieldset input[type='submit'] {
290
+ .semanticForms fieldset input[type='submit'],
291
+ .semanticForms fieldset button {
287
292
  float: left;
288
293
  clear: none;
289
294
  margin: 25px 50px 25px 0;
290
295
  }
296
+ .semanticForms fieldset :last-child {
297
+ margin-right: 0;
298
+ }
291
299
  }
292
300
  .semanticForms.lowFlow dl {
293
301
  margin: 10px 0 0 0;
package/semanticFormsNoImages.css CHANGED
@@ -84,7 +84,8 @@
84
84
  .semanticForms textarea:focus:-ms-input-placeholder {
85
85
  color: #aaa;
86
86
  }
87
- .semanticForms input[type='submit'] {
87
+ .semanticForms input[type='submit'],
88
+ .semanticForms button {
88
89
  width: auto;
89
90
  box-sizing: content-box;
90
91
  float: none;
@@ -105,7 +106,8 @@
105
106
  background-image: -ms-linear-gradient(bottom, #fff 0%, #c0c0c0 100%);
106
107
  background-image: linear-gradient(to bottom, #fff 0%, #c0c0c0 100%);
107
108
  }
108
- .semanticForms input[type='submit']:active {
109
+ .semanticForms input[type='submit']:active,
110
+ .semanticForms button:active {
109
111
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(#fff, 0), color-stop(#c0c0c0, 1));
110
112
  background-image: -o-linear-gradient(bottom, #c0c0c0 0%, #fff 100%);
111
113
  background-image: -moz-linear-gradient(bottom, #c0c0c0 0%, #fff 100%);
@@ -169,7 +171,7 @@
169
171
  }
170
172
  .semanticForms .floatLabelForm label.floatLabelFormAnimatedLabel {
171
173
  width: 170px;
172
- padding: 5px 15px;
174
+ padding: 6px 15px;
173
175
  font-size: 75%;
174
176
  color: #aaa;
175
177
  cursor: text;
@@ -263,13 +265,15 @@
263
265
  height: 0;
264
266
  clear: both;
265
267
  }
266
- .semanticForms .buttonGroup {
268
+ .semanticForms menu {
267
269
  width: 100%;
268
270
  clear: both;
269
271
  display: flex;
270
272
  justify-content: space-between;
273
+ padding: 0;
271
274
  }
272
- .semanticForms .buttonGroup input[type='submit'] {
275
+ .semanticForms menu input[type='submit'],
276
+ .semanticForms menu button {
273
277
  float: none;
274
278
  clear: none;
275
279
  margin: 0 0 25px 0;
@@ -283,11 +287,15 @@
283
287
  .semanticForms fieldset {
284
288
  text-align: left;
285
289
  }
286
- .semanticForms fieldset input[type='submit'] {
290
+ .semanticForms fieldset input[type='submit'],
291
+ .semanticForms fieldset button {
287
292
  float: left;
288
293
  clear: none;
289
294
  margin: 25px 50px 25px 0;
290
295
  }
296
+ .semanticForms fieldset :last-child {
297
+ margin-right: 0;
298
+ }
291
299
  }
292
300
  .semanticForms.lowFlow dl {
293
301
  margin: 10px 0 0 0;
package/semanticFormsNoImages.less CHANGED
@@ -117,7 +117,8 @@
117
117
 
118
118
 
119
119
  // buttons
120
- input[type='submit'] {
120
+ input[type='submit'],
121
+ button {
121
122
  width: auto;
122
123
  box-sizing: content-box;
123
124
  float: none;
@@ -139,7 +140,8 @@
139
140
  background-image: linear-gradient(to bottom, @formBackgroundColor 0%, @borderColor 100%);
140
141
  }
141
142
 
142
- input[type='submit']:active {
143
+ input[type='submit']:active,
144
+ button:active {
143
145
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@formBackgroundColor, 0), color-stop(@borderColor, 1));
144
146
  background-image: -o-linear-gradient(bottom, @borderColor 0%, @formBackgroundColor 100%);
145
147
  background-image: -moz-linear-gradient(bottom, @borderColor 0%, @formBackgroundColor 100%);
@@ -214,7 +216,7 @@
214
216
 
215
217
  label.floatLabelFormAnimatedLabel {
216
218
  width: 170px;
217
- padding: 5px 15px;
219
+ padding: 6px 15px;
218
220
  font-size: 75%;
219
221
  color: #aaa;
220
222
  cursor: text;
@@ -332,13 +334,15 @@
332
334
  clear: both;
333
335
  }
334
336
 
335
- .buttonGroup {
337
+ menu {
336
338
  width: 100%;
337
339
  clear: both;
338
340
  display: flex;
339
341
  justify-content: space-between;
342
+ padding: 0;
340
343
 
341
- input[type='submit'] {
344
+ input[type='submit'],
345
+ button {
342
346
  float: none;
343
347
  clear: none;
344
348
  margin: 0 0 25px 0;
@@ -357,11 +361,16 @@
357
361
  fieldset {
358
362
  text-align: left;
359
363
 
360
- input[type='submit'] {
364
+ input[type='submit'],
365
+ button {
361
366
  float: left;
362
367
  clear: none;
363
368
  margin: 25px 50px 25px 0;
364
369
  }
370
+
371
+ :last-child {
372
+ margin-right: 0;
373
+ }
365
374
  }
366
375
  }
367
376
  }
package/CHANGELOG.md DELETED
@@ -1,17 +0,0 @@
1
- # semanticforms Changelog
2
-
3
- ## Next version
4
-
5
- - Put your changes here...
6
-
7
- ## 1.0.5
8
-
9
- - Restricted JS events to target elements within `semanticForms` class form elements.
10
- - Switched font sizes to % in case someone finds 16px too small and changes the default font size in the browser, these form fields will no longer stay fixed.
11
- - Published to npm.
12
- - Started CHANGELOG.
13
- - Updated dependencies.
14
-
15
- ## 1.0.4 and below
16
-
17
- [Here be dragons](https://en.wikipedia.org/wiki/Here_be_dragons)...
package/semanticForms.html DELETED
@@ -1,164 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang='en'>
3
- <head>
4
- <meta charset='utf-8'>
5
- <meta name='viewport' content='width=device-width,initial-scale=1'>
6
- <meta name='format-detection' content='telephone=no'>
7
- <title>Semantic Forms</title>
8
- <link rel='stylesheet' href='semanticForms.css'>
9
- <style>
10
- h1,
11
- p {
12
- font-family: sans-serif;
13
- }
14
- </style>
15
- </head>
16
- <body>
17
- <main>
18
- <header>
19
- <h1>Semantic Forms</h1>
20
- </header>
21
- <article>
22
- <section class='content'>
23
- <p>A pattern library of forms based on semantic HTML enhanced with a modern UX.</p>
24
-
25
- <form action='/somewhere' method='post' class='semanticForms' data-clearfield-horizontal-offset='21' data-clearfield-vertical-offset='5'>
26
- <fieldset>
27
- <legend>Fieldset legend (high flow, JS enabled)</legend>
28
- <dl>
29
- <dt><label for='name'>Name</label></dt>
30
- <dd><input id='name' name='name' type='text' placeholder='e.g. John Smith'></dd>
31
-
32
- <dt><label for='prefilled'>Prefilled field</label></dt>
33
- <dd><input id='prefilled' name='prefilled' type='text' placeholder='e.g. Stuff' value='Some text prefilled'></dd>
34
-
35
- <dt><label for='email'>Email</label></dt>
36
- <dd><input id='email' name='email' type='email' placeholder='e.g. john.smith@somewhere.com'></dd>
37
-
38
- <dt><label for='noplaceholder'>No placeholder</label></dt>
39
- <dd><input id='noplaceholder' name='noplaceholder' type='text'></dd>
40
-
41
- <dt><label for='selectbox'>Select box</label></dt>
42
- <dd><select id='selectbox' name='selectbox'>
43
- <option value='1'>Item one</option>
44
- <option value='2'>Item two</option>
45
- <option value='3'>Item three</option>
46
- <option value='4'>Item four</option>
47
- <option value='5'>Item five</option>
48
- <option value='6'>Item six</option>
49
- <option value='7'>Item seven</option>
50
- </select></dd>
51
-
52
- <dt><label for='textarea'>Textarea</label></dt>
53
- <dd><textarea id='textarea' name='textarea' rows='5' cols='50' placeholder='e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.'></textarea></dd>
54
-
55
- <dt><label data-for='checkboxes'>Checkboxes:</label></dt>
56
- <dd class='checkboxes'>
57
- <ul id='checkboxes'>
58
- <li><input type='checkbox' name='o_one' id='o_one'> <label for='o_one'>One</label></li>
59
- <li><input type='checkbox' name='o_two' id='o_two'> <label for='o_two'>Two</label></li>
60
- <li><input type='checkbox' name='o_three' id='o_three'> <label for='o_three'>Three</label></li>
61
- </ul>
62
- </dd>
63
-
64
- <dt><label for='textareanoplaceholder'>Textarea (no placeholder)</label></dt>
65
- <dd><textarea id='textareanoplaceholder' name='textareanoplaceholder' rows='5' cols='50'></textarea></dd>
66
-
67
- <dt><label for='date'>Date field</label></dt>
68
- <dd><input id='date' name='date' type='date'></dd>
69
-
70
- <dt><label for='prefilledtextarea'>Textarea (prefilled)</label></dt>
71
- <dd><textarea id='prefilledtextarea' name='prefilledtextarea' rows='5' cols='50' placeholder='e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.'>Some prefilled content...</textarea></dd>
72
- </dl>
73
-
74
- <input type='submit' name='submit' value='Non-grouped submit button'>
75
- <input type='submit' name='submit' value='Another one'>
76
-
77
- <p>Flexbox button layout pattern with two submit buttons:</p>
78
- <div class='buttonGroup'>
79
- <input type='submit' name='submit' value='Button 1'>
80
- <input type='submit' name='submit' value='Button 2'>
81
- </div>
82
-
83
- <p>Flexbox button layout pattern with three submit buttons:</p>
84
- <div class='buttonGroup'>
85
- <input type='submit' name='submit' value='Button 1'>
86
- <input type='submit' name='submit' value='Button 2'>
87
- <input type='submit' name='submit' value='Button 3'>
88
- </div>
89
- </fieldset>
90
- </form>
91
-
92
- <form action='/somewhere' method='post' class='semanticForms lowFlow'>
93
- <fieldset>
94
- <legend>Fieldset legend (low flow, JS disabled)</legend>
95
- <dl>
96
- <dt><label for='low-flow-name'>Name</label></dt>
97
- <dd><input id='low-flow-name' name='name' type='text' placeholder='e.g. John Smith'></dd>
98
-
99
- <dt><label for='low-flow-prefilled'>Prefilled field</label></dt>
100
- <dd><input id='low-flow-prefilled' name='prefilled' type='text' placeholder='e.g. Stuff' value='Some text prefilled'></dd>
101
-
102
- <dt><label for='low-flow-email'>Email</label></dt>
103
- <dd><input id='low-flow-email' name='email' type='email' placeholder='e.g. john.smith@somewhere.com'></dd>
104
-
105
- <dt><label for='low-flow-noplaceholder'>No placeholder</label></dt>
106
- <dd><input id='low-flow-noplaceholder' name='noplaceholder' type='text' placeholder=' '></dd>
107
-
108
- <dt><label for='low-flow-selectbox'>Select box</label></dt>
109
- <dd><select id='low-flow-selectbox' name='selectbox'>
110
- <option value='1'>Item one</option>
111
- <option value='2'>Item two</option>
112
- <option value='3'>Item three</option>
113
- <option value='4'>Item four</option>
114
- <option value='5'>Item five</option>
115
- <option value='6'>Item six</option>
116
- <option value='7'>Item seven</option>
117
- </select></dd>
118
-
119
- <dt><label for='low-flow-textarea'>Textarea</label></dt>
120
- <dd><textarea id='low-flow-textarea' name='textarea' rows='5' cols='50' placeholder='e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.'></textarea></dd>
121
-
122
- <dt><label data-for='low-flow-checkboxes'>Checkboxes:</label></dt>
123
- <dd class='checkboxes'>
124
- <ul id='low-flow-checkboxes'>
125
- <li><input type='checkbox' name='o_one' id='low-flow-o_one'> <label for='low-flow-o_one'>One</label></li>
126
- <li><input type='checkbox' name='o_two' id='low-flow-o_two'> <label for='low-flow-o_two'>Two</label></li>
127
- <li><input type='checkbox' name='o_three' id='low-flow-o_three'> <label for='low-flow-o_three'>Three</label></li>
128
- </ul>
129
- </dd>
130
-
131
- <dt><label for='low-flow-textareanoplaceholder'>Textarea (no placeholder)</label></dt>
132
- <dd><textarea id='low-flow-textareanoplaceholder' name='textareanoplaceholder' rows='5' cols='50'></textarea></dd>
133
-
134
- <dt><label for='low-flow-date'>Date field</label></dt>
135
- <dd><input id='low-flow-date' name='low-flow-date' type='date'></dd>
136
-
137
- <dt><label for='low-flow-prefilledtextarea'>Textarea (prefilled)</label></dt>
138
- <dd><textarea id='low-flow-prefilledtextarea' name='prefilledtextarea' rows='5' cols='50' placeholder='e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic.'>Some prefilled content...</textarea></dd>
139
- </dl>
140
-
141
- <input type='submit' name='submit' value='Non-grouped submit button'>
142
- <input type='submit' name='submit' value='Another one'>
143
-
144
- <p>Grouped button layout pattern with two submit buttons:</p>
145
- <div class='buttonGroup'>
146
- <input type='submit' name='submit' value='Button 1'>
147
- <input type='submit' name='submit' value='Button 2'>
148
- </div>
149
-
150
- <p>Grouped button layout pattern with three submit buttons:</p>
151
- <div class='buttonGroup'>
152
- <input type='submit' name='submit' value='Button 1'>
153
- <input type='submit' name='submit' value='Button 2'>
154
- <input type='submit' name='submit' value='Button 3'>
155
- </div>
156
- </fieldset>
157
- </form>
158
- </section>
159
- </article>
160
- </main>
161
-
162
- <script type='text/javascript' src='semanticForms.js'></script>
163
- </body>
164
- </html>