- 98UI is a CSS library for building interfaces that look like Windows 98. This page lists the - various components included, with an example code on how to use them. + 98UI is a CSS library for building interfaces that look like Windows 98.
Importantly, this library does not contain any JavaScript. You will provide - your own, which means this library does not do much but is compatible with your frontend framework - of choice. +
+ This library relies on the usage of semantic HTML. To make a button, you'll need
+ to use a <button>. Input elements require labels. Icon buttons rely on
+ aria-label. This page will guide you through that process, but accessibility is a primary
+ goal of this project.
You can install it from the GitHub releases page, or from npm.
+ ++ 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. +
+ ++ This library does not contain any JavaScript, it merely styles your HTML with some CSS. + This means 98UI is compatible with your frontend framework of choice. +
+ +You can install 98UI from the GitHub releases page, or from npm.
npm install 98ui- A check boxrepresents an independent or non-exclusive choice. + A check box represents an independent or non-exclusive choice.@@ -147,7 +160,9 @@
Note: You must include a corresponding label after
your checkbox, using the <label> element with a for attribute
- pointed at the id of your input.
+ pointed at the id 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).
+ Checkboxes can be selected and disabled with the standard checked and disabled
+ attributes.
+
+ When grouping inputs, wrap each input in a container with the field-row class. This ensures
+ a consistent spacing between inputs.
+
<div class="field-row">
+ <input checked type="checkbox" id="example2">
+ <label for="example2">I am checked</label>
+</div>
+<div class="field-row">
+ <input disabled type="checkbox" id="example3">
+ <label for="example3">I am inactive</label>
+</div>
+<div class="field-row">
+ <input checked disabled type="checkbox" id="example4">
+ <label for="example4">I am inactive but still checked</label>
+</div>+ An option button, 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. + + ++ +
+ Option buttons can be grouped by specifying a shared name attribute on each
+ input. Just as before: when grouping inputs, wrap each input in a container with the
+ field-row class to ensure a consistent spacing between inputs.
+
<div class="field-row">
+ <input id="radio1" type="radio" name="first-example">
+ <label for="radio1">Yes</label>
+</div>
+<div class="field-row">
+ <input id="radio2" type="radio" name="first-example">
+ <label for="radio2">No</label>
+</div>
+ Option buttons can also be checked and disabled with their corresponding
+ HTML attributes.
+
<div class="field-row">
+ <input id="radio3" type="radio" name="second-example">
+ <label for="radio3">Peanut butter should be smooth</label>
+</div>
+<div class="field-row">
+ <input checked disabled id="radio4" type="radio" name="second-example">
+ <label for="radio4">I understand why people like crunchy peanut butter</label>
+</div>
+<div class="field-row">
+ <input disabled id="radio5" type="radio" name="second-example">
+ <label for="radio5">Crunchy peanut butter is good</label>
+</div>