@nordcode/ui 1.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.
- package/CHANGELOG.md +157 -0
- package/LICENSE.md +661 -0
- package/README.md +90 -0
- package/index.html +1169 -0
- package/out/bundle.css +1400 -0
- package/out/bundle_configless.css +1135 -0
- package/out/colors.css +87 -0
- package/out/complete.css +2647 -0
- package/out/complete_configless.css +2382 -0
- package/package.json +73 -0
- package/src/assets/fonts/DMMono-Regular.woff +0 -0
- package/src/assets/fonts/DMMono-Regular.woff2 +0 -0
- package/src/assets/fonts/fonts.css +7 -0
- package/src/assets/icons/ArrowRightSolid.svelte +1 -0
- package/src/assets/icons/arrow-right-solid.svg +1 -0
- package/src/assets/icons/favicon.png +0 -0
- package/src/assets/icons/favicon.svg +8 -0
- package/src/assets/logos/nordcode-logo-icon.svg +3 -0
- package/src/assets/logos/nordcode-logo.svg +17 -0
- package/src/modules/copyButtons/ts/copyButtons.ts +9 -0
- package/src/modules/dialogs/svelte/dialog.svelte +27 -0
- package/src/modules/dialogs/ts/LICENCE +171 -0
- package/src/modules/dialogs/ts/dialogs.ts +111 -0
- package/src/modules/notifications/js/notifications.js +294 -0
- package/src/modules/notifications/svelte/NotificationCenter.svelte +18 -0
- package/src/modules/notifications/svelte/NotificationTemplate.svelte +16 -0
- package/src/modules/sectionObserver/ts/sectionOberserver.ts +34 -0
- package/src/styles/bundle.css +7 -0
- package/src/styles/bundle_configless.css +5 -0
- package/src/styles/complete.css +5 -0
- package/src/styles/complete_configless.css +5 -0
- package/src/styles/components/badges.css +14 -0
- package/src/styles/components/breadcrumbs.css +37 -0
- package/src/styles/components/bundle.css +12 -0
- package/src/styles/components/buttons.css +256 -0
- package/src/styles/components/card.css +55 -0
- package/src/styles/components/dialogs.css +116 -0
- package/src/styles/components/forms.css +47 -0
- package/src/styles/components/gallery.css +66 -0
- package/src/styles/components/icons.css +60 -0
- package/src/styles/components/inputs/base.css +258 -0
- package/src/styles/components/inputs/bundle.css +5 -0
- package/src/styles/components/inputs/fields.css +79 -0
- package/src/styles/components/inputs/segmented.css +123 -0
- package/src/styles/components/inputs/switch.css +42 -0
- package/src/styles/components/inputs/tag-select.css +44 -0
- package/src/styles/components/lists.css +40 -0
- package/src/styles/components/notifications.css +137 -0
- package/src/styles/components/tables.css +7 -0
- package/src/styles/config/bundle.css +2 -0
- package/src/styles/config/config.css +828 -0
- package/src/styles/config/extras.css +18 -0
- package/src/styles/exceptions/bundle.css +3 -0
- package/src/styles/exceptions/misc.css +21 -0
- package/src/styles/exceptions/spacings.css +15 -0
- package/src/styles/exceptions/typography.css +57 -0
- package/src/styles/theme/colors.css +178 -0
- package/src/styles/theme/colors_processed.css +87 -0
- package/src/styles/utils/base.css +406 -0
- package/src/styles/utils/bundle.css +6 -0
- package/src/styles/utils/easings.css +364 -0
- package/src/styles/utils/layouts.css +298 -0
- package/src/styles/utils/media.css +55 -0
- package/src/styles/utils/reset.css +128 -0
- package/src/styles/utils/theme.css +120 -0
- package/transform.js +71 -0
package/index.html
ADDED
|
@@ -0,0 +1,1169 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>HTML5 Test Page</title>
|
|
7
|
+
|
|
8
|
+
<link rel="stylesheet" href="out/bundle.css" />
|
|
9
|
+
<link rel="stylesheet" href="out/components/inputs.css" />
|
|
10
|
+
<link rel="stylesheet" href="out/components/buttons.css" />
|
|
11
|
+
<link rel="stylesheet" href="src/assets/fonts/fonts.css" />
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<div id="top" role="document">
|
|
15
|
+
<header>
|
|
16
|
+
<h1>HTML5 Test Page</h1>
|
|
17
|
+
<p>
|
|
18
|
+
This is a test page filled with common HTML elements to be used to provide
|
|
19
|
+
visual feedback whilst building CSS systems and frameworks.
|
|
20
|
+
</p>
|
|
21
|
+
</header>
|
|
22
|
+
<nav>
|
|
23
|
+
<ul>
|
|
24
|
+
<li>
|
|
25
|
+
<a href="#colors">Colors</a>
|
|
26
|
+
</li>
|
|
27
|
+
<li>
|
|
28
|
+
<a href="#text">Text</a>
|
|
29
|
+
<ul>
|
|
30
|
+
<li><a href="#text__headings">Headings</a></li>
|
|
31
|
+
<li><a href="#text__paragraphs">Paragraphs</a></li>
|
|
32
|
+
<li><a href="#text__lists">Lists</a></li>
|
|
33
|
+
<li><a href="#text__blockquotes">Blockquotes</a></li>
|
|
34
|
+
<li><a href="#text__details">Details / Summary</a></li>
|
|
35
|
+
<li><a href="#text__address">Address</a></li>
|
|
36
|
+
<li><a href="#text__hr">Horizontal rules</a></li>
|
|
37
|
+
<li><a href="#text__tables">Tabular data</a></li>
|
|
38
|
+
<li><a href="#text__code">Code</a></li>
|
|
39
|
+
<li><a href="#text__inline">Inline elements</a></li>
|
|
40
|
+
<li><a href="#text__comments">HTML Comments</a></li>
|
|
41
|
+
</ul>
|
|
42
|
+
</li>
|
|
43
|
+
<li>
|
|
44
|
+
<a href="#embedded">Embedded content</a>
|
|
45
|
+
<ul>
|
|
46
|
+
<li><a href="#embedded__images">Images</a></li>
|
|
47
|
+
<li><a href="#embedded__bgimages">Background images</a></li>
|
|
48
|
+
<li><a href="#embedded__audio">Audio</a></li>
|
|
49
|
+
<li><a href="#embedded__video">Video</a></li>
|
|
50
|
+
<li><a href="#embedded__canvas">Canvas</a></li>
|
|
51
|
+
<li><a href="#embedded__meter">Meter</a></li>
|
|
52
|
+
<li><a href="#embedded__progress">Progress</a></li>
|
|
53
|
+
<li><a href="#embedded__svg">Inline SVG</a></li>
|
|
54
|
+
<li><a href="#embedded__iframe">IFrames</a></li>
|
|
55
|
+
<li><a href="#embedded__embed">Embed</a></li>
|
|
56
|
+
<li><a href="#embedded__object">Object</a></li>
|
|
57
|
+
</ul>
|
|
58
|
+
</li>
|
|
59
|
+
<li>
|
|
60
|
+
<a href="#forms">Form elements</a>
|
|
61
|
+
<ul>
|
|
62
|
+
<li><a href="#forms__input">Input fields</a></li>
|
|
63
|
+
<li><a href="#forms__select">Select menus</a></li>
|
|
64
|
+
<li><a href="#forms__checkbox">Checkboxes</a></li>
|
|
65
|
+
<li><a href="#forms__radio">Radio buttons</a></li>
|
|
66
|
+
<li><a href="#forms__textareas">Textareas</a></li>
|
|
67
|
+
<li><a href="#forms__html5">HTML5 inputs</a></li>
|
|
68
|
+
<li><a href="#forms__action">Action buttons</a></li>
|
|
69
|
+
</ul>
|
|
70
|
+
</li>
|
|
71
|
+
<li>
|
|
72
|
+
<a href="#layouts">
|
|
73
|
+
<ul>
|
|
74
|
+
<li>
|
|
75
|
+
<a href="#box">Box</a>
|
|
76
|
+
<a href="#stack">Stack</a>
|
|
77
|
+
</li>
|
|
78
|
+
</ul>
|
|
79
|
+
</a>
|
|
80
|
+
</li>
|
|
81
|
+
</ul>
|
|
82
|
+
</nav>
|
|
83
|
+
<main>
|
|
84
|
+
<section id="colors" class="stack">
|
|
85
|
+
<header><h1>Colors</h1></header>
|
|
86
|
+
<div class="stack -layout-none">
|
|
87
|
+
<div
|
|
88
|
+
style="
|
|
89
|
+
display: grid;
|
|
90
|
+
align-items: center;
|
|
91
|
+
gap: var(--spacing-near);
|
|
92
|
+
grid-template-columns: auto 1fr;
|
|
93
|
+
"
|
|
94
|
+
>
|
|
95
|
+
<div
|
|
96
|
+
style="
|
|
97
|
+
inline-size: 100px;
|
|
98
|
+
block-size: 50px;
|
|
99
|
+
box-shadow: 0 0 0 1px #000;
|
|
100
|
+
background-color: var(--color-brand-primary-strong);
|
|
101
|
+
"
|
|
102
|
+
></div>
|
|
103
|
+
<small>color-brand-primary-strong</small>
|
|
104
|
+
</div>
|
|
105
|
+
<div
|
|
106
|
+
style="
|
|
107
|
+
display: grid;
|
|
108
|
+
align-items: center;
|
|
109
|
+
gap: var(--spacing-near);
|
|
110
|
+
grid-template-columns: auto 1fr;
|
|
111
|
+
"
|
|
112
|
+
>
|
|
113
|
+
<div
|
|
114
|
+
style="
|
|
115
|
+
inline-size: 100px;
|
|
116
|
+
block-size: 50px;
|
|
117
|
+
box-shadow: 0 0 0 1px #000;
|
|
118
|
+
background-color: var(--color-brand-primary-base);
|
|
119
|
+
"
|
|
120
|
+
></div>
|
|
121
|
+
<small>color-brand-primary-base</small>
|
|
122
|
+
</div>
|
|
123
|
+
<div
|
|
124
|
+
style="
|
|
125
|
+
display: grid;
|
|
126
|
+
align-items: center;
|
|
127
|
+
gap: var(--spacing-near);
|
|
128
|
+
grid-template-columns: auto 1fr;
|
|
129
|
+
"
|
|
130
|
+
>
|
|
131
|
+
<div
|
|
132
|
+
style="
|
|
133
|
+
inline-size: 100px;
|
|
134
|
+
block-size: 50px;
|
|
135
|
+
box-shadow: 0 0 0 1px #000;
|
|
136
|
+
background-color: var(--color-brand-primary-subtle);
|
|
137
|
+
"
|
|
138
|
+
></div>
|
|
139
|
+
<small>color-brand-primary-subtle</small>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<div
|
|
143
|
+
style="
|
|
144
|
+
display: grid;
|
|
145
|
+
align-items: center;
|
|
146
|
+
gap: var(--spacing-near);
|
|
147
|
+
grid-template-columns: auto 1fr;
|
|
148
|
+
"
|
|
149
|
+
>
|
|
150
|
+
<div
|
|
151
|
+
style="
|
|
152
|
+
inline-size: 100px;
|
|
153
|
+
block-size: 50px;
|
|
154
|
+
box-shadow: 0 0 0 1px #000;
|
|
155
|
+
background-color: var(--color-brand-secondary-strong);
|
|
156
|
+
"
|
|
157
|
+
></div>
|
|
158
|
+
<small>color-brand-secondary-strong</small>
|
|
159
|
+
</div>
|
|
160
|
+
<div
|
|
161
|
+
style="
|
|
162
|
+
display: grid;
|
|
163
|
+
align-items: center;
|
|
164
|
+
gap: var(--spacing-near);
|
|
165
|
+
grid-template-columns: auto 1fr;
|
|
166
|
+
"
|
|
167
|
+
>
|
|
168
|
+
<div
|
|
169
|
+
style="
|
|
170
|
+
inline-size: 100px;
|
|
171
|
+
block-size: 50px;
|
|
172
|
+
box-shadow: 0 0 0 1px #000;
|
|
173
|
+
background-color: var(--color-brand-secondary-base);
|
|
174
|
+
"
|
|
175
|
+
></div>
|
|
176
|
+
<small>color-brand-secondary-base</small>
|
|
177
|
+
</div>
|
|
178
|
+
<div
|
|
179
|
+
style="
|
|
180
|
+
display: grid;
|
|
181
|
+
align-items: center;
|
|
182
|
+
gap: var(--spacing-near);
|
|
183
|
+
grid-template-columns: auto 1fr;
|
|
184
|
+
"
|
|
185
|
+
>
|
|
186
|
+
<div
|
|
187
|
+
style="
|
|
188
|
+
inline-size: 100px;
|
|
189
|
+
block-size: 50px;
|
|
190
|
+
box-shadow: 0 0 0 1px #000;
|
|
191
|
+
background-color: var(--color-brand-secondary-subtle);
|
|
192
|
+
"
|
|
193
|
+
></div>
|
|
194
|
+
<small>color-brand-secondary-subtle</small>
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
<div
|
|
198
|
+
style="
|
|
199
|
+
display: grid;
|
|
200
|
+
align-items: center;
|
|
201
|
+
gap: var(--spacing-near);
|
|
202
|
+
grid-template-columns: auto 1fr;
|
|
203
|
+
"
|
|
204
|
+
>
|
|
205
|
+
<div
|
|
206
|
+
style="
|
|
207
|
+
inline-size: 100px;
|
|
208
|
+
block-size: 50px;
|
|
209
|
+
box-shadow: 0 0 0 1px #000;
|
|
210
|
+
background-color: var(--color-text-strong);
|
|
211
|
+
"
|
|
212
|
+
></div>
|
|
213
|
+
<small>color-text-strong</small>
|
|
214
|
+
</div>
|
|
215
|
+
<div
|
|
216
|
+
style="
|
|
217
|
+
display: grid;
|
|
218
|
+
align-items: center;
|
|
219
|
+
gap: var(--spacing-near);
|
|
220
|
+
grid-template-columns: auto 1fr;
|
|
221
|
+
"
|
|
222
|
+
>
|
|
223
|
+
<div
|
|
224
|
+
style="
|
|
225
|
+
inline-size: 100px;
|
|
226
|
+
block-size: 50px;
|
|
227
|
+
box-shadow: 0 0 0 1px #000;
|
|
228
|
+
background-color: var(--color-text-base);
|
|
229
|
+
"
|
|
230
|
+
></div>
|
|
231
|
+
<small>color-text-base</small>
|
|
232
|
+
</div>
|
|
233
|
+
<div
|
|
234
|
+
style="
|
|
235
|
+
display: grid;
|
|
236
|
+
align-items: center;
|
|
237
|
+
gap: var(--spacing-near);
|
|
238
|
+
grid-template-columns: auto 1fr;
|
|
239
|
+
"
|
|
240
|
+
>
|
|
241
|
+
<div
|
|
242
|
+
style="
|
|
243
|
+
inline-size: 100px;
|
|
244
|
+
block-size: 50px;
|
|
245
|
+
box-shadow: 0 0 0 1px #000;
|
|
246
|
+
background-color: var(--color-text-subtle);
|
|
247
|
+
"
|
|
248
|
+
></div>
|
|
249
|
+
<small>color-text-subtle</small>
|
|
250
|
+
</div>
|
|
251
|
+
|
|
252
|
+
<div
|
|
253
|
+
style="
|
|
254
|
+
display: grid;
|
|
255
|
+
align-items: center;
|
|
256
|
+
gap: var(--spacing-near);
|
|
257
|
+
grid-template-columns: auto 1fr;
|
|
258
|
+
"
|
|
259
|
+
>
|
|
260
|
+
<div
|
|
261
|
+
style="
|
|
262
|
+
inline-size: 100px;
|
|
263
|
+
block-size: 50px;
|
|
264
|
+
box-shadow: 0 0 0 1px #000;
|
|
265
|
+
background-color: var(--color-surface-strong);
|
|
266
|
+
"
|
|
267
|
+
></div>
|
|
268
|
+
<small>color-surface-strong</small>
|
|
269
|
+
</div>
|
|
270
|
+
<div
|
|
271
|
+
style="
|
|
272
|
+
display: grid;
|
|
273
|
+
align-items: center;
|
|
274
|
+
gap: var(--spacing-near);
|
|
275
|
+
grid-template-columns: auto 1fr;
|
|
276
|
+
"
|
|
277
|
+
>
|
|
278
|
+
<div
|
|
279
|
+
style="
|
|
280
|
+
inline-size: 100px;
|
|
281
|
+
block-size: 50px;
|
|
282
|
+
box-shadow: 0 0 0 1px #000;
|
|
283
|
+
background-color: var(--color-surface-base);
|
|
284
|
+
"
|
|
285
|
+
></div>
|
|
286
|
+
<small>color-surface-base</small>
|
|
287
|
+
</div>
|
|
288
|
+
<div
|
|
289
|
+
style="
|
|
290
|
+
display: grid;
|
|
291
|
+
align-items: center;
|
|
292
|
+
gap: var(--spacing-near);
|
|
293
|
+
grid-template-columns: auto 1fr;
|
|
294
|
+
"
|
|
295
|
+
>
|
|
296
|
+
<div
|
|
297
|
+
style="
|
|
298
|
+
inline-size: 100px;
|
|
299
|
+
block-size: 50px;
|
|
300
|
+
box-shadow: 0 0 0 1px #000;
|
|
301
|
+
background-color: var(--color-surface-subtle);
|
|
302
|
+
"
|
|
303
|
+
></div>
|
|
304
|
+
<small>color-surface-subtle</small>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
<h2>Borders</h2>
|
|
308
|
+
<div class="cluster">
|
|
309
|
+
<div
|
|
310
|
+
class="box"
|
|
311
|
+
style="
|
|
312
|
+
border: var(--border-width-medium) solid var(--color-border-strong);
|
|
313
|
+
"
|
|
314
|
+
>
|
|
315
|
+
<small>color-border-strong</small>
|
|
316
|
+
</div>
|
|
317
|
+
<div
|
|
318
|
+
class="box"
|
|
319
|
+
style="
|
|
320
|
+
border: var(--border-width-medium) solid var(--color-border-base);
|
|
321
|
+
"
|
|
322
|
+
>
|
|
323
|
+
<small>color-border-base</small>
|
|
324
|
+
</div>
|
|
325
|
+
<div
|
|
326
|
+
class="box"
|
|
327
|
+
style="
|
|
328
|
+
border: var(--border-width-medium) solid var(--color-border-subtle);
|
|
329
|
+
"
|
|
330
|
+
>
|
|
331
|
+
<small>color-border-subtle</small>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
<h2>Shadows</h2>
|
|
335
|
+
<div class="cluster">
|
|
336
|
+
<div class="box" style="box-shadow: var(--shadow-inset)">
|
|
337
|
+
<small>Shadow inset</small>
|
|
338
|
+
</div>
|
|
339
|
+
<div class="box" style="box-shadow: var(--shadow-nearest)">
|
|
340
|
+
<small>Shadow nearest</small>
|
|
341
|
+
</div>
|
|
342
|
+
<div class="box" style="box-shadow: var(--shadow-near)">
|
|
343
|
+
<small>Shadow near</small>
|
|
344
|
+
</div>
|
|
345
|
+
<div class="box" style="box-shadow: var(--shadow-away)">
|
|
346
|
+
<small>Shadow away</small>
|
|
347
|
+
</div>
|
|
348
|
+
</div>
|
|
349
|
+
</section>
|
|
350
|
+
<section id="text">
|
|
351
|
+
<header><h1>Text</h1></header>
|
|
352
|
+
<article id="text__headings">
|
|
353
|
+
<header>
|
|
354
|
+
<h2>Headings</h2>
|
|
355
|
+
</header>
|
|
356
|
+
<div>
|
|
357
|
+
<h1>Heading 1</h1>
|
|
358
|
+
<h2>Heading 2</h2>
|
|
359
|
+
<h3>Heading 3</h3>
|
|
360
|
+
<h4>Heading 4</h4>
|
|
361
|
+
<h5>Heading 5</h5>
|
|
362
|
+
<h6>Heading 6</h6>
|
|
363
|
+
</div>
|
|
364
|
+
<footer>
|
|
365
|
+
<p><a href="#top">[Top]</a></p>
|
|
366
|
+
</footer>
|
|
367
|
+
</article>
|
|
368
|
+
<article id="text__paragraphs">
|
|
369
|
+
<header><h2>Paragraphs</h2></header>
|
|
370
|
+
<div>
|
|
371
|
+
<p>
|
|
372
|
+
A paragraph (from the Greek paragraphos, “to write beside” or
|
|
373
|
+
“written beside”) is a self-contained unit of a discourse in writing
|
|
374
|
+
dealing with a particular point or idea. A paragraph consists of one
|
|
375
|
+
or more sentences. Though not required by the syntax of any
|
|
376
|
+
language, paragraphs are usually an expected part of formal writing,
|
|
377
|
+
used to organize longer prose.
|
|
378
|
+
</p>
|
|
379
|
+
</div>
|
|
380
|
+
<footer>
|
|
381
|
+
<p><a href="#top">[Top]</a></p>
|
|
382
|
+
</footer>
|
|
383
|
+
</article>
|
|
384
|
+
<article id="text__blockquotes">
|
|
385
|
+
<header><h2>Blockquotes</h2></header>
|
|
386
|
+
<div>
|
|
387
|
+
<blockquote>
|
|
388
|
+
<p>
|
|
389
|
+
A block quotation (also known as a long quotation or extract) is
|
|
390
|
+
a quotation in a written document, that is set off from the main
|
|
391
|
+
text as a paragraph, or block of text.
|
|
392
|
+
</p>
|
|
393
|
+
<p>
|
|
394
|
+
It is typically distinguished visually using indentation and a
|
|
395
|
+
different typeface or smaller size quotation. It may or may not
|
|
396
|
+
include a citation, usually placed at the bottom.
|
|
397
|
+
</p>
|
|
398
|
+
<cite><a href="#!">Said no one, ever.</a></cite>
|
|
399
|
+
</blockquote>
|
|
400
|
+
</div>
|
|
401
|
+
<footer>
|
|
402
|
+
<p><a href="#top">[Top]</a></p>
|
|
403
|
+
</footer>
|
|
404
|
+
</article>
|
|
405
|
+
<article id="text__lists">
|
|
406
|
+
<header><h2>Lists</h2></header>
|
|
407
|
+
<div>
|
|
408
|
+
<h3>Definition list</h3>
|
|
409
|
+
<dl>
|
|
410
|
+
<dt>Definition List Title</dt>
|
|
411
|
+
<dd>This is a definition list division.</dd>
|
|
412
|
+
</dl>
|
|
413
|
+
<h3>Ordered List</h3>
|
|
414
|
+
<ol type="1">
|
|
415
|
+
<li>List Item 1</li>
|
|
416
|
+
<li>
|
|
417
|
+
List Item 2
|
|
418
|
+
<ol type="A">
|
|
419
|
+
<li>List Item 1</li>
|
|
420
|
+
<li>
|
|
421
|
+
List Item 2
|
|
422
|
+
<ol type="a">
|
|
423
|
+
<li>List Item 1</li>
|
|
424
|
+
<li>
|
|
425
|
+
List Item 2
|
|
426
|
+
<ol type="I">
|
|
427
|
+
<li>List Item 1</li>
|
|
428
|
+
<li>
|
|
429
|
+
List Item 2
|
|
430
|
+
<ol type="i">
|
|
431
|
+
<li>List Item 1</li>
|
|
432
|
+
<li>List Item 2</li>
|
|
433
|
+
<li>List Item 3</li>
|
|
434
|
+
</ol>
|
|
435
|
+
</li>
|
|
436
|
+
<li>List Item 3</li>
|
|
437
|
+
</ol>
|
|
438
|
+
</li>
|
|
439
|
+
<li>List Item 3</li>
|
|
440
|
+
</ol>
|
|
441
|
+
</li>
|
|
442
|
+
<li>List Item 3</li>
|
|
443
|
+
</ol>
|
|
444
|
+
</li>
|
|
445
|
+
<li>List Item 3</li>
|
|
446
|
+
</ol>
|
|
447
|
+
<h3>Unordered List</h3>
|
|
448
|
+
<ul>
|
|
449
|
+
<li>List Item 1</li>
|
|
450
|
+
<li>
|
|
451
|
+
List Item 2
|
|
452
|
+
<ul>
|
|
453
|
+
<li>List Item 1</li>
|
|
454
|
+
<li>
|
|
455
|
+
List Item 2
|
|
456
|
+
<ul>
|
|
457
|
+
<li>List Item 1</li>
|
|
458
|
+
<li>
|
|
459
|
+
List Item 2
|
|
460
|
+
<ul>
|
|
461
|
+
<li>List Item 1</li>
|
|
462
|
+
<li>
|
|
463
|
+
List Item 2
|
|
464
|
+
<ul>
|
|
465
|
+
<li>List Item 1</li>
|
|
466
|
+
<li>List Item 2</li>
|
|
467
|
+
<li>List Item 3</li>
|
|
468
|
+
</ul>
|
|
469
|
+
</li>
|
|
470
|
+
<li>List Item 3</li>
|
|
471
|
+
</ul>
|
|
472
|
+
</li>
|
|
473
|
+
<li>List Item 3</li>
|
|
474
|
+
</ul>
|
|
475
|
+
</li>
|
|
476
|
+
<li>List Item 3</li>
|
|
477
|
+
</ul>
|
|
478
|
+
</li>
|
|
479
|
+
<li>List Item 3</li>
|
|
480
|
+
</ul>
|
|
481
|
+
</div>
|
|
482
|
+
<footer>
|
|
483
|
+
<p><a href="#top">[Top]</a></p>
|
|
484
|
+
</footer>
|
|
485
|
+
</article>
|
|
486
|
+
<article id="text__blockquotes">
|
|
487
|
+
<header><h1>Blockquotes</h1></header>
|
|
488
|
+
<div>
|
|
489
|
+
<blockquote>
|
|
490
|
+
<p>
|
|
491
|
+
A block quotation (also known as a long quotation or extract) is
|
|
492
|
+
a quotation in a written document, that is set off from the main
|
|
493
|
+
text as a paragraph, or block of text.
|
|
494
|
+
</p>
|
|
495
|
+
<p>
|
|
496
|
+
It is typically distinguished visually using indentation and a
|
|
497
|
+
different typeface or smaller size quotation. It may or may not
|
|
498
|
+
include a citation, usually placed at the bottom.
|
|
499
|
+
</p>
|
|
500
|
+
<cite><a href="#!">Said no one, ever.</a></cite>
|
|
501
|
+
</blockquote>
|
|
502
|
+
</div>
|
|
503
|
+
<footer>
|
|
504
|
+
<p><a href="#top">[Top]</a></p>
|
|
505
|
+
</footer>
|
|
506
|
+
</article>
|
|
507
|
+
<article id="text__details">
|
|
508
|
+
<header><h1>Details / Summary</h1></header>
|
|
509
|
+
<details>
|
|
510
|
+
<summary>Expand for details</summary>
|
|
511
|
+
<p>
|
|
512
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio!
|
|
513
|
+
Odio natus ullam ad quaerat, eaque necessitatibus, aliquid
|
|
514
|
+
distinctio similique voluptatibus dicta consequuntur animi. Quaerat
|
|
515
|
+
facilis quidem unde eos! Ipsa.
|
|
516
|
+
</p>
|
|
517
|
+
</details>
|
|
518
|
+
<footer>
|
|
519
|
+
<p><a href="#top">[Top]</a></p>
|
|
520
|
+
</footer>
|
|
521
|
+
</article>
|
|
522
|
+
<article id="text__address">
|
|
523
|
+
<header><h1>Address</h1></header>
|
|
524
|
+
<address>
|
|
525
|
+
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br />
|
|
526
|
+
Visit us at:<br />
|
|
527
|
+
Example.com<br />
|
|
528
|
+
Box 564, Disneyland<br />
|
|
529
|
+
USA
|
|
530
|
+
</address>
|
|
531
|
+
<footer>
|
|
532
|
+
<p><a href="#top">[Top]</a></p>
|
|
533
|
+
</footer>
|
|
534
|
+
</article>
|
|
535
|
+
<article id="text__hr">
|
|
536
|
+
<header><h2>Horizontal rules</h2></header>
|
|
537
|
+
<div>
|
|
538
|
+
<hr />
|
|
539
|
+
</div>
|
|
540
|
+
<footer>
|
|
541
|
+
<p><a href="#top">[Top]</a></p>
|
|
542
|
+
</footer>
|
|
543
|
+
</article>
|
|
544
|
+
<article id="text__tables">
|
|
545
|
+
<header><h2>Tabular data</h2></header>
|
|
546
|
+
<table>
|
|
547
|
+
<caption>
|
|
548
|
+
Table Caption
|
|
549
|
+
</caption>
|
|
550
|
+
<thead>
|
|
551
|
+
<tr>
|
|
552
|
+
<th>Table Heading 1</th>
|
|
553
|
+
<th>Table Heading 2</th>
|
|
554
|
+
<th>Table Heading 3</th>
|
|
555
|
+
<th>Table Heading 4</th>
|
|
556
|
+
<th>Table Heading 5</th>
|
|
557
|
+
</tr>
|
|
558
|
+
</thead>
|
|
559
|
+
<tfoot>
|
|
560
|
+
<tr>
|
|
561
|
+
<th>Table Footer 1</th>
|
|
562
|
+
<th>Table Footer 2</th>
|
|
563
|
+
<th>Table Footer 3</th>
|
|
564
|
+
<th>Table Footer 4</th>
|
|
565
|
+
<th>Table Footer 5</th>
|
|
566
|
+
</tr>
|
|
567
|
+
</tfoot>
|
|
568
|
+
<tbody>
|
|
569
|
+
<tr>
|
|
570
|
+
<td>Table Cell 1</td>
|
|
571
|
+
<td>Table Cell 2</td>
|
|
572
|
+
<td>Table Cell 3</td>
|
|
573
|
+
<td>Table Cell 4</td>
|
|
574
|
+
<td>Table Cell 5</td>
|
|
575
|
+
</tr>
|
|
576
|
+
<tr>
|
|
577
|
+
<td>Table Cell 1</td>
|
|
578
|
+
<td>Table Cell 2</td>
|
|
579
|
+
<td>Table Cell 3</td>
|
|
580
|
+
<td>Table Cell 4</td>
|
|
581
|
+
<td>Table Cell 5</td>
|
|
582
|
+
</tr>
|
|
583
|
+
<tr>
|
|
584
|
+
<td>Table Cell 1</td>
|
|
585
|
+
<td>Table Cell 2</td>
|
|
586
|
+
<td>Table Cell 3</td>
|
|
587
|
+
<td>Table Cell 4</td>
|
|
588
|
+
<td>Table Cell 5</td>
|
|
589
|
+
</tr>
|
|
590
|
+
<tr>
|
|
591
|
+
<td>Table Cell 1</td>
|
|
592
|
+
<td>Table Cell 2</td>
|
|
593
|
+
<td>Table Cell 3</td>
|
|
594
|
+
<td>Table Cell 4</td>
|
|
595
|
+
<td>Table Cell 5</td>
|
|
596
|
+
</tr>
|
|
597
|
+
</tbody>
|
|
598
|
+
</table>
|
|
599
|
+
<footer>
|
|
600
|
+
<p><a href="#top">[Top]</a></p>
|
|
601
|
+
</footer>
|
|
602
|
+
</article>
|
|
603
|
+
<article id="text__code">
|
|
604
|
+
<header><h2>Code</h2></header>
|
|
605
|
+
<div>
|
|
606
|
+
<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
|
|
607
|
+
<p>
|
|
608
|
+
<strong>Inline code:</strong>
|
|
609
|
+
<code><div>code</div></code>
|
|
610
|
+
</p>
|
|
611
|
+
<p>
|
|
612
|
+
<strong>Sample output:</strong>
|
|
613
|
+
<samp>This is sample output from a computer program.</samp>
|
|
614
|
+
</p>
|
|
615
|
+
<h2>Pre-formatted text</h2>
|
|
616
|
+
<pre>
|
|
617
|
+
P R E F O R M A T T E D T E X T
|
|
618
|
+
! " # $ % & ' ( ) * + , - . /
|
|
619
|
+
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
|
|
620
|
+
@ A B C D E F G H I J K L M N O
|
|
621
|
+
P Q R S T U V W X Y Z [ \ ] ^ _
|
|
622
|
+
` a b c d e f g h i j k l m n o
|
|
623
|
+
p q r s t u v w x y z { | } ~ </pre
|
|
624
|
+
>
|
|
625
|
+
</div>
|
|
626
|
+
<footer>
|
|
627
|
+
<p><a href="#top">[Top]</a></p>
|
|
628
|
+
</footer>
|
|
629
|
+
</article>
|
|
630
|
+
<article id="text__inline">
|
|
631
|
+
<header><h2>Inline elements</h2></header>
|
|
632
|
+
<div>
|
|
633
|
+
<p><a href="#!">This is a text link</a>.</p>
|
|
634
|
+
<p><strong>Strong is used to indicate strong importance.</strong></p>
|
|
635
|
+
<p><em>This text has added emphasis.</em></p>
|
|
636
|
+
<p>
|
|
637
|
+
The <b>b element</b> is stylistically different text from normal
|
|
638
|
+
text, without any special importance.
|
|
639
|
+
</p>
|
|
640
|
+
<p>The <i>i element</i> is text that is offset from the normal text.</p>
|
|
641
|
+
<p>
|
|
642
|
+
The <u>u element</u> is text with an unarticulated, though
|
|
643
|
+
explicitly rendered, non-textual annotation.
|
|
644
|
+
</p>
|
|
645
|
+
<p>
|
|
646
|
+
<del>This text is deleted</del>
|
|
647
|
+
and
|
|
648
|
+
<ins>This text is inserted</ins>
|
|
649
|
+
.
|
|
650
|
+
</p>
|
|
651
|
+
<p><s>This text has a strikethrough</s>.</p>
|
|
652
|
+
<p>Superscript<sup>®</sup>.</p>
|
|
653
|
+
<p>Subscript for things like H<sub>2</sub>O.</p>
|
|
654
|
+
<p><small>This small text is small for fine print, etc.</small></p>
|
|
655
|
+
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
|
|
656
|
+
<p>
|
|
657
|
+
<q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q"
|
|
658
|
+
>This text is a short inline quotation.</q
|
|
659
|
+
>
|
|
660
|
+
</p>
|
|
661
|
+
<p><cite>This is a citation.</cite></p>
|
|
662
|
+
<p>The <dfn>dfn element</dfn> indicates a definition.</p>
|
|
663
|
+
<p>
|
|
664
|
+
The
|
|
665
|
+
<mark>mark element</mark>
|
|
666
|
+
indicates a highlight.
|
|
667
|
+
</p>
|
|
668
|
+
<p>
|
|
669
|
+
The <var>variable element</var>, such as <var>x</var> =
|
|
670
|
+
<var>y</var>.
|
|
671
|
+
</p>
|
|
672
|
+
<p>The <kbd>kbd</kbd>, such as <var>Ctrl</var>.</p>
|
|
673
|
+
<p>
|
|
674
|
+
The time element:
|
|
675
|
+
<time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>
|
|
676
|
+
</p>
|
|
677
|
+
</div>
|
|
678
|
+
<footer>
|
|
679
|
+
<p><a href="#top">[Top]</a></p>
|
|
680
|
+
</footer>
|
|
681
|
+
</article>
|
|
682
|
+
<article id="text__comments">
|
|
683
|
+
<header><h2>HTML Comments</h2></header>
|
|
684
|
+
<div>
|
|
685
|
+
<p>
|
|
686
|
+
There is comment here:
|
|
687
|
+
<!--This comment should not be displayed-->
|
|
688
|
+
</p>
|
|
689
|
+
<p>There is a comment spanning multiple tags and lines below here.</p>
|
|
690
|
+
<!--<p><a href="#!">This is a text link. But it should not be displayed in a comment</a>.</p>
|
|
691
|
+
<p><strong>Strong is used to indicate strong importance. But, it should not be displayed in a comment</strong></p>
|
|
692
|
+
<p><em>This text has added emphasis. But, it should not be displayed in a comment</em></p>-->
|
|
693
|
+
</div>
|
|
694
|
+
|
|
695
|
+
<footer>
|
|
696
|
+
<p><a href="#top">[Top]</a></p>
|
|
697
|
+
</footer>
|
|
698
|
+
</article>
|
|
699
|
+
</section>
|
|
700
|
+
<section id="embedded">
|
|
701
|
+
<header><h2>Embedded content</h2></header>
|
|
702
|
+
<article id="embedded__images">
|
|
703
|
+
<header><h2>Images</h2></header>
|
|
704
|
+
<div>
|
|
705
|
+
<h3>Plain <code><img></code> element</h3>
|
|
706
|
+
<p>
|
|
707
|
+
<img
|
|
708
|
+
src="https://placekitten.com/480/480"
|
|
709
|
+
alt="Photo of a kitten"
|
|
710
|
+
/>
|
|
711
|
+
</p>
|
|
712
|
+
<h3>
|
|
713
|
+
<code><figure></code> element with
|
|
714
|
+
<code><img></code> element
|
|
715
|
+
</h3>
|
|
716
|
+
<figure>
|
|
717
|
+
<img
|
|
718
|
+
src="https://placekitten.com/420/420"
|
|
719
|
+
alt="Photo of a kitten"
|
|
720
|
+
/>
|
|
721
|
+
</figure>
|
|
722
|
+
<h3>
|
|
723
|
+
<code><figure></code> element with
|
|
724
|
+
<code><img></code> and
|
|
725
|
+
<code><figcaption></code> elements
|
|
726
|
+
</h3>
|
|
727
|
+
<figure>
|
|
728
|
+
<img
|
|
729
|
+
src="https://placekitten.com/420/420"
|
|
730
|
+
alt="Photo of a kitten"
|
|
731
|
+
/>
|
|
732
|
+
<figcaption>Here is a caption for this image.</figcaption>
|
|
733
|
+
</figure>
|
|
734
|
+
<h3>
|
|
735
|
+
<code><figure></code> element with a
|
|
736
|
+
<code><picture></code> element
|
|
737
|
+
</h3>
|
|
738
|
+
<figure>
|
|
739
|
+
<picture>
|
|
740
|
+
<source
|
|
741
|
+
srcset="https://placekitten.com/800/800"
|
|
742
|
+
media="(min-width: 800px)"
|
|
743
|
+
/>
|
|
744
|
+
<img
|
|
745
|
+
src="https://placekitten.com/420/420"
|
|
746
|
+
alt="Photo of a kitten"
|
|
747
|
+
/>
|
|
748
|
+
</picture>
|
|
749
|
+
</figure>
|
|
750
|
+
</div>
|
|
751
|
+
<footer>
|
|
752
|
+
<p><a href="#top">[Top]</a></p>
|
|
753
|
+
</footer>
|
|
754
|
+
</article>
|
|
755
|
+
<article id="embedded__bgimages">
|
|
756
|
+
<header><h2>Background images</h2></header>
|
|
757
|
+
<div
|
|
758
|
+
style="
|
|
759
|
+
background-image: url('https://placekitten.com/300/300');
|
|
760
|
+
width: 300px;
|
|
761
|
+
height: 300px;
|
|
762
|
+
"
|
|
763
|
+
></div>
|
|
764
|
+
<footer>
|
|
765
|
+
<p><a href="#top">[Top]</a></p>
|
|
766
|
+
</footer>
|
|
767
|
+
</article>
|
|
768
|
+
<article id="embedded__audio">
|
|
769
|
+
<header><h2>Audio</h2></header>
|
|
770
|
+
<div>
|
|
771
|
+
<audio controls="">audio</audio>
|
|
772
|
+
</div>
|
|
773
|
+
<footer>
|
|
774
|
+
<p><a href="#top">[Top]</a></p>
|
|
775
|
+
</footer>
|
|
776
|
+
</article>
|
|
777
|
+
<article id="embedded__video">
|
|
778
|
+
<header><h2>Video</h2></header>
|
|
779
|
+
<div>
|
|
780
|
+
<video controls="">video</video>
|
|
781
|
+
</div>
|
|
782
|
+
<footer>
|
|
783
|
+
<p><a href="#top">[Top]</a></p>
|
|
784
|
+
</footer>
|
|
785
|
+
</article>
|
|
786
|
+
<article id="embedded__canvas">
|
|
787
|
+
<header><h2>Canvas</h2></header>
|
|
788
|
+
<div>
|
|
789
|
+
<canvas>canvas</canvas>
|
|
790
|
+
</div>
|
|
791
|
+
<footer>
|
|
792
|
+
<p><a href="#top">[Top]</a></p>
|
|
793
|
+
</footer>
|
|
794
|
+
</article>
|
|
795
|
+
<article id="embedded__meter">
|
|
796
|
+
<header><h2>Meter</h2></header>
|
|
797
|
+
<div>
|
|
798
|
+
<meter value="2" min="0" max="10">2 out of 10</meter>
|
|
799
|
+
</div>
|
|
800
|
+
<footer>
|
|
801
|
+
<p><a href="#top">[Top]</a></p>
|
|
802
|
+
</footer>
|
|
803
|
+
</article>
|
|
804
|
+
<article id="embedded__progress">
|
|
805
|
+
<header><h2>Progress</h2></header>
|
|
806
|
+
<div>
|
|
807
|
+
<progress>progress</progress>
|
|
808
|
+
</div>
|
|
809
|
+
<footer>
|
|
810
|
+
<p><a href="#top">[Top]</a></p>
|
|
811
|
+
</footer>
|
|
812
|
+
</article>
|
|
813
|
+
<article id="embedded__svg">
|
|
814
|
+
<header><h2>Inline SVG</h2></header>
|
|
815
|
+
<div>
|
|
816
|
+
<svg width="100px" height="100px">
|
|
817
|
+
<circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle>
|
|
818
|
+
</svg>
|
|
819
|
+
</div>
|
|
820
|
+
<footer>
|
|
821
|
+
<p><a href="#top">[Top]</a></p>
|
|
822
|
+
</footer>
|
|
823
|
+
</article>
|
|
824
|
+
<article id="embedded__iframe">
|
|
825
|
+
<header><h2>IFrame</h2></header>
|
|
826
|
+
<div>
|
|
827
|
+
<iframe src="index.html" height="300"></iframe>
|
|
828
|
+
</div>
|
|
829
|
+
<footer>
|
|
830
|
+
<p><a href="#top">[Top]</a></p>
|
|
831
|
+
</footer>
|
|
832
|
+
</article>
|
|
833
|
+
<article id="embedded__embed">
|
|
834
|
+
<header><h2>Embed</h2></header>
|
|
835
|
+
<div>
|
|
836
|
+
<embed src="index.html" height="300" />
|
|
837
|
+
</div>
|
|
838
|
+
<footer>
|
|
839
|
+
<p><a href="#top">[Top]</a></p>
|
|
840
|
+
</footer>
|
|
841
|
+
</article>
|
|
842
|
+
<article id="embedded__object">
|
|
843
|
+
<header><h2>Object</h2></header>
|
|
844
|
+
<div>
|
|
845
|
+
<object data="index.html" height="300"></object>
|
|
846
|
+
</div>
|
|
847
|
+
<footer>
|
|
848
|
+
<p><a href="#top">[Top]</a></p>
|
|
849
|
+
</footer>
|
|
850
|
+
</article>
|
|
851
|
+
</section>
|
|
852
|
+
<section id="forms">
|
|
853
|
+
<header><h2>Form elements</h2></header>
|
|
854
|
+
<form>
|
|
855
|
+
<fieldset id="forms__input">
|
|
856
|
+
<legend>Input fields</legend>
|
|
857
|
+
<p>
|
|
858
|
+
<label for="input__text">Text Input</label>
|
|
859
|
+
<input id="input__text" type="text" placeholder="Text Input" />
|
|
860
|
+
</p>
|
|
861
|
+
<p>
|
|
862
|
+
<label for="input__password">Password</label>
|
|
863
|
+
<input
|
|
864
|
+
id="input__password"
|
|
865
|
+
type="password"
|
|
866
|
+
placeholder="Type your Password"
|
|
867
|
+
/>
|
|
868
|
+
</p>
|
|
869
|
+
<p>
|
|
870
|
+
<label for="input__webaddress">Web Address</label>
|
|
871
|
+
<input
|
|
872
|
+
id="input__webaddress"
|
|
873
|
+
type="url"
|
|
874
|
+
placeholder="https://yoursite.com"
|
|
875
|
+
/>
|
|
876
|
+
</p>
|
|
877
|
+
<p>
|
|
878
|
+
<label for="input__emailaddress">Email Address</label>
|
|
879
|
+
<input
|
|
880
|
+
id="input__emailaddress"
|
|
881
|
+
type="email"
|
|
882
|
+
placeholder="name@email.com"
|
|
883
|
+
/>
|
|
884
|
+
</p>
|
|
885
|
+
<p>
|
|
886
|
+
<label for="input__phone">Phone Number</label>
|
|
887
|
+
<input id="input__phone" type="tel" placeholder="(999) 999-9999" />
|
|
888
|
+
</p>
|
|
889
|
+
<p>
|
|
890
|
+
<label for="input__search">Search</label>
|
|
891
|
+
<input
|
|
892
|
+
id="input__search"
|
|
893
|
+
type="search"
|
|
894
|
+
placeholder="Enter Search Term"
|
|
895
|
+
/>
|
|
896
|
+
</p>
|
|
897
|
+
<p>
|
|
898
|
+
<label for="input__text2">Number Input</label>
|
|
899
|
+
<input
|
|
900
|
+
id="input__text2"
|
|
901
|
+
type="number"
|
|
902
|
+
placeholder="Enter a Number"
|
|
903
|
+
/>
|
|
904
|
+
</p>
|
|
905
|
+
<p>
|
|
906
|
+
<label for="input__file">File Input</label>
|
|
907
|
+
<input id="input__file" type="file" />
|
|
908
|
+
</p>
|
|
909
|
+
</fieldset>
|
|
910
|
+
<p><a href="#top">[Top]</a></p>
|
|
911
|
+
<fieldset id="forms__select">
|
|
912
|
+
<legend>Select menus</legend>
|
|
913
|
+
<p>
|
|
914
|
+
<label for="select">Select</label>
|
|
915
|
+
<select id="select">
|
|
916
|
+
<optgroup label="Option Group">
|
|
917
|
+
<option>Option One</option>
|
|
918
|
+
<option>Option Two</option>
|
|
919
|
+
<option>Option Three</option>
|
|
920
|
+
</optgroup>
|
|
921
|
+
</select>
|
|
922
|
+
</p>
|
|
923
|
+
<p>
|
|
924
|
+
<label for="select_multiple">Select (multiple)</label>
|
|
925
|
+
<select id="select_multiple" multiple="multiple">
|
|
926
|
+
<optgroup label="Option Group">
|
|
927
|
+
<option>Option One</option>
|
|
928
|
+
<option>Option Two</option>
|
|
929
|
+
<option>Option Three</option>
|
|
930
|
+
</optgroup>
|
|
931
|
+
</select>
|
|
932
|
+
</p>
|
|
933
|
+
</fieldset>
|
|
934
|
+
<p><a href="#top">[Top]</a></p>
|
|
935
|
+
<fieldset id="forms__checkbox">
|
|
936
|
+
<legend>Checkboxes</legend>
|
|
937
|
+
<ul>
|
|
938
|
+
<li>
|
|
939
|
+
<label for="checkbox1"
|
|
940
|
+
><input
|
|
941
|
+
id="checkbox1"
|
|
942
|
+
name="checkbox"
|
|
943
|
+
type="checkbox"
|
|
944
|
+
checked="checked"
|
|
945
|
+
/>
|
|
946
|
+
Choice A</label
|
|
947
|
+
>
|
|
948
|
+
</li>
|
|
949
|
+
<li>
|
|
950
|
+
<label for="checkbox2"
|
|
951
|
+
><input id="checkbox2" name="checkbox" type="checkbox" />
|
|
952
|
+
Choice B</label
|
|
953
|
+
>
|
|
954
|
+
</li>
|
|
955
|
+
<li>
|
|
956
|
+
<label for="checkbox3"
|
|
957
|
+
><input id="checkbox3" name="checkbox" type="checkbox" />
|
|
958
|
+
Choice C</label
|
|
959
|
+
>
|
|
960
|
+
</li>
|
|
961
|
+
</ul>
|
|
962
|
+
</fieldset>
|
|
963
|
+
<p><a href="#top">[Top]</a></p>
|
|
964
|
+
<fieldset id="forms__radio">
|
|
965
|
+
<legend>Radio buttons</legend>
|
|
966
|
+
<ul>
|
|
967
|
+
<li>
|
|
968
|
+
<label for="radio1"
|
|
969
|
+
><input
|
|
970
|
+
id="radio1"
|
|
971
|
+
name="radio"
|
|
972
|
+
type="radio"
|
|
973
|
+
checked="checked"
|
|
974
|
+
/>
|
|
975
|
+
Option 1</label
|
|
976
|
+
>
|
|
977
|
+
</li>
|
|
978
|
+
<li>
|
|
979
|
+
<label for="radio2"
|
|
980
|
+
><input id="radio2" name="radio" type="radio" /> Option
|
|
981
|
+
2</label
|
|
982
|
+
>
|
|
983
|
+
</li>
|
|
984
|
+
<li>
|
|
985
|
+
<label for="radio3"
|
|
986
|
+
><input id="radio3" name="radio" type="radio" /> Option
|
|
987
|
+
3</label
|
|
988
|
+
>
|
|
989
|
+
</li>
|
|
990
|
+
</ul>
|
|
991
|
+
</fieldset>
|
|
992
|
+
<p><a href="#top">[Top]</a></p>
|
|
993
|
+
<fieldset id="forms__textareas">
|
|
994
|
+
<legend>Textareas</legend>
|
|
995
|
+
<p>
|
|
996
|
+
<label for="textarea">Textarea</label>
|
|
997
|
+
<textarea
|
|
998
|
+
id="textarea"
|
|
999
|
+
rows="8"
|
|
1000
|
+
cols="48"
|
|
1001
|
+
placeholder="Enter your message here"
|
|
1002
|
+
></textarea>
|
|
1003
|
+
</p>
|
|
1004
|
+
</fieldset>
|
|
1005
|
+
<p><a href="#top">[Top]</a></p>
|
|
1006
|
+
<fieldset id="forms__html5">
|
|
1007
|
+
<legend>HTML5 inputs</legend>
|
|
1008
|
+
<p>
|
|
1009
|
+
<label for="ic">Color input</label>
|
|
1010
|
+
<input type="color" id="ic" value="#000000" />
|
|
1011
|
+
</p>
|
|
1012
|
+
<p>
|
|
1013
|
+
<label for="in">Number input</label>
|
|
1014
|
+
<input type="number" id="in" min="0" max="10" value="5" />
|
|
1015
|
+
</p>
|
|
1016
|
+
<p>
|
|
1017
|
+
<label for="ir">Range input</label>
|
|
1018
|
+
<input type="range" id="ir" value="10" />
|
|
1019
|
+
</p>
|
|
1020
|
+
<p>
|
|
1021
|
+
<label for="idd">Date input</label>
|
|
1022
|
+
<input type="date" id="idd" value="1970-01-01" />
|
|
1023
|
+
</p>
|
|
1024
|
+
<p>
|
|
1025
|
+
<label for="idm">Month input</label>
|
|
1026
|
+
<input type="month" id="idm" value="1970-01" />
|
|
1027
|
+
</p>
|
|
1028
|
+
<p>
|
|
1029
|
+
<label for="idw">Week input</label>
|
|
1030
|
+
<input type="week" id="idw" value="1970-W01" />
|
|
1031
|
+
</p>
|
|
1032
|
+
<p>
|
|
1033
|
+
<label for="idt">Datetime input</label>
|
|
1034
|
+
<input type="datetime" id="idt" value="1970-01-01T00:00:00Z" />
|
|
1035
|
+
</p>
|
|
1036
|
+
<p>
|
|
1037
|
+
<label for="idtl">Datetime-local input</label>
|
|
1038
|
+
<input type="datetime-local" id="idtl" value="1970-01-01T00:00" />
|
|
1039
|
+
</p>
|
|
1040
|
+
<p>
|
|
1041
|
+
<label for="idl">Datalist</label>
|
|
1042
|
+
<input type="text" id="idl" list="example-list" />
|
|
1043
|
+
<datalist id="example-list">
|
|
1044
|
+
<option value="Example #1" />
|
|
1045
|
+
<option value="Example #2" />
|
|
1046
|
+
<option value="Example #3" />
|
|
1047
|
+
</datalist>
|
|
1048
|
+
</p>
|
|
1049
|
+
</fieldset>
|
|
1050
|
+
<p><a href="#top">[Top]</a></p>
|
|
1051
|
+
<fieldset id="forms__action">
|
|
1052
|
+
<legend>Action buttons</legend>
|
|
1053
|
+
<p>
|
|
1054
|
+
<input type="submit" value="<input type=submit>" />
|
|
1055
|
+
<input type="button" value="<input type=button>" />
|
|
1056
|
+
<input type="reset" value="<input type=reset>" />
|
|
1057
|
+
<input type="submit" value="<input disabled>" disabled />
|
|
1058
|
+
</p>
|
|
1059
|
+
<p>
|
|
1060
|
+
<button type="submit"><button type=submit></button>
|
|
1061
|
+
<button type="button"><button type=button></button>
|
|
1062
|
+
<button type="reset"><button type=reset></button>
|
|
1063
|
+
<button type="button" disabled><button disabled></button>
|
|
1064
|
+
</p>
|
|
1065
|
+
</fieldset>
|
|
1066
|
+
<p><a href="#top">[Top]</a></p>
|
|
1067
|
+
</form>
|
|
1068
|
+
</section>
|
|
1069
|
+
<section>
|
|
1070
|
+
<h2 id="layouts">Layouts</h2>
|
|
1071
|
+
<fieldset class="stack">
|
|
1072
|
+
<legend>Layout Container</legend>
|
|
1073
|
+
<p class="note">A container that is supposed to wrap all of your content</p>
|
|
1074
|
+
<div
|
|
1075
|
+
class="layout-container"
|
|
1076
|
+
style="
|
|
1077
|
+
border: var(--border-width-medium) solid var(--color-border-base);
|
|
1078
|
+
"
|
|
1079
|
+
>
|
|
1080
|
+
<p>This is where your content will go</p>
|
|
1081
|
+
</div>
|
|
1082
|
+
</fieldset>
|
|
1083
|
+
<fieldset class="stack">
|
|
1084
|
+
<legend>Box</legend>
|
|
1085
|
+
<p class="note">A box with padding.</p>
|
|
1086
|
+
<div
|
|
1087
|
+
class="box"
|
|
1088
|
+
style="
|
|
1089
|
+
border: var(--border-width-medium) solid var(--color-border-base);
|
|
1090
|
+
"
|
|
1091
|
+
>
|
|
1092
|
+
Box
|
|
1093
|
+
</div>
|
|
1094
|
+
</fieldset>
|
|
1095
|
+
<fieldset class="stack">
|
|
1096
|
+
<legend>Stack</legend>
|
|
1097
|
+
<p class="note">A vertical stack of items with spacing between.</p>
|
|
1098
|
+
<div
|
|
1099
|
+
class="stack"
|
|
1100
|
+
style="
|
|
1101
|
+
border: var(--border-width-medium) solid var(--color-border-base);
|
|
1102
|
+
"
|
|
1103
|
+
>
|
|
1104
|
+
<p>element 1</p>
|
|
1105
|
+
<p>element 2</p>
|
|
1106
|
+
<p>element 3</p>
|
|
1107
|
+
</div>
|
|
1108
|
+
</fieldset>
|
|
1109
|
+
<fieldset class="stack">
|
|
1110
|
+
<legend>Cluster</legend>
|
|
1111
|
+
<p class="note">A automatically wrapping container</p>
|
|
1112
|
+
<div
|
|
1113
|
+
class="cluster"
|
|
1114
|
+
style="
|
|
1115
|
+
border: var(--border-width-medium) solid var(--color-border-base);
|
|
1116
|
+
"
|
|
1117
|
+
>
|
|
1118
|
+
<p>element</p>
|
|
1119
|
+
<p>element</p>
|
|
1120
|
+
<p>element</p>
|
|
1121
|
+
<p>element</p>
|
|
1122
|
+
<p>element</p>
|
|
1123
|
+
<p>element</p>
|
|
1124
|
+
<p>element</p>
|
|
1125
|
+
<p>element</p>
|
|
1126
|
+
<p>element</p>
|
|
1127
|
+
<p>element</p>
|
|
1128
|
+
<p>element</p>
|
|
1129
|
+
</div>
|
|
1130
|
+
</fieldset>
|
|
1131
|
+
<fieldset class="stack">
|
|
1132
|
+
<legend>Flow</legend>
|
|
1133
|
+
<p class="note">
|
|
1134
|
+
A container for rich text or blog texts. Adds spacing between the
|
|
1135
|
+
elements, that I removed in the reset, because I prefer it that way
|
|
1136
|
+
</p>
|
|
1137
|
+
<div
|
|
1138
|
+
class="flow"
|
|
1139
|
+
style="
|
|
1140
|
+
border: var(--border-width-medium) solid var(--color-border-base);
|
|
1141
|
+
"
|
|
1142
|
+
>
|
|
1143
|
+
<h1>h1 element</h1>
|
|
1144
|
+
<p>element</p>
|
|
1145
|
+
<p>element</p>
|
|
1146
|
+
<h2>h2 element</h2>
|
|
1147
|
+
<p>element</p>
|
|
1148
|
+
<p>element</p>
|
|
1149
|
+
<h3>h3 element</h3>
|
|
1150
|
+
<p>element</p>
|
|
1151
|
+
<figure>
|
|
1152
|
+
<img src="https://jooinn.com/images1280_/dogs.jpg" />
|
|
1153
|
+
<figcaption>Dogs</figcaption>
|
|
1154
|
+
</figure>
|
|
1155
|
+
<p>element</p>
|
|
1156
|
+
<p>element</p>
|
|
1157
|
+
</div>
|
|
1158
|
+
</fieldset>
|
|
1159
|
+
</section>
|
|
1160
|
+
</main>
|
|
1161
|
+
<footer>
|
|
1162
|
+
<p>
|
|
1163
|
+
Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on
|
|
1164
|
+
<a href="http://github.com/cbracco/html5-test-page">GitHub</a>.
|
|
1165
|
+
</p>
|
|
1166
|
+
</footer>
|
|
1167
|
+
</div>
|
|
1168
|
+
</body>
|
|
1169
|
+
</html>
|