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.

My First VB4 Program

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

Components

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.
— Microsoft Windows User Experience, 8.1

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.

<%- example(``) %>

When buttons are clicked, the raised borders become sunken. The following button is simulated to be in the pressed (active) state.

<% /* [[ ... ]] is used to render contents that will not appear in the "Show code" section */ %> <%- example(`I am being pressed`) %>

Disabled buttons maintain the same raised border, but have a "washed out" appearance in their label.

<%- example(``) %>

Button focus is communicated with a dotted border, set 4px within the contents of the button. The following example is simulated to be focused.

<%- example(`I am focused`) %>

Checkbox

A check box represents an independent or non-exclusive choice.
— Microsoft Windows User Experience, 8.3

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

<%- example(` `) %>

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.

<%- example(`
`) %>

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.
— Microsoft Windows User Experience, 8.2

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.

<%- example(`
`) %>

Option buttons can also be checked and disabled with their corresponding HTML attributes.

<%- example(`
`) %>