SIGN IN SIGN UP
jdan / 98.css UNCLAIMED

A design system for building faithful recreations of old UIs

0 0 0 CSS
2020-04-21 19:18:56 -04:00
## 98.css
<a href="https://npm.im/98.css"><img height="29" alt="npm" src="https://98badges.now.sh/api/version" /></a>
<a href="https://unpkg.com/98.css"><img height="29" alt="gzip size" src="https://98badges.now.sh/api/size" /></a>
2020-04-27 17:43:38 -04:00
2020-04-21 19:18:56 -04:00
A design system for building faithful recreations of old UIs.
2020-06-15 10:44:27 -04:00
<img alt="a screenshot of a window with the title 'My First VB4 Program' and two buttons OK and Cancel, styled like a Windows 98 dialog" src="https://github.com/jdan/98.css/blob/main/docs/window.png?raw=true" height="133"> <img alt="a magnified view showing pixel-perfect borders on a scrollbar and button element" src="https://github.com/jdan/98.css/blob/main/docs/zoom.png?raw=true?raw=true" height="133">
2020-04-21 19:18:56 -04:00
2020-04-27 17:43:23 -04:00
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.
2020-04-26 11:18:59 -04:00
2021-01-01 10:57:30 -05:00
Be sure to check out [XP.css](https://botoxparty.github.io/XP.css/) and [7.css](https://khang-nd.github.io/7.css/) as well.
2020-05-17 15:13:15 -04:00
2020-04-21 20:48:43 -04:00
### Installation / Usage
The easiest way to use 98.css is to import it from [unpkg](https://unpkg.com/).
2020-04-21 20:54:14 -04:00
```html
2020-04-21 20:48:43 -04:00
<!DOCTYPE html>
<html>
2020-04-26 11:37:51 -04:00
<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
2020-04-21 20:48:43 -04:00
</div>
</div>
2020-04-26 11:37:51 -04:00
<div class="window-body">
<p>Hello, world!</p>
</div>
</div>
</body>
2020-04-21 20:48:43 -04:00
</html>
```
2020-04-21 20:53:40 -04:00
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).
2020-04-21 19:18:56 -04:00
```
npm install 98.css
```
2020-04-22 13:05:18 -04:00
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).
Refer to the [documentation page](https://jdan.github.io/98.css/) for specific instructions on this library's components.
2020-04-21 19:18:56 -04:00
2020-04-24 19:23:42 -04:00
### Developing
2020-04-25 20:05:47 -04:00
First, run `npm install`.
2020-06-15 10:44:27 -04:00
[`style.css`](https://github.com/jdan/98.css/blob/main/style.css) is where everything happens.
2020-04-24 19:23:42 -04:00
2020-04-25 20:05:47 -04:00
You can use `npm start` to start a development environment that will watch for file changes and rebuild 98.css, reloading your browser in the process.
2020-04-25 19:47:53 -04:00
You can run a build manually with `npm run build`. This will write to the `dist/` directory.
2020-04-24 19:23:42 -04:00
2020-04-21 19:18:56 -04:00
### Issues, Contributing, etc.
2020-04-21 22:47:39 -04:00
Refer to [the GitHub issues page](https://github.com/jdan/98.css/issues) to see bugs in my CSS or report new ones. I'd really like to see your pull requests (especially those new to open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like to make it a fun place to build your open-source muscle.
2020-04-21 19:18:56 -04:00
2025-09-07 09:28:04 -04:00
Thank you for checking my little project out, I hope it brought you some joy today. Consider [starring/following along on GitHub](https://github.com/jdan/98.css/stargazers) and maybe reading my posts on [Bluesky](https://bsky.app/profile/jdan.me). 👋
2020-04-21 19:22:00 -04:00
2023-03-12 14:16:09 -04:00
### Publishing
Building the docs site: `npm run deploy:docs`
Publishing to npm: `npm run release`
2020-04-21 19:22:00 -04:00
### License
2020-06-15 10:44:27 -04:00
[MIT](https://github.com/jdan/98.css/blob/main/LICENSE)