Free Material Design Code Snippets, Frameworks & Plugins: The Ultimate Collection

Google’s flat style material design is fast becoming a favorite of UI/UX designers.

Their basic guidelines offer “rules of the road” that all designers can follow to create usable interfaces from scratch. These are especially useful for web designers(new & experienced) so they can focus more on content and structure.

But these design principles work just as well on the frontend too.

Only problem is finding the right plugins so you can avoid coding from scratch.

Thankfully there are dozens of free plugins, frameworks, scripts, and code snippets based on material design. This post offers plenty to choose from and it’s a great place to start if you’re building on material UI patterns.

Free Material Code Snippets

Let’s start with a handful of free code snippets designed around the material library.

These snippets are totally free to copy and use anywhere for any project. They might require a little editing but from this collection you should be able to find a lot of cool interface elements to pick from.

Demo Webapp UI

Webapp for material

We’re starting the list with a big one: a sample custom webapp built on Angular.js.

It’s a cute little Muppets webapp following Google’s best practices and based off their Android OS styles. This is by far the coolest demo I’ve seen on CodePen with a lot of handy snippets.

But it’ll prove most useful for anyone who works with Angular. If you don’t have any experience coding AngularJS this probably won’t help you much.

Material On/Off Switches

Material UI switches

For a simpler code snippet to practice with have a look at these toggle switches. They also follow the material design trend with flat colors and a simple sliding animation.

If you’re designing a settings page you might try using these on/off switches instead of the typical checkbox input.

These look a lot nicer than default inputs and they’re accurately based on Google’s mobile UI.

Container Elements

Material containers

The material language has certain guidelines for handling user inputs. This snippet is one such example borrowing from that guide where each user’s click is registered and recorded with a microinteraction.

There’s no cleaner way to design an interface than with these types of material elements.

Just try to apply this feature only onto clickable items like buttons or nav elements. It’s a nice effect that can get old if you add it to every single element on the page.

Action Button Animation

Material dot icon

This simple action button is really cool.

It switches from a three dot nav icon into a small X that can be tied to a dropdown nav or a modal window. Just note this requires a good amount of customization to get it working with other features.

Step-By-Step Form UI

Progress step form snippet

In past articles I’ve covered trends for progress bars and you can build some cool stuff with those trends.

But with this UI snippet you’ll find a slightly different step-by-step input modeled after the material design language.

Not so useful on every website but definitely a practical snippet where it can be used in modern web forms.

Custom Tabs

Custom tabs material ui

Material tabs are very easy to spot with their animation style and simple underline UI.

Have a look at this pen offering a very basic custom tab interface made for material lovers.

You can switch through content with one click and you get all the regular animations you expect with this type of code.

Material Input Form

Material style inputs

Floating input labels have gotten really popular on the web. These initially started with Android inputs and you can see a great example of that effect ported to the web in this snippet.

It’s a fantastic codebase for anyone designing input fields from scratch. They’ll save you time and frustration when working on a material interface.

Angular Material Dashboard

Material dashboard with angular

This is a huge snippet and it’s really more of a full-blown practice project.

Developer Ajay Viswanathan created this custom dashboard from scratch using material design + Angular.

This is another beautiful example of some code worth studying if you’re just getting into material design(or AngularJS) for the first time.

Material Progress Bar

Progress bar material style

Earlier I mentioned a progress step form that worked on it’s own progress meter.

Well thanks to this code snippet you can add a material-style progress loader bar into your site too. It’ll work for any page and feature a custom loading animation or anything else you might need it for.

Material Design Frameworks

If you need more than just code snippets then you should look into a full-blown framework.

The most common open source web framework is Bootstrap. However that has its own custom design style that falls outside the range of “material design”.

All of these frameworks listed below are 100% free, open sourced, and built with the material design language in mind.

Materialize.css

Materialize.css

The free Materialize.css library is one of the first major frontend frameworks based on material design.

This should be one of the first choices you look into if you’re building material-style websites. It has everything from basic color schemes & grid setups to more detailed components like dropdown menus and carousels.

From the homepage you’ll find a bunch of documentation on how to get this all set up.

Keep that in mind if you’re new to Materialize. It can feel intimidating but once you understand the syntax it’s really one of the best options available for frontend work.

MUI.CSS

MUI CSS

Another fantastic choice is MUI. It’s a lightweight CSS framework made for UI design on the web.

Currently in v0.9.36, this has a little ways to go before it’s ready for a public v1.0 release. But that doesn’t mean you can’t use it now!

The MUI team works actively on this project fixing bugs and updating older code with new features. It’s the perfect way to launch a material site without coding everything from stage zero.

Material Bootstrap

