mirror of
https://github.com/jdan/98.css.git
synced 2025-01-17 12:48:32 +01:00
start building out the docs
This commit is contained in:
Jordan Scales
parent
666d3457a6
commit
d12341bae0
@ -86,17 +86,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<!-- maybe want some sort of "panel" idk -->
|
||||
<div id="panel">
|
||||
<div style="height: 1200px">
|
||||
<p>This is some text</p>
|
||||
<p>if there's enough of it</p>
|
||||
<p>it should scroll</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="field-row align-right">
|
||||
<button>OK</button>
|
||||
<button>Cancel</button>
|
||||
|
||||
102
docs/docs.css
Normal file
102
docs/docs.css
Normal file
@ -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);
|
||||
}
|
||||
160
docs/index.html
160
docs/index.html
@ -1,44 +1,136 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/style.css?t=1"></style>
|
||||
<style>
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body > * {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
body > * + * {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/style.css"></style>
|
||||
<link rel="stylesheet" href="docs.css"></style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<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>
|
||||
This is the main body!
|
||||
<h1>98UI</h1>
|
||||
<hr>
|
||||
<p>A design system for building faithful recreations of old UIs.</p>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
|
||||
<div class="dialog" style="margin: 32px; width: 250px">
|
||||
<div class="menubar">
|
||||
<div class="menubar-title">
|
||||
Dialog Example
|
||||
</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>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>
|
||||
<p>You can install it from the GitHub releases page, or from npm.</p>
|
||||
<pre><code>npm install 98ui</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.
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
24
style.css
24
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);
|
||||
}
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user