Thursday, December 3, 2015

The best Material Design Frameworks for the Web

11:38 PM Posted by Unknown , No comments
In an attempt to bring Material design to the Web user interface, many third party (not from Google) web UI frameworks have come to existence recently. In this post I will be doing a roundup of these Material Design Web UI frameworks. Some of these frameworks are themes based on the popular web UI framework, Bootstrap.

1. Materialize

materialze-framework-material-design
Materialize is a modern responsive front-end framework based on Material Design. For use in your web projects, it provides an option of both CSS as well as source SCSS files, along with JavaScript, material design icons and Roboto font. Included components are basic ones such as grids, forms, buttons, navbar and cards. Materialize is available on GitHub as well.

2. Material UI

material-ui-css-framework
Material UI is a CSS Framework and a Set of React Components that implement Google’s Material Design. It provides support for components such as Buttons, Dialog, Dropwdown menu, Icon buttons, Inputs, Switches, Toolbar and more. You can find Material UI on GitHub too.

3. Paper Bootswatch for Bootstrap

paper-bootstrap-material-design-theme
Paper is a bootswatch theme for the Bootstrap framework. It includes all the components that Bootstrap provides but in a Material design skin.

4. Bootstrap Material

bootstrap-material-design
Similar to Paper, Bootstrap Material is another theme for Bootstrap framework and provides all the components included in Bootstrap. On top of that, it also includes support for 740 original Material design icons from the Google Material Design Icons repository.

5. Leaf BETA

leaf-meterial-css-framework
Leaf is CSS framework developed by Kim Korte based on the Google’s material design. While still in beta, it has extensive list of components such as buttons, cards, sliders, menu, tabs etc. It includes icons by Icomoon, instead of the original Material design icons. Leaf is also available onGitHub and is open for contributions and feedback.

6. MUI CSS Framework

mui-meterial-css-framework
MUI is a lightweight HTML, CSS and JS framework for building sites following Google’s Material Design guidelines. MUI is designed from the ground up to be fast, small and developer friendly. By design it only includes the basic components you need to build a site that follows Google’s Material Design guidelines. MUI CSS/JS has no external dependencies. MUI is also available onGitHub and is open for contributions.

7. Polymer Project

google-polymer-paper-material
Google’s Polymer Project is a web framework and their embodiment of material design for the web. While still in “developer preview”, most of the components (a very extensive set) are quite mature. Polymer aims to support all major modern browsers such as IE (10+), Chrome, Safari, and Firefox. Extensive set of documentation and getting started guide is available at the Polymer Project.

0 comments:

Post a Comment