-
Notifications
You must be signed in to change notification settings - Fork 0
/
sandbox.html
267 lines (260 loc) · 9.88 KB
/
sandbox.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./favicon.png" type="image/png">
<meta name="robots" content="noindex">
<title>Skltl framework Sandbox</title>
<style>
@import url(Skltl.OneFile.css);
@import url(config.css);
a[href="#PlaceThatDoesNotExist"] {color: var(--link) !important;}
a[href="#RightHere"] {color: var(--visited) !important;}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
accent-color: var(--pri);
background: var(--bg);
border: 1px solid hsl(var(--fg), 50%);
color: var(--fg);
padding: 0;
margin: 0;
box-sizing: border-box;
}
input:not(
[type="checkbox"],
[type="radio"],
[type="file"])
{
width: 150px;
}
</style>
</head>
<body>
<a href="#" id="Tab2Skip">Skip to content</a>
<header>
<i>
<label for="DrawerToggle">
<svg class="DrawerLabel" viewbox="0 0 24 24" height="1em">
<path id="TripleBar" d="M 3,18 H 21 V 16 H 3 Z M 3,13 H 21 V 11 H 3 Z M 3,6 V 8 H 21 V 6 Z" />
</svg>
</label>
</i> Skltl / Sandbox
</header>
<input type="checkbox" id="DrawerToggle" class="HideButton" title="Toggle for hidden menu" />
<nav class="Hide">
<a href="../">../</a>
<a href="about.html">About Skltl</a>
<a href="https://github.com/NomadicVoxel/NomadicVoxel.github.io">Source code</a>
</nav>
<aside> Page contents: <nav>
<ul>
<li><a href="#1">Text blocks</a></li>
<li><a href="#2">Inline text</a></li>
<li><a href="#4">Forms</a></li>
<li><a href="#3">Media</a></li>
</ul>
</nav>
</aside>
<main>
<h1>Skltl Test Sandbox</h1>
<section>
<h2 id="4">Forms and inputs</h2>
<fieldset>
<legend id="4b">Text</legend>
<p><input type="text" id="text" placeholder="text"><label for="text">text</label></p>
<p><input type="email" id="email"><label for="email">email</label></p>
<p><input type="url" id="url"><label for="url">url</label></p>
<p><input type="search" id="search"><label for="search">search</label></p>
<p><input type="password" id="password"><label for="password">password</label></p>
<textarea id="textarea">textarea</textarea> <label for="textarea">textarea</label>
</fieldset>
<fieldset>
<legend id="4a">Numbers</legend>
<p><input type="number" id="number"><label for="number">number</label></p>
<!-- <p><input type="time" id="time"><label for="time">time</label></p> -->
<!-- <p><input type="date" id="date"><label for="date">date</label></p> -->
<p><input type="tel" id="tel"><label for="tel">tel</label></p>
<p><input type="month" id="month"><label for="month">month</label></p>
<p><input type="week" id="week"><label for="week">week</label></p>
<p><input type="datetime" id="datetime">
<label for="datetime">datetime (Don't use this one! Obsoleted, use datetime-local)</label>
</p>
<!-- <p><input type="datetime-local" id="datetime-local">
<label for="datetime-local">datetime-local</label>
</p> -->
</fieldset>
<fieldset>
<legend id="4c">Buttons</legend>
<p>
<select id="select">
<option>select</option>
<optgroup label="XYZ">
<option>x</option>
<option>y</option>
<option>z</option>
</optgroup>
<optgroup label="ABC" disabled>
<option>a</option>
<option>b</option>
<option>c</option>
</optgroup>
</select> <label for="select">select</label>
</p>
<p> <button>actual button</button> </p>
<p> <input type="button" value="input button"> </p>
<p> <input type="file" id="file"><label for="file">file</label> </p>
<p> <input type="submit" id="submit"><label for="submit">submit</label> </p>
<p> <input type="reset" id="reset"><label for="reset">reset</label> </p>
<p> <input type="radio" name="rdo" id="radio" checked><label for="radio">radio</label> </p>
<p> <input type="radio" name="rdo" id="radios"><label for="radios">radio</label> </p>
<p> <input type="checkbox" id="check"><label for="check">checkbox</label> </p>
<p> <input type="checkbox" id="box" checked><label for="box">checkbox</label> </p>
</fieldset>
<fieldset>
<legend id="4d">Weird</legend>
<p><input type="color" id="color"><label for="color">Color</label></p>
<p><input type="range" id="range"><label for="range">range</label></p>
<p> <meter min=0 max=100 low="33" high="67" optimum="80" value="50" id="meter"> 50/100 </meter> <label
for="meter">meter</label> </p>
<p> <progress id="progress" max="100" value="70"> 70% </progress> <label for="progress">progress</label>
</p>
</fieldset>
<p>
<h3>Notes:</h3> You can put many auto-validation checks on individual form elements with attributes, no scripting
required. <ul>
<li>Accept specifies accepted file upload types</li>
<li>List sets inputs to only accept <options> from a <datalist></li>
<li>Min/Max for numbers</li>
<li>MinLength/MaxLength for any text</li>
<li>Multiple checks whether multiple emails or files are allowed.</li>
<li>Pattern. Yeah we got regex.</li>
<li>Required.</li>
<li>Step determines incremental values that are valid for numbers.</li>
</ul>
<!-- ALSO. Don't forget the Output tag. <output>This thing.</output> It has no default styling, its job is for
holding JS output. -->
</p>
</section>
<section>
<h2>Specialty items</h2>
<h3>Toggle button</h3>
<p> Some items are just too hard to replicate in vanilla semantic HTML. Such as the collapsible menu up top. The
toggle button is a <code class="tag">label</code> for a checkbox of ID DrawerToggle. Place the checkbox before
an element of class Hide, and you have the toggle ready to go. It <em>is</em> more complex than a
Details/Summary setup, but the advantage is that the "summary" can be anywhere, and putting the menu to be
hidden right after the button isn't always feasible in HTML. <br>
</p>
<label for="ToggleDemo"> [Demo toggle button] </label> <br>
<input type="checkbox" id="ToggleDemo" class="HideButton" checked />
<code class="Hide">
<code class="tag">label for=ToggleDemo</code> [Demo toggle button] <code class="tag">/label</code> <code
class="tag">br</code><br>
<code class="tag">input type=checkbox id=ToggleDemo class=HideButton checked /</code> <br>
<code class="tag">code class=Hide</code> ERR: Recursion refused. <code class="tag">/code</code>
</code>
</section>
<section>
<h2 id="1">Text blocks</h2>
<h3 id="1a">We needed an h3.</h3>
<h4>And an h4.</h4>
<h5>And an h5.</h5>
<h6>Okay all the heading tags. You too h6.</h6>
<h3 id="1b">Lists</h3>
<ul>
<li>Unordered</li>
<li>list</li>
<li>items</li>
</ul>
<ol>
<li>Ordered</li>
<li>list</li>
<li>items</li>
</ol>
<dl>
<dt>Dictionary list</dt>
<dd>List of terms followed by definitions</dd>
</dl>
<h3 id="1c">Text cards</h3>
<!-- <p>
Dialog: <button onclick="document.querySelector('#dialog').showModal()">click to test</button>
<dialog id="dialog">
<form method="dialog">
Notice: this is a notice.
<button type="submit" method="dialog"> Close this notice. </button>
</form>
</dialog>
</p> -->
<details>
<summary>Details and Summary</summary> Apparently there are hide/reveal widgets built into HTML. huh.
</details>
<pre>
Preformatted text retains whitespace. F a a a r o u t.
// remember to de-indent it though. ick.
<strong>what happens if you put tags inside preformatted text?</strong> <em>Huh it works.</em>
</pre>
<address>Not my address: <br> 1234 Example Ave. <br> AnyTown USA</address>
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> The blockquote HTML element
indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A
URL for the source of the quotation may be given using the cite attribute, while a text representation of the
source can be given using the cite element. <cite>MDN</cite>
</blockquote>
</section>
<section>
<h2 id="2">Inline text</h2>
<p> Does anyone else find it odd that the default h6 is <em>smaller</em> than <strong>normal text?</strong> No?
Okay. <br> Anyway, inline tags here. <br>
</p>
<h3>Article use</h3>
<ul>
<li><em>Em for EMPHASIS</em></li>
<li><strong>Strong</strong></li>
<li><s>S for strikethrough</s></li>
<li><cite>cite</cite></li>
<li><abbr title="abbreviations">abbr</abbr></li>
<li><q>Q for quick quote</q></li>
<li><small>small fine print</small></li>
<li><sub>sub</sub>script</li>
<li><sup>sup</sup> for superscript</li>
</ul>
<h3>Editing</h3>
<ul>
<li><mark>mark</mark></li>
<li><del>Del for deletion</del></li>
<li><ins>ins for insertion</ins></li>
</ul>
<h3>Digital</h3>
<ul>
<li><a href="#PlaceThatDoesNotExist">Unvisited anchor</a></li>
<li><a href="#RightHere">Visited anchor</a></li>
<li><code>code</code></li>
<li><kbd>ctrl</kbd><kbd>k</kbd><kbd>b</kbd><kbd>d</kbd></li>
<li><samp>samp for sample output</samp></li>
<li><span>Generic span, shouldn't have any styles without classes...</span></li>
<li><var>var</var> variables</li>
</ul>
<p><dfn>DFN</dfn> should mark the term that is to be defined.</p>
</section>
<section>
<h2 id="3">Media</h2>
<figure>
<img src="../favicon.png" alt="favicon.png">
<figcaption>Your current favicon in a figure</figcaption>
</figure>
<p>
<img src="../favicon.png" alt="favicon.png"> Image without a figure.
</p>
<p>And let's do an <i><img src="../favicon.png" alt="favicon.png"></i> image as an icon.</p> I'll work on more stuff
like this later.
</section>
</main>
<footer>
<hr> Made from scratch by Clancy Clawson. <a href="https://github.com/NomadicVoxel/Skltl"> Source code available here.
</a>
</footer>
</body>
</html>