/
index.html.ejs
867 lines (750 loc) · 31.1 KB
/
index.html.ejs
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
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
<!doctype html>
<html>
<head>
<title>98.css - A design system for building faithful recreations of old UIs</title>
<link rel="Shortcut Icon" type="image/x-icon" href="icon.png" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="98.css" />
<meta name="Description" content="A design system for building faithful recreations of old UIs." />
<meta property="og:description" content="A design system for building faithful recreations of old UIs." />
<meta property="og:image" content="https://github.com/botoxparty/98.css/raw/master/docs/window.png?raw=true" />
<link id="theme-stylesheet" rel="stylesheet" href="XP.css">
<link rel="stylesheet" href="docs.css">
<link rel="stylesheet" href="vs.css">
</head>
<body class="surface" ontouchstart>
<aside>
<ul class="tree-view">
<li><a href="#intro">Intro</a></li>
<li>
<a href="#components">Components</a>
<ul>
<li><a href="#button">Button</a></li>
<li><a href="#checkbox">Checkbox</a></li>
<li><a href="#option-button">OptionButton</a></li>
<li><a href="#tabs">Tabs</a></li>
<li><a href="#group-box">GroupBox</a></li>
<li><a href="#text-box">TextBox</a></li>
<li><a href="#slider">Slider</a></li>
<li><a href="#dropdown">Dropdown</a></li>
<li>
<a href="#window">Window</a>
<ul>
<li><a href="#title-bar">Title Bar</a></li>
<li><a href="#window-contents">Window contents</a></li>
</ul>
</li>
<li><a href="#tree-view">TreeView</a></li>
</ul>
</li>
<li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li>
</ul>
</aside>
<div class="theme-switcher">
<section class="field-row">
<label>Select a theme</label>
<select id="theme-switcher-select">
<option value="XP.css">Windows XP</option>
<option value="98.css">Windows 98</option>
</select>
</section>
</div>
<main>
<h1>XP.css</h1>
<hr>
<p>A design system for building faithful recreations of old UIs.</p>
<p>
<a href="http://npm.im/98.css" rel="nofollow" style="text-decoration: none">
<img alt="npm" src="https://98badges.now.sh/api/version" style="max-width:100%;">
</a>
<a href="https://unpkg.com/98.css" rel="nofollow" style="text-decoration: none">
<img alt="gzip size" src="https://98badges.now.sh/api/size" style="max-width:100%;">
</a>
</p>
<h2 id="intro">Intro</h2>
<p>
XP.css is an extention of 98.css. A CSS library for building interfaces that look like old UIs.<br>
See <a href="https://github.com/botoxparty/XP.css">XP.css on GitHub</a><br>
See <a href="https://github.com/jdan/98.css">98.css on GitHub</a>
</p>
<div class="window" style="margin: 32px; width: 250px">
<div class="title-bar">
<div class="title-bar-text">
My First Program
</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<p>Hello, world!</p>
<section class="field-row" style="justify-content: flex-end">
<button>OK</button>
<button>Cancel</button>
</section>
</div>
</div>
<p>
This library relies on the usage of <strong>semantic HTML</strong>. To make a button, you'll need
to use a <code><button></code>. Input elements require labels. Icon buttons rely on
<code>aria-label</code>. This page will guide you through that process, but accessibility is a primary
goal of this project.
</p>
<p>
You can override many of the styles of your elements while maintaining the appearance provided by
this library. Need more padding on your buttons? Go for it. Need to add some color to your input labels?
Be our guest.
</p>
<p>
<strong>This library does not contain any JavaScript</strong>, it merely styles your HTML with some CSS.
This means 98.css is compatible with your frontend framework of choice.
</p>
<p>
Here is an example of <a href="https://codesandbox.io/s/objective-chandrasekhar-t5t6h?file=/src/index.js">98.css
used with React</a>, and
<a href="https://codesandbox.io/s/late-sound-miqho?file=/index.html">an example with vanilla JavaScript</a>. The
fastest way to use 98.css is to import it from unpkg.
</p>
<pre style="max-width: 375px"><code><link
rel="stylesheet"
href="https://unpkg.com/98.css"
></code></pre>
<p>
You can install 98.css from the <a href="https://github.com/jdan/98.css/releases">GitHub releases page</a>, or <a
href="https://www.npmjs.com/package/98.css">from npm</a>.
</p>
<pre style="max-width: 375px"><code>npm install 98.css</code></pre>
<h2 id="components">Components</h2>
<section class="component">
<h3 id="button">Button</h3>
<div>
<blockquote>
A <em>command button</em>, also referred to as a push button, is a control
that causes the application to perform some action when the user clicks it.
<footer>— Microsoft Windows User Experience p. 160</footer>
</blockquote>
<p>
A standard button measures 75px wide and 23px tall, with a raised outer and inner border.
They are given 12px of horizontal padding by default.
</p>
<%- example(`<button>Click me</button>`) %>
<p>
When buttons are clicked, the raised borders become sunken.
The following button is simulated to be in the pressed (active) state.
</p>
<% /* [[ ... ]] is used to render contents that
will not appear in the "Show code" section */
%>
<%- example(`<button[[ class="active"]]>I am being pressed</button>`) %>
<p>
Disabled buttons maintain the same raised border, but have a "washed out"
appearance in their label.
</p>
<%- example(`<button disabled>I cannot be clicked</button>`) %>
<p>
Button focus is communicated with a dotted border, set 4px within the contents of the button.
The following example is simulated to be focused.
</p>
<%- example(`<button[[ class="focused"]]>I am focused</button>`) %>
</div>
</section>
<section class="component">
<h3 id="checkbox">Checkbox</h3>
<div>
<blockquote>
A <em>check box</em> represents an independent or non-exclusive choice.
<footer>— Microsoft Windows User Experience p. 167</footer>
</blockquote>
<p>
Checkboxes are represented with a sunken panel, populated with a "check" icon when
selected, next to a label indicating the choice.
</p>
<p>
Note: You <strong>must</strong> include a corresponding label <strong>after</strong>
your checkbox, using the <code><label></code> element with a <code>for</code> attribute
pointed at the <code>id</code> of your input. This ensures the checkbox is easy to use with
assistive technologies, on top of ensuring a good user experience for all (navigating with the tab key,
being able to click the entire label to select the box).
</p>
<%- example(`
<input type="checkbox" id="example${getNewId()}">
<label for="example${getCurrentId()}">This is a checkbox</label>
`) %>
<p>
Checkboxes can be selected and disabled with the standard <code>checked</code> and <code>disabled</code>
attributes.
</p>
<p>
When grouping inputs, wrap each input in a container with the <code>field-row</code> class. This ensures
a consistent spacing between inputs.
</p>
<%- example(`
<div class="field-row">
<input checked type="checkbox" id="example${getNewId()}">
<label for="example${getCurrentId()}">I am checked</label>
</div>
<div class="field-row">
<input disabled type="checkbox" id="example${getNewId()}">
<label for="example${getCurrentId()}">I am inactive</label>
</div>
<div class="field-row">
<input checked disabled type="checkbox" id="example${getNewId()}">
<label for="example${getCurrentId()}">I am inactive but still checked</label>
</div>
`) %>
</div>
</section>
<section class="component">
<h3 id="option-button">OptionButton</h3>
<div>
<blockquote>
An <em>option button</em>, also referred to as a radio button, represents a single
choice within a limited set of mutually exclusive choices. That is, the user can choose only
one set of options.
<footer>— Microsoft Windows User Experience p. 164</footer>
</blockquote>
<p>
Option buttons can be used via the <code>radio</code> type on an input element.
</p>
<p>
Option buttons can be grouped by specifying a shared <code>name</code> attribute on each
input. Just as before: when grouping inputs, wrap each input in a container with the
<code>field-row</code> class to ensure a consistent spacing between inputs.
</p>
<%- example(`
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="first-example">
<label for="radio${getCurrentId()}">Yes</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="first-example">
<label for="radio${getCurrentId()}">No</label>
</div>
`) %>
<p>
Option buttons can also be <code>checked</code> and <code>disabled</code> with their corresponding
HTML attributes.
</p>
<%- example(`
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="second-example">
<label for="radio${getCurrentId()}">Peanut butter should be smooth</label>
</div>
<div class="field-row">
<input checked disabled id="radio${getNewId()}" type="radio" name="second-example">
<label for="radio${getCurrentId()}">I understand why people like crunchy peanut butter</label>
</div>
<div class="field-row">
<input disabled id="radio${getNewId()}" type="radio" name="second-example">
<label for="radio${getCurrentId()}">Crunchy peanut butter is good</label>
</div>
`) %>
</div>
</section>
<section class="component">
<h3 id="tabs">Tabs</h3>
<div>
Tabs...
</div>
<%- example(`
<section class="tabs">
<input checked type="radio" name="tab" id="tab-A" />
<label class="tab-title" for="tab-A"><div class="tab-link">Tab 1</div></label>
<input type="radio" name="tab" id="tab-B" />
<label class="tab-title" for="tab-B"><div class="tab-link">Tab 2</div></label>
<input type="radio" name="tab" id="tab-C" />
<label class="tab-title" for="tab-C"><div class="tab-link">Tab 3</div></label>
<article class="tab">
<h3>Tab Content</h3>
<p>
You create the content for each tab by using an <code>article</code> tag.
</p>
</article>
<article class="tab">
<h3>More...</h3>
<p>This tab contains a GroupBox</p>
<fieldset>
<legend>Today's mood</legend>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Claire Saffitz</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Brad Leone</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Chris Morocco</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Carla Lalli Music</label>
</div>
</fieldset>
</article>
<article class="tab">
<h3>Tab 3</h3>
<p>Lorem Ipsum Dolor Sit</p>
</article>
</section>
`) %>
</section>
<section class="component">
<h3 id="group-box">GroupBox</h3>
<div>
<blockquote>
A <em>group box</em> is a special control you can use to organize a set of
controls. A group box is a rectangular frame with an optional label that surrounds
a set of controls.
<footer>— Microsoft Windows User Experience p. 189</footer>
</blockquote>
<p>
A group box can be used by wrapping your elements with the <code>fieldset</code> tag.
It contains a sunken outer border and a raised inner border, resembling an engraved box
around your controls.
</p>
<%- example(`
<fieldset>
<div class="field-row">Select one:</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example">
<label for="radio${getCurrentId()}">Diners</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example">
<label for="radio${getCurrentId()}">Drive-Ins</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example">
<label for="radio${getCurrentId()}">Dives</label>
</div>
</fieldset>
`) %>
<p>
You can provide your group with a label by placing a <code>legend</code> element
within the <code>fieldset</code>.
</p>
<%- example(`
<fieldset>
<legend>Today's mood</legend>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Claire Saffitz</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Brad Leone</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Chris Morocco</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Carla Lalli Music</label>
</div>
</fieldset>
`) %>
</div>
</section>
<section class="component">
<h3 id="text-box">TextBox</h3>
<div>
<blockquote>
A <em>text box</em> (also referred to as an edit control) is a
rectangular control where the user enters or edits text. It can
be defined to support a single line or multiple lines of text.
<footer>— Microsoft Windows User Experience p. 181</footer>
</blockquote>
<p>
Text boxes can rendered by specifying a <code>text</code> type on an
<code>input</code> element. As with checkboxes and radio buttons, you
should provide a corresponding label with a properly set <code>for</code>
attribute, and wrap both in a container with the <code>field-row</code> class.
</p>
<%- example(`
<div class="field-row">
<label for="text${getNewId()}">Occupation</label>
<input id="text${getCurrentId()}" type="text" />
</div>
`) %>
<p>
Additionally, you can make use of the <code>field-row-stacked</code> class
to position your label above the input instead of beside it.
</p>
<%- example(`
<div class="field-row-stacked" style="width: 200px">
<label for="text${getNewId()}">Address (Line 1)</label>
<input id="text${getCurrentId()}" type="text" />
</div>
<div class="field-row-stacked" style="width: 200px">
<label for="text${getNewId()}">Address (Line 2)</label>
<input id="text${getCurrentId()}" type="text" />
</div>
`) %>
<p>
To support multiple lines in the user's input, use the <code>textarea</code>
element instead.
</p>
<%- example(`
<div class="field-row-stacked" style="width: 200px">
<label for="text${getNewId()}">Additional notes</label>
<textarea id="text${getCurrentId()}" rows="8"></textarea>
</div>
`) %>
</div>
</section>
<section class="component">
<h3 id="slider">Slider</h3>
<div>
<blockquote>
A <em>slider</em>, sometimes called a trackbar control, consists of a bar that
defines the extent or range of the adjustment and an indicator that
shows the current value for the control...
<footer>— Microsoft Windows User Experience p. 146</footer>
</blockquote>
<p>
Sliders can rendered by specifying a <code>range</code> type on an
<code>input</code> element.
</p>
<%- example(`
<div class="field-row" style="width: 300px">
<label for="range${getNewId()}">Volume:</label>
<label for="range${getNewId()}">Low</label>
<input id="range${getCurrentId()}" type="range" min="1" max="11" value="5" />
<label for="range${getNewId()}">High</label>
</div>
`) %>
<p>
You can make use of the <code>has-box-indicator</code> class replace the
default indicator with a box indicator, furthermore the slider can be wrapped
with a <code>div</code> using <code>is-vertical</code> to display the input vertically.
</p>
<p>
Note: To change the length of a vertical slider, the <code>input</code> width
and <code>div</code> height.
</p>
<%- example(`
<div class="field-row">
<label for="range${getNewId()}">Cowbell</label>
<div class="is-vertical">
<input id="range${getCurrentId()}" class="has-box-indicator" type="range" min="1" max="3" step="1" value="2" />
</div>
</div>
`) %>
</div>
</section>
<section class="component">
<h3 id="dropdown">Dropdown</h3>
<div>
<blockquote>
A <em>drop-down list box</em> allows the selection of only a
single item from a list. In its closed state, the control displays
the current value for the control. The user opens the list to change
the value.
<footer>
— Microsoft Windows User Experience p. 175
</footer>
</blockquote>
<p>
Dropdowns can be rendered by using the <code>select</code> and <code>option</code>
elements.
</p>
<%- example(`
<select>
<option>5 - Incredible!</option>
<option>4 - Great!</option>
<option>3 - Pretty good</option>
<option>2 - Not so great</option>
<option>1 - Unfortunate</option>
</select>
`) %>
<p>
By default, the first option will be selected. You can change this by
giving one of your <code>option</code> elements the <code>selected</code>
attribute.
</p>
<%- example(`
<select>
<option>5 - Incredible!</option>
<option>4 - Great!</option>
<option selected>3 - Pretty good</option>
<option>2 - Not so great</option>
<option>1 - Unfortunate</option>
</select>
`) %>
</div>
</section>
<h3 id="window">Window</h3>
<p>
The following components illustrate how to build complete windows using
98.css.
</p>
<section class="component">
<h4 id="title-bar">Title Bar</h4>
<div>
<blockquote>
At the top edge of the window, inside its border, is the title bar
(also reffered to as the caption or caption bar), which extends across
the width of the window. The title bar identifies the contents of the
window.
<footer>
— Microsoft Windows User Experience p. 118
</footer>
</blockquote>
<blockquote>
Include command buttons associated with the common commands of the
primary window in the title bar. These buttons act as shortcuts to specific
window commands.
<footer>
— Microsoft Windows User Experience p. 122
</footer>
</blockquote>
<p>
You can build a complete title bar by making use of three classes,
<code>title-bar</code>, <code>title-bar-text</code>, and <code>title-bar-controls</code>.
</p>
<%- example(`
<div class="title-bar">
<div class="title-bar-text">A Title Bar</div>
<div class="title-bar-controls">
<button aria-label="Close"></button>
</div>
</div>
`) %>
<p>
We make use of <code>aria-label</code> to render the Close button, to let
assistive technologies know the intent of this button. You may also use
"Minimize" and "Maximize" like so:
</p>
<%- example(`
<div class="title-bar">
<div class="title-bar-text">A Title Bar</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<br>
<div class="title-bar">
<div class="title-bar-text">A Helpful Bar</div>
<div class="title-bar-controls">
<button aria-label="Help"></button>
<button aria-label="Close"></button>
</div>
</div>
`) %>
</div>
</section>
<section class="component">
<h4 id="window-contents">Window contents</h4>
<div>
<blockquote>
Every window has a boundary that defines its shape.
<footer>
— Microsoft Windows User Experience p. 118
</footer>
</blockquote>
<p>
To give our title bar a home, we make use of the <code>window</code>
class. This provides a raised outer and inner border, as well as some
padding. We can freely resize the window by specifying a width in the
container style.
</p>
<%- example(`
<div class="window" style="width: 300px">
<div class="title-bar">
<div class="title-bar-text">A Complete Window</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
</div>
`) %>
<p>
To draw the contents of the window, we use the <code>window-body</code>
class under the title bar.
</p>
<%- example(`
<div class="window" style="width: 300px">
<div class="title-bar">
<div class="title-bar-text">A Window With Stuff In It</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<p>There's so much room for activities!</p>
</div>
</div>
`) %>
<%- example(`
<div class="window" style="width: 400px">
<div class="title-bar">
<div class="title-bar-text">A Window With Tabs and Groups</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<section class="tabs">
<input checked type="radio" name="tab" id="music" />
<label class="tab-title" for="music"><div class="tab-link">Music</div></label>
<input type="radio" name="tab" id="dogs" />
<label class="tab-title" for="dogs"><div class="tab-link">Dogs</div></label>
<input type="radio" name="tab" id="cats" />
<label class="tab-title" for="cats"><div class="tab-link">Food</div></label>
<article class="tab">
<p>Set your listening preferences</p>
<fieldset>
<legend>Today's mood</legend>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Nicki Minaj</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Bell Towers</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">The Glamorous Monique</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">EN. V</label>
</div>
</fieldset>
<section class="field-row">
<button>Reset Alarm...</button>
<label>Try this to get some attention</label>
</section>
</article>
<article class="tab">
<img style="width: 100%" src="https://i.pinimg.com/originals/74/c5/03/74c503fb8e7c633c77cd4cb58ddc4c0d.jpg" />
</article>
<article class="tab">
<p>
You create the content for each tab by using an <code>article</code> tag.
</p>
<iframe width="100%" height="200" src="https://www.youtube.com/embed/TODJBQ0tnow" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</article>
</section>
<section class="field-row" style="justify-content: flex-end">
<button>OK</button>
<button>Cancel</button>
</section>
</div>
</div>
`) %>
</div>
</section>
<section class="component">
<h3 id="tree-view">TreeView</h3>
<div>
<blockquote>
A <em>tree view control</em> is a special list box control
that displays a set of objects as an indented outline based
on their logical hierarchical relationship.
<footer>
— Microsoft Windows User Experience p. 178
</footer>
</blockquote>
<p>
To render a tree view, use an <code>ul</code> element with the
<code>tree-view</code> class. The children of this list (<code>li</code>
elements), can contain whatever you'd like.
</p>
<%- example(`
<ul class="tree-view">
<li>We can put</li>
<li><strong style="color: purple">✨ Whatever ✨</strong></li>
<li>We want in here</li>
</ul>
`) %>
<p>
To make this a tree, we can nest further <code>ul</code> elements
(no class needed on these). This will provide them with a nice dotted
border and indentation to illustrate the structure of the tree.
</p>
<p>
To create expandable sections, wrap child lists inside of
<code>details</code> elements.
</p>
<%- example(`
<ul class="tree-view">
<li>Table of Contents</li>
<li>What is web development?</li>
<li>
CSS
<ul>
<li>Selectors</li>
<li>Specificity</li>
<li>Properties</li>
</ul>
</li>
<li>
<details open>
<summary>JavaScript</summary>
<ul>
<li>Avoid at all costs</li>
<li>
<details>
<summary>Unless</summary>
<ul>
<li>Avoid</li>
<li>
<details>
<summary>At</summary>
<ul>
<li>Avoid</li>
<li>At</li>
<li>All</li>
<li>Cost</li>
</ul>
</details>
</li>
<li>All</li>
<li>Cost</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
<li>HTML</li>
<li>Special Thanks</li>
</ul>
`) %>
</div>
</section>
<h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
<p>
98.css is <a href="https://github.com/jdan/98.css/blob/master/LICENSE">MIT licensed</a>.
</p>
<p>
Refer to <a href="https://github.com/jdan/98.css/issues">the GitHub issues page</a> to see bugs
in my CSS or report new ones. I'd really like to see your pull requests (especially those new to
open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like
to make it a fun place to build your open-source muscle.
</p>
<p>
Thank you for checking my little project out, I hope it brought you some joy today. Consider
<a href="https://github.com/jdan/98.css/stargazers">starring/following along on GitHub</a> and maybe
subscribing to more fun things on <a href="https://twitter.com/jdan">my twitter</a>. 👋
</p>
</main>
</body>
<script src="script.js"></script>
</html>