semantic-forms 5.3.5 → 5.3.7
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.
- package/CHANGELOG.md +25 -0
- package/CONTRIBUTING.md +39 -7
- package/dist/semantic-forms.cjs +119 -52
- package/dist/semantic-forms.cjs.map +1 -1
- package/dist/semantic-forms.css +498 -178
- package/dist/semantic-forms.css.map +1 -1
- package/dist/semantic-forms.js +153 -80
- package/dist/semantic-forms.js.map +1 -1
- package/dist/semantic-forms.min.js +1 -1
- package/dist/semantic-forms.min.js.map +1 -1
- package/dist/semantic-forms.min.mjs +1 -1
- package/dist/semantic-forms.min.mjs.map +1 -1
- package/dist/semantic-forms.mjs +120 -53
- package/dist/semantic-forms.mjs.map +1 -1
- package/docs/statics/css/semantic-forms-styles.scss +14 -1
- package/docs/statics/js/semantic-forms-demo.js +16 -0
- package/docs/statics/js/semantic-forms-main.js +3 -2
- package/docs/statics/pages/buttons.html +98 -0
- package/docs/statics/pages/checkboxes.html +130 -0
- package/docs/statics/pages/fullDemo.html +1078 -821
- package/docs/statics/pages/inputs.html +384 -0
- package/docs/statics/pages/layout.html +521 -0
- package/docs/statics/pages/layouts/main.html +9 -1
- package/docs/statics/pages/theming.html +39 -0
- package/docs/statics/pages/usage.html +17 -799
- package/package.json +27 -13
- package/semanticForms.js +33 -8
- package/semanticForms.scss +15 -5
|
@@ -0,0 +1,521 @@
|
|
|
1
|
+
<include src="layouts/main">
|
|
2
|
+
<arg pageTitle>Semantic Forms — Layout</arg>
|
|
3
|
+
<arg pageContent>
|
|
4
|
+
<article>
|
|
5
|
+
<p><a href="/usage.html">← Usage</a></p>
|
|
6
|
+
|
|
7
|
+
<h2 id="responsivecolumns">Responsive columns</h2>
|
|
8
|
+
|
|
9
|
+
<p>This feature makes it so the form fields will grow, shrink, expand the number of columns, or reduce the number of columns based on how much space exists in the container. You can customize it by applying various <code>colspan-#</code> classes to various elements in the form markup structure.</p>
|
|
10
|
+
|
|
11
|
+
<h3 id="colspan">Set number of columns for a group of forms</h3>
|
|
12
|
+
|
|
13
|
+
<p>You can limit the number of columns on your forms using the <code>colspan-#</code> class on a <code><!--#<dl>--></code> element:</p>
|
|
14
|
+
|
|
15
|
+
<pre><code class='language-html' lang='html'><escape>
|
|
16
|
+
<form class="semanticForms">
|
|
17
|
+
<dl class="colspan-2">
|
|
18
|
+
<div>
|
|
19
|
+
<dt><label for="input-a">Input A</label></dt>
|
|
20
|
+
<dd><input type="text" id="input-a" name="input-a"></dd>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<div>
|
|
24
|
+
<dt><label for="input-b">Input B</label></dt>
|
|
25
|
+
<dd><input type="text" id="input-b" name="input-b"></dd>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<!-- wraps to the next row -->
|
|
29
|
+
<div>
|
|
30
|
+
<dt><label for="input-c">Input C</label></dt>
|
|
31
|
+
<dd><input type="text" id="input-c" name="input-c"></dd>
|
|
32
|
+
</div>
|
|
33
|
+
</dl>
|
|
34
|
+
</form>
|
|
35
|
+
</escape></code></pre>
|
|
36
|
+
|
|
37
|
+
<form class="semanticForms">
|
|
38
|
+
<dl class="colspan-2">
|
|
39
|
+
<div>
|
|
40
|
+
<dt><label for="input-a">Input A</label></dt>
|
|
41
|
+
<dd><input type="text" id="input-a" name="input-a"></dd>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div>
|
|
45
|
+
<dt><label for="input-b">Input B</label></dt>
|
|
46
|
+
<dd><input type="text" id="input-b" name="input-b"></dd>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<!-- wraps to the next row -->
|
|
50
|
+
<div>
|
|
51
|
+
<dt><label for="input-c">Input C</label></dt>
|
|
52
|
+
<dd><input type="text" id="input-c" name="input-c"></dd>
|
|
53
|
+
</div>
|
|
54
|
+
</dl>
|
|
55
|
+
</form>
|
|
56
|
+
|
|
57
|
+
<p>You can also apply the class to a <code><!--#<fieldset>--></code> which will apply that styling to all nested <code><!--#<dl>--></code> elements:</p>
|
|
58
|
+
|
|
59
|
+
<pre><code class='language-html' lang='html'><escape>
|
|
60
|
+
<form class="semanticForms">
|
|
61
|
+
<fieldset class="colspan-3">
|
|
62
|
+
<!-- inherits 3 column class -->
|
|
63
|
+
<dl>
|
|
64
|
+
<div>
|
|
65
|
+
<dt><label for="f-ex-input-a">Input A</label></dt>
|
|
66
|
+
<dd><input type="text" id="f-ex-input-a" name="f-ex-input-a"></dd>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<div>
|
|
70
|
+
<dt><label for="f-ex-input-b">Input B</label></dt>
|
|
71
|
+
<dd><input type="text" id="f-ex-input-b" name="f-ex-input-b"></dd>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<div>
|
|
75
|
+
<dt><label for="f-ex-input-c">Input C</label></dt>
|
|
76
|
+
<dd><input type="text" id="f-ex-input-c" name="f-ex-input-c"></dd>
|
|
77
|
+
</div>
|
|
78
|
+
</dl>
|
|
79
|
+
|
|
80
|
+
<!-- has 4 columns -->
|
|
81
|
+
<dl class="colspan-4">
|
|
82
|
+
<div>
|
|
83
|
+
<dt><label for="f-ex-input-d">Input D</label></dt>
|
|
84
|
+
<dd><input type="text" id="f-ex-input-d" name="f-ex-input-d"></dd>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<div>
|
|
88
|
+
<dt><label for="f-ex-input-e">Input E</label></dt>
|
|
89
|
+
<dd><input type="text" id="f-ex-input-e" name="f-ex-input-e"></dd>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<div>
|
|
93
|
+
<dt><label for="f-ex-input-f">Input F</label></dt>
|
|
94
|
+
<dd><input type="text" id="f-ex-input-f" name="f-ex-input-f"></dd>
|
|
95
|
+
</div>
|
|
96
|
+
</dl>
|
|
97
|
+
</fieldset>
|
|
98
|
+
</form>
|
|
99
|
+
</escape></code></pre>
|
|
100
|
+
|
|
101
|
+
<form class="semanticForms">
|
|
102
|
+
<fieldset class="colspan-3">
|
|
103
|
+
<!-- inherits 3 column class -->
|
|
104
|
+
<dl>
|
|
105
|
+
<div>
|
|
106
|
+
<dt><label for="f-ex-input-a">Input A</label></dt>
|
|
107
|
+
<dd><input type="text" id="f-ex-input-a" name="f-ex-input-a"></dd>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<div>
|
|
111
|
+
<dt><label for="f-ex-input-b">Input B</label></dt>
|
|
112
|
+
<dd><input type="text" id="f-ex-input-b" name="f-ex-input-b"></dd>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<div>
|
|
116
|
+
<dt><label for="f-ex-input-c">Input C</label></dt>
|
|
117
|
+
<dd><input type="text" id="f-ex-input-c" name="f-ex-input-c"></dd>
|
|
118
|
+
</div>
|
|
119
|
+
</dl>
|
|
120
|
+
|
|
121
|
+
<!-- has 4 columns -->
|
|
122
|
+
<dl class="colspan-4">
|
|
123
|
+
<div>
|
|
124
|
+
<dt><label for="f-ex-input-d">Input D</label></dt>
|
|
125
|
+
<dd><input type="text" id="f-ex-input-d" name="f-ex-input-d"></dd>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<div>
|
|
129
|
+
<dt><label for="f-ex-input-e">Input E</label></dt>
|
|
130
|
+
<dd><input type="text" id="f-ex-input-e" name="f-ex-input-e"></dd>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div>
|
|
134
|
+
<dt><label for="f-ex-input-f">Input F</label></dt>
|
|
135
|
+
<dd><input type="text" id="f-ex-input-f" name="f-ex-input-f"></dd>
|
|
136
|
+
</div>
|
|
137
|
+
</dl>
|
|
138
|
+
</fieldset>
|
|
139
|
+
</form>
|
|
140
|
+
|
|
141
|
+
<h3 id="setcolspannumber">Set number of columns a single input field takes up</h3>
|
|
142
|
+
|
|
143
|
+
<p>You can specify the number of columns an input will span using the <code>colspan-#</code> class on the <code><!--#<dd>--></code> element. The inputs are responsive and will shrink according to available space. Available numbered classes are <code>colspan-1</code> through <code>colspan-5</code>:</p>
|
|
144
|
+
|
|
145
|
+
<pre><code class='language-html' lang='html'><escape>
|
|
146
|
+
<form class="semanticForms">
|
|
147
|
+
<fieldset>
|
|
148
|
+
<dl>
|
|
149
|
+
<div>
|
|
150
|
+
<dt><label for="cspan-ex-input-a">Input A</label></dt>
|
|
151
|
+
<!-- 1 column -->
|
|
152
|
+
<dd class="colspan-1"><input type="text" id="cspan-ex-input-a" name="cspan-ex-input-a"></dd>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<div>
|
|
156
|
+
<dt><label for="cspan-ex-input-b">Input B</label></dt>
|
|
157
|
+
<!-- 2 columns -->
|
|
158
|
+
<dd class="colspan-2"><input type="text" id="cspan-ex-input-b" name="cspan-ex-input-b"></dd>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<div>
|
|
162
|
+
<dt><label for="cspan-ex-input-c">Input C</label></dt>
|
|
163
|
+
<!-- 5 columns (max) -->
|
|
164
|
+
<dd class="colspan-5"><input type="text" id="cspan-ex-input-c" name="cspan-ex-input-c"></dd>
|
|
165
|
+
</div>
|
|
166
|
+
</dl>
|
|
167
|
+
</fieldset>
|
|
168
|
+
</form>
|
|
169
|
+
</escape></code></pre>
|
|
170
|
+
|
|
171
|
+
<form class="semanticForms">
|
|
172
|
+
<fieldset>
|
|
173
|
+
<dl>
|
|
174
|
+
<div>
|
|
175
|
+
<dt><label for="cspan-ex-input-a">Input A</label></dt>
|
|
176
|
+
<!-- 1 column -->
|
|
177
|
+
<dd class="colspan-1"><input type="text" id="cspan-ex-input-a" name="cspan-ex-input-a"></dd>
|
|
178
|
+
</div>
|
|
179
|
+
|
|
180
|
+
<div>
|
|
181
|
+
<dt><label for="cspan-ex-input-b">Input B</label></dt>
|
|
182
|
+
<!-- 2 columns -->
|
|
183
|
+
<dd class="colspan-2"><input type="text" id="cspan-ex-input-b" name="cspan-ex-input-b"></dd>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<div>
|
|
187
|
+
<dt><label for="cspan-ex-input-c">Input C</label></dt>
|
|
188
|
+
<!-- 5 columns (max) -->
|
|
189
|
+
<dd class="colspan-5"><input type="text" id="cspan-ex-input-c" name="cspan-ex-input-c"></dd>
|
|
190
|
+
</div>
|
|
191
|
+
</dl>
|
|
192
|
+
</fieldset>
|
|
193
|
+
</form>
|
|
194
|
+
|
|
195
|
+
<p><code>colspan-full</code> can also be used to force an input to take up the entire width of a form:</p>
|
|
196
|
+
|
|
197
|
+
<pre><code class='language-html' lang='html'><escape>
|
|
198
|
+
<form class="semanticForms">
|
|
199
|
+
<fieldset>
|
|
200
|
+
<dl>
|
|
201
|
+
<div>
|
|
202
|
+
<dt><label for="cspanfull-ex-input-a">Input A</label></dt>
|
|
203
|
+
<!-- this spans 2 columns on row 1 -->
|
|
204
|
+
<dd class="colspan-2"><input type="text" id="cspanfull-ex-input-a" name="cspanfull-ex-input-a"></dd>
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
<div>
|
|
208
|
+
<dt><label for="cspanfull-ex-input-b">Input B</label></dt>
|
|
209
|
+
<!-- this spans the full width of row 2 -->
|
|
210
|
+
<dd class="colspan-full"><input type="text" id="cspanfull-ex-input-b" name="cspanfull-ex-input-b"></dd>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
<div>
|
|
214
|
+
<!-- this spans 1 column on row 3 -->
|
|
215
|
+
<dt><label for="cspanfull-ex-input-c">Input C</label></dt>
|
|
216
|
+
<dd><input type="text" id="cspanfull-ex-input-c" name="cspanfull-ex-input-c"></dd>
|
|
217
|
+
</div>
|
|
218
|
+
</dl>
|
|
219
|
+
</fieldset>
|
|
220
|
+
</form>
|
|
221
|
+
</escape></code></pre>
|
|
222
|
+
|
|
223
|
+
<form class="semanticForms">
|
|
224
|
+
<fieldset>
|
|
225
|
+
<dl>
|
|
226
|
+
<div>
|
|
227
|
+
<dt><label for="cspanfull-ex-input-a">Input A</label></dt>
|
|
228
|
+
<!-- this spans 2 columns on row 1 -->
|
|
229
|
+
<dd class="colspan-2"><input type="text" id="cspanfull-ex-input-a" name="cspanfull-ex-input-a"></dd>
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
<div>
|
|
233
|
+
<dt><label for="cspanfull-ex-input-b">Input B</label></dt>
|
|
234
|
+
<!-- this spans the full width of row 2 -->
|
|
235
|
+
<dd class="colspan-full"><input type="text" id="cspanfull-ex-input-b" name="cspanfull-ex-input-b"></dd>
|
|
236
|
+
</div>
|
|
237
|
+
|
|
238
|
+
<div>
|
|
239
|
+
<!-- this spans 1 column on row 3 -->
|
|
240
|
+
<dt><label for="cspanfull-ex-input-c">Input C</label></dt>
|
|
241
|
+
<dd><input type="text" id="cspanfull-ex-input-c" name="cspanfull-ex-input-c"></dd>
|
|
242
|
+
</div>
|
|
243
|
+
</dl>
|
|
244
|
+
</fieldset>
|
|
245
|
+
</form>
|
|
246
|
+
|
|
247
|
+
<h3 id="alignmentclasses">Align elements within the responsive grid</h3>
|
|
248
|
+
|
|
249
|
+
<p>Use classes to align an element at the start, center, or end of its available space. Available classes are <code>align-start</code>, <code>align-center</code>, and <code>align-end</code>.</p>
|
|
250
|
+
|
|
251
|
+
<pre><code class='language-html' lang='html'><escape>
|
|
252
|
+
<form class="semanticForms" method="post">
|
|
253
|
+
<dl class="colspan-3">
|
|
254
|
+
<div>
|
|
255
|
+
<dt><label for="align-start">align-start</label></dt>
|
|
256
|
+
<dd class="align-start"><input id="align-start" name="align-start" type="text"></dd>
|
|
257
|
+
</div>
|
|
258
|
+
|
|
259
|
+
<div>
|
|
260
|
+
<dt><label for="align-center">align-center</label></dt>
|
|
261
|
+
<dd class="align-center"><input id="align-center" name="align-center" type="text"></dd>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
<div>
|
|
265
|
+
<dt><label for="align-end">align-end</label></dt>
|
|
266
|
+
<dd class="align-end"><input id="align-end" name="align-end" type="text"></dd>
|
|
267
|
+
</div>
|
|
268
|
+
</dl>
|
|
269
|
+
</form>
|
|
270
|
+
</escape></code></pre>
|
|
271
|
+
|
|
272
|
+
<form class="semanticForms" method="post">
|
|
273
|
+
<dl class="colspan-3">
|
|
274
|
+
<div>
|
|
275
|
+
<dt><label for="align-start">align-start</label></dt>
|
|
276
|
+
<dd class="align-start"><input id="align-start" name="align-start" type="text"></dd>
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
<div>
|
|
280
|
+
<dt><label for="align-center">align-center</label></dt>
|
|
281
|
+
<dd class="align-center"><input id="align-center" name="align-center" type="text"></dd>
|
|
282
|
+
</div>
|
|
283
|
+
|
|
284
|
+
<div>
|
|
285
|
+
<dt><label for="align-end">align-end</label></dt>
|
|
286
|
+
<dd class="align-end"><input id="align-end" name="align-end" type="text"></dd>
|
|
287
|
+
</div>
|
|
288
|
+
</dl>
|
|
289
|
+
</form>
|
|
290
|
+
|
|
291
|
+
<h3 id="setcolnumber">Set which column a single input field goes in</h3>
|
|
292
|
+
|
|
293
|
+
<p>You can place a field in a particular column using the <code>col-#</code> class on the <code><!--#<dd>--></code> element. Available numbered classes are <code>col-1</code> through <code>col-5</code>. It can be combined with <code>colspan-#</code>, in which case <code>col-#</code> decides where the field starts and <code>colspan-#</code> decides how wide it is.</p>
|
|
294
|
+
|
|
295
|
+
<p>Positions are responsive in the same way spans are: when the form narrows to fewer columns than the class asks for, the field falls back to flowing into the next free space rather than forcing a column that is no longer there.</p>
|
|
296
|
+
|
|
297
|
+
<pre><code class='language-html' lang='html'><escape>
|
|
298
|
+
<form class="semanticForms">
|
|
299
|
+
<fieldset>
|
|
300
|
+
<dl class="colspan-3">
|
|
301
|
+
<div>
|
|
302
|
+
<dt><label for="col-ex-input-a">Input A</label></dt>
|
|
303
|
+
<!-- third column -->
|
|
304
|
+
<dd class="col-3"><input type="text" id="col-ex-input-a" name="col-ex-input-a"></dd>
|
|
305
|
+
</div>
|
|
306
|
+
|
|
307
|
+
<div>
|
|
308
|
+
<dt><label for="col-ex-input-b">Input B</label></dt>
|
|
309
|
+
<!-- first column -->
|
|
310
|
+
<dd class="col-1"><input type="text" id="col-ex-input-b" name="col-ex-input-b"></dd>
|
|
311
|
+
</div>
|
|
312
|
+
|
|
313
|
+
<div>
|
|
314
|
+
<dt><label for="col-ex-input-c">Input C</label></dt>
|
|
315
|
+
<!-- starts in the second column and spans two -->
|
|
316
|
+
<dd class="col-2 colspan-2"><input type="text" id="col-ex-input-c" name="col-ex-input-c"></dd>
|
|
317
|
+
</div>
|
|
318
|
+
</dl>
|
|
319
|
+
</fieldset>
|
|
320
|
+
</form>
|
|
321
|
+
</escape></code></pre>
|
|
322
|
+
|
|
323
|
+
<form class="semanticForms">
|
|
324
|
+
<fieldset>
|
|
325
|
+
<dl class="colspan-3">
|
|
326
|
+
<div>
|
|
327
|
+
<dt><label for="col-ex-input-a">Input A</label></dt>
|
|
328
|
+
<dd class="col-3"><input type="text" id="col-ex-input-a" name="col-ex-input-a"></dd>
|
|
329
|
+
</div>
|
|
330
|
+
|
|
331
|
+
<div>
|
|
332
|
+
<dt><label for="col-ex-input-b">Input B</label></dt>
|
|
333
|
+
<dd class="col-1"><input type="text" id="col-ex-input-b" name="col-ex-input-b"></dd>
|
|
334
|
+
</div>
|
|
335
|
+
|
|
336
|
+
<div>
|
|
337
|
+
<dt><label for="col-ex-input-c">Input C</label></dt>
|
|
338
|
+
<dd class="col-2 colspan-2"><input type="text" id="col-ex-input-c" name="col-ex-input-c"></dd>
|
|
339
|
+
</div>
|
|
340
|
+
</dl>
|
|
341
|
+
</fieldset>
|
|
342
|
+
</form>
|
|
343
|
+
|
|
344
|
+
<h2 id="tables">Tables</h2>
|
|
345
|
+
|
|
346
|
+
<p>Applying the <code>semanticForms</code> class to a <code><!--#<table>--></code> styles the table itself and any fields inside its cells. A <code><!--#<tr>--></code> with a class of <code>title</code> is styled as a title row spanning the table.</p>
|
|
347
|
+
|
|
348
|
+
<pre><code class='language-html' lang='html'><escape>
|
|
349
|
+
<table class="semanticForms">
|
|
350
|
+
<thead>
|
|
351
|
+
<tr class="title"><th colspan="2">Table title</th></tr>
|
|
352
|
+
<tr><th>Column 1</th><th>Column 2</th></tr>
|
|
353
|
+
</thead>
|
|
354
|
+
<tbody>
|
|
355
|
+
<tr>
|
|
356
|
+
<td>1</td>
|
|
357
|
+
<td><input type="text" id="table-ex-input" name="table-ex-input" placeholder="A text input in a table"></td>
|
|
358
|
+
</tr>
|
|
359
|
+
</tbody>
|
|
360
|
+
</table>
|
|
361
|
+
</escape></code></pre>
|
|
362
|
+
|
|
363
|
+
<table class="semanticForms">
|
|
364
|
+
<thead>
|
|
365
|
+
<tr class="title"><th colspan="2">Table title</th></tr>
|
|
366
|
+
<tr><th>Column 1</th><th>Column 2</th></tr>
|
|
367
|
+
</thead>
|
|
368
|
+
<tbody>
|
|
369
|
+
<tr>
|
|
370
|
+
<td>1</td>
|
|
371
|
+
<td><input type="text" id="table-ex-input" name="table-ex-input" placeholder="A text input in a table"></td>
|
|
372
|
+
</tr>
|
|
373
|
+
</tbody>
|
|
374
|
+
</table>
|
|
375
|
+
|
|
376
|
+
<p>A whole <code><!--#<form class="semanticForms">--></code> can also go inside a single cell of a table that has no <code>semanticForms</code> class of its own, if you would rather leave the table unstyled.</p>
|
|
377
|
+
|
|
378
|
+
<h2 id="fieldsets">Fieldsets and details</h2>
|
|
379
|
+
|
|
380
|
+
<p>A <code><!--#<fieldset>--></code> groups fields under its <code><!--#<legend>--></code>. Nesting one inside another darkens it, so the levels stay distinguishable, and <code><!--#<details>--></code> elements are styled and animated the same way as a nested fieldset.</p>
|
|
381
|
+
|
|
382
|
+
<pre><code class='language-html' lang='html'><escape>
|
|
383
|
+
<form class="semanticForms">
|
|
384
|
+
<fieldset>
|
|
385
|
+
<legend>Outer group</legend>
|
|
386
|
+
<fieldset>
|
|
387
|
+
<legend>Inner group</legend>
|
|
388
|
+
<dl>
|
|
389
|
+
<div>
|
|
390
|
+
<dt><label for="nested-ex-input">Input</label></dt>
|
|
391
|
+
<dd><input type="text" id="nested-ex-input" name="nested-ex-input"></dd>
|
|
392
|
+
</div>
|
|
393
|
+
</dl>
|
|
394
|
+
</fieldset>
|
|
395
|
+
|
|
396
|
+
<details>
|
|
397
|
+
<summary>Show more</summary>
|
|
398
|
+
<dl>
|
|
399
|
+
<div>
|
|
400
|
+
<dt><label for="details-ex-input">Hidden until opened</label></dt>
|
|
401
|
+
<dd><input type="text" id="details-ex-input" name="details-ex-input"></dd>
|
|
402
|
+
</div>
|
|
403
|
+
</dl>
|
|
404
|
+
</details>
|
|
405
|
+
</fieldset>
|
|
406
|
+
</form>
|
|
407
|
+
</escape></code></pre>
|
|
408
|
+
|
|
409
|
+
<form class="semanticForms">
|
|
410
|
+
<fieldset>
|
|
411
|
+
<legend>Outer group</legend>
|
|
412
|
+
<fieldset>
|
|
413
|
+
<legend>Inner group</legend>
|
|
414
|
+
<dl>
|
|
415
|
+
<div>
|
|
416
|
+
<dt><label for="nested-ex-input">Input</label></dt>
|
|
417
|
+
<dd><input type="text" id="nested-ex-input" name="nested-ex-input"></dd>
|
|
418
|
+
</div>
|
|
419
|
+
</dl>
|
|
420
|
+
</fieldset>
|
|
421
|
+
|
|
422
|
+
<details>
|
|
423
|
+
<summary>Show more</summary>
|
|
424
|
+
<dl>
|
|
425
|
+
<div>
|
|
426
|
+
<dt><label for="details-ex-input">Hidden until opened</label></dt>
|
|
427
|
+
<dd><input type="text" id="details-ex-input" name="details-ex-input"></dd>
|
|
428
|
+
</div>
|
|
429
|
+
</dl>
|
|
430
|
+
</details>
|
|
431
|
+
</fieldset>
|
|
432
|
+
</form>
|
|
433
|
+
|
|
434
|
+
<h2 id="ptags">Fields in p tags</h2>
|
|
435
|
+
|
|
436
|
+
<p>Where a <code><!--#<dl>--></code> is more structure than you need, a field and its label can go in a <code><!--#<p>--></code> instead. These do not get the float label treatment, so the label stays beside the field.</p>
|
|
437
|
+
|
|
438
|
+
<pre><code class='language-html' lang='html'><escape>
|
|
439
|
+
<form class="semanticForms">
|
|
440
|
+
<p>
|
|
441
|
+
<label for="p-ex-input">Text input</label>
|
|
442
|
+
<input type="text" id="p-ex-input" name="p-ex-input">
|
|
443
|
+
</p>
|
|
444
|
+
<p>
|
|
445
|
+
<input type="checkbox" id="p-ex-checkbox" name="p-ex-checkbox">
|
|
446
|
+
<label for="p-ex-checkbox">Checkbox</label>
|
|
447
|
+
</p>
|
|
448
|
+
</form>
|
|
449
|
+
</escape></code></pre>
|
|
450
|
+
|
|
451
|
+
<form class="semanticForms">
|
|
452
|
+
<p>
|
|
453
|
+
<label for="p-ex-input">Text input</label>
|
|
454
|
+
<input type="text" id="p-ex-input" name="p-ex-input">
|
|
455
|
+
</p>
|
|
456
|
+
<p>
|
|
457
|
+
<input type="checkbox" id="p-ex-checkbox" name="p-ex-checkbox">
|
|
458
|
+
<label for="p-ex-checkbox">Checkbox</label>
|
|
459
|
+
</p>
|
|
460
|
+
</form>
|
|
461
|
+
|
|
462
|
+
<h2 id="tabs">Tabs</h2>
|
|
463
|
+
|
|
464
|
+
<p>Add the <code>tabs</code> class to an element holding one <code><!--#<fieldset>--></code> per tab. Each fieldset's <code><!--#<legend>--></code> names its tab.</p>
|
|
465
|
+
|
|
466
|
+
<p>Semantic Forms builds the tab strip, wires up the <code>tab</code> and <code>tabpanel</code> roles, and moves between tabs with the left and right arrow keys, <kbd>Home</kbd>, and <kbd>End</kbd>. Left alone the markup is a stack of labelled field groups, which is what a visitor without JavaScript gets, so nothing is hidden from them.</p>
|
|
467
|
+
|
|
468
|
+
<pre><code class='language-html' lang='html'><escape>
|
|
469
|
+
<form class="semanticForms">
|
|
470
|
+
<div class="tabs">
|
|
471
|
+
<fieldset>
|
|
472
|
+
<legend>Account</legend>
|
|
473
|
+
<dl>
|
|
474
|
+
<div>
|
|
475
|
+
<dt><label for="tabs-ex-username">Username</label></dt>
|
|
476
|
+
<dd><input type="text" id="tabs-ex-username" name="tabs-ex-username"></dd>
|
|
477
|
+
</div>
|
|
478
|
+
</dl>
|
|
479
|
+
</fieldset>
|
|
480
|
+
|
|
481
|
+
<fieldset>
|
|
482
|
+
<legend>Preferences</legend>
|
|
483
|
+
<dl>
|
|
484
|
+
<div>
|
|
485
|
+
<dt><label for="tabs-ex-newsletter">Newsletter</label></dt>
|
|
486
|
+
<dd><input type="checkbox" switch id="tabs-ex-newsletter" name="tabs-ex-newsletter"></dd>
|
|
487
|
+
</div>
|
|
488
|
+
</dl>
|
|
489
|
+
</fieldset>
|
|
490
|
+
</div>
|
|
491
|
+
</form>
|
|
492
|
+
</escape></code></pre>
|
|
493
|
+
|
|
494
|
+
<form class="semanticForms">
|
|
495
|
+
<div class="tabs">
|
|
496
|
+
<fieldset>
|
|
497
|
+
<legend>Account</legend>
|
|
498
|
+
<dl>
|
|
499
|
+
<div>
|
|
500
|
+
<dt><label for="tabs-ex-username">Username</label></dt>
|
|
501
|
+
<dd><input type="text" id="tabs-ex-username" name="tabs-ex-username"></dd>
|
|
502
|
+
</div>
|
|
503
|
+
</dl>
|
|
504
|
+
</fieldset>
|
|
505
|
+
|
|
506
|
+
<fieldset>
|
|
507
|
+
<legend>Preferences</legend>
|
|
508
|
+
<dl>
|
|
509
|
+
<div>
|
|
510
|
+
<dt><label for="tabs-ex-newsletter">Newsletter</label></dt>
|
|
511
|
+
<dd><input type="checkbox" switch id="tabs-ex-newsletter" name="tabs-ex-newsletter"></dd>
|
|
512
|
+
</div>
|
|
513
|
+
</dl>
|
|
514
|
+
</fieldset>
|
|
515
|
+
</div>
|
|
516
|
+
</form>
|
|
517
|
+
|
|
518
|
+
<p>The tab strip takes its colors from <code>--semanticFormsButtonGradientLight</code> and <code>--semanticFormsButtonGradientDark</code> for the unselected tabs, and <code>--semanticFormsFormSubBgColor</code> for the selected one, so it matches the buttons and fieldsets around it.</p>
|
|
519
|
+
</article>
|
|
520
|
+
</arg>
|
|
521
|
+
</include>
|
|
@@ -24,7 +24,15 @@
|
|
|
24
24
|
<nav>
|
|
25
25
|
<ul>
|
|
26
26
|
<li><a href="/index.html">About</a></li>
|
|
27
|
-
<li><a href="/usage.html">Usage</a
|
|
27
|
+
<li><a href="/usage.html">Usage</a>
|
|
28
|
+
<ul>
|
|
29
|
+
<li><a href="/inputs.html">Inputs</a></li>
|
|
30
|
+
<li><a href="/checkboxes.html">Checkboxes, radios and switches</a></li>
|
|
31
|
+
<li><a href="/buttons.html">Buttons</a></li>
|
|
32
|
+
<li><a href="/layout.html">Layout</a></li>
|
|
33
|
+
<li><a href="/theming.html">Theming</a></li>
|
|
34
|
+
</ul>
|
|
35
|
+
</li>
|
|
28
36
|
<li><a href="/fullDemo.html">Full demo</a></li>
|
|
29
37
|
</ul>
|
|
30
38
|
</nav>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<include src="layouts/main">
|
|
2
|
+
<arg pageTitle>Semantic Forms — Theming</arg>
|
|
3
|
+
<arg pageContent>
|
|
4
|
+
<article>
|
|
5
|
+
<p><a href="/usage.html">← Usage</a></p>
|
|
6
|
+
|
|
7
|
+
<h2 id="lightanddarkmode">Light mode and dark mode</h2>
|
|
8
|
+
|
|
9
|
+
<p>Light mode and dark mode will be detected automatically based on operating system preference. To set it manually, you can apply an additional class of <code>light</code> or <code>dark</code> to your <code><!--#<form>--></code> elements to force the mode.</p>
|
|
10
|
+
|
|
11
|
+
<h2 id="overriding">Overriding default styles</h2>
|
|
12
|
+
|
|
13
|
+
<p>The most convenient way to override the default styles in Semantic Forms is to override the built-in CSS variables.</p>
|
|
14
|
+
|
|
15
|
+
<p>For example:</p>
|
|
16
|
+
|
|
17
|
+
<pre><code class='language-css' lang='css'><escape>
|
|
18
|
+
form.semanticForms {
|
|
19
|
+
/* will overwrite the default semantic-forms values */
|
|
20
|
+
--semanticFormsFontFamily: monospace;
|
|
21
|
+
--semanticFormsTextColor: blue;
|
|
22
|
+
--semanticFormsInputMinWidth: 300px;
|
|
23
|
+
}
|
|
24
|
+
</escape></code></pre>
|
|
25
|
+
|
|
26
|
+
<h3 id="widthvariables">Controlling how wide fields get</h3>
|
|
27
|
+
|
|
28
|
+
<p>Fields are laid out in a grid whose columns grow to fill the available width. Three variables control the sizing:</p>
|
|
29
|
+
|
|
30
|
+
<ul>
|
|
31
|
+
<li><code>--semanticFormsInputMinWidth</code> (default <code>250px</code>): the narrowest a column may be. This is what decides how many columns fit across, and so how many fields sit side by side.</li>
|
|
32
|
+
<li><code>--semanticFormsInputColumnMaxWidth</code> (default <code>1fr</code>): the widest a column may be. The default lets the columns share out whatever space is left over. Set a length to stop them growing past it. A value below <code>--semanticFormsInputMinWidth</code> has no effect, since the minimum wins.</li>
|
|
33
|
+
<li><code>--semanticFormsInputMaxWidth</code> (default <code>365px</code>): the widest the field itself may be inside its column. Use this to keep fields a readable width while the columns themselves stay wide.</li>
|
|
34
|
+
</ul>
|
|
35
|
+
|
|
36
|
+
<p>For a complete list of CSS variables you can override, <a href="https://github.com/rooseveltframework/semantic-forms/blob/main/styles/globals.scss">see the top of styles/globals.scss</a>.</p>
|
|
37
|
+
</article>
|
|
38
|
+
</arg>
|
|
39
|
+
</include>
|