`fluent-svelte` and the future of WinCSS

[Tropix126]

What's happening?

As of now, wincss will be deprecated in favor of my new svelte component library, fluent-svelte.

Why?

When I originally created this project early this year, it didn't really have much of a direction, and there were plenty of gaping holes in the implementation. To list a few:

• All CSS was bundled into one large file causing possible bundle size pitfalls.
• wincss is nothing but a drop-in stylesheet with no concept of components. This makes it very difficult to work with in production codebases without some sort of wrapper library in a traditional component framework. It also makes things rather difficult to document.
• At the time of this framework's creation, Microsoft was working on a large scale overhaul of all control styles which is what eventually became the Windows 11 design system.
• I wasn't especially knowledgable in terms of JS at the time, which obviosly makes creating a unified implementation of this difficult.
• The recreations in this project aren't especially accurate because it largely relied on me digging through WinUI ResourceDictionaries. Variables are pretty inaccurate, animations are off, etc... Now that we have a well-made Figma toolkit, things are much easier.

What is this new project?

fluent-svelte takes the same fundamental ideas of wincss, but implements it in the form of a Svelte component library. That is, it's a feature complete, near pixel-perfect recreation of WinUI components on the web. It also uses the latest WinUI 2.6 control styles.

Unlike wincss, fluent-svelte is much more than a styling framework. It provides a unified set of components written in JS with full typescript support, WAI-ARIA integration, style encapsulation to reduce bundling extra CSS, and measures to prevent clashing with existing codebases.

I also plan to write a complete documentation site around this, to make things as easy to use as possible.

Development can be tracked here and a demo can be viewed here.

Drawbacks

• Initially, you will only be able to use these on Svelte projects. I eventually plan to compile these to webcomponents so they can be used framework-agonistically.
• You'll need to load some JS. I guess you could extract the styles from the project if you really wanted to, though.