khang-nd / 7.css Goto Github PK

View Code? Open in Web Editor NEW

1.3K 1.3K 68.0 1.58 MB

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

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

License: MIT License

JavaScript 7.93% SCSS 92.07%

css html scss ui-design windows-7

7.css's Introduction

With ❤ crafting - For 💯 striving

Hey there, I'm Khang Nguyen Duy. A software developer and a front-end enthusiast.
Connect with me in any social platform below.

7.css's People

Contributors

Stargazers

Watchers

Forkers

gurugeek hg9x aph6000 shook2012 arryboom linecode emupedia krrrishh dhivehi khiet-vo crackercat edwinyzh dimaskuy m4tlch szhorizon dosycorps xet7 fenghaolinroix marcoc76 chathuragh jcpc91 amansammy kambaa abyjohnson1 paperluigis gitpaladin mohamed7sameer mehdimsv prape codeguyeli seanpm2001 subharanjanm hohaicongthuan abnorman slopesweb noah670 vertotem creativelearn bevinhex lamhotsimamora kuwala neutronstarpro davincee 2lag cancelonly jericofx billxu0521 icephoenixz qb345801622 milldavid vitalijm cosmonet-fr melquiedes jillmnolan ah06 articks victorfilimonov mbayopanda skycompeu elchininet wangxiaokun 276340452 liam-mills

7.css's Issues

menubar / menus

Great project!

Would be awesome to also have menubar / menu component.

Animations for regular controls

Many windows 7 controls natively had animations: buttons, checkboxes, radio buttons had fade-in for their backgrounds on hover.

There is also an interesting detail--the glass reflections in windows 7 were actually fixed, that is, moving the window did not move where the reflections were on the screen.

I'm not sure if the second is reasonably implementable in css--it might end up difficult or impossible, but the former is probably doable with a bunch of transition: statements.

perhaps it will be more better if

support js component, like alert, confirm, dialog，tooltip😍

use cases for 7.css

Hi everyone.

concept

I would like to provide a concise list of 9 use cases for the 7.css library (this list is not complete but partial). My hope in this thread is to tell how an open 7.css project helped me.

use case

use case 1: Boomerang-Project & 7.css

Lately I've been involved with creating and customizing themes for linux. One of the themes I'm involved in and helping with some design ideas is the Windows 7 theme from the Boomerang-Project (which is an open project that creates or stores themes for linux with gtk). Note: I haven't submitted the pull request yet, but part of the theme - I mean the design should be based on 7.css - is something I'm working on and I should submit it someday to the repository where the Windows 7 gtk theme... can stay.

use case 2: Electron & 7.css

Another use case I use 7.css is software written in Electron that I'm creating to look like a Windows 7 program to the end user.

use case 3: Os.js & 7.css

Lately I've been involved with the idea of operating systems in browsers, one operating system that has caught my attention is the OS.js project which looks a lot like the standard linux interface like a kubuntu etc.

One of the features I think of sending is "managing themes", my idea is to have something similar to OpenShellMenu which is software that customizes the user experience in Windows by selecting the way the menu is displayed. My idea is to have an OpenShellMenu in OS.js, I think in that sense to use 7.css so that anyone can easily change the OS.js system to look like Windows 7.

use case 4: Prototype & 7.css

It's very common when we write software - to carry out various tasks such as testing, implementation, deployment, technical documentation, among other things. A library with the design of an operating system facilitates the work of screen prototyping. This avoids wasting time with testing, implementation, deployment and documentation if I can gradually increase an overview and visual of what will be done for the end customer.

It's 2022, and in my special case I'm still developing software on Windows, Linux with old or legacy versions. In the specific case of Windows, usually the Windows XP, Windows 7 and Windows 10 versions. The Windows 11 version I still don't use so often. I said about the Windows XP version because I must use some CSS library for the screen prototype, as well as I use the 7.css version for the screen prototype like Windows 7.

use case 5: Simulation of software implementation/deployment & 7.css

In the previous case, I spoke about the screen prototype and how it avoids wasting time developing something without prior approval or use by the end user. The same example I mentioned earlier can serve as a basis for something I call Simulation of software implementation/deployment - which is basically testing a software implementation/deployment for the end user. Instead of spending ram memory and hours of testing on virtual machines and virtualization, a practical way is to have software that simulates certain scenarios of errors or software problems. In this sense, I imagine using the 7.css library to simulate certain error scenarios or software problems before anything else, virtualization, container, etc.

use case 6: Training users in a corporate, business environment & 7.css

