There’s been a lot of buzz about Google’s new design language: Material Design. It’s a mobile first approach design system and nowadays, it is creating a new excitement among front-end designers.
Material design looks like a flat design, but it is equipped with bolder colors, more depth, interactive elements and better tradition effects. The idea is to make everything simple so that anyone can understand, even it’s a new website/app with brand new functionalities.
Not sure about the future, but for now, Google doesn’t provide any official framework for Material Design. However, Google has its own Polymer Project (in developer preview) which embraces their new design language. We’ve compiled a list of front-end frameworks based on Material Design that will help you create modern websites/apps with minimal effort.
All these frameworks are free to download and use.
Table of Contents
18. Material CSS
A lightweight framework for Material design that uses attributes to define styles for ease and simplicity. It works best with webkits. By default, index.html is incomplete, so your first goal is to make the site complete by adding Material attributes to the body elements.
17. Material Framework
Recommended: 26 Modern jQuery Plugins To Make Your Website Better
15. Material Design Lite for Dart Developers
MDL/Dart is a library of components based on Material design philosophy. It is included with native Dart code, pub integration, and you can use public component functions via MdlComponent.widget.
14. Framaterial Framework
Daemonite is HTML5 UI design framework based on Material design built on top of Bootstrap. It is packed with error pages, full-width page, login page, different page palettes and more.
12. Iconic Material
Pour the depth, motion, and ink specification of Google’s Material design with easy to use add-on classes into your iconic hybrid apps. Iconic Material is seamlessly themeable and features hardware accelerated CSS to provide better user experience.
11. Paper Bootswatch
Essence is a CSS framework that uses Facebook’s React.js library to build superfast and great looking web/mobile interfaces. The files where you’ll work are separated from the components and you’ll find the code for every ready-to-use component in their specific page, under the visual part.
9. Material Design Lite
8. Phonon Framework
ExpandJS is a modular library with over 350 utility functions and 80+ custom elements to kick-start your web application. All elements are built upon Polymer, allowing beautiful and responsive interfaces. The framework allows you to create JS Classes with an OOP friendlier approach. Moreover, custom elements can be used by adding an import statement to your HTML pages.
6. Material Design for Bootstrap
This is a theme for Bootstrap 3 that allows you to include Material design components in your application built on Twitter Bootstrap 3.x. Just include the theme and JS files and everything will be converted to Material design style. It also gives you options to apply new style only to specific elements and override the default values.
5. Material UI
The framework consists of a set of React components that implement Material design specification. A few components use react-tap-event-plugin to listen for touch events. So it’s better to inject this plugin and get familiar with the React Library before diving into Material-UI.
LumX is the first responsive UI framework based on AngularJS and Material Design specification. It is built on Google guidelines, respecting metrics in a pixel perfect way, and it will help you to create beautiful modern applications, faster and easier.
3. Angular Material
This project is an implementation of Material design in Angular.js. It provides a set of accessible, reusable and well-tested UI components based on Material design specification. It is supported internally at Google by Angular.js, Material design UX and other product teams.
Polymer paper’s collection implements Material design specification for the web. The core component collection provides plenty of unthemed elements that you can use to achieve Material layout, transition and scrolling effects. There are a number of APIs for authoring web components like for adding lifecycle methods, declarative data binding, automatic node finding and more.
Materialize has refined animation and transition to provide a smoother experience for developers. The framework comes with both minified and unminified JS and CSS files. You can also select source SCSS files if you want more control over individual components.
Material design seems to have a very promising future. We are seeing more and more sites have begun upgrading their interface from Flat to Material principle.
You’ve been introduced to the 18 best frameworks available till now. We’d advise you to start with Materialize as this framework works just like Bootstrap and covers almost all material design components.