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.
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.
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.
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.
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.
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.
- 8 CSS Snippets for Creative Hyperlink Hover Effects
- A Long Time Ago: Code Snippets Inspired by Star Wars
- Code Snippets That Demonstrate the Repelling Effect in Web Design