98UI
A design system for building faithful recreations of old UIs.
Intro
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.
Hello, world!
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.
You can install it from the GitHub releases page, or from npm.
npm install 98uiComponents
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 boxrepresents 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.
Show code
<input type="checkbox" id="example1">
<label for="example1">This is a checkbox</label>