It is very common to have difficulties using certain software, we can help train people using a simulation, something similar to Windows 7. In the previous case I spoke about screen prototyping and also about software simulation, this case applies to simulation of software to train users before the software is fully developed. A library like 7.css can help me train users who are going to use some version of my software on Windows 7.

use case 7: demo & 7.css

It is common to use things like mvp (minimal value product) and poc (proof of concept) to test ideas or concepts before spending time, money or opening a company or launching a product, idea or service in the information technology market, software in general. A library like 7.css can help me create live or offline demos for things like mvp, poc

use case 8: web components and/or block protocol & 7.css

In the previous cases I talked about concepts like poc, mvc, screen prototype, simulation. We can create web components and/or block protocol to structure software(version Windows 7) with 7.css and distribute in a cdn network, that way any company can avoid losing hours of development, implementation, deployment of software in windows 7 environments

use case 9: ReactOS & 7.css

Lately I've been involved with the idea of a Windows operating system that is - ReactOS(which tries to look like Windows XP... free/libre). I'm thinking of following the 7.css style guide to help with ReactOS UI/UX design.

why did you write an issue about it?

My hope in this thread is to tell how an open 7.css project helped me.
All of you can use this information as a "showcase" to define the use of the 7.css library - so that people can see that the project is very interesting and what are the scenarios where the library is used
I would like to provide a concise list of 9 use cases for the 7.css library (this list is not complete but partial).

demo

image-description: As we can see in the image we have the 'showcase' information - where the library is used in the README.md file.

question/feedback

What do you all think of the idea?

how to window auto height for parent ?

i don't know how to easily set window auto height for parent.
i use 7css in desktop app ,The 7.css makes it look awesome.

(question) Is it possible to use the 7.css library with B00merang-Project?

Hi everyone.

Is it possible to use the 7.css library with B00merang-Project?

What do you all think of this idea?

buttons that are both pressed and hover should have a shadow effect

properly style the aero stripes/glass reflection effect

Styling partly broken in Safari on iOS

When opening a file that uses 7.css, including the documentation, the window pane buttons are too small and missing their icons. The screenshot showing the issue occurring in documentation is attached.

Using iPhone 8 with iOS 14.4.2

Issue with toggling between Tabs

I copied the code directly into repl.it for "Another window with contents" - the example which has a window body with three tabs (music, dogs, food).

For some reason, when I click on the other tabs (Dogs, Food), the content doesn't toggle to the content designated to those tabs/buttons. It just stays fixed on the "Music" content.

I tried the same thing with copying the two "Tabs" code snippets, and I get the same issue. Clicking any of the other tabs does nothing - the content stays static.

I know I've imported the 7.css file correctly because all of the other code snippets work (i.e. buttons, menu bars, etc.).

Has anyone had this issue? Anyone know how to fix this?

Scrollbar

do you have the scrollbar styling instead of the whole stylesheet as its not available on the gui page on unpkg

How can I avoid this kind of conflict?

First of all, thanks for such awesome library! my issue is I'd like to use this library to style a specific (React) component but it's changing everything else in the application, including the main page's default scrollbar and the tab component I'm using. for example the tab look like this:

instead of this:

the code to generate this tab look like this. I believe most part of conflict could be solved using unique name to classes? maybe adding the library name prefix or something...

Flexible font sizing

Currently font sizes for control elements (e.g. buttons) are hard-coded to 9pt. It'd be better to apply em and rem unit throughout for font sizing. Although, it is a "faithful reproduction", I believe that this request might actually result in enhanced accessibility.

Tabs aren't working properly

Working on a personal webpage, and I wanted to let you know that I haven't been able to get my tabs to work properly in case this is an issue on your end!! I took the code straight from your 7.css webpage, and I can't seem to switch over from one tab to the other. If this is my fault though then please feel free to disregard this, I just figured I'd create an issue just in case it's something you need to fix :)

Add search box component

Follow the design principles: https://learn.microsoft.com/en-us/windows/win32/uxguide/ctrl-search-boxes

Use `<span>` instead of `<i>` for menu shortcut mnemonic

<i> is not the appropriate tag for this, especially when the font-style has been overridden below. Consider using <span which is used to supply markup for grouped elements, grouped due to there being multiple heterogenous characters, e.g. F and 2 for F2; Ctrl, +, X for Ctrl + X; so on and so forth.

Originally posted by @swarmukhdefault in #46 (comment)

[ENHANCEMENT] Desktop icons?

https://learn.microsoft.com/en-us/windows/win32/uxguide/vis-icons is all I could find, sadly

Bug found at 7.css, IDK any CSS but I have the source

https://fatbuffalo.neocities.org/tss

Issue shown at Firefox - Windows does not render correctly

