Convert Figma logo to code with AI

botoxparty logoXP.css

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

2,205
104
2,205
17
View on GitHubView on NPM

Top Related Projects

jdan's avatar

98.css

9,000

A design system for building faithful recreations of old UIs

khang-nd's avatar

7.css

1,580

A JS-independent, tree-shakeable CSS framework for building faithful recreations of the Windows 7 UI.

nostalgic-css's avatar

NES.css

20,612

NES-style CSS Framework | ファミコン風CSSフレームワーク

sakofchit's avatar

system.css

2,339

A design system for building retro Apple interfaces

Quick Overview

XP.css is a CSS library that recreates the classic Windows XP user interface style for modern web applications. It provides a nostalgic look and feel, allowing developers to design websites that mimic the iconic Windows XP aesthetic using only CSS, without any JavaScript dependencies.

Pros

  • Easy to implement with minimal setup required
  • Provides a unique and nostalgic design aesthetic
  • Lightweight and performant, as it's purely CSS-based
  • Customizable through CSS variables

Cons

  • Limited to a specific design style, which may not be suitable for all projects
  • May look outdated or unprofessional for certain business applications
  • Lacks some advanced UI components found in modern CSS frameworks
  • Requires additional effort to make responsive for mobile devices

Code Examples

  1. Adding XP.css to your HTML:
<link rel="stylesheet" href="https://unpkg.com/xp.css">
  1. Creating a Windows XP-style button:
<button class="btn">Click me!</button>
  1. Implementing a Windows XP-style window:
<div class="window" style="width: 300px">
  <div class="title-bar">
    <div class="title-bar-text">My Window</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body">
    <p>This is the window content.</p>
  </div>
</div>

Getting Started

To use XP.css in your project, follow these steps:

  1. Add the XP.css stylesheet to your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XP.css Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/xp.css">
</head>
<body>
    <!-- Your content here -->
</body>
</html>
  1. Start using XP.css classes in your HTML elements to create Windows XP-style UI components:
<div class="window">
    <div class="title-bar">
        <div class="title-bar-text">Welcome to XP.css</div>
    </div>
    <div class="window-body">
        <p>This is a Windows XP-style window created with XP.css!</p>
        <button class="btn">OK</button>
    </div>
</div>

That's it! You can now start building your Windows XP-inspired web interface using XP.css classes and components.

Competitor Comparisons

jdan logo

98.css

9,000

A design system for building faithful recreations of old UIs

Pros of 98.css

  • More comprehensive set of UI elements, including form controls and dialog boxes
  • Closer resemblance to the original Windows 98 aesthetic
  • Better documentation and examples on the project's website

Cons of 98.css

  • Larger file size, potentially impacting page load times
  • Less flexibility for customization without modifying the core CSS
  • May look dated or less appealing to users unfamiliar with Windows 98

Code Comparison

98.css:

.window {
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
  background: silver;
  padding: 3px;
}

XP.css:

.window {
  border: 1px solid #0054E3;
  background: linear-gradient(180deg, #0058E6 0%, #3A93FF 3%, #288DFF 6%, #127CE6 10%, #036FCC 14%, #0262B8 19%, #0054A3 63%, #004792 81%, #003A7C 100%);
  border-radius: 7px 7px 0 0;
}

The code comparison shows that 98.css uses a more complex box-shadow approach to create the classic Windows 98 window appearance, while XP.css utilizes gradients and border-radius to achieve the Windows XP look. This difference in styling techniques reflects the distinct visual styles of the two operating systems they aim to emulate.

khang-nd logo

7.css

1,580

A JS-independent, tree-shakeable CSS framework for building faithful recreations of the Windows 7 UI.

Pros of 7.css

  • More comprehensive set of UI components, including progress bars and tooltips
  • Includes dark mode support out of the box
  • Offers a wider range of customization options through CSS variables

Cons of 7.css

  • Larger file size, which may impact page load times
  • Less accurate representation of the Windows 7 aesthetic compared to XP.css's Windows XP style
  • Requires more setup and configuration to achieve desired results

Code Comparison

XP.css:

.window {
  background: #ECE9D8;
  border: 1px solid #0A0A0A;
  box-shadow: inset -1px -1px #848484, inset 1px 1px #DFDFDF;
}

7.css:

.window {
  background: linear-gradient(180deg, #FAFAFA 0%, #E6E6E6 100%);
  border: 1px solid #707070;
  box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 2px #ABABAB inset;
}

Both libraries aim to recreate classic Windows UI styles, but 7.css offers more modern features and customization at the cost of increased complexity and file size. XP.css provides a more authentic Windows XP look with simpler implementation, while 7.css focuses on the Windows 7 aesthetic with additional functionality.

nostalgic-css logo

NES.css

20,612

NES-style CSS Framework | ファミコン風CSSフレームワーク

Pros of NES.css

  • More comprehensive set of UI components, including buttons, forms, and dialogs
  • Wider browser compatibility, including support for older versions
  • Larger community and more frequent updates

Cons of NES.css

  • Larger file size, which may impact page load times
  • More opinionated design, potentially limiting customization options
  • Steeper learning curve due to more complex class structure

Code Comparison

NES.css:

<button type="button" class="nes-btn is-primary">Primary</button>
<progress class="nes-progress is-success" value="90" max="100"></progress>
<div class="nes-container with-title is-centered">
  <p class="title">Container</p>
  <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>

XP.css:

<button>OK</button>
<progress value="90" max="100"></progress>
<fieldset>
  <legend>Fieldset</legend>
  This is the content of the fieldset.
</fieldset>

NES.css offers more specific classes for styling, while XP.css relies more on default HTML elements with minimal additional classes. NES.css provides a wider range of pre-styled components, but XP.css offers a simpler, more straightforward approach to achieving a nostalgic look.

sakofchit logo

system.css

2,339

A design system for building retro Apple interfaces

Pros of system.css

  • More lightweight and focused on recreating the Windows 98 aesthetic
  • Includes specific styles for form elements like checkboxes and radio buttons
  • Easier to integrate into existing projects due to its simplicity

Cons of system.css

  • Less comprehensive than XP.css in terms of UI components
  • Lacks some advanced features like window management and taskbar
  • May require more custom styling for complex interfaces

Code Comparison

system.css:

button, input[type="submit"] {
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  background: silver;
  padding: 2px 11px;
}

XP.css:

.xp_button {
  border: 1px solid #003c74;
  background: linear-gradient(180deg, #fff 0%, #ecebe5 86%, #d8d0c4 100%);
  box-shadow: 0 0 0 1px #ffffff inset;
  border-radius: 3px;
  padding: 4px 10px;
}

The code comparison shows that system.css uses a more simplistic approach with box-shadow for button styling, while XP.css employs gradients and multiple properties to achieve a more detailed XP-like appearance.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

XP.css

npm gzip size

A design system for building faithful recreations of old UIs.

a screenshot of a window with the title 'My First Program' and two buttons OK and Cancel, styled like a Windows XP dialog a screenshot of a window with the title 'My First Program' and two buttons OK and Cancel, styled like a Windows 98 dialog

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

MIT

NPM DownloadsLast 30 Days