I’m starting my first large Meteor project with React. I suck at design and have limited front-end experience so I need a simple UI framework.
Material UI seems like an obvious choice because:
Pros:
designed for React
requires less CSS
actively developed on GitHub
working Leaderboard Meteor demo
lots of components
Cons:
no grid system
if I hire a designer down the road they may have a tough time

I’d really appreciate any feedback especially regarding:

Any Meteor specific pitfalls?

Does it work with Flow Router?

Recommendations for handling responsive layout without a grid system?

Other examples besides Leaderboard?

Should I use an Atmosphere package like izzilab:material-ui or should I build the NPM package with meteorhacks:npm and cosmos:browserify?

I’m building the package with npm/browserify. It works fine so I haven’t tried izzilab:material-ui.

With your designer you can always swap out the material components that they want to replace with whatever they design. They’re good defaults so I wouldn’t worry too much about that. Also, letting designers work with pre-defined components can let them focus on other things like UX and aesthetics.

My take on this:
Use these packages if your going to use Material design…
materialize:materialze

Meteor specific pitfalls for materialize:materialize? Don’t use 0.97.1 for now… there are bugs on that release that breaks the whole Meteor system…

it works well with kadirahq:flow-router, kadirahq:blaze-layout, useraccounts:core, useraccounts:materialize, aldeed:collection2, aldeed:autoform, and aldeed:autoform-materialize

Recommendations on handling responsive layout without the grid system? You’ll really need the grid system if your going to use such frameworks, unless you will use Polymer 1.0

If you want a lighter one, just bower install MDL (httpL//getmdl.io) into your public folder and then load the min.js to your app… or just put the min.js to you and min.css to your client folder.

If you want a better one (imho), bower install webcomponents from Polymer 1.0, which uses Material design when you use paper-webcomponents… You might need differential:vulcanize to load them. And there are hacks that you need to work on. You can see my polymer comeback demo git repo here for more: https://github.com/tjmonsi/meteor-polymer-comeback

I’ll keep updating it (and I’m planning to create a tutorial on how to create a polymer meteor project)

If you really want Material UI, you’ll need kadirahq:react-layout to be able to use for flow-router (Sorry it just crossed my mind that there is a Material UI package built using React, thought it was something else)

Currently my take as well on this is that Material UI package is much slower than Angular-Material, MaterializeCSS and even getMDL… anyone experiencing the same?

Just my 2 cents - I’d avoid Materialize if I were you. I started with it and then recently spent two weeks ripping it out of our production app because it caused so many weird css issues. I’ve started using Semantic UI for most things and it seems to work great. I also think it looks a lot cleaner than the Material look (which I’m not a fan of).

Does anyone else think that it is very slow compared to the alternatives?

I like the idea of Material UI (not Materialize or MDL) because it is primarily a collection of React components as opposed to a full on framework.

I got Material UI working in Meteor using npm and browserify. It was a little difficult because there are major changes in the latest version that break the Leaderboard example.

I found an excellent example on Github by rkstar that addresses the numerous pitfalls. The only issue I had is that I had to build it first with Material UI version 0.12.3 and then once it was running I updated the packages.json file to version 0.12.4. Not sure why this was necessary.

There is also a Meteor package izzilab:material-ui that worked, but I think it is a few minor versions behind.

I also moved to react… With using Meteor Webpack it is easily to import npm modules. For my front end stuff I use ANTD. Main page is in chinese, but with chrome right click, you can translate to your language.

The only issue I had is that I had to build it first with Material UI version 0.12.3 and then once it was running I updated the packages.json file to version 0.12.4. Not sure why this was necessary.

That was because 0.12.4 introduced React 0.14, which was a breaking change. That’s now fixed again with 0.12.5 which uses React 0.13.x. Material-UI 0.13 reintroduces React 0.14, so avoid that version of Material-UI until Meteor supports React 0.14.