Gitroom - Libraries

7.css

0

A JS-independent, tree-shakeable CSS framework for building faithful recreations of the Windows 7 UI.

Miscellaneous

windows-7
ui-design
css
scss

7.css

npm gzip size

A screenshot of a window with the title 'My First Program' and two buttons OK and Cancel, styled like a Windows 7 dialog

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.

It does not ship with any JavaScript, so it is compatible with your frontend framework of choice.

📦 Installation / Usage

Directly via unpkg:

<!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>

Via npm:

npm install 7.css

Then import it as below:

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

📚 Documentation / Demo

Refer to the documentation page for specific instructions on this framework's components.

🛠 Developing

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.

📝 Issues, Contributing, etc.

You are so welcome to report issues, help out with contributions or whatever you could think of to improve this lovely UI framework.

⚙ Integrations

7.css has been seen adopted in the following JS framework projects by the community:

📜 Changelog

Refer to Releases.