• Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

Code Geekz

    • Most Popular

      All time

    • 30 Best Tools for Data Visualization

      37 Comments

    • Best PHP Frameworks for Developers

      33 Comments

    • Latest Stories

      What is new?

    • Building Product Teams That Scale: The Case for Remote .NET Developers

      May 21, 2025

    • Choosing a WooCommerce Theme? Here’s What Most Store Owners Get Wrong

      May 9, 2025

    • Comments

      Most Recent

    • B. Frances on:

      Best WordPress Wedding Themes

    • Ultimate Content Locker Pro on:

      Best WordPress Social Content Locker Plugins for 2017

  • Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

Collection of Google Material Design Resources

1
  • by Gavin
  • In RESOURCES · Web Design
  • — 6 Feb, 2015

At Google they say, “Focus on the user and all else will follow.” They embrace that principle in their design by seeking to build experiences that surprise and enlighten their users in equal measure. Google Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google’s goal is to develop a system of design that allows for a unified user experience across all their products on any platform.

In this article I’ve organized 20 useful resources for designing with Google Material. These include animations, buttons, CSS libraries, and a whole lot more. Take a peek at the examples in this post and see if anything can prove useful in future work. Enjoy !!

1. Material UI

material ui
Material-UI is a CSS framework and a set of React components that implement Google’s Material Design specification. Material-UI is available as an npm package. Use browserify and reactify for dependency management and JSX transformation. The CSS framework is written in Less, so you’ll need to compile that as well.

2. Materialize

Materialize
Materialize is a modern responsive front-end framework based on Material Design. They did most of the heavy lifting for you to provide a default stylings that incorporate your custom components. Additionally, they refined animations and transitions to provide a smoother experience for developers.

3. Polymer

polymer
Polymer brings an implementation of material design to the web. The paper elements range from controls to effects and user interaction. Designer is a drag and drop tool for prototyping apps using Polymer. You can save your experiments as Github gists.

4. Waves

waves
Waves is click effect inspired by Google’s Material Design. It’s easy to use Waves. Download the latest version of Waves from Github repository. Just include waves.min.css and waves.min.js to your HTML file. And Waves is ready to use. Waves works in latest modern browser (i.e. Chrome, Firefox, Opera and Safari) and also IE10+. Waves is partially support mobile device by using touchstart and touchend event. Waves currently in beta version.

5. Material.css

Material.css
CSS library for Google’s Material design.

6. Leaf Framework

leaf framework
A CSS framework based on Google’s material design.

7. Lumx

lumx
LumX is a responsive front-end framework that’s based on Google’s Material Design specifications and Angular JS. It’s built on Sass, Bourbon, and Neat, with just a bit of jQuery.

8. Paper Collapse

Paper Collapse
Simple CSS3 paper cards accordion. Inspired by Google Material Design.

9. SVG Morpheus

svg morpheus
SVG Morpheus is a JavaScript library that lets you create SVG icons that morph into one another. It’s easy to use and works with Material Design’s Delightful Details transitions.

10. Bootstrap Material Design

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.

11. MAWButton.js

MAWButtonjs
A ripple button inspired by Google material design.

12. Material Design Hamburger

Material Design Hamburger
Android’s Material Design hamburger animation built in CSS (with a sprinkle of JS). Currently supporting the 2 latest versions of each major browser (IE10+) with the aim to support IE8+ in the future.

13. MaterialList

materiallist
MaterialList is an Android library created to help all Android developers get the beautiful CardViews that Google shows at its official design specifications. Provided as a ListView extension, it can receive a list of Cards (stored in a CardList, provided by the library) and show them accordingly to the android style and design patterns.

14. Google Material Design Icons

googlematerialdesignicons
It is based on https://github.com/google/material-design-icons, it converts the material-design-icons svg file in the font file, it was easy to use.

15. MaterialPress

materialpress
MaterialPress is a WordPress theme, influenced heavily by Google’s Material Design philosophy. Several front end styles have been adapted from the Materialize front-end framework. MaterialPress is in extreme.

16. Material Bootstrap

material bootstrap
Material Bootstrap is created to use the Material Design for your website. Material Bootstrap support Safari, Chrome, Firefox and IE9+.

17. Material Menu

material menu
This project was build using front end technologies, HTML5, CSS3, and JavaScript, to generate an off-canvas menu based on material design principles. It contains animated toggle button, animated off canvas menu, animated menu items and touch/click ripple effect.

18. Material Design Icons

Material Icons Index
Material Design Icons are the official open-source icons featured in the Google Material Design specification.

19. Material UI

materialui
MaterialUI is a UI kit for Unity that follows Google’s official material design guidelines.

20. Mprogress.js

Mprogress.js
Mprogress.js creates progress linear bar from Google Material Design. By using CSS3 and pure js which don’t depend on any other libraries.
You can use 4 types of linear bar.

 

Share

Tags: design iconsgoogle materialgoogle material designmaterial bootstrapmaterial designmaterial design iconsmaterial design resourcesmaterial design toolsmaterial ui

— Gavin

A Web addicted Geek stuck inside Tron.

  • Previous story 15 Fresh Tools for Developers – February 2015
  • Next story 15 Best HTML5 Frameworks for 2015

You may also like...

  • Best HTML Video Website Templates
  • iSeePassword Windows Password Recovery Pro Review :Reset Login Password Windows 7/8/10 Computer
  • 20 Free Joomla Templates for Designers
  • develop secure web application Team Essentials: 5 Best Applications for Excellent Productivity

Enter your em@il & get our posts delivered.





  • Enter your em@il & get our posts delivered.

  • Codegeekz
    • Home
    • RESOURCES
    • Collection of Google Material Design Resources
    • Home
    • WORDPRESS
      • PLUGINS
      • PHP
      • Themes
      • DEVELOPMENT
        • Javascript
        • JQuery
        • Mootools
    • WEB DESIGN
      • DESIGN
      • CSS
      • HTML
    • TYPOGRAPHY
      • FONTS
    • RESOURCES
      • TUTORIALS
      • THEMES
      • SLIDERS
      • TECHNOLOGY
    • ARCHIVES
    • CONTACT
    • Advertise

    CODEGEEKZ.COM