All Projects → khang-nd → 7.css

khang-nd / 7.css

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

Projects that are alternatives of or similar to 7.css

Protonmail Theme
Protonmail Theme
Stars: ✭ 134 (-20.71%)
Mutual labels:  ui-design, scss
Theme Ad
🔨 Art design theme for write and show.
Stars: ✭ 262 (+55.03%)
Mutual labels:  ui-design, scss
15 Puzzle
The 15-puzzle is a sliding puzzle that consists of a frame of numbered square tiles in random order with one tile missing, built in react
Stars: ✭ 161 (-4.73%)
Mutual labels:  scss
Adam Blog
Adam Blog is a minimal clear theme for Jekyll
Stars: ✭ 167 (-1.18%)
Mutual labels:  scss
Instagram Clone
A clone of the Instagram app 📱 🥳 . made with React-native and Typescript ❤️.
Stars: ✭ 163 (-3.55%)
Mutual labels:  ui-design
React Timelines
React Timelines Library
Stars: ✭ 161 (-4.73%)
Mutual labels:  scss
Css Vars
Sass mixin to use CSS Custom Properties with Sass
Stars: ✭ 164 (-2.96%)
Mutual labels:  scss
Angular Pro Sidebar
Responsive sidebar template with dropdown menu built with angular 7 and bootstrap 4
Stars: ✭ 160 (-5.33%)
Mutual labels:  scss
Hugo Serif Theme
Serif is a modern business theme for Hugo.
Stars: ✭ 168 (-0.59%)
Mutual labels:  scss
Theme Chalk
Element theme chalk
Stars: ✭ 163 (-3.55%)
Mutual labels:  scss
Fem Easybank
Easybank landing page from Frontend Mentor
Stars: ✭ 164 (-2.96%)
Mutual labels:  scss
Ppfish Components
Fish Design: 面向B端设计的企业级UI组件库
Stars: ✭ 163 (-3.55%)
Mutual labels:  ui-design
Hitchens
An inarguably well-designed Jekyll theme.
Stars: ✭ 162 (-4.14%)
Mutual labels:  scss
Hexo Theme Book
A simple, elegant, book-like hexo theme with some useful features.
Stars: ✭ 166 (-1.78%)
Mutual labels:  scss
Space
A real time chat app for developers built using React, Redux, Electron and Firebase
Stars: ✭ 161 (-4.73%)
Mutual labels:  scss
Sassessentials
Repository for my tutorial course: Sass Essential Training on LinkedIn Learning and Lynda.com.
Stars: ✭ 167 (-1.18%)
Mutual labels:  scss
Massively
A free, open source theme for Ghost
Stars: ✭ 160 (-5.33%)
Mutual labels:  scss
Newparent
给忙碌者的育儿攻略
Stars: ✭ 162 (-4.14%)
Mutual labels:  scss
Editorial
A free, open source theme for Ghost
Stars: ✭ 164 (-2.96%)
Mutual labels:  scss
Bttn.css
Awesome buttons for awesome projects!
Stars: ✭ 2,004 (+1085.8%)
Mutual labels:  ui-design

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].