4 ms·

Which of the CSS frameworks works best with ReactJS?

dfee 8y ago
Shameless plug: I just put `rbx` 1.0 together which has 100% coverage and fully implements the Bulma framework for React. Every component has a story, and it’s written in TypeScript (transpiled to JS). I hope to get around to releasing this big update on npm tonight(!) but for now you can use the code straight from GitHub. Also, the wrapping is complete yet minimal - there are only a couple components with state and you can override those with a `managed` flag. Also, every component supports ref forwarding (using of course `ref`), and can render as any other component using the `as` prop. For example, if you want to bring your own Form, Link, or Table framework, this will work with that seemlessly. <Button color=‘primary’ as={Link} to=‘/‘>Go home</Button> https://github.com/dfee/rbx https://github.com/dfee/rbx
- thomasfedb 8y ago
  Looks promising. Any ideas about handling date/time in a way that's consistent with this and also works across desktop and mobile?
- sooheon 8y ago
  Awesome, love the storybook. Components>Media>Input is broken FYI.
  - dfee 8y ago
    Haha of course. Probably a change I made earlier today. I’m at dinner now, but will update it in a couple hours.
diesal11 8y ago
I've been using reactstrap[0], it's everything you'd expect from bootstrap react bindings and has been great while i've been leaning React this year. No doubt there would be better solutions more tailored to react out there. [0] http://reactstrap.github.io/ http://reactstrap.github.io/
manigandham 8y ago
If you're using a frontend view engine like React then I'd recommend looking into component-based CSS frameworks like https://tachyons.io/ https://tachyons.io/ or https://tailwindcss.com/ https://tailwindcss.com/ where you have classes for the basics and add them together for the final output. It's a natural fit to view components.
- androidgirl 8y ago
  +1 for tachyons. Tachyons + React is very powerful.
- cygned 8y ago
  I have tried both with quite complicated applications and I have to say that I prefer tailwind. With PostCSS in your pipeline, you can add the tailwind plugin and start composing CSS. This way, you can use your configuration even in places where you are required to write CSS (e.g. for transitions or media queries): @screen xs { .item { @apply border-b border-blue-darker; transition: background-color 0.2s; } }
kowdermeister 8y ago
Take a look at: https://ant.design/ https://ant.design/ It's a UI library with all imaginable widgets.
- bpicolo 8y ago
  I picked ant.design for a recent project - it's pretty darn sweet. element (in vue) is also pretty terrific: https://element.eleme.io/ https://element.eleme.io/
kmlx 8y ago
More than just CSS, we use Material UI: https://material-ui.com/ https://material-ui.com/
Achshar 8y ago
None, go vanilla.

dfee 8y ago

Shameless plug: I just put `rbx` 1.0 together which has 100% coverage and fully implements the Bulma framework for React. Every component has a story, and it’s written in TypeScript (transpiled to JS). I hope to get around to releasing this big update on npm tonight(!) but for now you can use the code straight from GitHub. Also, the wrapping is complete yet minimal - there are only a couple components with state and you can override those with a `managed` flag. Also, every component supports ref forwarding (using of course `ref`), and can render as any other component using the `as` prop. For example, if you want to bring your own Form, Link, or Table framework, this will work with that seemlessly. <Button color=‘primary’ as={Link} to=‘/‘>Go home</Button> https://github.com/dfee/rbx https://github.com/dfee/rbx

thomasfedb 8y ago
Looks promising. Any ideas about handling date/time in a way that's consistent with this and also works across desktop and mobile?
sooheon 8y ago
Awesome, love the storybook. Components>Media>Input is broken FYI.
- dfee 8y ago
  Haha of course. Probably a change I made earlier today. I’m at dinner now, but will update it in a couple hours.

diesal11 8y ago

I've been using reactstrap[0], it's everything you'd expect from bootstrap react bindings and has been great while i've been leaning React this year. No doubt there would be better solutions more tailored to react out there. [0] http://reactstrap.github.io/ http://reactstrap.github.io/

manigandham 8y ago

If you're using a frontend view engine like React then I'd recommend looking into component-based CSS frameworks like https://tachyons.io/ https://tachyons.io/ or https://tailwindcss.com/ https://tailwindcss.com/ where you have classes for the basics and add them together for the final output. It's a natural fit to view components.

androidgirl 8y ago
+1 for tachyons. Tachyons + React is very powerful.
cygned 8y ago
I have tried both with quite complicated applications and I have to say that I prefer tailwind. With PostCSS in your pipeline, you can add the tailwind plugin and start composing CSS. This way, you can use your configuration even in places where you are required to write CSS (e.g. for transitions or media queries): @screen xs { .item { @apply border-b border-blue-darker; transition: background-color 0.2s; } }

kowdermeister 8y ago

Take a look at: https://ant.design/ https://ant.design/ It's a UI library with all imaginable widgets.

bpicolo 8y ago
I picked ant.design for a recent project - it's pretty darn sweet. element (in vue) is also pretty terrific: https://element.eleme.io/ https://element.eleme.io/

kmlx 8y ago

More than just CSS, we use Material UI: https://material-ui.com/ https://material-ui.com/

Achshar 8y ago

None, go vanilla.