10.css - Windows 10 UI Fork of XP.css

Overview

10.css is a CSS framework that replicates the Windows 10 interface design for your web applications. It's a direct fork of XP.css that maintains all the same structure, class names, and HTML patterns, but updates the visual design to match Microsoft's Windows 10 UI.

Key Features

Zero dependencies, drop-in integration, no JavaScript required for core functionality, and perfect for nostalgic or themed interfaces.

Drop-in Replacement

If you're already using XP.css, you can simply replace it with 10.css without changing any HTML markup.

Dark Mode

Unlike the original XP.css, 10.css includes built-in dark mode support that mimics Windows 10 dark theme.

Framework Agnostic

Works with any front-end framework or vanilla HTML - no dependencies required.

Responsive Design

Components adapt to different screen sizes while maintaining the Windows 10 look and feel.

Installation

                                    <!-- From GitHub -->
                                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/apersonwhomakesstuff/10.css@main/10.css">
                                

                                    # Download the CSS file directly from GitHub
                                    curl -O https://raw.githubusercontent.com/apersonwhomakesstuff/10.css/main/10.css
                                

                                    # Note: This is a placeholder - coming soon to NPM
                                    npm install 10css
                                

Download Options

You can download 10.css as a ZIP file with all necessary files, or just include the CSS file in your project.

Download 10.css (ZIP) Generate ZIP Package

Getting Started

To use 10.css, wrap your content in elements with both the xp and win10 classes:

                            <div class="xp win10">
                                <!-- Your Windows 10-styled content here -->
                            </div>
                        

For dark mode, add the theme-dark class as well:

                            <div class="xp win10 theme-dark">
                                <!-- Your Windows 10-styled content in dark mode -->
                            </div>
                        

Basic Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10.css Example</title>
    <link rel="stylesheet" href="https://raw.githubusercontent.com/apersonwhomakesstuff/10.css/refs/heads/main/10.css
</head>
<body>
    <div class="xp win10">
        <div class="window">
            <div class="title-bar">
                <div class="title-bar-text">Example 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>Hello, Windows 10!</p>
                <button>OK</button>
            </div>
        </div>
    </div>
</body>
</html>
                        

Components

Buttons

10.css provides several button styles that mimic Windows 10 buttons.

<button>Standard Button</button>
<button class="default">Primary Button</button>
<button disabled>Disabled Button</button>
                                

Button styles adapt automatically to light and dark themes.

Form Elements

10.css includes styled form controls that match the Windows 10 aesthetic.

Text Inputs

<input type="text" placeholder="Standard text input">
<input type="password" placeholder="Password input">
<textarea placeholder="Textarea element"></textarea>
                                

Checkboxes & Radio Buttons

Checkbox option
Checked checkbox

Radio option 1
Radio option 2

<label>
    <input type="checkbox"> Checkbox option
</label>

<label>
    <input type="checkbox" checked> Checked checkbox
</label>

<label>
    <input type="radio" name="radio-group"> Radio option 1
</label>

<label>
    <input type="radio" name="radio-group" checked> Radio option 2
</label>
                                

Select Inputs

<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>
                                

Fieldsets & Legends

Form Group Title Option 1 Option 2

<fieldset>
    <legend>Form Group Title</legend>
    <label>
        <input type="checkbox"> Option 1
    </label>
    <label>
        <input type="checkbox"> Option 2
    </label>
</fieldset>
                                

Progress Bars

<progress value="60" max="100"></progress>
<progress value="30" max="100"></progress>
                                

Windows

Create classic Windows 10 style windows with title bars and controls.

Sample Window

This is a standard Windows 10 style window. The window controls are non-functional by default and require JavaScript for actual window management.

<div class="window">
    <div class="title-bar">
        <div class="title-bar-text">Sample 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>Window content goes here</p>
    </div>
</div>
                            

Window Variations

Active Window

This window has the "active" class applied.

Colored Title Bar

This window has a colored title bar with the "colored-title" class.

<!-- Active window -->
<div class="window active">
    <div class="title-bar">
        <div class="title-bar-text">Active Window</div>
        <!-- Controls as above -->
    </div>
    <div class="window-body">
        <p>This window has the "active" class applied.</p>
    </div>
</div>

<!-- Colored title bar -->
<div class="window colored-title">
    <div class="title-bar">
        <div class="title-bar-text">Colored Title Bar</div>
        <!-- Controls as above -->
    </div>
    <div class="window-body">
        <p>This window has a colored title bar.</p>
    </div>
</div>
                            

Dialogs & Message Boxes

Message Box

Information

This is an information message.

<div class="message-box">
    <img src="win10-info-icon.png" alt="Info">
    <div class="message-content">
        <h4>Information</h4>
        <p>This is an information message.</p>
    </div>
</div>
                            

Error Message

Error

Something went wrong.

<div class="message-box">
    <img src="win10-error-icon.png" alt="Error">
    <div class="message-content">
        <h4>Error</h4>
        <p>Something went wrong.</p>
    </div>
</div>
                            

Dialog Box

Dialog Title

Error

This is an error message.

<div class="dialog-box">
    <div class="title-bar">
        <div class="title-bar-text">Dialog Title</div>
        <div class="title-bar-controls">
            <button aria-label="Close"></button>
        </div>
    </div>
    <div class="window-body">
        <div class="message-box">
            <img src="win10-error-icon.png" alt="Error">
            <div class="message-content">
                <h4>Error</h4>
                <p>This is an error message.</p>
            </div>
        </div>
        <div class="button-group">
            <button class="default">OK</button>
            <button>Cancel</button>
        </div>
    </div>
</div>
                            

Dark Mode

10.css includes built-in dark mode support to mimic Windows 10's dark theme. To enable dark mode, simply add the theme-dark class to your container:

<div class="xp win10 theme-dark">
    <!-- Your content here will appear in dark mode -->
</div>
                        

Dynamic Theme Switching

You can implement theme switching with a small JavaScript function:

function toggleTheme() {
    const container = document.querySelector('.xp.win10');
    if (container.classList.contains('theme-light')) {
        container.classList.remove('theme-light');
        container.classList.add('theme-dark');
    } else {
        container.classList.remove('theme-dark');
        container.classList.add('theme-light');
    }
}

// Add a button with this onclick handler
<button onclick="toggleTheme()">Toggle Theme</button>
                        

Comparison with XP.css

10.css is a direct fork of XP.css that maintains complete compatibility while updating the visual style to Windows 10. Here's how they compare:

Feature	XP.css	10.css
Visual Style	Windows XP	Windows 10
Class Structure	xp	xp win10
Dark Mode	No	Yes
Dependencies	None	None
HTML Structure	Original	Compatible

Download

Get 10.css in multiple ways to suit your project needs:

GitHub Repository

Clone or download the full repository with all source files.

View on GitHub

Direct Download

Download the CSS file directly for use in your project.

Download CSS File

ZIP Package

Download a ZIP file containing all necessary files.

Generate ZIP

CDN Usage

Include directly from a CDN in your HTML.

                                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/apersonwhomakesstuff/10.css@main/10.css">
                                