Why Google Material Design CSS library could be a twitter bootstrap killer

Google Material Design CSS library could be a twitter bootstrap killer?

Google has developing a new Material Design CSS library, that will compete with other popular CSS frameworks such as Twitter Bootstrap
(http://getbootstrap.com/), Foundation by ZURB (http://foundation.zurb.com/), Semantic UI (http://semantic-ui.com/), Pure by Yahoo!
(http://purecss.io/) or relatively new Materialize CSS (http://materializecss.com).

Materialize is a CSS Framework based on Material Design


 Materialize - A modern responsive framework based on Material Design

What is material?

3D world - The material environment is a 3D space, which means all objects have x, y, and z dimensions.

Materialize - A modern responsive front-end framework based on Material Design
http://materializecss.com/

Materialize on GitHub: https://github.com/Dogfalo/materialize

Upcoming Material Design CSS library – a Twitter Bootstrap killer?
http://www.webdesignernews.com/external/upcoming-material-design-css-library-a-twitter-bootstrap-killer

Google Design : http://www.google.com/design/

Material Design - Intro. by Google: http://www.google.com/design/spec/material-design/introduction.html

Material Design Blog
Material Design Blog focused on the best apps, websites & themes rocking material design. Daily material design inspiration & examples for web designers & developers.
http://materialdesignblog.com/

MaterialUp - Get the best of Material Design: http://www.materialup.com/

Great Examples of Material Design

HTML & CSS Examples of Material Design in Action
February 26, 2015 by +Speckyboy Design Magazine Editors
http://speckyboy.com/2015/02/26/html-css-examples-of-material-design-in-action/

Top 5 Material Design Frameworks to Use in 2015
+Tanay Pant , Published May 5, 2015 in +SitePoint
http://www.sitepoint.com/top-5-material-design-frameworks-use-2015/

Angular Material: https://material.angularjs.org

Materialize: http://materializecss.com/

Material UI: http://material-ui.com/

MUI CSS Framework: https://www.muicss.com/

Google’s Polymer Project: https://www.polymer-project.org/0.5/docs/elements/material.html

Material Design Resources For Web Designer And Web Developer
by Nino Dezign · January 30, 2015
http://ninodezign.com/material-design-resources-web-designer-web-developer/
A huge of Google Material Design resources including framework, icons, GUI kits, fonts … for your next design project or for inspiration.

Google Material Design: Everything You Need to Know
by +Carrie Cousins on 24th February 2015 in +Design Shack
http://designshack.net/articles/webstandards/google-material-design-everything-you-need-to-know/

7 Material Design Web UI Frameworks
By +Kanishk Kunal - Updated on Mar 12, 2015
http://superdevresources.com/material-design-web-ui-frameworks/

Top 20 Best Material Design Apps and Websites For Inspiration
by +Irfan Fauzi, Feb 10, 2015
http://beebom.com/2015/02/best-material-design-apps-website

Make Material Design Websites with the Materialize CSS Framework
+Narayan Prusty, February 9, 2015
https://scotch.io/tutorials/make-material-design-websites-with-the-materialize-css-framework

Great examples of Material Design animations
By +Benoît Boucart, 26 Oct 2014
http://blog.webbb.be/material-design-animation-examples/

Google Flights Uses Material Design
by +Alex Chitu, April 30, 2015
http://googlesystem.blogspot.com/2015/04/google-flights-uses-material-design.html

Comprendre le « Material Design » de Google
Par +Geoffrey Dorne , 26 juin 2014
http://graphism.fr/comprendre-le-material-design-de-google/

Free Material Design UI Kit

Material Design UI Kit freebie
by Jakub Kośla, May 15, 2015
https://dribbble.com/shots/2064912-Material-Design-UI-Kit-freebie

Freebie: Material Design UI Kit (PSD)
April 7, 2015 by Speckyboy Design Magazine Editors
http://speckyboy.com/2015/04/07/freebie-material-design-ui-kit-psd/

Download Free Material Design UI Kit [8mb]
http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2015/04/FREE-MATERIAL-DESIGN-UI-KIT.zip

Free Material Design GUI Templates & Icon Sets
November 19, 2014 by Paul Andrew
http://speckyboy.com/2014/11/19/free-material-design-gui-templates-icon-sets/

More nice links on Material Design


On June 25, 2014, Google revealed the guidelines for its new “Material” design language.

Google reveals its next generation 'Material' design language — and it looks a lot like Windows and iOS
By Harrison Weber, June 25, 2014 in +VentureBeat
http://venturebeat.com/2014/06/25/google-reveals-the-next-generation-of-its-design-language-for-android-glass-and-more/



Top designers react to Google’s new ‘Material’ design language http://j.mp/1yUvl8K |@VentureBeat
By Harrison Weber, June 27, 2014
http://venturebeat.com/2014/06/27/top-designers-react-to-googles-new-material-design-language/



Google Material Design Guidelines: http://www.google.com/design/spec/material-design/introduction.html



Subtly Animated Examples of Material Design
By Paul Andrew , November 18, 2014 in Envato
http://marketblog.envato.com/inspirations/subtly-animated-material-design/



Designing in the material style — without just copying Google
by John Moore Williams , on April 28, 2015
http://blog.production.invision.works/designing-in-the-material-style-without-just-copying-google/

http://j.mp/1GHN9or



How to Not Freak Out About Material Design (A sane approach to making your app Material)
By Max Weiner, Android Lead at Pocket
https://medium.com/what-i-learned-building/how-to-not-freak-out-about-material-design-33cec7381b80
http://j.mp/1zPirYT

Check out the new Pocket for Material Design at http://pocket.co/sKTGP



Material UI - A CSS Framework and a Set of React Components that Implement Google's Material Design
By Call-Em-All - https://www.call-em-all.com
http://material-ui.com/
http://j.mp/1pHSmuw



The most realistic Material Design prototype-ready UI library
https://proto.io/en/new-features/material-design-ui-library/
http://j.mp/1GIXIJK



An exploration in Material Design by feedly
By Arthur Bodolec, Designer co-founder Feedly
http://j.mp/1Dhm79n
https://medium.com/feedly-behind-the-curtain/an-exploration-in-material-design-by-feedly-8c1a1cbdfdcd



LumX - Responsive front-end framework based on AngularJS & Google Material Design specifications
http://ui.lumapps.com/ http://j.mp/1Dqk7gU



LumX - The first responsive front-end framework based on AngularJS & Google Material Design specifications. LumX will help you to design beautiful applications, faster and easier.
Download LumX v0.3.32: https://github.com/lumapps/lumX/archive/v0.3.32.zip



Material Design Preloader
Created by +Aaron Lumsden -@aaronlumsden
http://git.aaronlumsden.com/material/
http://j.mp/1AcaA83



Interactive experiences for Google's Material Design Principles
http://material.cmiscm.com/
http://j.mp/1zP9u1j



Material Design Icons
by Addy Osmani, 17 Oct 2014
https://github.com/google/material-design-icons/releases/tag/1.0.0
http://j.mp/1up9aC4
Download the Zip. Grab the latest release as a zip archive (~57MB):
https://github.com/google/material-design-icons/releases/download/1.0.0/material-design-icons-1.0.0.zip



Material design morphing icons
http://codepen.io/albebonv/full/gIlrw http://codepen.io/albebonv/pen/gIlrw
http://j.mp/1Ee8CGt

New to Material Design? 12 Principles You Need to Know Posted on May 12, 2015 by Karol K (@carlosinho) blogger and founder of NewInternetOrder.com
https://blogs.adobe.com/dreamweaver/2015/05/new-to-material-design-12-principles-you-need-to-know.html

Flat Design vs. Material Design: What Makes Them Different?

Posted on May 8, 2015 by Karol K , (@carlosinho), a blogger and founder of NewInternetOrder.com
https://blogs.adobe.com/dreamweaver/2015/05/flat-design-vs-material-design-what-makes-them-different.html

Material design has gotten really popular recently, as many designers have started integrating it into not only their Android projects, but Flat Design vs. Material Design: What Makes Them Different?

Top 3 differences between flat design and material design – designers chip in

1. Flat design is great for users who are highly attuned to digital interaction, while material has more of a reactive response to a user’s action. Material design brings the design a step further in its ability to communicate.
2. Material design may be aesthetically flat, specifically the colors, but it is multi-dimensional: it takes the Z-axis into consideration.
3. Both flat and material are minimalist approaches, but material is attempting to marry the real and digital worlds.

Why did Google introduce material design?

The reasons can be many, but one had to be the need to unify the way things looked on different Android devices (using different screens and resolutions). Making an app to look similarly on multiple devices is a really difficult task for developers, and material design plays well as a set of guidelines that make this task easier.

Material design introduces physics

In Google’s own words, "material is the metaphor".


One of the main principles of material design is to mimic the ways in which things work in the real world, but to do it in an utterly simplified manner.




4,413 0 2