Suggestion: Fylgja

[GrimLink]

Hi please add Fylgja to this list 😉

Github: https://github.com/fylgja/fylgja Site: https://fylgja.dev/

Fylgja is a Component based CSS framework, allowing the user to use what they need. Most of Fylgja is Class-light and some Components are in Classless, a.k.a. Native Elements.

[waldyrious]

Most of Fylgja is Class-light

What exactly do you mean by this? I checked the base.css style and that alone contains thousands of class selectors... :thinking:

[GrimLink]

@waldyrious, thanks for engaging in the discussion. Let's clarify a few points. The 'base.css' style is not part of the core package. It's worth mentioning that 'fylgja.css', in the core, contains all styles including the utility classes, which is why it might seem a bit overloaded, but this a bundle CSS file.

Fylgja is designed as a CSS component framework, and importing it doesn't involve a single package import. However, if you're looking for a more minimal bundle import, you can check out these bundle CSS files instead:

• fylgja-slim.css (contains everything except utility classes)
• fylgja-html.css (includes only native elements)

The key thing to remember is to treat each CSS component as a separate entity. You can find beter explanation on this on this approach on our intro page (I am still working on improving the docs). This flexibility allows you to fine-tune your import to match your project's specific needs. If you have any more questions or need further assistance, feel free to ask!"

[waldyrious]

Thanks for the explanation and the two links — that's pretty useful to get a sense of how a minimal, classless version of Fylgja looks like. :+1:

[dbohdan]

I think Fylgja qualifies. Do you have a documentation page on class-light usage? If you don't, could you add one? I wouldn't realize this was a class-light framework from a quick look at the site or the GitHub repo. This is not a hard requirement for adding the framework.

fylgja.css from the CDN looks right on my test page. However, fylgja-html.css that you linked has an apparent issue. The left page margin is too thin. Does it expect a content wrapper with a different class/id/tag?

[GrimLink]

@dbohdan,

There is indeed existing documentation on the features page of Fylgja, but it is labeled as "Native Elements/Styles" (https://fylgja.dev/features/native-styles/). However, I acknowledge that this may not be immediately obvious.

To enhance clarity, I will be adding documentation specifically addressing the usage of class-light to the Fylgja guides page. Additionally, I'll include a link to the GitHub page. I plan to complete these updates during this week when I have some available time.

Please note that while fylgja-html.css serves as a base, Fylgja still utilizes classes where they are more appropriate. As a result, for aspects such as the missing container (page margin), some CSS adjustments will still be necessary.

This where you could add your own container to the body or article tag or use a container class from the Container CSS Component.

[dbohdan]

All right. Please ping me when you complete those updates.

[GrimLink]

Okay, that took a little longer than I wanted, @dbohdan.

But everything is here:

• Renamed the feature page to Native Elements (Classless), also added the same classless reference on the github page
• Added a guide for Classless Setup
• And last but not least, a codepen for this awesome list: https://codepen.io/Fylgja/pen/ExGOZaE

[waldyrious]

Hey @GrimLink, I hope I don't come off as too nagging, but is there any chance there could be a more compact version of fylgja-html.css that omits the class-only styles like .control-switch and .backdrop, as well as the class-based alternatives to native selectors, like .h1 in addition to h1, and .is-disabled vs. :disabled? Something like this.

That would make the resulting stylesheet more lightweight, and would allow using it in a truly classless way (for those who may want such a thing, of course).

[GrimLink]

@waldyrious No, it's not even close to nagging. This is a good question.

I plan to do this for version 2 of Fylgja, but I could add it as a feature flag if you need it sooner. Feel free to open an issue, and I'll try to add it soon. Unfortunately, I have very little time right now due to all the Magento-related work I have to do. 😅

[waldyrious]

No rush, just a suggestion! I'm glad to hear you'll consider it :) looking forward to v2! :D