The 15 Best Material Design Frameworks and Libraries

The 15 Best Material Design Frameworks and Libraries

Material design was developed by Google, with the basic idea to create a unified style for all of the company’s web and mobile apps. It is based on many principles including things like proper animations, responsiveness, and smart usage of colors and shadows. You can read about the guidelines in full detail here.

Although Google’s design language is seen mainly in native Android apps, it’s still a great choice for web and hybrid applications. To aid users in the creation of web projects rocking the Material look, there are many frameworks and libraries offering ready-to-use components and styles. Here is our list of the top 15!


mdl

Material Design Lite

Material Design Lite is an official Google framework, so you can always expect the components to be up to date with the latest standards of the visual language. It looks fantastic, is relatively easy to use, and has no external dependencies.


materialzie

Materialize

This is a front-end framework for building responsive web apps and sites. It’s really simple to get started with, especially to people familiar with other similar projects, such as Bootstrap. A cool feature is the SASS version, which allows users to choose which components to include.


material_ui

Materual-UI

Material-UI is a rich set of React components implementing Material Design principles. This is a very polished library featuring pixel-perfect CSS styles and animations. There are also two separate themes for users to choose from – dark and light.


5_mui

MUI CSS

This is one of the most lightweight framework on our list, without any external dependencies and only 12kb gzipped for the CSS and JS. It offers React support, customization via SASS files, and has a separate inline version for styling emails.


6_polymer

Polymer

Polymer is another Google product on our list. It’s a library for building fast, reusable web components which then you can import in your projects. Polymer offers a big selection of ready-to-use elements, organized in seven categories. One of them is called Paper and is full of Material Design components.


7_ionic_material

Ionic Material

This is an extension library for the Ionic hybrid mobile app framework. It adds new classes, methods and helpers alongside a fresh set of CSS styles to bring the Material look to Ionic, without changing the way apps are developed with the framework.


foundation

Material Foundation

The Zurb Foundation framework is another popular tool for building responsive websites and apps. This is an independent set of components that offers a quick way to add a Material twist to some of Foundation’s elements. It looks pretty good but doesn’t include many key Material Design components.


12_surface

Surface

The result of a two-week long experiment, Surface is a CSS only framework in which many of the classic Material UI components are recreated without the help of any JavaScript or other programming languages. Since it consist of just one CSS file, it’s extremely lightweight and easy to use.


13_essence

Essence

Essence is a CSS framework based on React and React Native. It allows developers to build super-fast and at the same time great looking web & mobile interfaces, implementing the Material Design specification. Using npm you can install the whole library, or just the modules you really need.


14_lumx

LumX

This Angular.js-like framework provides many, well-animated CSS and JavaScript components. For the layouts and styles LumX uses the Sass-based library Bourbon, and for the animations the popular Velocity.js. By combining these and some other plugins, LumX is able to offer a wide range of tools for building responsive web apps.


8_paper

Paper Theme for Bootstrap

The guys at Boostwatch make a lot of cool Bootstrap themes, including one imitating Material Design, called Paper. It doesn’t have all of the classic Material components, but it is still a great option for people who already work with Bootstrap, since they don’t have to change absolutely anything (except for importing the theme) to get a modern looking app.


material_for_bootstrap

Material Design for Bootstrap

Another great option for Bootstrap enthusiasts. This is an actively updated theme for the front-end framework, which adds new styles and a number of JavaScript and jQuery plugins to apply Google’s design language to Bootstrap. A big plus here is the active community on GitHub (over 14000 stars).


4_angular_material

Angular Material

AngularJS is a hugely popular open-source framework for web development. It’s primarily maintained by a team in Google, so it’s no surprise it gets is own version of a Material Design kit. For now it works only with Angular 1, but it most probably will get a port for the second version as well.


10_material

Material

You can think of Material as a UI framework that is the perfect mix between Bootstrap and MDL – it works very similarly to Bootstrap (almost the same grid and HTML), but adds on top of that many Material components such as cards and pop-out date pickers. Most of the traditional Material Design elements are present here and are made to look spot on.


15_phonon

Phonon

The Photon framework is dedicated for the development of hybrid mobile apps. Since it’s only around 60kb and does not depend on any third party libraries, it can be used to create Cordova and PhoneGap applications that are very lightweight. The look and feel of Photon’s UI components follow closely Material Design’s concepts.


A Suggestion From Our Readers: Framework7

Framework7 is a created with hybrid mobile apps in mind. It allows developers to quickly build web apps that imitate the appearance and behavior of native iOS and Android. To make that possible there are two distinct themes – one for Apple devices, and the other one offering Material Design components and styles.


icons

Bonus: Material Icons

This is the icon set that Google uses in most of their web, Android and iOS apps. There is a huge list of icons to chose from and more are being added all the time. It’s completely free and very easy to implement through Google Fonts or other methods.

Conclusion

Most of the libraries and frameworks on our list offer similar components and overall features. It’s up to every individual developer to decide which one works best for them and their current project. We hope we’ve helped you make the right choice!

 

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Danny Markov

Danny is Tutorialzine's Bootstrap and HTML5 expert. When he is not in the office, you can usually find him riding his bike and coding on his laptop in the park.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.

Download

8 Comments

  1. Tarek says:

    You forgot to mention Framework7

    1. Danny Markov says:

      Thanks for the suggestion Tarek!
      Framework7 is great, we will add it to the list.

    2. Moxet says:

      Thank you for the mention, i chose FrameWork7 for my next project <3 plus thanks to Danny for awesome collection.

  2. Bondifrench says:

    There is also Polythene (http://polythene.js.org/) a Material design components library for the Mithril.js framework (a lightweight, fast and highly composable MVC javascript framework)

    1. David says:

      Thank you for this link !

  3. Michael M says:

    Thank you for the round up.

  4. Argelius says:

    Material Design components has been added to the Onsen UI library

  5. Gina says:

    Thanks for the great information!

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links