XP.css
A CSS framework for building faithful recreations of operating system GUIs.
Install / Use
/learn @botoxparty/XP.cssREADME
XP.css
A design system for building faithful recreations of old UIs.
<img alt="a screenshot of a window with the title 'My First Program' and two buttons OK and Cancel, styled like a Windows XP dialog" src="https://github.com/botoxparty/XP.css/blob/main/docs/window.png?raw=true" height="133"> <img alt="a screenshot of a window with the title 'My First 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">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.
Installation / Usage
The easiest way to use XP.css is to import it from unpkg.
<!DOCTYPE html>
<html lang="en">
<head>
<title>XP.css example</title>
<meta charset="UTF-8" />
<!-- Windows XP Theme (include only one theme at a time) -->
<link rel="stylesheet" href="https://unpkg.com/xp.css" />
<!-- Windows 98 Theme (include only one theme at a time) -->
<link rel="stylesheet" href="https://unpkg.com/xp.css@0.2.3/dist/98.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 npm.
npm install xp.css
Usage:
// 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.
Developing
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.
Issues, Contributing, etc.
I would love to see other people's work on gui.css, if anyone else if up for creating a theme for another OS using this framework. Also new components and bugs/issues are also welcome! Feel free to contribute in whatever way you like!
Also please refer to the GitHub issues page for jdan's 98.css.
License
Related Skills
node-connect
331.2kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
81.5kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
331.2kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
commit-push-pr
81.5kCommit, push, and open a PR
