A design system for building faithful recreations of old UIs.
XP.css is an extension of 98.css. 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.
The easiest way to use XP.css is to import it from unpkg.
<!DOCTYPE html>
<html>
<head>
<title>XP.css example</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/xp.css" />
</head>
<body>
<div class="window" style="margin: 32px; width: 250px">
<div class="title-bar">
<div class="title-bar-text">
My First Program
</div>
</div>
<div class="window-body">
<p>Hello, world!</p>
</div>
</div>
</body>
</html>Alternatively, you can grab XP.css from the releases page or npm.
npm install xp.css
// For XP
import "xp.css/dist/XP.css";
// For 98
import "xp.css/dist/98.css";
Here is an example of XP.css being used with React, and an example with vanilla JavaScript.
Refer to the documentation page for specific instructions on this library's components.
Clone the repo and run npm install.
The core styles are managed in gui.
To create your own theme for the GUI you can extend the core styles. See the XP and 98 themes
You can use npm start to start a development environment that will watch for file changes and rebuild the files, reloading your browser in the process.
You can run a build manually with npm run build. This will write to the dist/ directory.
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. 👋