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
Yet another simple, responsive framework that allows you to integrate Material design to any web page or web app. Just include material.css in your html page if you only need the styles. If you want JavaScript, you need to include material.js before initializing material objects.
Recommended: 26 Modern jQuery Plugins To Make Your Website Better
16. Surface
Surface is the super lightweight framework with 100% CSS only (absolute zero JavaScript). You can set the variables like color scheme, amount of grid columns and spacing according to your convenience. Gulp is optional – you can use it to compile your SCSS.
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
Framaterial framework allows you to create single page as well as complex apps and websites, without help of any third party library, framework or plugins. It is packed with some cool JavaScript function – to use them you just need to add data-attributes.
13. Daemonite
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
Paper is the Bootswatch theme for Bootstrap that brings Material design principle of transformation and movement of Bootstrap. All animations are implemented in pure CSS, that means no custom markup or JavaScript is required.
10. Essence
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
Material Design Lite aims to optimize for cross device use, offer an experience that is immediately accessible and gracefully degrade in older browsers. All components are created with CSS, HTML and JavaScript and the library includes some enhanced and specialized features like spinners, tabs, column layouts, cards and more.
8. Phonon Framework
Phonon is lightweight and scalable HTML5 hybrid mobile app framework. The CSS and JavaScript components are based on Material design. It has been written in Vanilla JavaScript, and you are free to use design pattern or other frameworks to work with Phonon.
Related: 20+ Node.js Frameworks for Developing Web Applications
7. ExpandJS
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.
4. LumX
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.
2. Polymer
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.
1. Materialize
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.
More Frameworks:
a) 40+ Useful JavaScript Frameworks for Developers
b) 35+ HTML &CSS Frameworks For Web Designers
d) 15+ Perl Frameworks You Should Be Using
d) 30 Amazing PHP Libraries for Programmers
Bottom Line
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.
nowadays people prefer CSS only solution instead javascript.