7.css: Windows 7 UI in semantic HTML, without a line of JavaScript

The problem 7.css solves, and who it is actually for

Recreating the Windows 7 interface by hand means redrawing gradients, border radii, title bar buttons, scrollbars and form controls for every component, then keeping them consistent. 7.css takes that work and turns it into a stylesheet: the README states that it "takes semantic HTML and styles them to the Windows 7 design". You write the markup you would write anyway, and the framework supplies the Aero-era look.

The audience is narrow but well defined. People building a tribute page or a portfolio that should feel like a 2009 desktop. People building joke or novelty sites. People who want a retro theme on a static site without pulling in a component library. It is also useful for prototypes where the visual context is the point, such as a mock installer or a fake control panel.

It is not for anyone who needs the interface to behave like Windows 7. A stylesheet cannot make a title bar draggable or a menu open on click. If you need interaction, you are writing that JavaScript yourself, and the framework gives you no hooks beyond the class names it styles.

A stylesheet on top of XP.css, with no runtime

The README is explicit about the lineage: 7.css "is built on top of XP.css, which is an extension of 98.CSS". That chain matters when you debug. If a rule looks inherited rather than written for Windows 7, it may well have come up through XP.css, and the release notes for 7.css will not mention it.

The distribution is plain CSS. The package.json declares "main": "dist/7.css", and the published files list is "dist/gui" plus "dist/7*", so consumers get the built stylesheet and the supporting assets rather than the SCSS sources. The source itself lives in the gui directory, which the README calls out as where "the core styles are managed".

The build pipeline is PostCSS, judging by the devDependencies: postcss-import, postcss-nested, postcss-css-variables, postcss-calc, postcss-prefix-selector, postcss-base64 and autoprefixer, with cssnano for minification. postcss-base64 is the interesting one, because Windows 7 chrome depends on gradient and texture images, and inlining them as data URIs is what keeps the stylesheet self-contained. postcss-prefix-selector suggests the build can scope selectors, though the README does not document a scoping option.

Because there is no JavaScript, there is no hydration step and no framework adapter to keep in sync. The cost of that choice lands on you: every interactive behaviour is your responsibility.

Installing 7.css and rendering a first window

The fastest path is a link tag pointing at unpkg. The README gives this exact page, and the only 7.css-specific part is the stylesheet URL and the window markup.

<!DOCTYPE html>
<html>
  <head>
    <title>7.css example</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://unpkg.com/7.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>

Open that file in a browser and you should see a small window with a title bar reading "My First Program" and a body containing the greeting. The nesting is what carries the styling: the outer .window supplies the frame, .title-bar supplies the top strip, and .title-bar-text is the label inside it.

If you are working in a bundler, install from npm instead:

npm install 7.css

Then import the built stylesheet in your entry file:

import "7.css/dist/7.css";

That import path is the one the README shows, and it matches the dist/7* entry in the published files list. From there, the documentation page is where component-specific markup lives; the README itself only covers the window skeleton.

What the framework does not do for you

The README's own framing is the limitation. "It does not ship with any JavaScript" is presented as a compatibility feature, and for static pages it is. For anything that should respond to input, it means the framework stops at the paint layer.

Consider a menu bar. The stylesheet can render the bar and its items, but opening a submenu on click, closing it on outside click, and moving focus between items are all behaviour. None of that is in the package, and the README does not describe an accessibility contract for it either. If you build the interaction yourself, you are also responsible for keyboard handling, because the framework cannot supply what it does not run.

There is a second, quieter constraint. Fidelity to a specific operating system is a moving target for the browser, not for the framework. Windows 7 chrome was drawn with gradients and image assets, and the build inlines those assets. That is why the package ships a gui directory alongside the CSS. If you strip it, or if your bundler mishandles the inlined data URIs, the look degrades in ways the README does not warn about.

Finally, this is a visual system for one era. Restyling it toward a different design language means overriding rules you did not write, some of which arrived through XP.css and 98.CSS.

7.css against a general-purpose component library

The obvious alternative is a mainstream framework such as Bootstrap or a headless component library paired with your own styles. The difference is not quality, it is where the work sits.

A general-purpose library gives you behaviour: dropdowns that open, modals that trap focus, tabs that switch panels, often with documented accessibility semantics. You then theme it, and if the theme you want is Windows 7, you are writing the gradients and borders yourself, which is exactly the task 7.css removes.

7.css inverts the trade. You get the theme immediately and the behaviour never. For a static tribute page that is a clean win, because there was never going to be behaviour. For an application with forms, dialogs and menus, you would be adopting a stylesheet and then rebuilding the interaction layer from scratch, at which point a headless library plus custom CSS is the more honest starting point.

There is also a middle option the README itself points at. It lists community integrations, including win7-ui for Vue and svelte-7.css for Svelte, the latter marked as work in progress. Those exist because people wanted the 7.css look with framework-native components on top. If you are in Vue or Svelte, checking those before hand-rolling is reasonable, with the caveat that the README describes them as community projects rather than part of the package.

Maintenance, releases and the MIT licence

The repository is not archived, and the last push was on 2026-03-17. The most recent release listed is v0.21.0 from 2025-07-27, with v0.20.0 the day before and v0.19.0 earlier that month. The package.json carries version 0.21.1, one patch ahead of the latest tagged release, which is worth knowing if you pin versions: the npm tarball and the GitHub release tag are not necessarily the same number.

The version series is still 0.x, so the project makes no stability promise through its version number alone. The changelog lives in GitHub Releases rather than a CHANGELOG file, and the README says to refer there. For upgrade cost, that means reading release notes before bumping, since there is no separate migration document.

Development is straightforward if you want to build from source. The README says to clone the repo and run npm install, then npm start for a watching development environment that rebuilds and reloads the browser, or npm run build to write to dist/. There is also a deploy script using gh-pages and a release script that builds and publishes.

On licensing, the package.json declares MIT, and the repository carries a LICENSE file at the top level. MIT is permissive and imposes no copyleft on your own code, but this is not legal advice: if you redistribute the bundled assets in the gui directory, check the LICENSE file and the repository history for the provenance of any image assets, because a permissive code licence does not automatically settle the status of third-party artwork.

Editorial conclusion

Adopt 7.css if you are building a Windows 7 pastiche, a retro portfolio, a Neocities-style personal page, or an internal demo where the chrome matters more than the behaviour. Skip it if you need menus that open, windows that drag, or accessibility guarantees the documentation does not make, because none of that is in a stylesheet. Before committing, open the documentation page and confirm that the components you need are actually documented, then check the gui directory to see how the styles are organised.

Frequently asked questions

Official sources

1. khang-nd/7.css on GitHub
2. License: MIT
3. Project website
4. README
5. Releases