98.css

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.

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. 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.

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.

Installation

Import via unpkg CDN:

<link rel="stylesheet" href="https://unpkg.com/98.css">

Or install via npm:

npm install 98.css

Components

Button

A standard button measures 75px wide and 23px tall, with a raised outer and inner border. You can add the class default to apply additional styling.

<button>Click me</button>
<button class="default">OK</button>
<button disabled>I cannot be clicked</button>

Checkbox

Checkboxes represent independent choices. Always include a corresponding label after your checkbox using <label> with a matching for attribute.

<div class="field-row">
  <input checked type="checkbox" id="example1">
  <label for="example1">This is a checkbox</label>
</div>

OptionButton (Radio Button)

Option buttons represent mutually exclusive choices grouped by a shared name attribute.

<div class="field-row">
  <input id="radio1" type="radio" name="first-example">
  <label for="radio1">Yes</label>
</div>

GroupBox

A group box organizes controls using <fieldset> and an optional <legend> tag.

<fieldset>
  <legend>Today's mood</legend>
  <div class="field-row">
    <input id="radio2" type="radio" name="mood">
    <label for="radio2">Happy</label>
  </div>
</fieldset>

TextBox

Text boxes support single-line and multi-line text input using <input type="text"> and <textarea>.

<div class="field-row-stacked" style="width: 200px">
  <label for="text1">Address</label>
  <input id="text1" type="text" />
</div>