Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://khang-nd.github.io/7.css/

A JS-independent, tree-shakeable CSS framework for building faithful recreations of the Windows 7 UI.
https://khang-nd.github.io/7.css/

css html scss ui-design windows-7

Last synced: 3 months ago
JSON representation

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

Host: GitHub
URL: https://khang-nd.github.io/7.css/
Owner: khang-nd
License: mit
Created: 2020-12-30T03:45:16.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2024-08-03T02:52:21.000Z (3 months ago)
Last Synced: 2024-08-03T03:56:50.971Z (3 months ago)
Topics: css, html, scss, ui-design, windows-7
Language: SCSS
Homepage: https://khang-nd.github.io/7.css/
Size: 1.36 MB
Stars: 1,544
Watchers: 14
Forks: 78
Open Issues: 6
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

spark-joy - 7.css
awesome-css-frameworks - **7.css** - CSS library for building interfaces that look like Windows 7. (Specialized)

README

        # 7.css

[![npm](https://img.shields.io/npm/v/7.css)](http://npm.im/7.css)

[![gzip size](https://img.shields.io/bundlephobia/minzip/7.css)](https://unpkg.com/7.css)

![A screenshot of a window with the title 'My First Program' and two buttons OK and Cancel, styled like a Windows 7 dialog](/docs/window.png)

**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](https://github.com/botoxparty/XP.css), which is an extension of [98.CSS](https://github.com/jdan/98.css).

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

## 📦 Installation / Usage

Directly via [unpkg](https://unpkg.com/):

```html

  

    7.css example

    

    

  

  

    


      

        My First Program

      

      

        Hello, world!

      

    

  

```

Via [npm](https://www.npmjs.com/package/7.css):

```sh

npm install 7.css

```

Then import it as below:

```javascript

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

```

## 📚 Documentation / Demo

Refer to the [documentation page](https://khang-nd.github.io/7.css/) for specific instructions on this framework's components.

## 🛠 Developing

Clone the repo and run `npm install`.

The core styles are managed in [`gui`](https://github.com/khang-nd/7.css/tree/main/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:

- Vue - [win7-ui](https://github.com/Visnalize/win7-ui)

- Svelte - [svelte-7.css](https://github.com/JericoFX/svelte-7.css) (work in progress)

## 📜 Changelog

Refer to [Releases](https://github.com/khang-nd/7.css/releases).