98.css
++
A design system for building faithful recreations of old UIs.
+ +Intro
++ 98.css is a CSS library for building interfaces that look like Windows 98. +
+ +Hello, world!
+
+ 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 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 98.css is compatible with your frontend framework of choice. +
+ +You can install 98.css from the GitHub releases page, or from npm.
+npm install 98.cssComponents
+ +Button
++ A command button, also referred to as a push button, is a control + that causes the application to perform some action when the user clicks it. + + ++ +
+ 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. +
+ +Show code
+<button>Click me</button>+ When buttons are clicked, the raised borders become sunken. + The following button is simulated to be in the pressed (active) state. +
+ + +Show code
+<button>I am being pressed</button>+ Disabled buttons maintain the same raised border, but have a "washed out" + appearance in their label. +
+ +Show code
+<button disabled>I cannot be clicked</button>+ Button focus is communicated with a dotted border, set 4px within the contents of the button. + The following example is simulated to be focused. +
+ +Show code
+<button>I am focused</button>Checkbox
++ A check box represents an independent or non-exclusive choice. + ++ +
+ Checkboxes are represented with a sunken panel, populated with a "check" icon when + selected, next to a label indicating the choice. +
+ +
+ 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. 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).
+
Show code
+<input type="checkbox" id="example1">
+<label for="example1">This is a checkbox</label>
+ 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.
+
Show code
+<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>OptionButton
++ 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.
+
Show code
+<div class="field-row">
+ <input id="radio5" type="radio" name="first-example">
+ <label for="radio5">Yes</label>
+</div>
+<div class="field-row">
+ <input id="radio6" type="radio" name="first-example">
+ <label for="radio6">No</label>
+</div>
+ Option buttons can also be checked and disabled with their corresponding
+ HTML attributes.
+
Show code
+<div class="field-row">
+ <input id="radio7" type="radio" name="second-example">
+ <label for="radio7">Peanut butter should be smooth</label>
+</div>
+<div class="field-row">
+ <input checked disabled id="radio8" type="radio" name="second-example">
+ <label for="radio8">I understand why people like crunchy peanut butter</label>
+</div>
+<div class="field-row">
+ <input disabled id="radio9" type="radio" name="second-example">
+ <label for="radio9">Crunchy peanut butter is good</label>
+</div>