There are several different web design languages: flat, material, realism, mobile-first, metro, etc. Usually each front-end framework specializes in only one of them. For instance, Bootstrap is based on the mobile first design language, while Foundation uses flat one. Every design has its own benefits and application, so you should pick it based on software goal, product requirements, target audience, and other factors.
Material design is a nice middle-ground popularized by Google. It has taken simplicity and neatness of the flat design and combined them with the motion and depth of realism. This design language mimics the way things work in the real world, but simplifies everything to avoid overload.
This is where Materialize should be introduced.
Materialize is an open source responsive front-end framework that offers slick material design out-of-the-box. This tool is based on Google’s Material Design Language. It is primarily a UX framework that dictates how elements will appear and behave on the page. Materialize follows Google’s Material design concepts and principles by introducing physics, space, light, and motion into design. This means that apart from width and height every element has depth.
Materialize comes with a CSS (written in Sass) + JavaScript framework together with sets of components and icons. Similar to Bootstrap Materialize utilizes 12 column grid system as a basis for responsive element layout. Variety of UI components is not as rich as in Bootstrap, but there are several components that Bootstrap doesn’t provide, like parallax and toasts. As for browser compatibility, Materialize works with all modern browsers, including Internet Explorer 10+.
Materialize is a single underlying system that works across all platforms and all devices, takes care of everything: basic styling, custom components, animations and transitions. This framework is still quite new but very promising tool that will accelerate development and improve user experience. For more information visit Materialize website.