Material Design Frameworks For Websites
Google was successfully able to create a concept that has become universally known as Material Design when they took a big step to combine technology, science, and design principles. This new design concept has created massive excitement regarding aspects such as its colors, layout principles, and animated elements.
Material Design has since been defined as a visual concept that works to combine science and technology with the traditional rules and principles of classic design. As this concept continues to rise in popularity, so too do all of the resources and tools that are directly related to it.
Google is seeking to introduce a sense of uniformity to its UI on any and all platforms, ranging from Android to the world wide web itself. The company operates its own Polymer Project, which is a process that focuses on Material Design throughout all of the concept’s various web-based components.
The Polymer Project has also played a major role in not only the overall development of Material Design, but also in the design concepts of Material Design. There is a catch, however, as the Polymer Project is still being considered as being in “early developer preview,” meaning it is not yet ready to be fully produced.
There are many different third-party web UI frameworks that have launched in an attempt to bring the Material Design concept to the world wide web’s user interface. However, it’s important to note that these frameworks are, in no way, associated with Google. This post will go into discussion regarding a general round-up of these different Material Design frameworks.
Polymer
Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.
Materialize
A modern responsive front-end framework based on Material Design
MUI
MUI is a lightweight HTML, CSS, and JavaScript framework for sites that follow Google’s Material Design guidelines. It was designed from the ground up to be fast, small and developer friendly.
The goal of the project is to provide a basic set of components and helper methods that developers can use to build sites that are fast and user-friendly.
material ui
A CSS Framework and a Set of React Components that Implement Google’s Material Design. We recommend that you get started with the React Library before diving into material-ui for a better understanding. Should you choose to skip this, don’t worry, we’ll explain relevant React concepts as they come along.
LumX
LumX is the first responsive front-end framework based on AngularJS & Google Material Design specifications. It provides a full CSS Framework built with Sass and a bunch of AngularJS components.
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.
Similar to the Polymer project’s Paper elements collection, Angular Material is supported internally at Google by the Angular.js, Material Design UX and other product teams.
Material
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.
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.
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.
Paper
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.
Leaf
A CSS framework based on Google’s material design. It’s a work in progress so any contribution or feedback would be appreciated by its author.
Material Foundation
Just a simple Material Design version of Foundation Framework by Zurb. Needs a little bit more work on it, but it’s worth mentioning in this article.
