7 Material Design Web UI Frameworks

Ever since Google announced their new Design Language, the Material Design, there has been a lot of excitement around its animated elements, colors and layout principles.

material design web ui framework

If you have never heard of Material Design before, or haven’t had the time to see the official Material Design spec by Google before, then I strongly recommend you to see them now in order to understand its principles.

With Material Design, Google wants to bring uniformity to its UI on all platforms including web, and not just Android. Google has its own Polymer Project which embraces material design throughout its Web components. In fact, Polymer Project played a key role in material design’s development and in showcase of Material design concepts for the Web. However Polymer project is still in early developer preview and not yet ready for production.

Material Design Frameworks for the Web

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 on GitHub and is open for contributions and feedback.

6. MUI CSS Framework

mui-material-design-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.

Material Design Web UI Demo

If you are looking for some material design web UI demo for inspiration, then have a look at these (in chrome for best experience) which are created using the Polymer Project.

1. Topeka

topeka-material-demo

Topeka is a fun quiz app built using material-design based paper-elements

2. Paper Elements

sampler-paper

Paper Elements is a sample showcasing Polymer elements based on material design

3. Paper Calculator

material-calculator

A calculator app mockup highlighting material ink effects

Future of Material Design

Only time will tell the success and penetration of Material Design in web and other platforms. Will it become become another hot topic like the flat design? A large part of it depends on the interest as well as availability of developer and designer tools and we are surely seeing some momentum building up with these Web UI frameworks.

What are your take on the Material Design? Do you love it and want to adopt it in your projects?

Filed under: DevelopmentTagged with: ,

You may also like..

About the author

Kanishk Kunal

Kanishk is a passionate developer and creator of many successful apps and websites. He devotes most of his time punching his keyboard and swiping his smartphone.

12 Comments

  1. Great list! Will try some of them on my own site. Thanks for the tip!

  2. material design is new and nice trend . thanks for this article.

  3. Hi! Great article! I’m a developer on a mobile UI framework called Onsen UI. We recently released Material Design components that can be used in both Angular and React: https://onsen.io/v2/

    • Hi Argelius,

      Onsen UI looks good and we would be glad to write more about it. You can get in touch with us using our Contact page.

      Thanks,
      Kanishk

    • Wow that’s super cool bro! •O•

  4. Enlighten info on Material design,
    I’m a novice in web design,just starting out with HTML & CSS.I have a question if you dont mind.Can material design be used separately for webdesign or it has to be used with some server language like Python and Material design itself used in frontend development?

    • Hi Bolaji,

      Material design is a design concept that can be applied to any front-end design. You don’t need to depend on any server language for it. In fact all the framework listed above are for front end development and can be used together with any server language.

  5. Thanks for this article.

    For those whose more familiar with bootstrap and want to implement MD without using another framework,
    I would recommend mdbootstrap.com instead of FezVrasta’s “Material design theme for Bootstrap 3” .. because it’s richer and well documented. my personal perspective.

    Thanks again for the effort!

  6. I wonder how could you missed Material Design for Bootstrap (http://mdbootstrap.com) ? :)
    IMHO currently this ist the most comprehensive framework.

  7. Thank’s a Lot for this article, recently i’m using Bootstrap for my site. But migration always make me headache, i was helpfull and take some inspiration from your article..

Add a Comment

Your email address will not be published. Required fields are marked *

Comment *

Name
Email *