From 2075ff3a60094a90d886ed5bd171108a8add0381 Mon Sep 17 00:00:00 2001 From: Jordan Scales Date: Tue, 21 Apr 2020 14:18:32 -0400 Subject: [PATCH] add index.html back --- .gitignore | 1 - docs/index.html | 295 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 295 insertions(+), 1 deletion(-) create mode 100644 docs/index.html diff --git a/.gitignore b/.gitignore index 58db40d..c2658d7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1 @@ -docs/index.html node_modules/ diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..c7e8d23 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,295 @@ + + + + + + + + + +
+

98.css

+
+

A design system for building faithful recreations of old UIs.

+ +

Intro

+

+ 98.css is a CSS library for building interfaces that look like Windows 98. +

+ +
+
+
+ My First VB4 Program +
+ +
+ + + +
+
+
+

Hello, world!

+
+ + +
+
+
+ +

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

+ +

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

+ 
npm install 98.css
+ +

Components

+ +
+

Button

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

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

+ +
+ +
+ Show code + 
<button>Click me</button>
+
+
+ +

+ When buttons are clicked, the raised borders become sunken. + The following button is simulated to be in the pressed (active) state. +

+ + +
+ +
+ Show code + 
<button>I am being pressed</button>
+
+
+ +

+ Disabled buttons maintain the same raised border, but have a "washed out" + appearance in their label. +

+ +
+ +
+ Show code + 
<button disabled>I cannot be clicked</button>
+
+
+ +

+ Button focus is communicated with a dotted border, set 4px within the contents of the button. + The following example is simulated to be focused. +

+ +
+ +
+ Show code + 
<button>I am focused</button>
+
+
+
+
+ +
+

Checkbox

+
+
+ A check box represents an independent or non-exclusive choice. +
— Microsoft Windows User Experience, 8.3
+
+ +

+ 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 <label> element with a for attribute + 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). +

+ +
+ + +
+ Show code + 
<input type="checkbox" id="example1">
+<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="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>
+
+
+ +

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

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