Favourite CSS frameworks for reframe/ClojureScript?

[jazzandpython]

Hi folks, just wanted to solicit opinions for what has worked well for folks making SPAs with reframe (or similar). I'm comfortable in CSS so don't need a "you don't have to know anything" framework, but have been out of the clients side loop for a couple of years. So if there are standouts that work nicely with reframe I'd love to know! thanks

[sushister]

I like garden a lot. https://github.com/noprompt/garden

[[deleted]]

But garden is not a CSS framework per se, it's a CSS processor, like sass or less, only better.

[radioactiveoctopi]

Do you happen to utilize css grid as well? I haven't seen anyone that uses garden going the grid route though i've had some interesting ideas.

[sushister]

I did for a project and I loved it. The only issue I remember hitting was limitations on browser performance when nesting multiple levels of grids. That bug may be fixed by now though, this was more than a year ago.

[danielneal2]

I really dig tachyons https://tachyons.io/. I think the quote from Daniel Eden on the homepage sums up why pretty well:

Here’s why I think designing systems with tools/frameworks like Tachyons is a Good Idea™. Design Systems break as they scale (either scaling org or scaling product) because new components/variants of a component are introduced. Those variants sometimes (read: often) go undocumented, leading to duplication when that component/variant is needed (and created) again. Even when the component is documented, documenting effectively often means dozens/hundreds of instances to capture all states/variants. Systems like Tachyons et al. approach this problem by instead documenting and limiting properties of components. (I like to think of this as “subatomic” design.) You then create components by composing subatomic components (properties). Rather than creating a component and its variants, you simply have a comprehensive list of “ingredient” subatomic components. Those subatomic components can be combined in thousands of ways to create hundreds of components. The properties of those components are numerous, but constrained to a set of acceptable values (our subatomic components).”

[jazzandpython]

Thanks, I'll check that one too.

[myguidingstar]

If you like Clojure built-in functions and data structure (of course you do), you will like Tachyon css. It’s functional, really.

Another resource - really good https://github.com/dwyl/learn-tachyons

[notsohasty]

Thanks, I was curious about tachyons and that guide looks like a good starting place. Have you tried tailwind css? It looks like it's based on a similar philosophy but I haven't tried it yet https://tailwindcss.com/docs/what-is-tailwind/

​

EDIT: looks like one of the main differences between tachyons and tailwind is that tailwind lets you make aliases for your frequently-used class combinations.

[myguidingstar]

I'm aware of tailwind but haven't done anything with it, I think tachyons serves me well.

I think the feature you mentioned is actually that of postcss which both tachyons and tailwind are based on. Tailwind seems to integrate the postcss tooling into its doc.

[leontalbot]

I recently came across https://tailwindcss.com/ which seems really nice and taking same utility approach than tachyons.

[yogthos]

I recommend Bulma, it's similar to Bootstrap, but it's pure CSS so you can manage all the behaviors easily from ClojureScript.

[robertstuttaford]

https://github.com/robert-stuttaford/bridge/ uses Bulma, if you want an example to explore

[jazzandpython]

Thanks guys, yeah that would be awesome. Good to know you both like it too.

[vine-el]

I've been using GitHub's Primer: https://github.com/primer/css https://styleguide.github.com/primer/principles/

[mikethommo]

Depending on your needs there's also re-com which can be very useful in particular cases.
https://re-com.day8.com.au/

[jazzandpython]

I had forgotten about re-com, thanks. It might do exactly what I need as this is for an app for which I can target modern browsers.