mirror of
https://github.com/jdan/98.css.git
synced 2025-03-14 15:49:57 +01:00
option button docs and some tweaks
This commit is contained in:
Jordan Scales
parent
a464540a9c
commit
989320d6a0
@ -27,7 +27,6 @@ aside .treeview {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
@ -50,15 +49,13 @@ hr {
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
margin-top: 20px;
|
||||
display: block;
|
||||
flex: 0 0 120px;
|
||||
flex: 0 0 180px;
|
||||
}
|
||||
|
||||
p {
|
||||
@ -68,16 +65,7 @@ p {
|
||||
|
||||
.component {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.component > div {
|
||||
margin-left: 32px;
|
||||
padding-left: 32px;
|
||||
border-left: 1px solid var(--button-shadow);
|
||||
}
|
||||
|
||||
.component:not(:first) > div {
|
||||
padding-top: 12px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@ -91,16 +79,23 @@ blockquote footer {
|
||||
}
|
||||
|
||||
.example {
|
||||
margin: 0 12px 24px;
|
||||
margin: 16px 0;
|
||||
padding: 12px 24px;
|
||||
border-left: 1px solid var(--button-shadow);
|
||||
}
|
||||
|
||||
.example:first {
|
||||
details {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
details,
|
||||
summary {
|
||||
margin: 12px 0;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
button.focused {
|
||||
|
||||
155
docs/index.html
155
docs/index.html
@ -30,14 +30,13 @@
|
||||
|
||||
<h2 id="intro">Intro</h2>
|
||||
<p>
|
||||
98UI is a CSS library for building interfaces that look like Windows 98. This page lists the
|
||||
various components included, with an example code on how to use them.
|
||||
98UI 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">
|
||||
Dialog Example
|
||||
My First VB4 Program
|
||||
</div>
|
||||
|
||||
<div class="menubar-controls">
|
||||
@ -55,11 +54,25 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Importantly, <strong>this library does not contain any JavaScript</strong>. You will provide
|
||||
your own, which means this library does not do much but is compatible with your frontend framework
|
||||
of choice.
|
||||
<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 install it from the GitHub releases page, or from npm.</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 98UI is compatible with your frontend framework of choice.
|
||||
</p>
|
||||
|
||||
<p>You can install 98UI from the GitHub releases page, or from npm.</p>
|
||||
<pre><code>npm install 98ui</code></pre>
|
||||
|
||||
<h2 id="components">Components</h2>
|
||||
@ -135,7 +148,7 @@
|
||||
<h3 id="checkbox">Checkbox</h3>
|
||||
<div>
|
||||
<blockquote>
|
||||
A <em>check box</em>represents an independent or non-exclusive choice.
|
||||
A <em>check box</em> represents an independent or non-exclusive choice.
|
||||
<footer>— Microsoft Windows User Experience, 8.3</footer>
|
||||
</blockquote>
|
||||
|
||||
@ -147,7 +160,9 @@
|
||||
<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.
|
||||
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">
|
||||
@ -160,6 +175,128 @@
|
||||
<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="radio1" type="radio" name="first-example">
|
||||
<label for="radio1">Yes</label>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<input id="radio2" type="radio" name="first-example">
|
||||
<label for="radio2">No</label>
|
||||
</div>
|
||||
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
<pre><code><div class="field-row">
|
||||
<input id="radio1" type="radio" name="first-example">
|
||||
<label for="radio1">Yes</label>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<input id="radio2" type="radio" name="first-example">
|
||||
<label for="radio2">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="radio3" type="radio" name="second-example">
|
||||
<label for="radio3">Peanut butter should be smooth</label>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<input checked disabled id="radio4" type="radio" name="second-example">
|
||||
<label for="radio4">I understand why people like crunchy peanut butter</label>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<input disabled id="radio5" type="radio" name="second-example">
|
||||
<label for="radio5">Crunchy peanut butter is good</label>
|
||||
</div>
|
||||
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
|
||||
<pre><code><div class="field-row">
|
||||
<input id="radio3" type="radio" name="second-example">
|
||||
<label for="radio3">Peanut butter should be smooth</label>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<input checked disabled id="radio4" type="radio" name="second-example">
|
||||
<label for="radio4">I understand why people like crunchy peanut butter</label>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<input disabled id="radio5" type="radio" name="second-example">
|
||||
<label for="radio5">Crunchy peanut butter is good</label>
|
||||
</div></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
15
style.css
15
style.css
@ -52,6 +52,18 @@
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
u {
|
||||
text-decoration: none;
|
||||
border-bottom: 0.5px solid #222222;
|
||||
@ -104,7 +116,7 @@ button:focus {
|
||||
.menubar-title {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
letter-spacing: 0.1ch;
|
||||
letter-spacing: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
@ -192,6 +204,7 @@ legend {
|
||||
|
||||
label {
|
||||
display: inline-flex;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user