From d12341bae057aa53d60c2bfa5b2ce1abf7b4d79f Mon Sep 17 00:00:00 2001 From: Jordan Scales Date: Mon, 20 Apr 2020 14:23:06 -0400 Subject: [PATCH] start building out the docs --- docs/backup.html | 11 ---- docs/docs.css | 102 ++++++++++++++++++++++++++++++ docs/index.html | 160 +++++++++++++++++++++++++++++++++++++---------- style.css | 24 ++++--- 4 files changed, 243 insertions(+), 54 deletions(-) create mode 100644 docs/docs.css diff --git a/docs/backup.html b/docs/backup.html index b3cecd9..cbd6408 100644 --- a/docs/backup.html +++ b/docs/backup.html @@ -86,17 +86,6 @@ -
- -
-
-

This is some text

-

if there's enough of it

-

it should scroll

-
-
-
-
diff --git a/docs/docs.css b/docs/docs.css new file mode 100644 index 0000000..226555f --- /dev/null +++ b/docs/docs.css @@ -0,0 +1,102 @@ +body { + margin: 0; + padding: 0; + background: var(--surface); +} + +main { + width: 65rem; + margin-left: 240px; +} + +aside { + width: 200px; + position: fixed; + top: 0; + bottom: 0; + padding: 8px; + display: flex; + align-items: stretch; +} + +aside .treeview { + width: 100%; + /* TODO: Move scrollbar into the recessed region? */ + overflow-y: scroll; +} + +h1 { + font-size: 5rem; + margin: 12px 0; +} + +hr { + margin: 0; + border: none; + width: 400px; + height: 1px; + opacity: 0.5; + background: linear-gradient( + to right, + red 20%, + yellow 20%, + yellow 36%, + green 36%, + green 60%, + blue 60%, + blue 100% + ); +} + +h2 { + font-size: 2.5rem; + margin-bottom: 12px; +} + +h3 { + font-size: 2rem; + margin-top: 20px; + width: 120px; +} + +p { + max-width: 50rem; + line-height: 1.5; +} + +.component { + display: flex; +} + +.component > div { + margin: 12px 0 0 32px; + padding-left: 32px; + border-left: 1px solid var(--button-shadow); +} + +blockquote { + margin: 0 0 20px; + padding: 20px; + background: var(--button-face); +} + +blockquote footer { + margin: 12px 0 0 12px; +} + +.example { + margin: 12px 12px 24px; +} + +details { + margin: 12px 0; +} + +button.focused { + outline: 1px dotted #000000; + outline-offset: -4px; +} + +button.active { + box-shadow: var(--border-sunken-outer), var(--border-sunken-inner); +} diff --git a/docs/index.html b/docs/index.html index 862106c..1a41e2b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,44 +1,136 @@ - - + + - +
- This is the main body! +

98UI

+
+

A design system for building faithful recreations of old UIs.

+ +

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

+ +
+
+
+ Dialog Example +
+ +
+ + + +
+
+
+

Hello, world!

+
+ + +
+
+
+ +

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

+

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

+ 
npm install 98ui
+ +

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>
+
+
+
+
diff --git a/style.css b/style.css index 426e38c..2c04876 100644 --- a/style.css +++ b/style.css @@ -65,6 +65,7 @@ button { min-width: 75px; min-height: 23px; + padding: 0 12px; } button:active { @@ -85,6 +86,7 @@ button:focus { .dialog { box-shadow: var(--border-raised-outer), var(--border-raised-inner); background: var(--surface); + padding: 3px; } .menubar { @@ -93,7 +95,6 @@ button:focus { var(--dialog-blue), var(--dialog-blue-light) ); - margin: 2px; padding: 2px; display: flex; justify-content: space-between; @@ -112,6 +113,7 @@ button:focus { } .menubar-controls button { + padding: 0; display: block; min-width: 14px; min-height: 12px; @@ -350,9 +352,11 @@ a:focus { } ul.treeview { + display: block; background: var(--button-highlight); box-shadow: var(--border-field); - padding: 6px 20px 6px 6px; + padding: 6px; + margin: 0; } ul.treeview li { @@ -406,6 +410,15 @@ ul.treeview ul > li:last-child::after { background: var(--button-highlight); } +pre code { + display: block; + background: var(--button-highlight); + box-shadow: var(--border-field); + padding: 12px 8px; + margin: 0; + font-family: monospace; +} + ::-webkit-scrollbar { width: 16px; } @@ -442,10 +455,3 @@ ul.treeview ul > li:last-child::after { width: 16px; background-image: url("./button-right.svg"); } - -/* -div::-webkit-scrollbar-thumb, -div::-webkit-scrollbar-button { - box-shadow: var(--border-raised-outer), var(--border-raised-inner); -} -*/