7.css is a CSS framework that takes semantic HTML and styles them to the Windows 7 design. It is built on top of XP.css, which is an extension of 98.CSS.
7.css is compatible with your frontend framework of choice.
- Download 7.zip from the latest release.
- Extract the contents of 7.zip to the working directory of your site.
<!DOCTYPE html>
<html>
<head>
<title>7.css example</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/7.css" />
<script src="/7.js" />
</head>
<body>
<div class="content">
<div class="window active glass" 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>
</div>
</body>
</html>Refer to the documentation page for specific instructions on this framework's components.
Clone the repo and run npm install.
The core styles are managed in gui.
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.
You are welcome to report issues, help out with contributions, or whatever you could think of to improve this lovely UI framework.
7.css has been seen adopted in the following JS framework projects by the community:
- Vue - win7-ui
- Svelte - svelte-7.css (work in progress)
Refer to Releases (Original).
Refer to Releases (This fork).