disabled titlebar buttons

atm i just use opacity 0.5, i think this should definitely be added

Input Text Cut Off in Safari 14

Thank you for this great library.

I noticed that when loading the documentation page on OS X using Safari 14, the text entered into input boxes is cut off at the bottom:

The same problem occurs on iOS Safari.

I've investigated a bit and the problem seems to be related to this line height property. Disabling this line-height property via Developer Tools seems to fix the issue:

[Menu Bar] Overlapped Dropdown Menu

Steps to reproduce:

Click on one of the items on the menu bar, a dropdown menu will appear.
Hover the mouse cursor over other items on the menu bar, another dropdown menu will appear overlapping the previous one.

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

Is it intentional or something that could be fixed in the future?

<label> with embedded inputs problematic (should behave like <label for=x>)

Thanks for a great looking CSS!
One problem: it requires <label> to use for="", and doesn't support embedded inputs.
This then requires us to generate a unique id for each labelled input, which bloats the HTML unnecessarily.

For example:
An input embedded in a <label> renders no gap between the label text and the input.
A radio embedded in a <label> fails to render the radio at all.

Is that possible to fix? I'd love to contribute a fix, but my CSS knowledge is sketchy at best.

[Menu Bar] Overlapped Dropdown Menu

Steps to reproduce:

Click on one of the items on the menu bar, a dropdown menu will appear.
Hover the mouse cursor over other items on the menu bar, another dropdown menu will appear overlapping the previous one.

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

Is it intentional or something that could be fixed in the future?

Window's border background doesn't get overriden

Hi! I've been using you library to create a couple of React components, but I've noticed that if a parent element has a background or background-color property set, all the borders of the window use that color instead of the expected gradient.

I've created a simple codesandbox if it helps:

https://codesandbox.io/s/thirsty-wright-rm98t6?file=/index.html

If I remove the background-color, the borders re-appear. I think it has to do with the z-index of the .window::before but I'm not a style expert haha

the best

css ui library i've seen so far in my life. LOVE IT!

Windows 11 style?

Windows 11 planned? 🙃

Enhance tree view component

Refer to UX guide https://learn.microsoft.com/en-us/windows/win32/uxguide/ctrl-tree-views

Issue with tabs (easy fix)

I'm not 100% certain, but I am pretty darn close to it, that this line in the code is what is causing a 1 pixel offset between the tab's end (while selected), and the lower window that the tab is meaning to enable. As seen here:

easy and good

Very nice , I simply added the top button

Missing style `button:disabled` implement.

The disabled button rendered with solid background rather than gradient. See below Apply button.

But the 7.css missing button:disabled style which show the exact same border and background.

Icon for help titlebar button missing.

Will you add more features

Hi,
This is an awesome project. will you add more features?

1、layout support: flex, grid,
2、more components : toolbars, table, group box, icons

Is possible to set a icon in the window title bar?

is this supported?

Add Avatar component

Add Taskbar and Start Menu

Hey @khang-nd, do you plan to add those in the future? I reckon it's gonna require a lot of work. If you do, I'll add more reference images here.

glass frame with blur?

Add list view/table component

Design guidelines: https://learn.microsoft.com/en-us/windows/win32/uxguide/ctrl-list-views

Accommodate shortcut mnemonics in menuitems

Inactive window styles

This is absolutely amazing, thank you!

Styles for "inactive" windows, i.e. those that are not focused, would be cool.

Add typography

Follow design guidelines: https://learn.microsoft.com/en-us/windows/win32/uxguide/text-ui
Leverage the existing _typography.scss component, add a docs section.

HH nfv r r

Tabs are not working

<section class="tabs">
  <menu role="tablist" aria-label="Tabs Template">
    <button role="tab" aria-controls="tab-A" aria-selected="true">Tab A</button>
    <button role="tab" aria-controls="tab-B">Tab B</button>
    <button role="tab" aria-controls="tab-C">Tab C</button>
    <button role="tab" aria-controls="tab-D" disabled>Tab D</button>
  </menu>
  <article role="tabpanel" id="tab-A">Tab A is active</article>
  <article role="tabpanel" id="tab-B" hidden>Tab B is active</article>
  <article role="tabpanel" id="tab-C" hidden>Tab C is active</article>
  <article role="tabpanel" id="tab-D" hidden>Tab D is inactive</article>
</section>

I have pasted this code in angular but I don't know why the tabs are not working. I got the UI as it is mentioned in the page But If I click tab-B/C it is not showing me Tab B is active/C is active. Do we need to add any custom javascript code for this. If not can you please help me with this issue. Thanks in Advance.