A design system for building faithful recreations of old UIs.
Installation / Usage
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" /> // 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://email@example.com/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";
Refer to the documentation page for specific instructions on this library's components.
Clone the repo and run
The core styles are managed in
To create your own theme for the GUI you can extend the core styles. See the XP and 98
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
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!