10 Useful Material Design Code Snippets

The material design craze is taking the web world by storm. Every month I find new sites running on the material style using frameworks or custom UI kits.

But this isn’t a bad thing, quite the opposite! This is a way to simplify your design process by working with proven trends that Google recognizes as their own preferred design language.

If you’re big on the material design style then these code snippets are for you. These are just 10 of my favorites that offer a variety of designs and components to pick through.

Responsive Table

Here’s a material design snippet with a unique twist. This responsive table created by Sergey Kupletsky actually hosts other links to material design snippets. Pretty cool!

This is naturally created using material design techniques as well so the table should fit perfectly into your own layout. But the toughest part of mobile design is making tables that work on smaller screens.

I think this method is one of the best ways to handle it. Your code also stays clean which makes it super easy to code, clean up, and manage regardless of the size of your table.

Card UI Transitions

Developer Iván Villamil built this very unique card UI design with some pretty crazy animations.

Take a look at the page and try clicking any of the cards. You’ll get a unique animated effect where the card contents animate over the container and appear in view. It’s like something you’d expect to find in a mobile app, but ported to the web!

The animation effects are flawless, and they show just how much you can do on the web today. Not to mention the material style is spot-on for this combo web/mobile UI.

Compact Login

I’ve seen some very cool login forms over my years as a designer. But this crazy design might just take the cake for its interactive features and unique styles.

When you click the bright pink icon in the top-right corner you’ll get a registration field that appears over the page. It’s pretty darn unique, and it creates a truly usable interface.

So what’s the catch? This does use a lot of JavaScript, so it’s not the neatest solution code-wise. But still an excellent example of designing with compact features.

Populate Animation

Scott Kellum developed this intriguing material card layout that auto-populates once the page loads. This develops in a grid where you can hover each card to see the material design features in action.

I can’t say how useful this is in a direct project or how much you could get out of it. But this is a fun snippet that shows off-grid design for the web, mixing in a touch of material flavor with hover animations.

Material BS4 Buttons

Out of the many Bootstrap templates available online you better believe some of them use material design. And this pen showcases all the cool stuff you can do with material design in Bootstrap 4.

Really this is just a collection of buttons restyled into Google’s material language. But it all runs on the newest BS4 framework so you can add these to any Bootstrap-powered page.

If you’re serious about Bootstrap have a look at the newest release to see what you think. It works great as a foundation for anything, and that’s especially true for material sites.

Material Design Select Menu

Dropdown select menus are a staple in form design. They let users pick from a handful of answers on relevant topics like states, countries, languages, and so forth.

This material design select elevates the common HTML select menu to a whole new level.

It doesn’t rely on the typical document style for picking an option. Instead, this uses an unordered list with jQuery handling the animations & selection process. And I have to say, this thing nails the material style.

Material Shadows

Google really pushes shadows for depth in their material documentation. That’s what you’ll see in this pen where the circles all have their own distinct drop shadow effects.

With shadows you can designate hierarchy to page elements so that some appear on top, others lower. It creates an illusion of space on the screen which is especially useful on touchscreens.

A pretty cool effect and certainly something you might copy in your own projects.

Weather Card UI

Developer Thomas Vallez created this awesome weather card running on pure HTML and CSS. It uses a simple fade-in effect on pageload but the true beauty here is the material design style.

Everything from the colors to the fonts and even the weather icon, they all rely on natural material styles.

You can take this template and use it for pretty much any type of card layout. It’s phenomenal and certainly one of the more straightforward projects in this list.

Material Tabs

Here’s an interesting project that builds on the idea of material design tabs. Michael Richins created this pen with some basic JavaScript and some knowledge of Google’s design guidelines.

The tabs work just as you’d expect on other similar devices like Android smartphones or tablets. Not to mention this thing runs on plain vanilla JavaScript, so you never need to worry about jQuery or any of that stuff.

A pretty cool effect if you’re looking for tabs on your site. Just make sure you test the styles to see if they blend naturally with your page.

Click Response Animation

Developer Emmanuel Pilande built this cool response effect as a simple way to replicate Google’s material microinteractions.

Click anywhere on the material cards to see the effect. And you can apply this to pretty much anything from buttons to page containers or input fields.

It does rely on some JavaScript, but it’s also simple to add to any project. So if you’re going for that au naturale material look, this is a great snippet to save.