Google Materialize a Responsive HTML5 Framework

Materialize is a Responsive CSS Framework based on Google’s Material Design Concepts. Materialize aims to bring material design to web which was initially made by Google for Android. In this tutorial I will explain what material design is and then we will build a blog home page using Materialize.

What is Design Language?
A design language(or design vocabulary) is an style that guides the design of a complement of products. Designers wishing to give their suite of products a unique but consistent look and feel define a design language for it, which can describe choices for design aspects such as materials, color schemes, shapes, patterns, textures, or layouts.

Author

Narayan Prusty

Founder of QNimate
Web Astronaut,
You will often find him at QScutter classes

What is Google Material Design?
Material Design is one of those many other types of designing languages like Flat Design, Metro Design, Realism Design etc. Material Design does differ to other types in terms of colors, typography, shapes, patterns and layout. But Material Design adds something very new to design language i.e, Motion and Stacking.

Material Design provides mass, weight and motion to elements of design. This makes the design feel more like a story.

You can find the complete guide to Material Design principles and concepts at Google’s Material Design Official Documentation.

Getting Started with Materialize
According to official website Materialize is “A modern responsive front-end framework based on Material Design”. So its just one of the many CSS frameworks like Bootstrap, Foundation etc but its based on Material Design concepts.

Its based on a responsive grid system therefore its great to build web sites for all types of devices.

What we will build?
In this tutorial we will a simple responsive blog design using Materialize. Go ahead and try to resize your browser. And also start interacting with it to see motion of different elements. Here is how it looks

Downloading Materialize and Setting up Project
You can download Materialize CSS, JS and Fonts files from Materialize Download Page. Now create index.html and css/style.css files. And finally create a images directory where the images for our project will be kept in.

We are displaying a icon on left of every menu item to make the navigation bar more meaningful and engaging. Complete list of all support icon classes can be found at Materialize Icons Docs.
We should keep some vertical space between the body content and navigation bar. So place this code in style.css file

.container class is not strictly part of the grid but is important in laying out content. It allows you to center your page content. The container class is set to ~70% of the window width. It helps you center and contain your page content. We will use the container to contain our body content.

We can define different layout for different viewport size(i.e., small, medium and large) using .s, .m and .l class respectively.

responsive-img class on img tag makes the image responsive and materialboxed class makes the image zoomable on click. data-caption is the caption displayed when image is zoomed.
For the image zoom to work you need to initialize it using JavaScript.

$(document).ready(function(){
$('.materialboxed').materialbox();
});

z-index-1 provides Material design stacking look to each post item. Here is some custom CSS to leave some space and provide finishing to the post items. Place it in style.css file.

Final Thoughts
If you planning to create a new website or redesign your site then I recommend to choose Materialize Framework because there are very few sites which are material designed and you site will stand out of the crowd. You can also use materialize in designing hybrid mobile apps. Please share your experiences with Materialize below.

Hello there, Todays flat design is being used widely but this is new so can you give me any real example? Do you have any materialize website example? I want to see the look. by the way thank you for this new information

Now days Responsive sites are earn money compare with non responsive sites and very strange experience for me some days ago i was on top on .com Google in ranking but in cell phone not rank and other site showing mobile friendly..