# 7.css: npm start is documented, but no start script exists

> 7.css styles semantic HTML as Windows 7 chrome with no JavaScript, built on XP.css and 98.CSS. The manifest and the page disagree in three places: a missing start script, a version with no tag, and a tree-shakeable claim nothing implements.

**khang-nd/7.css** — A JS-independent, tree-shakeable CSS framework for building faithful recreations of the Windows 7 UI.

- Repository: https://github.com/khang-nd/7.css
- Website: https://khang-nd.github.io/7.css/
- Stars: 2,446 · Forks: 123
- Language: SCSS
- License: MIT
- Published: 2026-09-28 · Updated: 2026-09-28 · Language: en
- Canonical page: https://hysenlabs.com/projects/khang-nd-7-css

## The manifest carries no sideEffects field next to the tree-shakeable claim

The repository description calls 7.css a tree-shakeable CSS framework, while the manifest gives one entry point and no field a bundler could use to drop unused rules:

```
"main": "dist/7.css",
"files": [
  "dist/gui",
  "dist/7*"
]
```

There is no sideEffects entry and no module field, and the documented import takes the whole file:

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

The published file list also includes the entire dist/gui directory rather than a subset of it. So nothing on the page describes a per-component import path, and a consumer who wants only the window chrome has no documented way to ask for less than the whole stylesheet.

## The development section names a command the scripts block does not define

The page tells contributors to clone the repository, run npm install, and then start a watching development environment. The scripts in package.json are three, and they are:

```
"build": "node build.js",
"deploy": "npm run build && gh-pages -d dist",
"release": "npm run build && npm publish"
```

There is no start script, so the command the page recommends cannot run as written. The pieces it would need are installed: chokidar for watching, live-server for the browser reload, and postcss with its plugins. Nothing wires them together, which means the watcher is a script a contributor has to write, or one that used to exist and was dropped without the page being updated.

## package.json reads 0.21.1 while the newest tag is v0.21.0

The three listed releases are v0.19.0 on 6 July 2025, v0.20.0 on 26 July 2025 and v0.21.0 on 27 July 2025, all inside a three week window. The manifest version is 0.21.1, one patch higher than any of them. That is the ordinary state of a repository between releases rather than a mistake, but it means the number in the manifest and the number on the release page describe different builds. The branch itself has moved much further: the most recent push is dated 30 September 2026, over a year after the last tag, with a package-lock.json committed at the root to record the dependency tree for that newer state.

## The sources are SCSS but the build runs entirely through PostCSS

The primary language recorded for the repository is SCSS, and the core styles live in a gui directory at the root. The build is a node script, build.js, and the dependency list is a PostCSS pipeline rather than a Sass compiler. Among the plugins are postcss-calc, postcss-css-variables, postcss-nested, postcss-prefix-selector and postcss-base64, with autoprefixer and cssnano standing alongside them. So nesting, variables and prefixing are all handled after the SCSS step. The documentation and demo side has its own toolchain in the same file: ejs and dedent for templates, glob for enumerating files, highlight.js for syntax colouring, live-server for the reload, and gh-pages, which the deploy script uses to publish the dist directory.

## The package entry point is a file the repository does not contain

The manifest points main at dist/7.css, and the deploy and release scripts both build before they do anything else. The root listing has no dist directory: what is there is a .gitignore, a .prettierrc, a LICENSE, a README, build.js, server.js, the gui sources, docs, package.json and the lock file. That is consistent with dist being generated output rather than tracked source, which is the usual arrangement, but it has a consequence for anyone working from a clone. The stylesheet the manifest advertises does not exist until the build has been run, so a fresh checkout has no file to link and the unpkg route is the only one that works without building first.

## The window has no sizing class, so the example sets width inline

The page's HTML example is the whole component reference it offers:

```html
<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>
```

Four class names carry the entire look: window, title-bar, title-bar-text and window-body. Size is not among them, so width and margin arrive as an inline style attribute in the only worked example. The linked stylesheet is a single tag, `https://unpkg.com/7.css`, and the section headings on the page carry icons in their text, which the cleaned text loses but which are present in the original headings.

## The lineage is credited in two lines covering three generations

7.css is built on XP.css, which is in turn an extension of 98.CSS, and both are named with their repository links. The three projects share a method rather than a codebase: each takes semantic markup and restyles it as the interface of a particular Windows release, moving one version forward at a time. The description also distinguishes 7.css from its ancestors in one specific respect, that it ships no JavaScript and is therefore compatible with whatever frontend framework a project already uses. That is the single architectural claim the page makes for itself, and it is what the two community integrations are built on.

## Two community integrations, one of them still marked in progress

The integrations section says the framework has been seen adopted by two community projects, hedged as observation rather than endorsement. The Vue one is win7-ui and the Svelte one is svelte-7.css, which carries a work in progress note beside its name. Neither is versioned against a 7.css release on the page, and neither link carries a version number, so a project picking one up has to check compatibility against the 0.21.x line on its own. The two badge links at the top of the page, pointing at the npm short link and at unpkg, are anchors with neither an image nor a label inside them, so nothing renders where a badge would be.

## Conclusion

7.css is a reasonable choice for a static page, a prototype or a docs site that wants a period look without pulling in a component library, since it ships one stylesheet and expects four class names. Read the packaging before building on it. The claim that it is tree-shakeable is not backed by anything in the manifest, so treat it as a single file you link rather than a set of parts you import selectively. The documented development command does not exist in package.json, so cloning the repository leaves you with npm run build and no watcher until you work out the rest yourself. And the version in package.json sits one patch ahead of the newest tag, which means what npm resolves and what the release page shows are not the same build.

## FAQ

### How do I use 7.css?

Link the stylesheet directly from unpkg with a link tag, or install it with npm install 7.css and import it as 7.css/dist/7.css. The stylesheet then styles ordinary semantic HTML.

### Which CSS class names does 7.css provide?

The worked example uses four: window on the outer element, title-bar and title-bar-text on the chrome, and window-body on the content area. Size is set inline in that example.

### What does 7.css build on top of?

On XP.css, which is itself an extension of 98.CSS. 7.css adds the position that it ships no JavaScript, so it works with any frontend framework.

### How do I build 7.css from source?

Clone the repository and run npm install, then npm run build, which runs node build.js and writes to the dist directory. The npm start watcher the page describes is not one of the three scripts in package.json.

### Which frameworks have community integrations for 7.css?

Two: win7-ui for Vue and svelte-7.css for Svelte, the latter marked work in progress. Neither is versioned against a 7.css release on the page.

## Sources

- [khang-nd/7.css on GitHub](https://github.com/khang-nd/7.css)
- [License: MIT](https://github.com/khang-nd/7.css/blob/main/LICENSE)
- [Project website](https://khang-nd.github.io/7.css/)
- [README](https://github.com/khang-nd/7.css/blob/main/README.md)
- [Releases](https://github.com/khang-nd/7.css/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/khang-nd-7-css