5 Material Design Examples using MaterializeCSS


It seems like a lot of #frontend developers these days are moving towards adoption of the Principles of Google's Material Design.

At the core, Material Design emphasizes the metaphor of real world paper & ink. MD uses motion (animation) to focus attention and meaningful user interaction. MD elements and colors are bold & deliberate. The team at MaterializeCSS has adopted these principles into their responsive front-end framework that's based on Material Design.

Let's take a look at five examples using MaterializeCSS to demonstrate MD...


The first snippet shows responsive cards, where you'll see bold use of color. AngularJs and animate.css are used to create the cascading motion effect as the cards are loaded.


The next snippet demonstrates a responsive top nav that switches to a mobile sidebar on smaller devices. Click the user icon for the login modal. In this demo you'll see that the Materialize pushpin component is used to affix the sidebar when the page is scrolled.


Click the inputs of this contact form to see how motion is used to focus user attention.


Here's another example showing use of the Materialize collapsible accordion...


Filtering data using AngularJS in this select list snippet demonstrates the MD concepts of motion. Click a username to see how attention is focused to the bottom slide modal.