https://botoxparty.github.io/XP.css/

A CSS framework for building faithful recreations of operating system GUIs.
https://botoxparty.github.io/XP.css/

Last synced: 3 months ago
JSON representation

A CSS framework for building faithful recreations of operating system GUIs.

• Host: GitHub
• URL: https://botoxparty.github.io/XP.css/
• Owner: botoxparty
• License: mit
• Created: 2020-05-14T12:41:40.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-22T05:35:04.000Z (almost 2 years ago)
• Last Synced: 2024-08-01T03:39:00.819Z (3 months ago)
• Language: SCSS
• Homepage: https://botoxparty.github.io/XP.css/
• Size: 1.57 MB
• Stars: 2,183
• Watchers: 14
• Forks: 104
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-css-frameworks - **XP.css** - CSS library for building interfaces that look like Windows XP. (Specialized)

README

        
## XP.css

[![npm](https://img.shields.io/npm/v/xp.css)](http://npm.im/xp.css)

[![gzip size](https://img.shields.io/bundlephobia/minzip/xp.css)](https://unpkg.com/xp.css)

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.

### Installation / Usage

The easiest way to use XP.css is to import it from [unpkg](https://unpkg.com/).

```html

  

    XP.css example

    

    

    

    

    

  

  

    


      


        


          My First Program

        

      

      


        
Hello, world!

      

    

  


```

Alternatively, you can grab XP.css from [npm](https://www.npmjs.com/package/xp.css).

```

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](https://codesandbox.io/s/silly-bas-dln9t?file=/src/index.js), and [an example with vanilla JavaScript](https://codesandbox.io/s/vigilant-night-2jkz3?file=/index.html).

Refer to the [documentation page](https://botoxparty.github.io/XP.css/) for specific instructions on this library's components.

### Developing

Clone the repo and run `npm install`.

The core styles are managed in [`gui`](https://github.com/botoxparty/XP.css/tree/main/gui).

To create your own theme for the GUI you can extend the core styles. See the XP and 98 [`themes`](https://github.com/botoxparty/XP.css/tree/main/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](https://github.com/jdan/98.css/issues) for [jdan's](https://twitter.com/jdan) 98.css.

### License

[MIT](https://github.com/botoxparty/XP.css/blob/main/LICENSE)