10大 Material Design 框架用于现代 UX/UI 设计
1. Materialize css
Materialize is among the first few 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 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
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 非死book’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.
Read more about Materialize CSS at the official webpage - material-ui.
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 framework for creating responsive websites 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 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 theming 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 differentiators 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 framework that seamlessly fits into ionic app development workflow.
You can check IonicMaterial in action here - ionic material demo.
read more about ionic material design at official website - ionicmaterial.com.
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 the way you would like to.
Know more about Paper Material Design theme at - bootswatch.com/paper, or get the theme here at Github.