hub20.frontend.app VS Bourbon

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.

It’s in the src/scss directory but they’re not using that much except overriding bootstrap which has its own.

You might find bourbon more useful.

https://github.com/twbs/bootstrap/tree/main/scss

https://www.bourbon.io

Tailwind is written in SASS and is not like SASS. I would equate Tailwind to an earlier utility framework like Bourbone[1].

Tailwind can be used to build/write "StyledComponents". And one can write in the style/methodology/philosophy of BEM.

All the the above terms are all of different categories.

1. https://www.bourbon.io

thoughtbot/bourbon - A lightweight Sass tool set.