<!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 rel="stylesheet" href="https://unpkg.com/xp.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>
<p>A design system for building faithful recreations of old UIs.</p>
<p>
<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>
</p>
<h2 id="intro">Intro</h2>
<p>
XP.css is an extention of 98.css. A CSS library for building interfaces that look like old UIs.<br>
See <a href="https://github.com/botoxparty/XP.css">XP.css on GitHub</a><br>
See <a href="https://github.com/jdan/98.css">98.css on GitHub</a>
</p>
<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">
<p>Hello, world!</p>
<section class="field-row" style="justify-content: flex-end">
<button>OK</button>
<button>Cancel</button>
</section>
</div>
</div>
<p>
This library relies on the usage of <strong>semantic HTML</strong>. 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.
</p>
<p>
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.
</p>
<p>
<strong>This library does not contain any JavaScript</strong>, it merely styles your HTML with some CSS.
This means 98.css is compatible with your frontend framework of choice.
</p>
<p>
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.
</p>
<p><em>Windows XP Theme</em>
<pre style="max-width: fit-content">
<code><link
rel="stylesheet"
href="https://unpkg.com/xp.css"
></code></pre>
</p>
<p><em>Windows 98 Theme</em>
<pre style="max-width: fit-content"><code><link
rel="stylesheet"
href="https://unpkg.com/xp.css@/dist/98.css"
></code></pre>
</p>
<p>
You can also install XP.css <a href="https://www.npmjs.com/package/xp.css">from npm</a>.
</p>
<p><em>Installation</em>
<pre style="max-width: fit-content">
<code>npm install xp.css</code></pre>
</p>
<p><em>Usage</em>
<pre style="max-width: fit-content">
// For XP
import "xp.css/dist/XP.css";
// For 98
import "xp.css/dist/98.css";</pre>
</p>
<h2 id="components">Components</h2>
<section class="component">
<h3 id="button">Button</h3>
<div>
<blockquote>
A <em>command button</em>, 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>
<p>
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.
</p>
<%- example(`<button>Click me</button>`) %>
<p>
When buttons are clicked, the raised borders become sunken.
The following button is simulated to be in the pressed (active) state.
</p>
<% /* [[ ... ]] is used to render contents that
will not appear in the "Show code" section */
%>
<%- example(`<button[[ class="active"]]>I am being pressed</button>`) %>
<p>
Disabled buttons maintain the same raised border, but have a "washed out"
appearance in their label.
</p>
<%- example(`<button disabled>I cannot be clicked</button>`) %>
<p>
Button focus is communicated with a dotted border, set 4px within the contents of the button.
The following example is simulated to be focused.
</p>
<%- example(`<button[[ class="focused"]]>I am focused</button>`) %>
</div>
</section>
<section class="component">
<h3 id="checkbox">Checkbox</h3>
<div>
<blockquote>
A <em>check box</em> represents an independent or non-exclusive choice.
<footer>— Microsoft Windows User Experience p. 167</footer>
</blockquote>
<p>
Checkboxes are represented with a sunken panel, populated with a "check" icon when
selected, next to a label indicating the choice.
</p>
<p>
Note: You <strong>must</strong> include a corresponding label <strong>after</strong>
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).
</p>
<%- example(`
<input type="checkbox" id="example${getNewId()}">
<label for="example${getCurrentId()}">This is a checkbox</label>
`) %>
<p>
Checkboxes can be selected and disabled with the standard <code>checked</code> and <code>disabled</code>
attributes.
</p>
<p>
When grouping inputs, wrap each input in a container with the <code>field-row</code> class. This ensures
a consistent spacing between inputs.
</p>
<%- example(`
<div class="field-row">
<input checked type="checkbox" id="example${getNewId()}">
<label for="example${getCurrentId()}">I am checked</label>
</div>
<div class="field-row">
<input disabled type="checkbox" id="example${getNewId()}">
<label for="example${getCurrentId()}">I am inactive</label>
</div>
<div class="field-row">
<input checked disabled type="checkbox" id="example${getNewId()}">
<label for="example${getCurrentId()}">I am inactive but still checked</label>
</div>
`) %>
</div>
</section>
<section class="component">
<h3 id="option-button">OptionButton</h3>
<div>
<blockquote>
An <em>option button</em>, 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>
<p>
Option buttons can be used via the <code>radio</code> type on an input element.
</p>
<p>
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.
</p>
<%- example(`
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="first-example">
<label for="radio${getCurrentId()}">Yes</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="first-example">
<label for="radio${getCurrentId()}">No</label>
</div>
`) %>
<p>
Option buttons can also be <code>checked</code> and <code>disabled</code> with their corresponding
HTML attributes.
</p>
<%- example(`
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="second-example">
<label for="radio${getCurrentId()}">Peanut butter should be smooth</label>
</div>
<div class="field-row">
<input checked disabled id="radio${getNewId()}" type="radio" name="second-example">
<label for="radio${getCurrentId()}">I understand why people like crunchy peanut butter</label>
</div>
<div class="field-row">
<input disabled id="radio${getNewId()}" type="radio" name="second-example">
<label for="radio${getCurrentId()}">Crunchy peanut butter is good</label>
</div>
`) %>
</div>
</section>
<section class="component">
<h3 id="tabs">Tabs</h3>
<div>
<blockquote>
<em>Tabs</em> 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>
<%- 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>
<!-- the tab content -->
<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="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Claire Saffitz</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Brad Leone</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Chris Morocco</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">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>
`) %>
</div>
</section>
<section class="component">
<h3 id="group-box">GroupBox</h3>
<div>
<blockquote>
A <em>group box</em> 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>
<p>
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.
</p>
<%- example(`
<fieldset>
<div class="field-row">Select one:</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example">
<label for="radio${getCurrentId()}">Diners</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example">
<label for="radio${getCurrentId()}">Drive-Ins</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example">
<label for="radio${getCurrentId()}">Dives</label>
</div>
</fieldset>
`) %>
<p>
You can provide your group with a label by placing a <code>legend</code> element
within the <code>fieldset</code>.
</p>
<%- example(`
<fieldset>
<legend>Today's mood</legend>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Claire Saffitz</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Brad Leone</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Chris Morocco</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Carla Lalli Music</label>
</div>
</fieldset>
`) %>
</div>
</section>
<section class="component">
<h3 id="text-box">TextBox</h3>
<div>
<blockquote>
A <em>text box</em> (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>
<p>
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.
</p>
<%- example(`
<div class="field-row">
<label for="text${getNewId()}">Occupation</label>
<input id="text${getCurrentId()}" type="text" />
</div>
`) %>
<p>
Additionally, you can make use of the <code>field-row-stacked</code> class
to position your label above the input instead of beside it.
</p>
<%- example(`
<div class="field-row-stacked" style="width: 200px">
<label for="text${getNewId()}">Address (Line 1)</label>
<input id="text${getCurrentId()}" type="text" />
</div>
<div class="field-row-stacked" style="width: 200px">
<label for="text${getNewId()}">Address (Line 2)</label>
<input id="text${getCurrentId()}" type="text" />
</div>
`) %>
<p>
To support multiple lines in the user's input, use the <code>textarea</code>
element instead.
</p>
<%- example(`
<div class="field-row-stacked" style="width: 200px">
<label for="text${getNewId()}">Additional notes</label>
<textarea id="text${getCurrentId()}" rows="8"></textarea>
</div>
`) %>
</div>
</section>
<section class="component">
<h3 id="slider">Slider</h3>
<div>
<blockquote>
A <em>slider</em>, 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>
<p>
Sliders can rendered by specifying a <code>range</code> type on an
<code>input</code> element.
</p>
<%- example(`
<div class="field-row" style="width: 300px">
<label for="range${getNewId()}">Volume:</label>
<label for="range${getNewId()}">Low</label>
<input id="range${getCurrentId()}" type="range" min="1" max="11" value="5" />
<label for="range${getNewId()}">High</label>
</div>
`) %>
<p>
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.
</p>
<p>
Note: To change the length of a vertical slider, the <code>input</code> width
and <code>div</code> height.
</p>
<%- example(`
<div class="field-row">
<label for="range${getNewId()}">Cowbell</label>
<div class="is-vertical">
<input id="range${getCurrentId()}" class="has-box-indicator" type="range" min="1" max="3" step="1" value="2" />
</div>
</div>
`) %>
</div>
</section>
<section class="component">
<h3 id="dropdown">Dropdown</h3>
<div>
<blockquote>
A <em>drop-down list box</em> allows the selection of only a
single item from a list. In its closed state, the control displays
the current value for the control. The user opens the list to change
the value.
<footer>
— Microsoft Windows User Experience p. 175
</footer>
</blockquote>
<p>
Dropdowns can be rendered by using the <code>select</code> and <code>option</code>
elements.
</p>
<%- example(`
<select>
<option>5 - Incredible!</option>
<option>4 - Great!</option>
<option>3 - Pretty good</option>
<option>2 - Not so great</option>
<option>1 - Unfortunate</option>
</select>
`) %>
<p>
By default, the first option will be selected. You can change this by
giving one of your <code>option</code> elements the <code>selected</code>
attribute.
</p>
<%- example(`
<select>
<option>5 - Incredible!</option>
<option>4 - Great!</option>
<option selected>3 - Pretty good</option>
<option>2 - Not so great</option>
<option>1 - Unfortunate</option>
</select>
`) %>
</div>
</section>
<h3 id="window">Window</h3>
<p>
The following components illustrate how to build complete windows using
98.css.
</p>
<section class="component">
<h4 id="title-bar">Title Bar</h4>
<div>
<blockquote>
At the top edge of the window, inside its border, is the title bar
(also reffered to as the caption or caption bar), which extends across
the width of the window. The title bar identifies the contents of the
window.
<footer>
— Microsoft Windows User Experience p. 118
</footer>
</blockquote>
<blockquote>
Include command buttons associated with the common commands of the
primary window in the title bar. These buttons act as shortcuts to specific
window commands.
<footer>
— Microsoft Windows User Experience p. 122
</footer>
</blockquote>
<p>
You can build a complete title bar by making use of three classes,
<code>title-bar</code>, <code>title-bar-text</code>, and <code>title-bar-controls</code>.
</p>
<%- example(`
<div class="title-bar">
<div class="title-bar-text">A Title Bar</div>
<div class="title-bar-controls">
<button aria-label="Close"></button>
</div>
</div>
`) %>
<p>
We make use of <code>aria-label</code> to render the Close button, to let
assistive technologies know the intent of this button. You may also use
"Minimize" and "Maximize" like so:
</p>
<%- example(`
<div class="title-bar">
<div class="title-bar-text">A Title Bar</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Restore"></button>
<button aria-label="Close"></button>
</div>
</div>
<br>
<div class="title-bar">
<div class="title-bar-text">A Helpful Bar</div>
<div class="title-bar-controls">
<button aria-label="Help"></button>
<button aria-label="Close"></button>
</div>
</div>
`) %>
</div>
</section>
<section class="component">
<h4 id="window-contents">Window contents</h4>
<div>
<blockquote>
Every window has a boundary that defines its shape.
<footer>
— Microsoft Windows User Experience p. 118
</footer>
</blockquote>
<p>
To give our title bar a home, we make use of the <code>window</code>
class. This provides a raised outer and inner border, as well as some
padding. We can freely resize the window by specifying a width in the
container style.
</p>
<%- example(`
<div class="window" style="width: 300px">
<div class="title-bar">
<div class="title-bar-text">A Complete Window</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
</div>
`) %>
<p>
To draw the contents of the window, we use the <code>window-body</code>
class under the title bar.
</p>
<%- example(`
<div class="window" style="width: 300px">
<div class="title-bar">
<div class="title-bar-text">A Window With Stuff In It</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">
<p>There's so much room for activities!</p>
</div>
</div>
`) %>
<%- example(`
<div class="window">
<div class="title-bar">
<div class="title-bar-text">Command Prompt</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">
<pre>Microsoft❮R❯ Windows DOS \n❮C❯ Copyright Microsoft Corp 1990-2001.
<br>C:\WINDOWS\SYSTEM32> You can build a command line easily with a window and pre tag
</pre>
</div>
</div>
`) %>
<%- example(`
<div class="window" style="width: 400px">
<div class="title-bar">
<div class="title-bar-text">A Window With Tabs and Groups</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">
<menu role="tablist">
<button aria-selected="true" aria-controls="music">Music</button>
<button aria-controls="dogs">Dogs</button>
<button aria-controls="food">Food</button>
</menu>
<article role="tabpanel" id="music">
<p>Set your listening preferences</p>
<fieldset>
<legend>Today's mood</legend>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Nicki Minaj</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Bell Towers</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">The Glamorous Monique</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">EN. V</label>
</div>
</fieldset>
<section class="field-row">
<button>Reset Alarm...</button>
<label>Try this to get some attention</label>
</section>
</article>
<article role="tabpanel" hidden id="dogs">
<img style="width: 100%" src="data:image/jpeg;base64,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" />
</article>
<article role="tabpanel" hidden id="food">
<p>
You create the content for each tab by using an <code>article</code> tag.
</p>
<iframe width="100%" height="200" src="https://www.youtube.com/embed/TODJBQ0tnow" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</article>
<section class="field-row" style="justify-content: flex-end">
<button>OK</button>
<button>Cancel</button>
</section>
</div>
</div>
`) %>
</div>
</section>
<section class="component">
<h4 id="status-bar">Status Bar</h4>
<div>
<blockquote>
A status bar is a special area within a window, typically the bottom, that displays information
about the current state of what is being viewed in the window or any other contextual information, such as keyboard
state.
<footer>
— Microsoft Windows User Experience p. 146
</footer>
</blockquote>
<p>
You can render a status bar with the <code>status-bar</code> class,
and <code>status-bar-field</code> for every child text element.
</p>
<%- example(`
<div class="window" style="width: 320px">
<div class="title-bar">
<div class="title-bar-text">A Window With A Status Bar</div>
</div>
<div class="window-body">
<p> There are just so many possibilities:</p>
<ul>
<li>A Task Manager</li>
<li>A Notepad</li>
<li>Or even a File Explorer!</li>
</ul>
</div>
<div class="status-bar">
<p class="status-bar-field">Press F1 for help</p>
<p class="status-bar-field">Slide 1</p>
<p class="status-bar-field">CPU Usage: 14%</p>
</div>
</div>
`) %>
</section>
<section class="component">
<h3 id="tree-view">TreeView</h3>
<div>
<blockquote>
A <em>tree view control</em> is a special list box control
that displays a set of objects as an indented outline based
on their logical hierarchical relationship.
<footer>
— Microsoft Windows User Experience p. 178
</footer>
</blockquote>
<p>
To render a tree view, use an <code>ul</code> element with the
<code>tree-view</code> class. The children of this list (<code>li</code>
elements), can contain whatever you'd like.
</p>
<%- example(`
<ul class="tree-view">
<li>We can put</li>
<li><strong style="color: purple">✨ Whatever ✨</strong></li>
<li>We want in here</li>
</ul>
`) %>
<p>
To make this a tree, we can nest further <code>ul</code> elements
(no class needed on these). This will provide them with a nice dotted
border and indentation to illustrate the structure of the tree.
</p>
<p>
To create expandable sections, wrap child lists inside of
<code>details</code> elements.
</p>
<%- example(`
<ul class="tree-view">
<li>Table of Contents</li>
<li>What is web development?</li>
<li>
CSS
<ul>
<li>Selectors</li>
<li>Specificity</li>
<li>Properties</li>
</ul>
</li>
<li>
<details open>
<summary>JavaScript</summary>
<ul>
<li>Avoid at all costs</li>
<li>
<details>
<summary>Unless</summary>
<ul>
<li>Avoid</li>
<li>
<details>
<summary>At</summary>
<ul>
<li>Avoid</li>
<li>At</li>
<li>All</li>
<li>Cost</li>
</ul>
</details>
</li>
<li>All</li>
<li>Cost</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
<li>HTML</li>
<li>Special Thanks</li>
</ul>
`) %>
</div>
</section>
<section class="component">
<h3 id="progress-bar">ProgressBar</h3>
<div>
<blockquote>
With a <em>progress bar</em>, users can follow the progress
of a lengthy operation. A progress bar may either show an approximate
percentage of completion (determinate) or indicate that an operation is
ongoing (indeterminate)
<footer>
— <a href="https://learn.microsoft.com/en-us/windows/win32/uxguide/progress-bars">Microsoft Windows
User Experience - Progress Bars</a>
</footer>
</blockquote>
<p>
To render a progress bar, use a <code><progress></code> element.
</p>
<p>
The <code>max</code> attribute describes how much work the task indicated by the progress element requires, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.
</p>
<p>
The <code>value</code> attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted.
</p>
<%- example(`
<progress max="100" value="70"></progress>
`) %>
<p>
If there is no <code>value</code> attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
</p>
<%- example(`
<progress></progress>
`) %>
</div>
</section>
<h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
<p>
XP.css is <a href="https://github.com/botoxparty/XP.css/blob/main/LICENSE">MIT licensed</a>.
</p>
<p>
Refer to <a href="https://github.com/botoxparty/XP.css/issues">the GitHub issues page</a> to see bugs
in my CSS or report new ones. Also check the <a href="https://github.com/jdan/98.css/issues">issues for
98.css</a>.
</p>
<p>
XP.css started as a fork of <a href="https://github.com/jdan/98.css">98.css</a> (a fun project started by <a
href="https://thatjdanisso.cool">Jordan
Scales</a>)
and is now trying to boilerplate the GUI to be able to theme it easily.
<br>
If you want to make a theme or contribute i'd love to see where you can take this!
</p>
<p>
Hopefully you've enjoyed this project! 🍸
Consider
<a href="https://github.com/botoxparty/xp.css/stargazers">starring/following along on GitHub</a> and following me
on <a href="https://twitter.com/botoxparty">Twitter</a>.
</p>
</main>
</body>
<script src="script.js"></script>
</html>