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

unpkg examples

Browse Source
This commit is contained in:
Jordan Scales
2020-04-21 20:48:43 -04:00
parent b905822a0e
commit fea8b5be89
4 changed files with 48 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
README.md
View File

@@ -4,9 +4,39 @@ A design system for building faithful recreations of old UIs.
![a screenshot of a window with the title "My First VB4 Program" and two buttons OK and Cancel, styled like a Windows 98 dialog](https://github.com/jdan/98.css/blob/master/docs/window.png?raw=true)
### Installation
98.css is a CSS file that takes semantic HTML and makes it look pretty. It does not ship with any JavaScript, so it is compatible with your frontend framework of choice. Here is an example of [98.css being used with React](https://codesandbox.io/s/objective-chandrasekhar-t5t6h?file=/src/index.js).
You can grab 98.css from npm.
### Installation / Usage
The easiest way to use 98.css is to import it from [unpkg](https://unpkg.com/).
```
<!DOCTYPE html>
<html>
<head>
<title>98.css example</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/98.css" />
</head>
<body>
<div class="window" style="margin: 32px; width: 250px">
<div class="title-bar">
<div class="title-bar-text">
My First VB4 Program
</div>
</div>
<div class="window-body">
<p>Hello, world!</p>
</div>
</div>
</body>
</html>
```
Here is an example of [98.css being used with React](https://codesandbox.io/s/objective-chandrasekhar-t5t6h?file=/src/index.js), and [an example with vanilla JavaScript](https://codesandbox.io/s/late-sound-miqho?file=/index.html). The fastest way to use 98.css is to import it from unpkg.
Alternatively, you can grab 98.css for [the releases page](https://github.com/jdan/98.css/releases) or [npm](https://www.npmjs.com/package/98.css)
```
npm install 98.css

7
docs/index.html
View File

@@ -95,6 +95,13 @@
This means 98.css is compatible with your frontend framework of choice.
</p>
<p>
Here is an example of <a href="https://codesandbox.io/s/objective-chandrasekhar-t5t6h?file=/src/index.js">98.css used with React</a>, and
<a href="https://codesandbox.io/s/late-sound-miqho?file=/index.html">an example with vanilla JavaScript</a>. The fastest way to use 98.css is to import it from unpkg.
</p>
<pre style="width: 360px"><code>&lt;link rel="stylesheet" href="https://unpkg.com/98.css"&gt;</code></pre>
<p>
You can install 98.css from the <a href="https://github.com/jdan/98.css/releases">GitHub releases page</a>, or <a href="https://www.npmjs.com/package/98.css">from npm</a>.
</p>

9
docs/index.html.ejs
View File

@@ -95,10 +95,17 @@
This means 98.css is compatible with your frontend framework of choice.
</p>
<p>
Here is an example of <a href="https://codesandbox.io/s/objective-chandrasekhar-t5t6h?file=/src/index.js">98.css used with React</a>, and
<a href="https://codesandbox.io/s/late-sound-miqho?file=/index.html">an example with vanilla JavaScript</a>. The fastest way to use 98.css is to import it from unpkg.
</p>
<pre style="width: 375px"><code>&lt;link rel="stylesheet" href="https://unpkg.com/98.css"&gt;</code></pre>
<p>
You can install 98.css from the <a href="https://github.com/jdan/98.css/releases">GitHub releases page</a>, or <a href="https://www.npmjs.com/package/98.css">from npm</a>.
</p>
<pre style="width: 360px"><code>npm install 98.css</code></pre>
<pre style="width: 375px"><code>npm install 98.css</code></pre>
<h2 id="components">Components</h2>

2
package.json
View File

@@ -2,7 +2,7 @@
"name": "98.css",
"version": "0.1.0",
"description": "A design system for building faithful recreations of old UIs",
"main": "build/style.css",
"main": "build/98.css",
"directories": {
"doc": "docs"
},