98.css: A Design System for Windows 98 Recreations

98.css: A Design System for Windows 98 Recreations

98.css is a CSS library designed to recreate the visual aesthetic of Windows 98. It provides a comprehensive set of styles for classic UI components, enabling developers to build nostalgic interfaces that are compatible with any frontend framework because the library contains no JavaScript.

Core Philosophy and Technical Implementation

98.css prioritizes semantic HTML and accessibility. The library does not provide custom components but instead styles standard HTML elements to look like their Windows 98 counterparts. For example, a <button> element is styled as a classic push button, and <input type="checkbox"> is used for checkboxes.

Key technical characteristics include:

  • Zero JavaScript: The library is pure CSS, ensuring compatibility with React, Vue, vanilla JavaScript, or any other framework.
  • Accessibility-First: By relying on semantic HTML and requiring labels for input elements, the project ensures that recreated UIs remain usable with assistive technologies.
  • Customizability: Developers can override default styles (such as padding or colors) while maintaining the overall Windows 98 appearance.
  • Installation: The library can be imported via unpkg, installed via npm (npm install 98.css), or downloaded from GitHub releases.

Supported UI Components

The library implements a wide array of components based on the Microsoft Windows User Experience guidelines:

Basic Form Controls

  • Buttons: Includes standard push buttons, default buttons (with specific styling for Enter-key actions), disabled states, and focus indicators (dotted borders).
  • Checkboxes and Radio Buttons: Implemented using standard input types, requiring <label> elements for accessibility.
  • Text Boxes: Supports single-line inputs and multi-line <textarea> elements, with options for stacked labels using the field-row-stacked class.
  • Sliders: Rendered via <input type="range">, with support for vertical orientation and box indicators.
  • Dropdowns: Styled using <select> and <option> elements.

Windowing and Layout

  • Windows: The .window class provides the raised outer and inner borders. The .window-body class defines the content area.
  • Title Bars: Built using .title-bar, .title-bar-text, and .title-bar-controls. It supports various button types (Close, Minimize, Maximize, Help) via aria-label and specific styling classes.
  • Status Bars: The .status-bar and .status-bar-field classes recreate the bottom information area of classic windows.
  • Tabs: Implemented using <menu role="tablist"> and <li> elements with role="tab". The library also supports multi-row tabs via the .multirows class.

Advanced Data Display

  • Tree Views: Created using <ul> with the .tree-view class, supporting nested lists and expandable sections via the <details> element.
  • Table Views: Styled using <table> wrapped in a .sunken-panel div. An .interactive class can be added to change the cursor to a pointer on hover.
  • Progress Indicators: Supports both solid (default) and segmented (.segmented) progress bars.

Community Insights and Feedback

Discussion among developers highlights both the aesthetic appeal and the functional differences between retro and modern UI design.

UI/UX Comparisons

Some users argue that the explicit nature of the Windows 98 UI—such as the use of "grayed out" disabled buttons—is clearer than modern "flat design" trends where disabled actions often simply vanish from the interface.

"I think the fact that we removed grayed out buttons for 'the button just doesn't appear' is one of the more confusing UI trends of our day and the sight of a grayed out button warms my heart"

Technical Observations

  • Interactivity: Because 98.css is pure CSS, interactive elements like tabs require custom JavaScript to manage state (e.g., toggling the aria-selected="true" attribute).
  • Visual Accuracy: While praised for being "almost down to the pixel," some users noted nitpicks regarding the behavior of multi-row tabs and the specific implementation of the MS Sans Serif font.
  • Alternative Projects: The community pointed to other similar retro-CSS projects, including XP.css for Windows XP and NES.css for Nintendo Entertainment System aesthetics.

Project Origin

The author, Jordan Scales, created 98.css as a "burnout recovery project," intending it to be a fun, low-pressure environment for others to contribute to open source and build their technical skills.

Sources