Are you building websites, web apps or mobile apps without using one of these super helpful material design frameworks? May be it is the right time to look at this list of material design frameworks and start using one to speed up your design workflow, and to create material design compliant UX/UI.
The biggest advantage of using an existing material design framework is that you get ready to use material design compliant CSS and components out of the box, and spare yourself from building components and css from scratch.
There are many production ready material design frameworks out there in the wild, available as open source, free to use, including Materialize css, Material-UI, Bootstrap material design, Angular Material and Polymer to name a few.
Before moving to the details of these Material design UI frameworks, let us talk very briefly about what material design is, why it came into existence and where is it taking the modern UX/UI design.
Back in 2014, Google released the first of its kind visual design language in an attempt to standardize the design of chrome OS, web apps, Android apps and its own iOS apps. These guidelines were released because it was important for Google to set standards for developers and designers in the world of open source design & development.
You might also like – Front End Frameworks.
Within months of its release, Material design became so popular that not only Google ecosystem but the web as a whole has transformed into all new look and feel inspired by material design principles. Web designers from across the globe have started to use material design css and components for individual projects and big design houses have built web development frameworks around material design guidelines to shorten the design life cycle.
Here is the list of best 10 material design frameworks available as of today, open source and free to use. You can pick one that suits best to your requirements, you might favor one over the other depending on whether you are historically a Bootstrap lover, Angular fan, ionic developer or believe in building websites, web apps and mobile apps from scratch.
1. Materialize css
Materialize is among the first few web frameworks that offer css and components built as per Google material design guidelines. It is the creation of students from Carnegie Mellon University and is available as free to use, open source framework, under MIT license.
Materialize css is a complete package for small projects as well as for building large scale responsive websites and HTML5 hybrid mobile apps. It includes css for color, typography, tables, grids and also helper classes etc. to name a few. Materialize css also comes packed with css to embed responsive images and videos the design. The framework is detailed to the level that it includes css classes even for vertical alignment of elements on the webpage.
When it comes to ready to use material design compliant components, Materialize includes Navbar, badges, buttons, forms, pagination and cards etc. and JavaScript implementation includes dialogs, parallax, modals, waves, tabs, pushpin, sidenav, ScrollFire etc., to name a few.
There are many projects using materialize css framework and running in production, check them out in action at – Materialize Showcase.
Materialize framework is built using SASS, one can download source scss files and include selective css and components as per the project needs, download ready to use minified versions of complied CSS and JavaScript as well as refer css and javascript files from the cdn.
Read more about Materialize CSS at the official website – materializecss.com.
2. Material-UI (Deprecated)
Material-UI is another very professional grade and cleanly built framework that implements Google’s material design. This one is the creation of engineers at Call-Em-All and they are currently using it in their own projects.
Developers of the framework have made it available as open source under MIT license and they are maintaining it actively to ensure changes or new additions in material design guidelines are incorporated.
Material-UI components run on top of Facebook’s Reactjs library. Everything in the framework is a React component except for basic CSS classes for material colors and typography etc. This makes it a little difficult for non-programmers since one need to have a fair understanding of JavaScript, JSX syntax and basic React concepts.
Framework is pretty much customizable and you can override style for most of the components by passing custom CSS classes as props (reactjs vocabulary) to the component under consideration. Roboto fonts are at the core of Material UI framework for a clean modern look and feel. Framework is built in less but sass version is available as well for download.
Material UI is available as npm package, you can download the free material ui package here- material-ui package.
3. Bootstrap Material Design
Built by Federico Zivolo, this one is definitely for all the bootstrap fans and also for anyone who is planning to start afresh with a new web project. It would not be completely right to call it a framework since it is a theme built using bootstrap 3 that implements Google’s material design.
It comes packed with components and css compliant with material design guidelines and is so customizable that you can create almost any layout and achieve any design just by making minor configuration changes.
Bootstrap Material Design offers best of both the worlds, Bootstrap as well as material design. Bootstrap is the best web framework if you want to build a responsive website at lightning speed and material design is the design philosophy that is raging at the moment.
You get Bootstrap elements dipped in material design, these include tabs, navbars, typography, buttons, progress bars, sliders, panels, bootstrap ready to use layout, grid system, responsive css3 and anything else that is material design.
This is a definitive go without a second thought if you are among those who do not believe in building websites from scratch. Get the theme here and you are all set for your next web project with material design based UX/UI.
Read more about Bootstrap Material Design theme at bootstrap-material-design.
4. Angular Material
Running under the hood of AngularJS, Angular Material is a complete framework that implements Google’s material design and provides reusable, accessible and well tested UI components based on material design.
Available as open source under MIT license, Angular Material is created and maintained by none other than Google’s team who created material design guidelines in collaboration with Google’s Angular framework developers.
As you can expect, a framework in the Angular ecosystem would run on directives. All material design components are available as angular directives and services, behavior of components can be controlled by the use of attributes. An example would look something like below –
<md-button ng-disabled=”true”> Disabled Button </md-button>
You can customize typography, colors and other components using the themeing layer of the framework. Angular Material also features grid system based on flex using which you can create any possible web layout you can imagine.
Angular material package is available on GitHub and can be built using npm and Gulp, or alternatively, you can get the distribution files and install locally using Bower. CDN version of Angular material is available as well on Google Hosted Libraries.
Read more about Angular Material at official website at – material.angularjs.org.
5. Polymer
Polymer is based on web components, the technology from W3C that allow to bundle up html, CSS and the behavioral elements in a fully encapsulated package which can be reused across the web by anyone.
Polymer comes packed with collection of custom web components that implement Google’s material design. At the core, you get paper elements collection that includes paper-button, paper-checkbox, paper-action-dialog, paper-dialog-base, paper-dialog transition, dropdown, menu, ripple, shadow, you name anything material design and you get that in Polymer.
Polymer is one of the cleanest implementation of material design and is future proof since it runs on web components, the support for which is inherent to all new web browsers. Read more about Polymer at official website – polymer-project.org.
6. MUI
MUI too is available under MIT license, free to use, open source but is still work in progress. It is a very small package and not yet in the league of professionals. Framework is built grounds up with pure JavaScript. However, ReactJS and web components version is on the way for greater flexibility and wider compatibility.
You have the option to customize material design colors, breakpoints and font settings etc. by making changes in the source Sass files available in the package.
The framework is under active development, not production ready yet but the roadmap looks very promising and one can definitely look back at MUI after a couple of months to give it a try.
Read more about MUI framework at – muicss.com.
7. Ionic Material
Ionic is an advanced framework for developing hybrid applications in HTML5, it is open source and free to use under MIT license. Ionic Material is aimed at developers working on ionic framework and is available as an extension library. This essentially ensures that ionic hybrid app development workflow remains the same and ionic developers get an option to incorporate material design experience in hybrid mobile apps, out of the box.
One of the key differentiator of this framework is that motion, ink and depth is created using hardware accelerated CSS which gives you a big advantage in terms of performance. Other features include
- Ink effects as you interact
- Option to extends Ionic classes
- Option to easily integrate with ionic directives
- Option to develop reusable themes around it.
If you are an ionic developer, there is no reason to look around for other material design frameworks or putting in efforts to create your own libraries from scratch. IonicMaterial is professional grade and actively maintained web development framework that seamlessly fits into ionic app development workflow.
You might also like – Best mobile framework list including Ionic.
8. LumX
This is another framework for Angular fans, built with Sass, Bourbon, Neat, jQuery and fuelled by Angularjs. Angular developers already have Angular Material which is top of the grade material design implementation but expect nothing less from LumX, created by Google cloud platform experts, LumaApps.
LumX is fully responsive framework and uses core jQuery without any additional plugins to ensure better performance. This framework is still improving on and has a clear roadmap defined, let us see how well it competes with Angular Material and other material design frameworks in the days to come.
Read more about LumX at official website- ui.lumapps.com.
9. Nt1m/material framework
Nt1m is the creation of Tim Nguyen, it is a simple responsive css only framework that can be used in any web page or web app. Tim has taken a different approach and created css only implementation of material design components, to the extent possible.
This is a great effort and an absolute fit for small projects and for web designers who do not really like to play around with JavaScript. You just need to include the material.css file in your project or the minified version of it.
Read more about Nt1 material framework at nt1m.github.io, or download the css at – material-framework.
10. Paper
Paper is a customizable theme that implements material design using Bootstrap, icons from font awesome and web fonts from Google. This is one of the themes offered by Bootswatch.com, created by Thomas Park and available to use under MIT license.
Like Bootstrap material design, this one also gives you a head start with any new project, you get material design flavored base theme, ready to use, and options to customize it and make it the way you would like to.
Know more about Paper Material Design theme at – Github.
Final Thoughts
Material design is raging at the moment and the whole web and mobile ecosystem is undergoing a mass scale redesign influenced by Google’s material design principles. Frameworks around any new design paradigm are necessary and that is what we are witnessing here with material design.
Many frameworks are mushrooming everywhere that implement GMD, most of which are still WIP though. Let us see how these frameworks shape up and where does web goes from here with material design. Cheers!! Be materialistic and share your thoughts via comments!
Further Reading
