I don't understand why CSS developers go through all the difficult work (taking a design system, turn into a solid selection of components, implement it using SASS mixins with rules that can abstract browser quirks, variable definitions to make it easy for theme-ing) but then insist on putting all of that available through classes that require me to change all of my HTML and ignore separation of presentation and content. Just give me the SASS mixins!
Last I checked, Bourbon was a bit too low-level for what I wanted. It didn't have implement any type of design system but just gave some basic utilities for those that wanted to build one.
What I want is more-or-less what I started doing on https://gitlab.com/mushroomlabs/zenstyles. I took some of the code from materialize.css and stripped it from anything that depended on javascript and anything that required a specific layout definition. Basically, I wanted something that could work as a "classless CSS" that used the basic building blocks from materialize.css, so that I could use with code that was based on headless-ui components.
This approach let me, e.g, use my hub20 checkout component (vue.js) without any styling on its own and let people integrate whatever "theme" they wanted. I only got to implement 2 "zen styles" following this approach (the other is on https://github.com/mushroomlabs/hub20.frontend.app/tree/mast..., and one day I will get to extract it out and move it to the "zen styles" repo) but it was enough to prove to me that this approach was not only possible but made my work a lot easier.
