Choosing a css framework to use with React


#1

Hi All,

I’m just getting started with Meteor and want to thank the community for the active forums. I’ve been lurking for a while trying to soak up as much as possible before I start writing my app.

I’m planning to write an application that will be used by accountants and their clients. It’s not really consumer facing, so it needs to be functional and not hideous, but not necessarily beautiful. I’m a developer, not a designer, and there will be no designer working on this project. I’m trying to figure out the best CSS/UI framework to use for this project. I’m looking for something that will allow me to build quickly and maintain easily. Something that is stable enough to have good documentation and not have lots of bugs, but not something that I will need to rip and replace in a few months because it’s been superseded.

Constraints:

  1. Looks pretty good out of the box without a lot of custom CSS needed.
  2. Contains a wide variety of components so that I can stick with one framework and not waste time trying to find the best X every time I need something.
  3. Needs to work well with React. Best would be a framework implemented as React components (for javascript pieces), but I would settle for a framework whose js portions play nice with React (without manipulating the DOM).
  4. Great documentation
  5. This is primarily a desktop browser app. I don’t really need it to be responsive for mobile. If it can be, that’s a bonus.

I’ve read some comparisons, but many of them seem to focus on what’s best for sites instead of what’s best for apps. Here is a summary of my research so far:

Bootstrap 3

  • Seems like the most popular choice
  • Built in LESS (I’m not really familiar with LESS or SASS, but it seems like SASS is becoming more popular and might be more powerful?)
  • Lots of components
  • Excellent documentation
  • Version 4 is in alpha and has lots of changes - is this the right time to be starting a new app in BS 3?
  • Not sure how well js components will work with React
  • Default styling is ok, but not amazing

Bootstrap 4

  • Seems to have lots of improvements over BS3
  • Built in SASS
  • Only in alpha - probably not ready to develop with yet

React-Boostrap

  • Seems like a great project re-implementing BS3 as React components
  • Docs need some work still
  • Not at 1.0 release yet and seems to have a ways to go. Not sure if this is ready to use yet.

Semantic-UI

  • I love the approach this framework takes using variables and making it easy to override the theme. BS4 may be similar though.
  • Seems to be actively developed, but I don’t see much be written about it. Lots of blog posts in 2014 but I don’t see many reviews or bootstrap comparisons in 2015.
  • Built in LESS
  • I find the docs cumbersome to read and understand
  • Docs say it plays nice with React (using component life cycle methods), but they only give one example. It’s not made very clear how to integrate components like modals with React cleanly.
  • There are a couple of projects out there which look like they were started to implement Semantic-UI as React components, but they don’t seem to be very far along.
  • Default styling looks great, comes with several themes, and easy to change

Foundation - There seem to be two flavors of foundation: Sites (optimized for websites, not apps) and Apps (built in Angular, not necessarily compatible with React). Neither of these fit my use case.

Elemental UI - Great idea, but doesn’t look ready for prime time.

Material UI - I don’t particularly like the look of Material UI on the desktop.

What are others using and why? I appreciate any guidance. Thanks!


#2

I am also in search of a great ui framework for react. I am a fan of Semantic ui but Semantic ui is based on JQuery which I don’t want to use in a React app. React tool box http://react-toolbox.com/#/ is a good choice if you want to use material design.


#3

I’m working exclusively with Semantic UI, after roughtly a year with bootstrap 3. I think it’s a very reliable solution, and incredibly easy to implement compared to the power it bringes.

I’m currently using it with React (no bridge-plugins). I think prebuilt components with semantic wouldn’t be flexible enough, but hey - what do I know? :smile:

Am excited to see BS4 soon™

EDIT: DOM mutations using Jquery is a big ‘no no’ in Reactland - It seems obvious to assume this is because it doesn’t utilize Reacts virtual DOM… and well, Semantic relies heavily on JQuery…


#5

React toolbox seems great. Did anyone succeed into integrating Meteor+React toolbox ? I couldn’t find a way after several days playing around with browserify or webpack…


#6

Same problem here ((


#7

My current approach is to use only the CSS from Semantic UI. For complex things like modals, I’m looking for a pre-build React component that I can style with the Semantic UI classes. For simpler things like tabs I’m thinking I will just build it myself, again using the Semantic UI classes. I’m finding that things that were annoying enough to want a JQuery plugin are sometimes simple enough in React land that it’s a 15 minute exercise to roll my own.


#8

Wow! React Tool box is mouth-watering! Time to give to the :boot: to bootstrap with :heart:


#9

I know this topic is old but anyway it was my first result googling “meteor react css framework”.
@zafaransari it seems like react-toolbox URL changed to http://react-toolbox.io/#/
Also, if someone more reach this topic, here is a more actual comparison between react css frameworks :+1:t4: