Switch from `materialize` to `mdl`

[mitchhentges]

MDL doesn't require jQuery for neat-o "wave" effects, and it's a lot smaller. Additionally, the materialize library has been giving some grief, with the media queries changing values and making some elements out-of-line. Ideally, a simpler material-design css framework would simplify this.

[tomitm]

MDL is definitely a nicer and more complete MD library. :+1:

[nerdbeere]

Makes sense to me. I never really liked materialize. :+1:

[tomitm]

There's also Material UI which is a set of React components.

[kokarn]

I've done some work with Material UI, it's really nice and well built. Also under active development.

[tomitm]

I'm prototyping something using Material UI at the moment, it is really nice. Really tempted to recommend going that route with James. I'll see how much I still like it after I'm done this. :wink:

[tomitm]

So, the JS for mdlite "upgrades" elements, which seems to interfere with React's event handling (click, etc) for elements. So when you click on something... nothing happens. Using mdlite without the JS is a bit quirky (input placeholders, for example). I'm not sure if I'm doing something wrong, but it's crapping out on my fairly simple prototype, and I get the feel that MDL isn't really meant to be used with React.

Material UI seems nice, except apparently performance for list-items is terrible, so I'd be weary about using that.

I'd either go with something like MUI, or there seems to be a bunch of smaller material react component libraries. Or, just DIY without a library would work too.

[mitchhentges]

When in doubt, diy is possible :) It's not like we need to be 100% compliant with the material spec anyways, we just need James to look good On Feb 24, 2016 7:49 AM, "Tomi" [email protected] wrote:

So, the JS for mdlite "upgrades" elements, which seems to interfere with React's event handling (click, etc) for elements. So when you click on something... nothing happens. Using mdlite without the JS is a bit quirky (input placeholders, for example). I'm not sure if I'm doing something wrong, but it's crapping out on my fairly simple prototype, and I get the feel that MDL isn't really meant to be used with React.

Material UI seems nice, except apparently performance for list-items is terrible, so I'd be weary about using that.

I'd either go with something like MUI, or there seems to be a bunch of smaller material react component libraries. Or, just DIY without a library would work too.

— Reply to this email directly or view it on GitHub https://github.com/james-proxy/james/issues/122#issuecomment-188107715.

[kokarn]

I'd probably go with material-ui and then https://github.com/orgsync/react-list for the lists :)

On Wed, Feb 24, 2016 at 11:05 AM Mitchell Hentges [email protected] wrote:

When in doubt, diy is possible :) It's not like we need to be 100% compliant with the material spec anyways, we just need James to look good On Feb 24, 2016 7:49 AM, "Tomi" [email protected] wrote:

So, the JS for mdlite "upgrades" elements, which seems to interfere with React's event handling (click, etc) for elements. So when you click on something... nothing happens. Using mdlite without the JS is a bit quirky (input placeholders, for example). I'm not sure if I'm doing something wrong, but it's crapping out on my fairly simple prototype, and I get the feel that MDL isn't really meant to be used with React.

Material UI seems nice, except apparently performance for list-items is terrible, so I'd be weary about using that.

I'd either go with something like MUI, or there seems to be a bunch of smaller material react component libraries. Or, just DIY without a library would work too.

— Reply to this email directly or view it on GitHub <https://github.com/james-proxy/james/issues/122#issuecomment-188107715 .

— Reply to this email directly or view it on GitHub https://github.com/james-proxy/james/issues/122#issuecomment-188173247.