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
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
Download Script Live Demo
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.
Here is how our project directory would look
Basic Template
Here is the starting code in out index.html file. Here we are loading Materialize CSS and JS library and also our custom style.css file.
Creating Navigation Bar
Here is the code to display a navigation bar in which the logo is placed on the left and menu items are placed on the right.
Here is how the navigation bar looks
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
Materialize Grid
Materialize uses a standard 12 column fluid responsive grid system.The grid helps you layout your page in an ordered, easy fashion.
.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.
Here is the code for body layout of our sample blog design
On small screens we stack posts list and widgets. But on medium and large screens we lay them horizontally.
Posts Index
Every post in index page has a heading, date, image and excerpt. Materialize provides ready made CSS classes to styling each of these elements.
Here is the code for a single post in the index.
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.
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.
Widgets
We will display widgets on the sidebar i.e., second column. Here is the code for a single widget wrapper.
Here is some custom CSS to leave some space between elements and provide finishing to the widgets. Place it in style.css file.
Materialize Forms
Materialize provide CSS classes for styling form elements. Here is code for a Sign In form displayed in a widget
Materialize Collections and Badges
Collections are list of anchor tags displayed vertically. Badges represent a text displayed on the extreme right of anchor tags.
Here is the code for Categories widget using Materialize collections and badges
Materialize Footer
Materialize Provides many different classes for creating a great looking footer. But we will createing a simple footer with a copyright text on left and a link on right.
Here is the code for a footer
Materialize Toasts
Materialize provides an easy way for you to send unobtrusive alerts to your users through toasts. These toasts are also placed and sized responsively.
We can display a toast anytime using JavaScript
Other Materialize Features
Materialize provides CSS classes for designing tables, buttons, pre-loaders etc. It also provide JavaScript APIs to display drop downs, modals, parallax and tabbed navigation.
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.
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
Download Script Live Demo
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.
Here is how our project directory would look
css
--materialize.min.css
--style.css
font
--material-design-icons
--roboto
--images
index.html
js
--materialize.min.js
--materialize.min.css
--style.css
font
--material-design-icons
--roboto
--images
index.html
js
--materialize.min.js
Basic Template
Here is the starting code in out index.html file. Here we are loading Materialize CSS and JS library and also our custom style.css file.
<html>
<head>
<title>Materialize CSS Framework Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- jQuery is required by Materialize to function. -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script type="text/javascript">
//custom JS code
</script>
</body>
</html>
<head>
<title>Materialize CSS Framework Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- jQuery is required by Materialize to function. -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script type="text/javascript">
//custom JS code
</script>
</body>
</html>
Creating Navigation Bar
Here is the code to display a navigation bar in which the logo is placed on the left and menu items are placed on the right.
<nav>
<div class="nav-wrapper z-depth-1">
<div class="container">
<div class="col s12 m12 l12">
<a href="#!" class="brand-logo">Site Title</a>
<ul class="side-nav">
<li>
<a href="#"><i class="mdi-action-perm-contact-cal left"></i>Contact</a>
</li>
<li>.....</li>
</ul>
</div></div></div>
</nav>
<div class="nav-wrapper z-depth-1">
<div class="container">
<div class="col s12 m12 l12">
<a href="#!" class="brand-logo">Site Title</a>
<ul class="side-nav">
<li>
<a href="#"><i class="mdi-action-perm-contact-cal left"></i>Contact</a>
</li>
<li>.....</li>
</ul>
</div></div></div>
</nav>
Here is how the navigation bar looks
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
nav
{
margin-bottom: 30px;
}
{
margin-bottom: 30px;
}
Materialize Grid
Materialize uses a standard 12 column fluid responsive grid system.The grid helps you layout your page in an ordered, easy fashion.
.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.
Here is the code for body layout of our sample blog design
<div class="container">
<div class="row">
<div class="col s12 m8 l8">
<!-- Posts list is displayed here -->
</div>
<div class="col s12 m4 l4">
<!-- widgets are displayed here -->
</div>
</div>
</div>
<div class="row">
<div class="col s12 m8 l8">
<!-- Posts list is displayed here -->
</div>
<div class="col s12 m4 l4">
<!-- widgets are displayed here -->
</div>
</div>
</div>
On small screens we stack posts list and widgets. But on medium and large screens we lay them horizontally.
Posts Index
Every post in index page has a heading, date, image and excerpt. Materialize provides ready made CSS classes to styling each of these elements.
Here is the code for a single post in the index.
<div class="post-index z-depth-1">
<h5>Learn CSS3 at Sitepoint</h5>
<h6>08/01/2015</h6>
<img class="responsive-img materialboxed" data-caption="CSS3 Image" src="images/css3.png" />
<p>Excerpt.</p>
</div>
<h5>Learn CSS3 at Sitepoint</h5>
<h6>08/01/2015</h6>
<img class="responsive-img materialboxed" data-caption="CSS3 Image" src="images/css3.png" />
<p>Excerpt.</p>
</div>
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();
});
$('.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.
.post-index
{
background-color: white;
margin-bottom: 30px;
}
.post-index h5
{
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 2px;
margin: 0px;
}
.post-index h6
{
opacity: 0.7;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
}
.post-index p
{
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
{
background-color: white;
margin-bottom: 30px;
}
.post-index h5
{
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 2px;
margin: 0px;
}
.post-index h6
{
opacity: 0.7;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
}
.post-index p
{
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
Widgets
We will display widgets on the sidebar i.e., second column. Here is the code for a single widget wrapper.
<div class="widget-item z-depth-1">
<b>Widget Title</b>
<div>
Widget Body
</div>
</div>
<b>Widget Title</b>
<div>
Widget Body
</div>
</div>
Here is some custom CSS to leave some space between elements and provide finishing to the widgets. Place it in style.css file.
.widget-item
{
background-color: white;
margin-bottom: 30px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
.widget-item b
{
display: block;
margin-bottom: 15px;
}
{
background-color: white;
margin-bottom: 30px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
.widget-item b
{
display: block;
margin-bottom: 15px;
}
Materialize Forms
Materialize provide CSS classes for styling form elements. Here is code for a Sign In form displayed in a widget
<div class="widget-item z-depth-1">
<b>Sign In</b>
<div>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="mdi-action-account-circle prefix"></i>
<input id="username" type="text" class="validate">
<label for="username">Username</label>
</div>
<div class="input-field col s12">
<i class="mdi-action-https prefix"></i>
<input id="password" type="password" class="validate">
<label for="password">Password</label</div>
<button class="btn waves-effect waves-light" type="submit">
Login<i class="mdi-action-lock-open right"></i></button>
</div>
</form>
</div>
</div>
</div>
<b>Sign In</b>
<div>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="mdi-action-account-circle prefix"></i>
<input id="username" type="text" class="validate">
<label for="username">Username</label>
</div>
<div class="input-field col s12">
<i class="mdi-action-https prefix"></i>
<input id="password" type="password" class="validate">
<label for="password">Password</label</div>
<button class="btn waves-effect waves-light" type="submit">
Login<i class="mdi-action-lock-open right"></i></button>
</div>
</form>
</div>
</div>
</div>
Materialize Collections and Badges
Collections are list of anchor tags displayed vertically. Badges represent a text displayed on the extreme right of anchor tags.
Here is the code for Categories widget using Materialize collections and badges
<div class="widget-item z-depth-1">
<b>Categories</b>
<div>
<ul class="collection">
<a href="#!" class="collection-item">
HTML<span class="badge">1</span>
</a>
<a href="#!" class="collection-item">
....
</a>
</ul>
</div>
</div>
<b>Categories</b>
<div>
<ul class="collection">
<a href="#!" class="collection-item">
HTML<span class="badge">1</span>
</a>
<a href="#!" class="collection-item">
....
</a>
</ul>
</div>
</div>
Materialize Footer
Materialize Provides many different classes for creating a great looking footer. But we will createing a simple footer with a copyright text on left and a link on right.
Here is the code for a footer
<footer>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">About Me</a>
</div>
</div>
</footer>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">About Me</a>
</div>
</div>
</footer>
Materialize Toasts
Materialize provides an easy way for you to send unobtrusive alerts to your users through toasts. These toasts are also placed and sized responsively.
We can display a toast anytime using JavaScript
//Toast content and duration of the toast
toast('New Post', 4000);
toast('New Post', 4000);
Other Materialize Features
Materialize provides CSS classes for designing tables, buttons, pre-loaders etc. It also provide JavaScript APIs to display drop downs, modals, parallax and tabbed navigation.
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.
awesome as always...
ReplyDeletei'll try it soon...
thanx for sharing...
one small error; top, menu( contact, home ) disappearing in mobile versions.
ReplyDeletei love google materialize design. i make a CV with material style.
ReplyDeletehttp://demo.themesafari.net/materialize-responsive-resume/
i also use materializecss. :)
Interesting concept, but until they work out a way to scale the top menu it will continue to be an experiment with no real world usage, I guess I'll stick with bootstrap for the time being.......
ReplyDeleteInteresting post on Materialize, haven't looked at this before. Cheers Narayan :)
ReplyDeleteNice design, I will try this out.
ReplyDeleteNice article. There is a showcase website on responsive designs, hope this helps : http://responsivecss.net/
ReplyDeleteWell, Very good and i thing you share something genuine. And you are php html tutorial sharing hub. Thans a lot.
ReplyDeleteHi Narayan,
ReplyDeleteAwesome share as always
Surely I'll try this
Thanks for sharing
Hello Narayan ,i really need it this one Thanks for Sharing Awesome one.Cheers
ReplyDeleteHello 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
ReplyDeletethnx for sharing...
ReplyDeleteThank you so much for the information unfortunately, this is certainly very useful for me as a beginner blogger,
ReplyDeleteThank you for sharing this Google Materialize a Responsive HTML5 Framework i will try ..
ReplyDeleteNow 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..
ReplyDeletetutorial is very informative and thanks for the demo. Login box input effect is very impressive.
ReplyDeleteI hope it is not too late to learn this new design framework. I have done some design using Bootstrap in the past ...
ReplyDeletePerhaps it is time to "move on" ...
Thanks for sharing...
ReplyDeleteThanks for sharing
ReplyDeleteThis Is So Nice Post Which is very Informative !!!
ReplyDeleteImpressive bro...thanks for sharing this informative article with us!
ReplyDeleteThank you for all this informations i want if i can put a picture in a Toast button ??
ReplyDelete