Material-UI Intergration into Foundation?

Regarding Material-UI:

  1. Is it possible to use material-UI (https://material-ui.com/) with Foundation?

  2. Is there a walk through on how an external UI library may be integrated?

Sorry for all the questions but I’m hoping to take advantage of some of there components on an existing website built with Foundation.

Mixing frontend frameworks is highly discouraged in general. These are two totally different frameworks which rely on totally different design principals (ZURB Foundation vs Material Design).

Also you might have several issues due to the fact that Foundation Sites still requires jQuery to work. At least there is at least one component collection for React for Foundation Sites.

Both together may cause many conflicts regarding global styles and single components. In short: no we never tried this in projects as this does not make much sense.

Thanks @DanielRuf - very helpful and informative as usual. I fell down the rabbit hole looking into UI trends and stumbled on those components as being visually appealing.

I found a platform claiming a “material-io” + “bootstrap” integration so I wondered what the process is for something similar with my preferred framework - Foundation. Looking at that site it appears there is a jquery approach to get those components so there may be an easier solution than combining different dependencies or javascript libraries. I do see your point though how this may conflict with Foundations core design elements.

I started out only wanting to incorporate a nice multi-step form along these lines: https://material-ui.com/components/steppers/#stepper ~ i definitely did not want to have to combine frame works to do it : /

It appear Material Design mentions ways to incorporate in existing frameworks but this is way beyond me and no idea of the implications: https://material.io/develop/web/docs/framework-integration

Material, Bootstrap, and Foundation are 3 frontend frameworks that serve the same purpose. Material and Bootstrap come out of the box with very strong design directions already applied by default. Foundation is powerful, but I think is made for you to be able to add your own design decisions. You know what Material looks like. You likely know what Bootstrap looks like also (though you can create or download pre-made themes that change the defaults). Foundation is closer to a blank canvas, where you can create your own brand instead of borrowing Google’s. It just depends on what your goals are. I agree with Daniel about not mixing them.