Find a utility css framework for things like margins and alignment

[ehaughee]

Update: Look into https://reactstrap.github.io/.

The Bootstrap utility classes (for things like margins, padding, flexbox, etc) are dope but I don't want to pull bootstrap in on top of semantic ui. I'd like to be using react-bootstrap instead of semantic ui but they aren't done supporting bootstrap v4 yet. So I've been looking around for a simple utility class (ideally with similar classes to bootstrap for an easier upgrade path). However, I've yet to find one that is simple yet covers all the bases that bootstrap's utility classes do.

Frameworks I've looked at:

• Tailwind
  • Too complicated out of the box. Wants to do preprocessor type stuff as far as I can tell. Would love to just use its css.
• Bass CSS
  • Can't remember what I didn't like about this one. Might not have some feature I wanted or maybe I was just being picky.
• Tachyons
  • Another one I don't remember what I had a problem with. Might've just been in a shit mood. Looks fine at second glance.
• Milligram
  • Not actually a utility framework. Wants to be more like a super lightweight bootstrap. No thanks.
• Turret CSS
  • Has a nice list of utilities but might do too much other shit and thus conflict with semantic ui's styling.
• Bulma
  • Not sure why I keep listing non-utility frameworks but whatever. This one came up when I searched that shit on google. Does too much and has no utilities as far as I can tell (I didn't really look though)
• Other's I'm sure. I just want bootstrap 4 supported by goddamn react-bootstrap I guess. The devil you know and whatnot.

[ehaughee]

7 tracks a switch to react-bootstrap

[rluiten]

May I ask if you are on semantic ui already what makes you want to go to bootstrap 4 ? We are weighing up our choices and at the moment semantic ui and bootrap are front runners though I think bootstrap 3 isn't what some people want, and 4 is good ways off for react-bootstrap.

[ehaughee]

@rluiten My reasons are two fold really. One is my familiarity with bootstrap as I use it at work. The second, as demonstrated in this issue, is that I couldn't find a utility class css framework that didn't also do a bunch of other stuff or didn't do enough. Bring able to compose your styling out of utility classes based on uniform spacing units without writing any css has allowed me to accomplish a lot without writing much custom css. Semantic UI is nice but you'll find yourself writing things like margin-left: 15px all the time and thus maintaining a lot more css. And as of this issue https://github.com/Semantic-Org/Semantic-UI/issues/5863, it appears they have no plans to add any.

A bonus benefit is broad web development community adoption and thus a lot of solved problems and tooling/library support (react-bootstrap being an obvious exception).

So, as with most things in the software world, both are good it just depends on your use case.

[rluiten]

Thank you for your info, and that makes a lot of sense. Also just in case you weren't aware https://reactstrap.github.io/ exists and is bootstrap 4.

[adrolli]

Thanks a million for that hint @rluiten Came here struggling with the same problem, your tech stack sounds interesting @ehaughee

[ehaughee]

@rluiten Thanks for the heads up! I hadn't seen reactstrap. I will definitely check it out.

[rluiten]

@ehaughee I'd be interested in any positive/negative findings you may have on reactstrap, I have only played with it very briefly so know little of it.