8.css

A CSS-only UI library for building faithful, Windows 8-inspired interfaces.

8.css styles semantic HTML with the flat, colorful language of Windows 8. It includes the Start Screen tile system, common controls, app bars, and desktop window chrome. It does not ship a JavaScript runtime and works with plain HTML, React, Vue, Svelte, or another framework that can load CSS.

The documentation follows a component-by-component structure: each section introduces a component, shows a rendered preview, and provides source markup that can be copied into a project.

<section class="w8-start-screen" aria-labelledby="start-title">
  <h1 class="w8-start-heading" id="start-title">Start</h1>
  <p class="w8-start-subtitle">Your apps, at a glance.</p>
  <div class="w8-tiles">
    <a class="w8-tile w8-tile--wide w8-tile--blue" href="#mail">
      <span class="w8-tile__label">Mail</span>
    </a>
  </div>
</section>

Installation / Usage

The public package is available as @flessan/8.css on npm. This update adds a standalone vector icon sprite and styles for Metro-style icon buttons.

import "@flessan/8.css";

<link rel="stylesheet" href="https://unpkg.com/@flessan/8.css/dist/8.css" />

import "@flessan/8.css/dist/gui/base.css";
import "@flessan/8.css/dist/gui/tiles.css";
import "@flessan/8.css/dist/gui/buttons.css";
import "@flessan/8.css/dist/gui/responsive.css";

Start Screen and Tiles

The tile system is the main Windows 8 identity of this library. Use the grid container and compose size and color modifiers on each link or button.

Size modifiers: w8-tile--wide, w8-tile--tall, and w8-tile--large. Colors include blue, cyan, purple, magenta, green, orange, red, and dark.

<div class="w8-tiles">
  <a class="w8-tile w8-tile--wide w8-tile--blue" href="#mail">
    <span class="w8-tile__label">Mail</span>
  </a>
  <a class="w8-tile w8-tile--purple" href="#photos">
    <span class="w8-tile__label">Photos</span>
  </a>
</div>

Button

Use native buttons for actions. The primary modifier uses the Windows blue accent; the subtle modifier removes the solid fill for low-priority commands.

<button class="w8-button" type="button">Cancel</button>
<button class="w8-button w8-button--primary" type="button">Save changes</button>
<button class="w8-button w8-button--subtle" type="button">More options</button>

Text fields

Use visible labels with native input, select, and textarea elements. The field wrapper keeps labels, controls, and help text aligned.

<div class="w8-field">
  <label class="w8-label" for="display-name">Display name</label>
  <input class="w8-input" id="display-name" name="displayName" />
  <p class="w8-help">Shown on your profile.</p>
</div>

Checkbox and Toggle

Checkboxes and radio buttons stay native HTML controls. The toggle class only changes a checkbox visually; checked state still comes from the browser.

<label class="w8-toggle">
  <input class="w8-toggle__input" type="checkbox" checked />
  <span>Wi-Fi</span>
</label>

Progress and Feedback

Use native progress for measurable progress, badges for compact status, and notices to communicate changes in context.

<progress class="w8-progress" value="68" max="100">68%</progress>
<span class="w8-badge w8-badge--blue">Online</span>
<div class="w8-notice" role="status">Your settings were saved.</div>

Tabs

Tab classes style a selected item and its bottom indicator. They do not implement keyboard navigation, switching panels, or ARIA state management.

<div class="w8-tabs" role="tablist" aria-label="Settings sections">
  <button class="w8-tab" type="button" role="tab" aria-selected="true">Personalize</button>
  <button class="w8-tab" type="button" role="tab" aria-selected="false">Accounts</button>
</div>

Window

Compose a title bar, body, and footer to build Windows 8 desktop-style windows. The controls are visual only unless you connect them to application behavior.

<section class="w8-window" aria-labelledby="window-title">
  <header class="w8-title-bar">
    <span class="w8-title-bar__text" id="window-title">Display settings</span>
  </header>
  <div class="w8-window-body"><p>Adjust your display preferences.</p></div>
  <footer class="w8-window-footer">
    <button class="w8-button w8-button--primary" type="button">Apply</button>
  </footer>
</section>

App Bar

The app bar groups commands into a dark Windows 8-style action surface. Use native buttons or links and label the navigation region.

<nav class="w8-app-bar" aria-label="Document actions">
  <button class="w8-app-bar__item" type="button">Share</button>
  <button class="w8-app-bar__item" type="button">Select</button>
</nav>

Dialog Box

Dialog styles apply to native HTML dialog elements. This visible preview is a styled container; in an app, use the browser dialog API to open and close a real dialog.

<dialog class="w8-dialog" aria-labelledby="confirm-title">
  <div class="w8-dialog__body">
    <h2 id="confirm-title">Delete this file?</h2>
    <p>This action cannot be undone.</p>
  </div>
  <div class="w8-dialog__footer">
    <button class="w8-button" type="button">Cancel</button>
    <button class="w8-button w8-button--primary" type="button">Delete</button>
  </div>
</dialog>

Metro icon library

The icon sprite includes 50 original vector symbols drawn with the simple geometry and restrained line weight associated with Windows 8 Modern UI. These are independent redrawings, not extracted system assets. Icon color follows the surrounding text through currentColor.

<svg class="w8-icon w8-icon--large" role="img" aria-label="Mail">
  <use href="./icons.svg#w8-icon-mail"></use>
</svg>

<button class="w8-icon-button" type="button" aria-label="Search">
  <svg class="w8-icon w8-icon--large" aria-hidden="true">
    <use href="./icons.svg#w8-icon-search"></use>
  </svg>
  <span class="w8-icon-button__label">Search</span>
</button>

For a meaningful icon, provide an accessible label with aria-label or visible text. Decorative icons should use aria-hidden="true". The sprite is distributed separately from the stylesheet.

Origin and Inspiration

8.css is very strongly inspired by 7.css by khang-nd, especially its focus on semantic HTML, a CSS-only UI layer, detailed component documentation, and examples that pair a visual preview with copyable markup. 8.css is not an official continuation of 7.css and does not claim affiliation with its author.

The initial code came from Windows-8-Metro-UI by SamWanekeya. That repository was a small Start Screen experiment with no recorded commits after June 2017. It appeared to be abandoned, so I forked it and began evolving it into a reusable component library with modular CSS source and developer-focused documentation.

The original MIT license is preserved. The goal is to make the package installable from npm so consumers do not need GitHub URLs to install or use it.

Issues, Contributing, etc.

The component API is still in pre-release development. Issues and pull requests are welcome for Windows 8 visual accuracy, missing components, responsive behavior, accessibility, browser compatibility, and documentation.

• Report an issue
• Review pull requests
• Repository instructions for coding agents
• llms.txt or llms-full.txt

8.css is MIT licensed. It is an independent community project, not official Microsoft software.