mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-08-15 10:24:05 +02:00
Code Issues Releases Wiki Activity

start building out the docs

Browse Source
This commit is contained in:
Jordan Scales
2020-04-20 14:23:06 -04:00
parent 666d3457a6
commit d12341bae0
4 changed files with 243 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/backup.html
View File

@@ -86,17 +86,6 @@
</div> </div>
</section> </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"> <section class="field-row align-right">
<button>OK</button> <button>OK</button>
<button>Cancel</button> <button>Cancel</button>

102
docs/docs.css Normal file
View 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);
}

130
docs/index.html
View File

@@ -1,26 +1,11 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="/style.css?t=1"></style> <link rel="stylesheet" href="/style.css"></style>
<style> <link rel="stylesheet" href="docs.css"></style>
body {
height: 100vh;
margin: 0;
padding: 0;
background: var(--surface);
display: flex;
}
body > * {
margin: 4px;
}
body > * + * {
margin-right: 8px;
}
</style>
</head> </head>
<body> <body>
<aside>
<ul class="treeview"> <ul class="treeview">
<li><a href="#intro">Intro</a></li> <li><a href="#intro">Intro</a></li>
<li> <li>
@@ -36,9 +21,116 @@
</li> </li>
<li><a href="#extras">Extras</a></li> <li><a href="#extras">Extras</a></li>
</ul> </ul>
</aside>
<main> <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>&mdash; 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>&lt;button&gt;Click me&lt;/button&gt;</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>&lt;button&gt;I am being pressed&lt;/button&gt;</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>&lt;button disabled&gt;I cannot be clicked&lt;/button&gt;</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>&lt;button&gt;I am focused&lt;/button&gt;</code></pre>
</details>
</div>
</div>
</section>
</main> </main>
</body> </body>
</html> </html>

24
style.css
View File

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