Bootstrap or Materialize and Material UI?

react
1

I’m about to embark on my first Meteor+React SaaS. I’m pondering over whether I should use Bootstrap (4.0 is around the corner), or go with Materialize. Or if it matters, even. Materialize UI looks cool, as it provides out-of-the-box UI components for you to use, but I think I might want to incorporate my own look and feel into my site.

Thoughts?

2 Likes
2

I tried both and came back to Bootstrap. The main reason was

  1. There are situations where Materialize does not handle certain nestings of elements properly, resulting in a strange look. This does not happen too often, but it happened.
  2. Their Sass support was not good, the structure of their Sass files did not allow me to pick which parts I actually wanted for my site. It’s a “all-or-nothing” thing, or you have to patch it a lot.

I’m still using some of the Materalize parts, but it was quite a challenge to pick them due to 2.

If you like Material Design, you might also want to consider the official Google version Material Design Lite:
http://www.getmdl.io/

3 Likes
3

Yeah I’m really not a big fan of Materialize at this point. I think the React-specific Material UI is much better: http://material-ui.com/#/

I haven’t tried MDL

1 Like
4

I’m using semantic-ui.com and really like it. Lots of options to choose from and you can easily change the themes.

2 Likes
5

I’m also using semantic-ui.com on a current project with Meteor & React - all three are working very well together, a few little things here and there but certainly nothing major - all in all a very pleasant, painless development experience. (And the fact that all three projects are in the Top 30 starred on github takes a lot of worry off the table vis-a-vis future support).

2 Likes
6

I am also playing with Material-UI + flexbox for now.
MDL is really just very basic, at least from my short experience.

7

I installed both packages in one meteor. Looks like both can work together. :smile:

8

in my experience, materialize is really, really brittle. great for vanilla, but anything more & it starts to fall apart. material ui has been amazing so far. small changes to the components are really simple. if you want to make a big change, just copy the component code & go to town.

4 Likes
9

I’ve been playing around with fezvrasta:bootstrap-material-design package and I really like it. It’s just bootstrap, so everything bootstrap works like it should, with a material design theme. If you aren’t sure if you like material design, this is probably the way to go, because you can remove it just by removing the package and all your bootstrap will still work as it should.

10

or Semantic-UI (has a material theme built in)

11

Apart from likes (personal preference) what are the pros and cons between the three UI frameworks? I’m planning to use MeteorKitchen (http://www.meteorkitchen.com/) and it has Boostrap, Materialize and Semantic-UI as options to use.

My app is desktop first and adding breakpoints for midsize and small screens later on shouldn’t be a problem, right?

I think from looking at all three, Material UI clearly has the most elements to use (apart from Semantic UI) but I’m a bit afraid of reading several warnings like this one: “This makes it a little difficult for non-programmers since one need to have a fair understanding of JavaScript, JSX syntax and basic React concepts”.

Bootstrap Material Design has very few in comparison, it doesn’t even have cards which is essential for my design: http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

These two articles are giving a good overview:

Frontend UI design frameworks:

Material Design specific UI design frameworks:

As I’m set on using Material Design and I eventually want to change it to Polymer anyway (when Polymer is working better with Meteor) to me the choice comes down to Material UI or Semantic-UI. Both offer a huge collection of elements and are very close to MD guidelines.

12

Apart from likes (personal preference) what are the pros and cons between the three UI frameworks? I’m planning to use MeteorKitchen (http://www.meteorkitchen.com/) and it has Boostrap, Materialize and Semantic-UI as options to use.

My app is desktop first and adding breakpoints for midsize and small screens later on shouldn’t be a problem, right?

I think from looking at all three, Material UI clearly has the most elements to use (apart from Semantic UI) but I’m a bit afraid of reading several warnings like this one: “This makes it a little difficult for non-programmers since one need to have a fair understanding of JavaScript, JSX syntax and basic React concepts”.

Bootstrap Material Design has very few in comparison, it doesn’t even have cards which is essential for my design: http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

These two articles are giving a good overview:

Frontend UI design frameworks:

Material Design specific UI design frameworks:

As I’m set on using Material Design and I eventually want to change it to Polymer anyway (when Polymer is working better with Meteor) to me the choice comes down to Material UI or Semantic-UI. Both offer a huge collection of elements and are very close to MD guidelines.

13

@ffxsam I’m just curious what did you end up choosing and how was your experience?

14

Hey @alawi!

I started out using Bootstrap for my grid, and Material-UI for my UI components. I eventually wound up ripping out Bootstrap completely and relying on a more “app-like” approach by using 100% flexbox and media queries.

IMO Material-UI is great for an MVP, but my plan is eventually to gut it as well and build my own custom UI components down the road.

2 Likes
15

Next time, take a look at https://ant.design. It is a React first toolkit, significantly more feature complete than Bootstrap/Materialize, better touch support, and with a 100% mobile version available as well. Well documented and supported with heavy corporate backing and very active development.

The only reason it is not widly used is that up until 2 months ago the documentation was all in Chinese.

3 Likes