I ended my last post saying how awesome the Material Design is, which was revealed along with Android Lollipop a year ago. After writing a few apps on Android Studio I wondered how amazing it would be if we can have this beautiful typography, subtle transitions and animations in more places than just droids…

A few days later, when working on a web project my buddy Hisham mentioned about Materialize CSS.

Simply, this is Material Design to the web!

For those who are already using Bootstrap or other similar frameworks, this needs no introduction. Nevertheless, it is a modern responsive front-end framework based on Material Design.

What is the big fuss?

Material Design is based on light, shadows and how paper reacts to touches. Sounds like marketing material, but it is beautiful! The elements on your screen have a 3D perspective where cards are placed on top of one another giving a sense of depth. Labels, text and buttons cannot teleport. They take a physical movement path across your screen. The redesigned Roboto typography is both beautiful and subtle. Looks great on all display sizes and densities.

That was a short introduction. Click on the image below to learn the more in case you want to.

Getting Started

Click here to start materializing your site. The guide may not be as extensive as Bootstrap’s but it is good enough to getting you started.

Thanks to the team: Alvin, Alan, Alex and Kevin for giving us this opportunity.

I have also just begun. If you are already an expert on this area, let us know how we can customize this framework to work better. If you are also a beginner, I hope you find this post helpful!