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
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
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.
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
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
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.
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
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
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
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.
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.
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.
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.
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.
If Bootstrap is the #1 most popular frontend framework then Foundation has to be a close 2nd.
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.
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.
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
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
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
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.
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
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.
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.
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.
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.
I certainly hope this material collection offers plenty of resources to get you working with Google’s design language on the web.