The Best CSS Frameworks for Material Design

The Best CSS Frameworks for Material Design
by Janeth Kent Date: 16-11-2015 css frameworks material design


Material design is the googles new design practice, it is mobile first approach design system created by Google. The idea of material design is to make everything in a same simple way so anybody can understand them even if it is an app with brand new functionality.

Material designis derived from the thinking of using paper as a user interface, is more like the flat design, but it have more depth than the usual designs. It is pretty logical especially in mobile first approach, in mobile, you are touching to the UI for interaction with the system but by thinking it with the paper, The interaction becomes more natural.

The material design used bolder colours and better use of typography. The most important and used aspect is transitions. The material design has the best and phycological tradition effects.

There are many well know companies started to adapt material designs for their products. Companies like Whatsapp, Invision and many more big name are using material design principle these days.

Google may provide a framework for material design in future, but we don’t have any official announcement regarding that. We have found a some great material design based front end framework while we resource in material design.Today in this post we have put together the best material design framework for developers.

MaterialKit

MaterialKit

A beautiful Material Design framework in Swift.

Source

syterial

syterial

A Material Design CSS Framework and Angular directives.

Source

ember-cli-materialize

ember-cli-materialize

A CSS Framework based on Material Design made simple, for Ember.js apps.

Source

Material Design Lite for Dart Developers

Material Design Lite for Dart Developers

Material Design Lite (MDL/Dart) is a library of components for web developers based on Google’s Material Design philosophy. MDL/Dart is a port of Material Design Lite for JS (MDL/JS).

Source

Material Design Lite

Material Design Lite

Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn’t rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.

Source

Materialize

Materialize

A modern responsive front-end framework based on Material Design.

Source

Ionic Material

Ionic Material

Ionic Material is an extension library for the Ionic Framework, meaning you don’t need to change the way you develop your Ionic hybrid apps to have them materialized.

Source

Material UI

Material UI

Material-UI is a set of React components that implement Google’s Material Design specification.

Source

LumX

LumX

The first responsive front-end framework based on AngularJS & Google Material Design specifications.

Source

Leaf

Leaf

A CSS framework based on Google’s material design.

Source

Material Design for Bootstrap

Material Design for Bootstrap

Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework.

Source

MUI

MUI

MUI is a lightweight HTML/CSS/JS framework that follows Google’s Material Design guidelines.

Source

Essence

Essence

Essence is a CSS framework that implements the guidelines from Google Material Design Specification using Facebook’s react.js library. Use it to easily build super-fast and great looking web & mobile interfaces.

Source

Angular Material

Angular Material

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.

Source

Material design with Polymer

Material design with Polymer

Polymer’s paper elements collection implements material design for the web. The Polymer core elements collection provides a number of unthemed elements that you can use to achieve material design app layouts, transitions, and scrolling effects.

Source

Material CSS

Material CSS

A lightweight CSS framework based on Google’s Material Design.

Source

Material Framework

Material Framework

Material Framework is a simple responsive CSS framework made by Tim Nguyen that allows you to integrate Material Design in any web page or web app.

Source

Phonon Framework

Phonon Framework

A light weight, scalable and customizable HTML5 Hybrid Mobile App Framework working with Cordova. UI components inspired by Google Material Design.

Source

Paperkit Framework

Paperkit Framework

A Material Design web framework. Simple, beautiful, powerful and open source. Create webpages and apps following the Google guidelines.

Source

ExpandJS

ExpandJS

The elements follow Google’s Material Design guidelines, allowing for beautiful and responsive interfaces. ExpandJS is built upon the latest web standards, leading to rapid development, reusability and high maintainability.

Source

Material Interaction

Material Interaction

Interactive experiences for Google’s Material Design Principles.

Source

Framaterial Framework

Framaterial Framework

Framaterial is an open-source framework that allows you to create projects with the material design elements and rules. It’s composed of many components and javascript functions to make it easy to use directly out of the box With Framaterial, you’ll be able to create single page apps & websites, to complex apps & websites, without the help of any thirs pary libraries, frameworks or plugins.

Source

Surface

Surface

A Material Design CSS only framework.

Source

daemonite

daemonite

HTML5 UI design based on Google Material Design and built on top of Bootstrap.

Source

Paper Bootswatch for Bootstrap

Paper Bootswatch for Bootstrap

Paper brings the material design’s principles of transformation and movement to Bootstrap. Best of all, Paper’s animations are implemented in pure CSS, meaning no custom markup or JS is needed. In case you missed them, here’s a quick tour of these effects in action.

Source

Materialize Meteor

Materialize Meteor

A modern responsive front-end framework based on Material Design.

Source

Material Foundation

Material Foundation

Material Design version of Foudation Framework by Zurb.

Source

Materialstrap

Materialstrap

Materialstrap is a HTML and CSS framework written from scratch built on the principles of Bootstrap but with the modern and sleek Material Design style.

Source

Chrome Angular MD Template

Chrome Angular MD Template

This is a generic app framework that can run as a standalone webpage, a chrome extension, an android app, or an ios app. It will use the tools provided by angular’s material-design package to provide basic application scaffolding.

Source

Materialize Pixelyze

Materialize Pixelyze

Materialize a CSS Framework based on material design.

Source

 
by Janeth Kent Date: 16-11-2015 css frameworks material design hits : 6807  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

Related Posts

Nesting: future proofing CSS

Although not currently supported by browsers, there is a proposal for CSS nesting to support a feature that would provide better readability to native CSS, so in the future it…

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

Starting with Bootstrap-Vue step by step

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…

Bootstrap 5 beta2. What offers?

Since the release of the Bootstrap 4 is three years, in this article we will present what is new in the world’s most popular framework for building responsive, mobile-first sites.…

Creating simple CSS spinner-loader

In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

How To Add Filter Effects to Images with CSS

To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…

Introduction to BEM (Block Element Modifier)

Problems with naming CSS classes I think I might not be the only one with this experience: after finally grasping all the important concepts regarding CSS I wanted to start giving…

Styling React components: recommendations and suggestions

With CSS we can set the presentation of a document through the rules that control the formatting of an element on a web page. Using CSS techniques, we can make…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration