Skip to content

Instantly share code, notes, and snippets.

@tkrotoff

tkrotoff/CSSFrameworks.md

Last active Jan 29, 2021
Embed
What would you like to do?
CSS Frameworks (Bootstrap, Tailwind CSS, Bulma, React Bootstrap, Chakra UI, Ant Design)

Reddit post 2020/04/04 - React: Choosing a Frontend Framework/Library

I would go with vanilla Bootstrap (just the Sass part, not the JS part).

Bootstrap

Bootstrap CSS utilities are very nice: same principles as Tailwind CSS.

Small example app: https://github.com/tkrotoff/MarvelHeroes (React with hooks, Bootstrap 4, TypeScript, React Router, Jest)

https://www.npmtrends.com/bootstrap-vs-react-bootstrap-vs-@material-ui/core-vs-bulma-vs-@chakra-ui/core-vs-tailwindcss-vs-antd

npm trends

https://star-history.t9t.io/#twbs/bootstrap&tailwindcss/tailwindcss&mui-org/material-ui&ant-design/ant-design&jgthms/bulma&react-bootstrap/react-bootstrap

GitHub stars history

Tailwind CSS

You will read only good things about it on Reddit, Twitter... people love it. See it as lower level compared to Bootstrap, it does not come with a UI: you have to code it yourself (you could re-create Bootstrap using it). Fits perfectly if you need to code your own design system. People are rediscovering the simplicity of CSS classes.

React Bootstrap/Reactstrap

Use React Bootstrap/Reactstrap only when needed (collapse for example): one layer less to learn and maintain. Does not bring that much value (<button className="btn btn-primary"> vs <Button variant="primary">) + you will be able to update Bootstrap without waiting for React Bootstrap/Reactstrap to catch up.

Material-UI

Very popular right now (and well done, well maintained, well tested and documented, full of features...) but kind of bloated: JSS, generates a big and ugly DOM, more concepts to grasp...

Bulma

Too minimalist, quite verbose (is-three-quarters, is-three-fifths, is-primary, has-icons-left...), with very limited utility classes.

Chakra UI

Less popular than Material-UI, too new and does not come with unit tests: https://github.com/chakra-ui/chakra-ui/tree/v0/packages/chakra-ui/tests. I would never invest time using a UI library that is not properly tested.

Ant Design

Less popular than Material-ui, huge bundle:

And they did that: https://blog.shunliang.io/frontend/2018/12/25/the-ant-design-xmas-egg-that-went-wrong.html (!!!)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment