Pangram verdict · v3.3
We believe that this document is fully human-written
AI likelihood · overall
HumanArticle text · 1,177 words · 6 segments analyzed
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. See more on GitHub.
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.
Here is an example of 98.css used with React, and an example with vanilla JavaScript. The fastest way to use 98.css is to import it from unpkg.
<link rel="stylesheet" href="https://unpkg.com/98.css" >
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.
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> <input type="submit" /> <input type="reset" />
You can add the class default to any button to apply additional styling, useful when communicating to the user what default action would happen in the active window if the Enter key was pressed on Windows 98.
Show code <button class="default">OK</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).
This is a checkbox 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.
I am checked
I am inactive
I am inactive but still checked
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 used via the radio type on an input element.
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.
Yes
No
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.
Peanut butter should be smooth
I understand why people like crunchy peanut butter
Crunchy peanut butter is good
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>
GroupBox A group box is a special control you can use to organize a set of controls. A group box is a rectangular frame with an optional label that surrounds a set of controls.
A group box can be used by wrapping your elements with the fieldset tag. It contains a sunken outer border and a raised inner border, resembling an engraved box around your controls.
Show code <fieldset> <div class="field-row">Select one:</div> <div class="field-row"> <input id="radio10" type="radio" name="fieldset-example"> <label for="radio10">Diners</label> </div> <div class="field-row"> <input id="radio11" type="radio" name="fieldset-example"> <label for="radio11">Drive-Ins</label> </div> <div class="field-row"> <input id="radio12" type="radio" name="fieldset-example"> <label for="radio12">Dives</label> </div> </fieldset>
You can provide your group with a label by placing a legend element within the fieldset.
Show code <fieldset> <legend>Today's mood</legend> <div class="field-row"> <input id="radio13" type="radio" name="fieldset-example2"> <label for="radio13">Claire Saffitz</label> </div> <div class="field-row"> <input id="radio14" type="radio" name="fieldset-example2"> <label for="radio14">Brad Leone</label> </div> <div class="field-row"> <input id="radio15" type="radio" name="fieldset-example2"> <label for="radio15">Chris Morocco</label> </div> <div class="field-row"> <input id="radio16" type="radio" name="fieldset-example2"> <label for="radio16">Carla Lalli Music</label> </div> </fieldset>
TextBox A text box (also referred to as an edit control) is a rectangular control where the user enters or edits text. It can be defined to support a single line or multiple lines of text.
Text boxes can rendered by specifying a text type on an input element. As with checkboxes and radio buttons, you should provide a corresponding label with a properly set for attribute, and wrap both in a container with the field-row class.
Occupation
Show code <div class="field-row"> <label for="text17">Occupation</label> <input id="text17" type="text" /> </div>
Additionally, you can make use of the field-row-stacked class to position your label above the input instead of beside it.
Address (Line 1)
Address (Line 2)
Show code <div class="field-row-stacked" style="width: 200px"> <label for="text18">Address (Line 1)</label> <input id="text18" type="text" /> </div> <div class="field-row-stacked" style="width: 200px"> <label for="text19">Address (Line 2)</label> <input id="text19" type="text" /> </div>
To support multiple lines in the user's input, use the textarea element instead.
Additional notes
Show code <div class="field-row-stacked" style="width: 200px"> <label for="text20">Additional notes</label> <textarea id="text20" rows="8"></textarea> </div>
Text boxes can also be disabled and have value with their corresponding HTML attributes.
Favorite color
Show code <div class="field-row"> <label for="text21">Favorite color</label> <input id="text21" disabled type="text" value="Windows Green"/> </div>
Slider A slider, sometimes called a trackbar control, consists of a bar that defines the extent or range of the adjustment and an indicator that shows the current value for the control...
Sliders can rendered by specifying a range type on an input element.
Volume: Low High
Show code <div class="field-row" style="width: 300px"> <label for="range22">Volume:</label> <label for="range23">Low</label> <input id="range23" type="range" min="1" max="11" value="5" /> <label