A CSS framework that takes semantic HTML and styles them to the Windows Vista Aero design. An unappreciated design from better times.
I built it as an extension of 7.css — which itself builds upon XP.css and 98.CSS. The family is almost complete.
It does not ship with any JavaScript — compatible with any frontend framework. (Gadgets Remix includes optional JS for interactivity, loaded separately.)
No package manager required — just drop the files into your project:
<!DOCTYPE html>
<html>
<head>
<title>vista.css example</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="dist/vista.css" />
</head>
<body>
<div class="window active" style="margin: 32px; width: 250px">
<div class="title-bar">
<div class="title-bar-text">My First Program</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 has-space">
<p>Hello, world!</p>
<button class="default">OK</button>
<button>Cancel</button>
</div>
</div>
</body>
</html>Copy dist/vista.css (and the asset directories under dist/gui/ if you're using icons or gadgets) into your project. No build step, no npm — just link the CSS.
Use the scoped build to limit styles to a container:
<link rel="stylesheet" href="dist/vista.scoped.css" />
<div class="vista">
<button>Vista Button</button>
</div>Build the scoped variant with npm run build:prod.
npm install
npm start # starts dev server at localhost:3000 with live reload
npm run build # builds un-minified CSS to dist/ (fast, for development)
npm run build:prod # production build: minified + scoped + inline + per-component CSSCore styles live in gui/. The build pipeline uses PostCSS (import, nested, calc, base64, autoprefixer, cssnano).
vista.css remaps 7.css's Windows 7 design tokens to the Windows Vista Aero palette:
| Element | 7.css (Win7) | vista.css (Vista) |
|---|---|---|
| Window chrome | #4580c4 |
#3a6e9c (deeper) |
| Window corners | 6px | 7px (rounder) |
| Window icons | PNG (pixelated) | SVG (smooth) |
| Taskbar + Start orb | None | Included |
| Spinner | GIF-based | GIF-based (identical) |
| Slider indicators | PNG-based | PNG-based (identical) |
Features unique to vista.css:
- Start orb — pure CSS with 4-color Windows flag, glass highlight, and blue glow
- Taskbar — Aero glass bar with
backdrop-filter, app tabs, quick launch, system tray - Glass windows — frosted glass effect via
backdrop-filter: blur()with diagonal Aero stripe overlays - Theme toggle — Aero glass ↔ Vista Basic (CSS custom properties)
- Gadgets Remix — modern web reimplementations of the Windows Vista Sidebar Gadgets, rebuilt from original extracted source with standard HTML5/CSS3/JS
An interactive WebGL replica of the Windows Vista Bubble screensaver. Bubbles drift, collide, and display authentic rainbow iridescence using a physically accurate thin-film interference model. The rendering implements the method from:
Iwasaki, Matsuzawa & Nishita — "Real-time Rendering of Soap Bubbles Taking into Account Light Interference", CGI 2004, University of Tokyo.
Thin-film reflectivities are precomputed from spectral interference equations into a 2D texture, then applied in a two-pass GPU blend pipeline per frame: Lp = (1 − R) × Lit + R × Lir. Runs at 60 fps on modern hardware.
The bubble overlay appears after 5 seconds of inactivity — just like the original screensaver — and fades out on mouse movement or keypress.
All 7.css components are ported: Balloon, Button, CheckBox, Collapse, ComboBox, Dropdown, GroupBox, ListBox, ListView, Menu, MenuBar, OptionButton (Radio), ProgressBar, Scrollbar, SearchBox, Slider, Spinner, Tabs, TextBox, TreeView, Window (Title Bar, Body, Status Bar, Glass Frame, Dialog Box), plus the new Taskbar component.
Modern web reimplementations of the Windows Vista Sidebar Gadgets — rebuilt from the original extracted HTML/CSS/JS/PNG source, replacing proprietary <g:image>, <g:background>, System.Gadget APIs, ActiveX, and VBScript with standard HTML5, CSS3, and JavaScript:
- Clock — analog clock with rotating hands via CSS
transform: rotate() - Calendar — month grid with orange today highlight, pure JS (no VBScript)
- Notes — sticky notes with Segoe Print font, localStorage persistence
- CPU Meter — dual analog gauge display with mock data
- Currency — currency converter card design
- Stocks — stock tracker with search and chart display
- Weather — weather forecast with moon phases and dynamic themes
- SlideShow — image slideshow with transition effects
- PicturePuzzle — sliding puzzle game (4×4 grid)
Each gadget lives in gui/gadgets/<name>/ with its own CSS partial, JS module, and original Vista PNG assets.
This project stands on the shoulders of giants:
- 7.css by Khang Nguyen Duy — the direct foundation; all component architecture, build pipeline, SCSS structure, and demo page design originate from this project
- XP.css by botoxparty — the Windows XP CSS layer that 7.css extends
- 98.css by Jordan Scales — the original retro-Windows CSS framework that inspired the entire lineage
- AlternativeVista by Frekk — referenced for authentic Windows Vista color values, window control button gradients, and the distinctive Aero glass glow effects
- AeroBar — macOS taskbar app referenced for the Start orb's CSS radial-gradient construction, taskbar
backdrop-filterparameters, and glass bevel highlight patterns - Aero10 by vaporvance — Windows theming project referenced for Vista era color specifications and Aero visual design documentation
- Gadget assets — extracted from Windows Vista Ultimate (6.0.6000.16386, x64)
install.wim, sourced from archive.org; the original Sidebar Gadgets were built by Microsoft (© 2006 Microsoft Corporation) using HTML + CSS + JScript + PNG rendered through IE7's engine. The Gadgets Remix rebuilds these with standard web technologies for historical preservation and educational purposes. - Taskbar, slider, and icon assets — extracted from Vista system DLLs via the same
install.wimsource; all PNG/GIF assets ingui/taskbar/,gui/slider/,gui/spinner/, andgui/gadgets/*/images/retain their original Microsoft copyright. See NOTICE.md for full asset provenance. - Microsoft — the original Windows Vista, Windows 7, and Aero design language; all trademarks and registered trademarks belong to their respective owners
- [Iwasaki et al., CGI 2004] — "Real-time Rendering of Soap Bubbles Taking into Account Light Interference" by Kei Iwasaki, Keichi Matsuzawa, and Tomoyuki Nishita (University of Tokyo); the thin-film interference rendering method used for the Bubbles screensaver replica
MIT License. See LICENSE for details.
Windows Vista, Windows 7, Windows logo, and Aero are trademarks/registered trademarks of Microsoft Corporation.