Back to packageRELEASE DETAILS

0.1.12

npm

98.css

A design system for building faithful recreations of old UIs

Published7 May 2020

Direct dependencies14

Transitive dependenciesNot calculated

README

Current package documentation

98.css

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 a magnified view showing pixel-perfect borders on a scrollbar and button element

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.

Be sure to check out XP.css and 7.css as well.

Installation / Usage

The easiest way to use 98.css is to import it from unpkg.

<!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>

Alternatively, you can grab 98.css for the releases page or npm.

npm install 98.css

Here is an example of 98.css being used with React, and an example with vanilla JavaScript.

Refer to the documentation page for specific instructions on this library's components.

Developing

First, run npm install.

style.css is where everything happens.

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.

You can run a build manually with npm run build. This will write to the dist/ directory.

Issues, Contributing, etc.

Refer to the GitHub issues page 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.

Thank you for checking my little project out, I hope it brought you some joy today. Consider starring/following along on GitHub and maybe subscribing to more fun things on my twitter. 👋

Publishing

Building the docs site: npm run deploy:docs

Publishing to npm: npm run release

License

MIT

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 14

Native requirements

14 direct targetsNot calculated transitive count

Package / target	Requirement	Relationship
ejs Environment { "local_name": "ejs", "alias": false, "peer_metadata": null }	`^3.0.2`	development
glob Environment { "local_name": "glob", "alias": false, "peer_metadata": null }	`^7.1.6`	development
dedent Environment { "local_name": "dedent", "alias": false, "peer_metadata": null }	`^0.7.0`	development
mkdirp Environment { "local_name": "mkdirp", "alias": false, "peer_metadata": null }	`^1.0.4`	development
cssnano Environment { "local_name": "cssnano", "alias": false, "peer_metadata": null }	`^4.1.10`	development
chokidar Environment { "local_name": "chokidar", "alias": false, "peer_metadata": null }	`^3.3.1`	development
gh-pages Environment { "local_name": "gh-pages", "alias": false, "peer_metadata": null }	`^2.2.0`	development
live-server Environment { "local_name": "live-server", "alias": false, "peer_metadata": null }	`^1.2.1`	development
highlight.js Environment { "local_name": "highlight.js", "alias": false, "peer_metadata": null }	`^9.18.1`	development
postcss-calc Environment { "local_name": "postcss-calc", "alias": false, "peer_metadata": null }	`^7.0.2`	development
postcss-copy Environment { "local_name": "postcss-copy", "alias": false, "peer_metadata": null }	`^7.1.0`	development
postcss-inline Environment { "local_name": "postcss-inline", "alias": false, "peer_metadata": null }	`^1.2.0`	development
postcss-inline-svg Environment { "local_name": "postcss-inline-svg", "alias": false, "peer_metadata": null }	`^4.1.0`	development
postcss-css-variables Environment { "local_name": "postcss-css-variables", "alias": false, "peer_metadata": null }	`^0.14.0`	development

Distribution files

1 collected

Distribution 1

Source distribution

Source file

Checksums from source

{
  "shasum": "e9837c997d242101dc7f95acb3b35b724fd2f706",
  "tarball": "https://registry.npmjs.org/98.css/-/98.css-0.1.12.tgz",
  "fileCount": 44,
  "integrity": "sha512-G+xJyWRgm0YpX9I6sCFV/U9YaRP/QMl6oXSULQTAQFlfGuL7+3iAiK/F3bHr1iGYwWtmx5wxb5G+JsWM2SjTXw==",
  "signatures": [
    {
      "sig": "MEQCIEP1mnzc/vld7i/1xaUNKUeOYAij8KGM2ElCCgEnfJkBAiBeZk4yDVABfXIkJy7XTuBHHSYJbw9kIFURCNjDjafrLA==",
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"
    }
  ],
  "unpackedSize": 289994,
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetGxBCRA9TVsSAnZWagAAhHsP/0HQGLZeGbyH0Rn7OmYt\nc/bMBI/+rHbvrTQx6qHQRwaJbxlQAuRXDL862MjJL+qV7OT9WKDPwqhNChQt\nKlM4jaNZyta7siTXQaseBrameS9B4EtWrPDRfy6q7zTB+o/itEXEwjODsJdK\n6S49lyAALXg5gWAXPaFYJki3Qc/7pH8L9mZyvXQ0ZUZIuJDDTw7NQ28rUQdw\nJrLNOvfbE+AMKm5Oj9l8jfkULgKh0+fP66S0FDlZeYLfxJjqA82euh7tU1vH\nGUVi8aFu0lxitLAC3Yo06TAtWZOUkL9DpOCVxjGfl/WyXqdk96MdNQqHebRk\newQXqTacczKIBNEGaMYwdFynszVoZLXImVDQCLy+uT7lCNZmq/N3x2JegSRD\nJx67eMloDcI2MkWqkZ8MBJhzqqCc5lWcTz7zFVldE8Fg2pwAuSwfmB+02g0C\nvqVRSIUwQfqHUdFJHWQ0LMv6MThj8w4NjQLWDZKJwMe5wBCzf0dOK6RI2jAv\nYgC8qjZXZnYnt3k+MA6iw8wvS2i2D65RkAxtY+frJ+DqNGeY1fySheT5y9wD\nI6JllcQ88os3Nw3hb67JgLSybFLWrj8VXMHgrcZir3vs6xB9QQYt/tz8ICMG\nWJd8hTYQM3njXAVo1gIZ/pJkBOukrwEvXc199QzWc3etEoNOYp6ptOo1bPWC\nZC6M\r\n=4RqS\r\n-----END PGP SIGNATURE-----\r\n"
}