Material Bootstrap

I mentioned the Bootstrap framework earlier which is still the most popular frontend framework to date.

However did you know there’s a material library you can pair with Bootstrap?

It’s called, you guessed it, Material Bootstrap. And it’s pretty awesome.

The whole thing is hosted on GitHub and there’s a full documentation section based on the Bootstrap v4 update. You can also check out some live examples if you’re curious to learn more.

Note this does have an optional pro version but I do not think it’s necessary. The free framework has everything you’d need for a basic material design website.

Material Foundation

Material Foundation framework

If Bootstrap is the #1 most popular frontend framework then Foundation has to be a close 2nd.

And unsurprisingly this framework has its own material library too. There is a pretty long documentation page if you want to dig in and give it a shot.

Not as many developers get into Foundation but it’s really a great library. And this Material Foundation framework is the perfect add-on for folks who prefer this over Bootstrap.

Material-UI

Material UI framework

So the Material UI framework isn’t just a simple web framework. It’s really a set of React components that build on top of Google’s design language.

If you don’t use React then you probably don’t know what a component is. And that’s okay!

This library is more for people who already know React and want to build material-style webapps.

Worth digging into if you fall into that camp, otherwise it’s probably not going to interest you very much.

LumX

LumX Angular material

Much like the React component library above, LumX isn’t just a simple framework.

It’s built around the Angular framework and it offers new design styles mimicking the material language. This is pretty cool since Angular was created by Google and still gets frequent updates.

Many developers love Angular so merging Google’s awesome framework with their incredible design language is like a match made in heaven.

To learn more about the LumX library check out the main page and have a look into their documentation too.

Material Design Lite

Material Design Lite framework

With a name like Material Design Lite you may not know what to expect.

Thankfully they have a great FAQ page to answer your most basic questions. It’s really like a lightweight duvet you put on top of your custom code.

This means you can build a layout in your own format, then style it with MDL.

You’ll maintain your own codebase and you get to save time on tedious design choices like color selection and typography.

MDL is great for any developer who loves to work with vanilla JS and hates required add-ons. If you want very few(or no) dependencies in your web projects then give MDL a try.

Material JS Plugins

Lastly I want to cover a handful of free material design JavaScript plugins.

These are also totally free to download and open sourced for the world to use. Some work on basic JavaScript, others work on jQuery.

But all of these plugins are free to download on GitHub with clear directions on how to get them setup & working on your site.

Material Ripple Effect

Material ripple effect plugin

Google’s material language has an interesting effect that looks like ripples after a tap or click event.

This can be replicated on the web with this plugin built on jQuery. Totally free to use and it should work on any element on your page.

I mostly recommend it for buttons like CTAs to grab user attention. But the animation can also work with custom select form inputs or even text links.

MDTimePicker

Material design time picker

The datetime picker is a crucial interface element for many websites.

If you’re going material then try this time picker built on material design. It’s powered by jQuery and gives the user a pretty clear 24 hour clock to pick from.

You can also change some of the settings if you want to alter the design or the selection options.

Material Bootstrap Wizard

Material bootstrap form wizard

So you want to create a step-by-step form page but don’t want to code it from scratch.

Enter this material BS wizard script. It does require Bootstrap(obviously) so you’ll have to be working with that already.

But if you feel comfortable in BS3/BS4 code you’ll definitely appreciate the simplicity of this plugin.

Materialize Tags

Custom Materialize tags plugin

Need to add a simple multi-text field into your web form? Try Materialize Tags.

This comes with a really simple code base and an even simpler setup. Just check out the GitHub repo to see how you can get it running and how to handle user inputs with tag-style content.

Prelodr

Prelodr plugin

In the world of preloading animations there are hundreds of designs to pick from. This includes plenty of free libraries like Prelodr.

This was designed to comply with the material language specs and it was modeled after the Google Inbox loader.

You can see a live demo of this project on CodePen and even tinker with it right there to see how it works.

Material Dialogs

Material dialog window

All the major frameworks like Bootstrap have their own modal windows.

The material language isn’t exactly a framework, so you’d either need to find one yourself or pick up a plugin like this MDL modal dialog.

It runs on jQuery and offers a variety of styles for your modal windows. Have a look at this demo on JSFiddle to see the various modal behaviors and decide if it can work on your site.

Wrapping Up

I certainly hope this material collection offers plenty of resources to get you working with Google’s design language on the web.

Just note: many of these free resources do require knowledge of basic HTML/CSS and even some JavaScript. So they’re really most useful to frontend developers who want to save time.

But if you’re new to web development it’s surprisingly simple to teach yourself. Especially if you have the right learning materials and some fun projects to work on.

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.