xp.css

<!doctype html> <html> <head> <title>XP.css - A design system for building faithful recreations of old UIs</title> <link rel="Shortcut Icon" type="image/x-icon" href="icon.png" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta property="og:title" content="XP.css" /> <meta name="Description" content="A design system for building faithful recreations of old UIs." /> <meta property="og:description" content="A design system for building faithful recreations of old UIs." /> <meta property="og:image" content="https://github.com/botoxparty/XP.css/raw/main/docs/window.png?raw=true" /> <link id="theme-stylesheet" rel="stylesheet" href="XP.css"> <link rel="stylesheet" href="docs.css"> <link rel="stylesheet" href="vs.css"> </head> <body class="surface" ontouchstart> <aside> <ul class="tree-view"> <li><a href="#intro">Intro</a></li> <li> <a href="#components">Components</a> <ul> <li><a href="#button">Button</a></li> <li><a href="#checkbox">Checkbox</a></li> <li><a href="#option-button">OptionButton</a></li> <li><a href="#tabs">Tabs</a></li> <li><a href="#group-box">GroupBox</a></li> <li><a href="#text-box">TextBox</a></li> <li><a href="#slider">Slider</a></li> <li><a href="#dropdown">Dropdown</a></li> <li> <a href="#window">Window</a> <ul> <li><a href="#title-bar">Title Bar</a></li> <li><a href="#window-contents">Window contents</a></li> <li><a href="#status-bar">Status Bar</a></li> </ul> </li> <li><a href="#tree-view">TreeView</a></li> <li><a href="#progress-bar">ProgressBar</a></li> </ul> </li> <li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li> </ul> </aside> <div class="theme-switcher"> <section class="field-row"> <label>Select a theme</label> <select id="theme-switcher-select"> <option value="XP.css">Windows XP</option> <option value="98.css">Windows 98</option> </select> </section> </div> <main> <h1>XP.css</h1> <hr> A design system for building faithful recreations of old UIs. <a href="http://npm.im/xp.css" rel="nofollow" style="text-decoration: none"> <img alt="npm" src="https://img.shields.io/npm/v/xp.css"> </a> <a href="https://unpkg.com/xp.css" rel="nofollow" style="text-decoration: none"> <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/xp.css"> </a> <h2 id="intro">Intro</h2> XP.css is an extention of 98.css. A CSS library for building interfaces that look like old UIs. See <a href="https://github.com/botoxparty/XP.css">XP.css on GitHub</a> See <a href="https://github.com/jdan/98.css">98.css on GitHub</a> <div class="window" style="margin: 32px; width: 250px"> <div class="title-bar"> <div class="title-bar-text"> My First Program </div> <div class="title-bar-controls"> <button aria-label="Minimize"></button> <button aria-label="Maximize"></button> <button aria-label="Close"></button> </div> </div> <div class="window-body"> Hello, world! <section class="field-row" style="justify-content: flex-end"> <button>OK</button> <button>Cancel</button> </section> </div> </div> This library relies on the usage of semantic HTML. To make a button, you'll need to use a <code><button></code>. Input elements require labels. Icon buttons rely on <code>aria-label</code>. 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 <a href="https://codesandbox.io/s/silly-bas-dln9t?file=/src/index.js">XP.css used with React</a>, and <a href="https://codesandbox.io/s/vigilant-night-2jkz3?file=/index.html">an example with vanilla JavaScript</a>. The fastest way to use XP.css is to import it from unpkg. Windows XP Theme <pre style="max-width: fit-content"> <code><link rel="stylesheet" href="https://unpkg.com/xp.css" ></code></pre> Windows 98 Theme <pre style="max-width: fit-content"><code><link rel="stylesheet" href="https://unpkg.com/xp.css@/dist/98.css" ></code></pre> You can also install XP.css <a href="https://www.npmjs.com/package/xp.css">from npm</a>. Installation <pre style="max-width: fit-content"> <code>npm install xp.css</code></pre> Usage <pre style="max-width: fit-content"> // For XP import "xp.css/dist/XP.css"; // For 98 import "xp.css/dist/98.css";</pre> <h2 id="components">Components</h2> <section class="component"> <h3 id="button">Button</h3> <div> <blockquote> 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. <footer>— Microsoft Windows User Experience p. 160</footer> </blockquote> 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. <div class="example"> <button>Click me</button> <details> <summary>Show code</summary> <pre><code><button>Click me</button></code></pre> </details> </div> When buttons are clicked, the raised borders become sunken. The following button is simulated to be in the pressed (active) state. <div class="example"> <button class="active">I am being pressed</button> <details> <summary>Show code</summary> <pre><code><button>I am being pressed</button></code></pre> </details> </div> Disabled buttons maintain the same raised border, but have a "washed out" appearance in their label. <div class="example"> <button disabled>I cannot be clicked</button> <details> <summary>Show code</summary> <pre><code><button disabled>I cannot be clicked</button></code></pre> </details> </div> Button focus is communicated with a dotted border, set 4px within the contents of the button. The following example is simulated to be focused. <div class="example"> <button class="focused">I am focused</button> <details> <summary>Show code</summary> <pre><code><button>I am focused</button></code></pre> </details> </div> </div> </section> <section class="component"> <h3 id="checkbox">Checkbox</h3> <div> <blockquote> A check box represents an independent or non-exclusive choice. <footer>— Microsoft Windows User Experience p. 167</footer> </blockquote> 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 <code><label></code> element with a <code>for</code> attribute pointed at the <code>id</code> 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). <div class="example"> <input type="checkbox" id="example1"> <label for="example1">This is a checkbox</label> <details> <summary>Show code</summary> <pre><code><input type="checkbox" id="example1"> <label for="example1">This is a checkbox</label></code></pre> </details> </div> Checkboxes can be selected and disabled with the standard <code>checked</code> and <code>disabled</code> attributes. When grouping inputs, wrap each input in a container with the <code>field-row</code> class. This ensures a consistent spacing between inputs. <div class="example"> <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> <details> <summary>Show code</summary> <pre><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></code></pre> </details> </div> </div> </section> <section class="component"> <h3 id="option-button">OptionButton</h3> <div> <blockquote> 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. <footer>— Microsoft Windows User Experience p. 164</footer> </blockquote> Option buttons can be used via the <code>radio</code> type on an input element. Option buttons can be grouped by specifying a shared <code>name</code> attribute on each input. Just as before: when grouping inputs, wrap each input in a container with the <code>field-row</code> class to ensure a consistent spacing between inputs. <div class="example"> <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> <details> <summary>Show code</summary> <pre><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></code></pre> </details> </div> Option buttons can also be <code>checked</code> and <code>disabled</code> with their corresponding HTML attributes. <div class="example"> <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> <details> <summary>Show code</summary> <pre><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></code></pre> </details> </div> </div> </section> <section class="component"> <h3 id="tabs">Tabs</h3> <div> <blockquote> Tabs provide a way to present related information on separate labeled pages. <footer>— <a href="https://docs.microsoft.com/en-us/windows/win32/uxguide/ctrl-tabs">Microsoft Windows User Experience - Tabs</a></footer> </blockquote> <div class="example"> <section class="tabs" style="max-width: 500px"> <menu role="tablist" aria-label="Sample Tabs"> <button role="tab" aria-selected="true" aria-controls="tab-A">Tab A</button> <button role="tab" aria-controls="tab-B">Tab B</button> <button role="tab" aria-controls="tab-C">Tab C</button> </menu>  <article role="tabpanel" id="tab-A"> <h3>Tab Content</h3> You create the tabs, you would use a <code>menu role="tablist"</code> element then for the tab titles you use a <code>button</code> with the <code>aria-controls</code> parameter set to match the relative <code>role="tabpanel"</code>'s element. Read more at <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role" target="_blank">MDN Web docs - ARIA: tab role</a> </article> <article role="tabpanel" hidden id="tab-B"> <h3>More...</h3> This tab contains a GroupBox <fieldset> <legend>Today's mood</legend> <div class="field-row"> <input id="radio10" type="radio" name="fieldset-example2"> <label for="radio10">Claire Saffitz</label> </div> <div class="field-row"> <input id="radio11" type="radio" name="fieldset-example2"> <label for="radio11">Brad Leone</label> </div> <div class="field-row"> <input id="radio12" type="radio" name="fieldset-example2"> <label for="radio12">Chris Morocco</label> </div> <div class="field-row"> <input id="radio13" type="radio" name="fieldset-example2"> <label for="radio13">Carla Lalli Music</label> </div> </fieldset> </article> <article role="tabpanel" hidden id="tab-C"> <h3>Tab 3</h3> Lorem Ipsum Dolor Sit </article> </section> <details> <summary>Show code</summary> <pre><code><section class="tabs" style="max-width: 500px"> <menu role="tablist" aria-label="Sample Tabs"> <button role="tab" aria-selected="true" aria-controls="tab-A">Tab A</button> <button role="tab" aria-controls="tab-B">Tab B</button> <button role="tab" aria-controls="tab-C">Tab C</button> </menu>  <article role="tabpanel" id="tab-A"> <h3>Tab Content</h3> <p> You create the tabs, you would use a <code>menu role="tablist"</code> element then for the tab titles you use a <code>button</code> with the <code>aria-controls</code> parameter set to match the relative <code>role="tabpanel"</code>'s element. </p> <p> Read more at <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role" target="_blank">MDN Web docs - ARIA: tab role</a> </p> </article> <article role="tabpanel" hidden id="tab-B"> <h3>More...</h3> <p>This tab contains a GroupBox</p> <fieldset> <legend>Today's mood</legend> <div class="field-row"> <input id="radio10" type="radio" name="fieldset-example2"> <label for="radio10">Claire Saffitz</label> </div> <div class="field-row"> <input id="radio11" type="radio" name="fieldset-example2"> <label for="radio11">Brad Leone</label> </div> <div class="field-row"> <input id="radio12" type="radio" name="fieldset-example2"> <label for="radio12">Chris Morocco</label> </div> <div class="field-row"> <input id="radio13" type="radio" name="fieldset-example2"> <label for="radio13">Carla Lalli Music</label> </div> </fieldset> </article> <article role="tabpanel" hidden id="tab-C"> <h3>Tab 3</h3> <p>Lorem Ipsum Dolor Sit</p> </article> </section></code></pre> </details> </div> </div> </section> <section class="component"> <h3 id="group-box">GroupBox</h3> <div> <blockquote> 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. <footer>— Microsoft Windows User Experience p. 189</footer> </blockquote> A group box can be used by wrapping your elements with the <code>fieldset</code> tag. It contains a sunken outer border and a raised inner border, resembling an engraved box around your controls. <div class="example"> <fieldset> <div class="field-row">Select one:</div> <div class="field-row"> <input id="radio14" type="radio" name="fieldset-example"> <label for="radio14">Diners</label> </div> <div class="field-row"> <input id="radio15" type="radio" name="fieldset-example"> <label for="radio15">Drive-Ins</label> </div> <div class="field-row"> <input id="radio16" type="radio" name="fieldset-example"> <label for="radio16">Dives</label> </div> </fieldset> <details> <summary>Show code</summary> <pre><code><fieldset> <div class="field-row">Select one:</div> <div class="field-row"> <input id="radio14" type="radio" name="fieldset-example"> <label for="radio14">Diners</label> </div> <div class="field-row"> <input id="radio15" type="radio" name="fieldset-example"> <label for="radio15">Drive-Ins</label> </div> <div class="field-row"> <input id="radio16" type="radio" name="fieldset-example"> <label for="radio16">Dives</label> </div> </fieldset></code></pre> </details> </div> You can provide your group with a label by placing a <code>legend</code> element within the <code>fieldset</code>. <div class="example"> <fieldset> <legend>Today's mood</legend> <div class="field-row"> <input id="radio17" type="radio" name="fieldset-example2"> <label for="radio17">Claire Saffitz</label> </div> <div class="field-row"> <input id="radio18" type="radio" name="fieldset-example2"> <label for="radio18">Brad Leone</label> </div> <div class="field-row"> <input id="radio19" type="radio" name="fieldset-example2"> <label for="radio19">Chris Morocco</label> </div> <div class="field-row"> <input id="radio20" type="radio" name="fieldset-example2"> <label for="radio20">Carla Lalli Music</label> </div> </fieldset> <details> <summary>Show code</summary> <pre><code><fieldset> <legend>Today's mood</legend> <div class="field-row"> <input id="radio17" type="radio" name="fieldset-example2"> <label for="radio17">Claire Saffitz</label> </div> <div class="field-row"> <input id="radio18" type="radio" name="fieldset-example2"> <label for="radio18">Brad Leone</label> </div> <div class="field-row"> <input id="radio19" type="radio" name="fieldset-example2"> <label for="radio19">Chris Morocco</label> </div> <div class="field-row"> <input id="radio20" type="radio" name="fieldset-example2"> <label for="radio20">Carla Lalli Music</label> </div> </fieldset></code></pre> </details> </div> </div> </section> <section class="component"> <h3 id="text-box">TextBox</h3> <div> <blockquote> 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. <footer>— Microsoft Windows User Experience p. 181</footer> </blockquote> Text boxes can rendered by specifying a <code>text</code> type on an <code>input</code> element. As with checkboxes and radio buttons, you should provide a corresponding label with a properly set <code>for</code> attribute, and wrap both in a container with the <code>field-row</code> class. <div class="example"> <div class="field-row"> <label for="text21">Occupation</label> <input id="text21" type="text" /> </div> <details> <summary>Show code</summary> <pre><code><div class="field-row"> <label for="text21">Occupation</label> <input id="text21" type="text" /> </div></code></pre> </details> </div> Additionally, you can make use of the <code>field-row-stacked</code> class to position your label above the input instead of beside it. <div class="example"> <div class="field-row-stacked" style="width: 200px"> <label for="text22">Address (Line 1)</label> <input id="text22" type="text" /> </div> <div class="field-row-stacked" style="width: 200px"> <label for="text23">Address (Line 2)</label> <input id="text23" type="text" /> </div> <details> <summary>Show code</summary> <pre><code><div class="field-row-stacked" style="width: 200px"> <label for="text22">Address (Line 1)</label> <input id="text22" type="text" /> </div> <div class="field-row-stacked" style="width: 200px"> <label for="text23">Address (Line 2)</label> <input id="text23" type="text" /> </div></code></pre> </details> </div> To support multiple lines in the user's input, use the <code>textarea</code> element instead. <div class="example"> <div class="field-row-stacked" style="width: 200px"> <label for="text24">Additional notes</label> <textarea id="text24" rows="8"></textarea> </div> <details> <summary>Show code</summary> <pre><code><div class="field-row-stacked" style="width: 200px"> <label for="text24">Additional notes</label> <textarea id="text24" rows="8"></textarea> </div></code></pre> </details> </div> </div> </section> <section class="component"> <h3 id="slider">Slider</h3> <div> <blockquote> 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... <footer>— Microsoft Windows User Experience p. 146</footer> </blockquote> Sliders can rendered by specifying a <code>range</code> type on an <code>input</code> element. <div class="example"> <div class="field-row" style="width: 300px"> <label for="range25">Volume:</label> <label for="range26">Low</label> <input id="range26" type="range" min="1" max="11" value="5" /> <label for="range27">High</label> </div> <details> <summary>Show code</summary> <pre><code><div class="field-row" style="width: 300px"> <label for="range25">Volume:</label> <label for="range26">Low</label> <input id="range26" type="range" min="1" max="11" value="5" /> <label for="range27">High</label> </div></code></pre> </details> </div> You can make use of the <code>has-box-indicator</code> class replace the default indicator with a box indicator, furthermore the slider can be wrapped with a <code>div</code> using <code>is-vertical</code> to display the input vertically. Note: To change the length of a vertical slider, the <code>input</code> width and <code>div</code> height. <div class="example"> <div class="field-row"> <label for="range28">Cowbell</label> <div class="is-vertical"> <input id="range28" class="has-box-indicator" type="range" min="1" max="3" step="1" value="2" /> </div> </div> <details> <summary>Show code</summary> <pre><code><div class="field-row"> <label for="range28">Cowbell</label> <div class="is-vertical"> <input id="range28" class="has-box-indicator" type="range" min="1" max="3" step="1"</s