98.css README

The project's README from github.com/jdan/98.css. As one markdown file: README.md.

98.css

npm gzip size

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 reading my posts on Bluesky. 👋

Publishing

Building the docs site: npm run deploy:docs

Publishing to npm: npm run release

License

MIT

98.css (jdan/98.css)

Searching Database…

11.5K ·GitHub
98.css
这是什么？98.css 是一个 CSS 设计系统，能让语义化的 HTML 呈现出 Windows 98 界面的样子，方便你还原高度逼真的复古界面。
它是一个 UI 框架，还是只是一个样式表？它只是一个不含 JavaScript 的 CSS 文件，因此可以配合你选择的任何前端框架使用。
怎么把它加到我的项目里？可以直接从 unpkg 导入，也可以从 releases 页面或 npm 获取。
使用它需要什么构建工具或 JS 吗？不需要，它是纯 CSS，只作用于语义化的 HTML；只有当你想开发或重新构建这个库本身时，才需要 Node/npm。
它能直接与 React 或原生 JS 一起用吗？可以，README 中链接了 React 和原生 JavaScript 两种用法的可运行示例。
有没有适用于其他旧版操作系统外观的类似设计系统？有，作者还维护着 XP.css 和 7.css，分别用于还原 Windows XP 和 Windows 7 风格的界面。
在哪里能看到完整的组件列表？有一个专门的文档网站，列出了该库每个组件的具体使用说明。
为什么把 Guy Fieri 作为主题标签？这是作者加入的一个轻松、搞怪的品牌彩蛋；项目本身被明确定位为一个有趣、轻松的业余项目，旨在让新的开源贡献者更容易上手。
What are similar projects?mdb-ui-kit, pure, weui, bootstrap-table, daisyui, milligram, NES.css, yeti
Which topics is it in?retro, css-framework, frontend-framework, design-system, ui-components, css, html, ui, npm, frontend, nodejs, library
Creator
jdan
Size
0.6 MB
Stars
11.5K
Updated
CommitSep 07Release0.1.18May 22
Age
6y
Commits · 90 Days