Skip to content
forked from khang-nd/7.css

A tiny CSS framework for building faithful recreations of the Windows 7 UI.

License

Notifications You must be signed in to change notification settings

paperluigis/7.css

 
 

Repository files navigation

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

The easiest way to use 7.css is to import it from 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>

Alternatively, you can grab 7.css from npm.

npm install 7.css

Usage:

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

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.

License

MIT

Changelog

Refer to CHANGELOG.

About

A tiny CSS framework for building faithful recreations of the Windows 7 UI.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • SCSS 91.0%
  • JavaScript 9.0%