mirror of
https://github.com/jdan/98.css.git
synced 2025-09-02 18:33:01 +02:00
add index.html back
This commit is contained in:
Jordan Scales
295
docs/index.html
Normal file
295
docs/index.html
Normal file
@@ -0,0 +1,295 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css"></style>
|
||||
<link rel="stylesheet" href="docs.css"></style>
|
||||
</head>
|
||||
<body>
|
||||
<aside>
|
||||
<ul class="treeview">
|
||||
<li><a href="#intro">Intro</a></li>
|
||||
<li>
|
||||
<a href="#components">Components</a>
|
||||
<ul>
|
||||
<li><a href="#button">Button</a></li>
|
||||
<li><a href="#dialog">Dialog</a></li>
|
||||
<li><a href="#checkbox">Checkbox</a></li>
|
||||
<li><a href="#option-button">OptionButton</a></li>
|
||||
<li><a href="#text-box">TextBox</a></li>
|
||||
<li><a href="#multiline-text-box">Multiline TextBox</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#extras">Extras</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
<h1>98.css</h1>
|
||||
<hr>
|
||||
<p>A design system for building faithful recreations of old UIs.</p>
|
||||
|
||||
<h2 id="intro">Intro</h2>
|
||||
<p>
|
||||
98.css is a CSS library for building interfaces that look like Windows 98.
|
||||
</p>
|
||||
|
||||
<div class="dialog" style="margin: 32px; width: 250px">
|
||||
<div class="menubar">
|
||||
<div class="menubar-title">
|
||||
My First VB4 Program
|
||||
</div>
|
||||
|
||||
<div class="menubar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<p>Hello, world!</p>
|
||||
<section class="field-row align-right">
|
||||
<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>You can install 98.css from the GitHub releases page, or from npm.</p>
|
||||
<pre><code>npm install 98.css</code></pre>
|
||||
|
||||
<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, 8.1</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>
|
||||
|
||||
<div class="example">
|
||||
<button>Click me</button>
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
<pre><code><button>Click me</button></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
When buttons are clicked, the raised borders become sunken.
|
||||
The following button is simulated to be in the pressed (active) state.
|
||||
</p>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<p>
|
||||
Disabled buttons maintain the same raised border, but have a "washed out"
|
||||
appearance in their label.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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 <em>check box</em> represents an independent or non-exclusive choice.
|
||||
<footer>— Microsoft Windows User Experience, 8.3</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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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 <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, 8.2</footer>
|
||||
</blockquote>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<p>
|
||||
Option buttons can also be <code>checked</code> and <code>disabled</code> with their corresponding
|
||||
HTML attributes.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user