From 989320d6a04086c0eb9e73553cba56c2d1b9ac30 Mon Sep 17 00:00:00 2001 From: Jordan Scales Date: Tue, 21 Apr 2020 10:09:54 -0400 Subject: [PATCH] option button docs and some tweaks --- docs/docs.css | 31 ++++------ docs/index.html | 155 +++++++++++++++++++++++++++++++++++++++++++++--- style.css | 15 ++++- 3 files changed, 173 insertions(+), 28 deletions(-) diff --git a/docs/docs.css b/docs/docs.css index 43df38c..8a9b6d7 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -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 { diff --git a/docs/index.html b/docs/index.html index 42640de..6891838 100644 --- a/docs/index.html +++ b/docs/index.html @@ -30,14 +30,13 @@

Intro

- 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.

- Dialog Example + My First VB4 Program
@@ -55,11 +54,25 @@
-

Importantly, this library does not contain any JavaScript. You will provide - your own, which means this library does not do much but is compatible with your frontend framework - of choice. +

+ This library relies on the usage of semantic HTML. To make a button, you'll need + to use a <button>. Input elements require labels. Icon buttons rely on + aria-label. This page will guide you through that process, but accessibility is a primary + goal of this project.

-

You can install it from the GitHub releases page, or from npm.

+ +

+ 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 98UI is compatible with your frontend framework of choice. +

+ +

You can install 98UI from the GitHub releases page, or from npm.

npm install 98ui

Components

@@ -135,7 +148,7 @@

Checkbox

- A check boxrepresents an independent or non-exclusive choice. + A check box represents an independent or non-exclusive choice.
— Microsoft Windows User Experience, 8.3
@@ -147,7 +160,9 @@

Note: You must include a corresponding label after your checkbox, using the <label> element with a for attribute - pointed at the id of your input. + pointed at the id 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).

@@ -160,6 +175,128 @@ <label for="example1">This is a checkbox</label>
+ +

+ Checkboxes can be selected and disabled with the standard checked and disabled + attributes. +

+ +

+ When grouping inputs, wrap each input in a container with the field-row class. This ensures + a consistent spacing between inputs. +

+ +
+
+ + +
+
+ + +
+
+ + +
+ +
+ Show 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>
+
+
+
+ + +
+

OptionButton

+
+
+ 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. + +
— Microsoft Windows User Experience, 8.2
+
+ +

+ Option buttons can be grouped by specifying a shared name attribute on each + input. Just as before: when grouping inputs, wrap each input in a container with the + field-row class to ensure a consistent spacing between inputs. +

+ +
+
+ + +
+
+ + +
+ +
+ Show 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>
+
+
+ +

+ Option buttons can also be checked and disabled with their corresponding + HTML attributes. +

+ +
+
+ + +
+
+ + +
+
+ + +
+ +
+ Show 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>
+
+
+
+
diff --git a/style.css b/style.css index 3f0ce30..fc770b5 100644 --- a/style.css +++ b/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; }