Several issues

[Slluxx]

I noticed several issues that should be adressed to be a proper framework.

1. (And what bothers me most is that) The readme of this repository gets edited without any reason. I can only guess that it serves the purpose of being in the top search results. This is highly deceiving and it messes up the Insights/Network view.

2. Classes are way to dependant on parent classes. For example it is impossible to use the app-navbar-list-item on its own if i desire to (to have my own custom sidebar / sidebar buttons).

<li class="app-navbar-list-item">
    <a href="./index.html" class="active">
        <span>Home</span>
    </a>
</li>

3. Styles should not depend on tags. In fact, tags shouldnt be used anywhere for styling. It should all be doable with plain divs and styles only applied to classes.

<nav class="app-navbar">
    <ul class="app-navbar-list">
       <li class="app-navbar-list-item">

.app-navbar-wrap nav {
    ...
}

[virtualvivek]

Hi @Slluxx,

Thanks for looking into this now i realize that was doing something wrong with CSS

After taking an insight at the CSS i can confirm that this really needs a brush up as follows below

1. Replace tags with it's class/div name instead.
2. Reduce unnecessary class dependency of parent and put those child class outside of it's parent.
3. No more deceiving commits.

[virtualvivek]

Once all issue got fixed then only i will close this issue :)

[Slluxx]

Thank you!

Maybe its possible to give this project a rewrite and make it more accessible to editing / extending? I tried to set up the repository myself to fix some issues (for example the menu buttons height being too large) but i wasnt even able to set the project up properly. There are a lot of outdated modules and one didnt want to install at all. The mixture of windows 10 and windows 11 style css also increases the overall difficulty of the project.

I noticed other things too, such as the dark color theme only being "correct" if we take an unfocused windows 11 application as example (see screenshot for focus comparison). This makes it feel like its always "unfocused" and not actually the active window. Since i am working with tools such as https://github.com/python-eel/Eel, https://github.com/r0x0r/pywebview and very recently also with https://github.com/neutralinojs/neutralinojs, having 1=1 windows 11 style applications makes a big difference! (I have an eye for whats right and wrong but my css/scss skills are just not good enough to make it myself.) Maybe its a good idea to have classes applied to the body that will change all colors accordingly. This way, focus and unfocus event handlers can be build into our python apps.

Your repository is seemingly the only css framework that uses Windows-native-elements, looks good and is usable and i hope i (and others) can use it to build "native like" applications without the need to rely on WinUI 3 and XAML in C# or C++. I really hope it can become even better than it is right now.

In the future i would also love to make a VueJS library out of it but at its current state, its sadly too limited in its modularity. A Bootstrap or Tailwind approach to classes would greatly improve the usability aswell as customizability (.btn .btn-primary or .card .bg-primary mt-3 etc).

Unfocused (basically the current windows-ui color scheme):

Focused (how an active window should look like):

[virtualvivek]

Thanks for all the elaboration on what can be improved/fixed to this project.

You are correct the button height, navigation toggle button etc. were not as same size of what should be as per windows 11, also the unnecessary windows 10 styles in the SCSS file needs to be removed so i was tried first fixing these issues on my other project - react-windows-ui additionally adding blur effect and more life to make components feel exact like windows 11.

What got already fixed

1. Size of components are now 1:1
2. Removed windows 10 unused CSS code from source SCSS files
3. Fixed some color variables
4. Updated All node modules -versions

What needs to be fix

1. Adding Blur effects to Components with adding a .blur class to components.
2. Active/Inactive Window (As per this issue)
3. Will try to see what classes Bootstrap use probably make this as simple as possible.

Just having concern for having utility classes since my objective for this project was to provide Native look and feel components and not how a developer add them to either Grid or Flex layout on their project.

Do you want a kind of prop for button - medium/small/large ??

Have a look at under development -v4.2.3 of react-windows-ui

New SnapShot

Old SnapShot

[Slluxx]

Do you want a kind of prop for button - medium/small/large ??

Hm. As per: https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/signature-experiences and https://learn.microsoft.com/en-us/windows/apps/design/controls/buttons it looks like buttons have always the same height, unless the text forces them into multiple rows.

I think btn should be the most standard button and then have prop classes for btn-primary for example.

Just having concern for having utility classes since my objective for this project was to provide Native look and feel components and not how a developer add them to either Grid or Flex layout on their project.

Yes, you are right. The normal classes (btn, card, ...) must be enough to build a native looking website. However i also think sometimes you need more or less space between elements or if you want to make a custom element, utility classes really help.

If they are out of scope or not is up for you to decide. After thinking about it for a bit, i would agree with both.

[virtualvivek]

Does that all good to have prefix of app- on all components including the button that currently has class app-btn app-btn-primary ?
It was intended so that it will not interfere with other dependencies mostly with the react version of this project.

[Slluxx]

Does that all good to have prefix of app- on all components including the button that currently has class app-btn app-btn-primary ? It was intended so that it will not interfere with other dependencies mostly with the react version of this project.

Usually no. With React and Vue, you should only import the elements you actually need and not everything. In VueJS for example: import Button from 'primevue/button';

Either dont import the button if you want to use your own or if you want to use a different button from a different framework, import Button from 'a_different_framework/button';

or

import ButtonA from 'primevue/button';
import ButtonB from 'a_different_framework/button';

(same with react, just different syntax)

You can remove your prefix and dont need to care about other frameworks. Its possible due to scoped css.