Materialize happens to be a Responsive CSS Framework that is pretty much based on Material Design Concepts by Google. As such, the main idea behind Materialize is to bring material design to the web, which has been a very popular aspect in terms of Google’s design for Android.
In this tutorial, we shall initially take you through what material design actually is and then go on to construct a home page for a blog by using Materialize.
A Design Language – What is it?
Any specific style that is the basis for the design of a range of products can be termed as a design language. As such, when designers wish to offer a certain unique and yet, consistent look to a specific range of products, try and define a design language to go with it. A design language offers plenty of aspects such as color schemes, materials, shapes, patterns, layouts, textures etc.
Google’s Material Design – A new approach to the design world
Material Design is one among the several different design languages that exist, such as Metro Design, Flat Design, Realism Design, etc. However, Material Design fairly differs when you compare it to the others on various aspects like shapes, colors, typography, layout etc. Also, Material Design adds two very important elements to the overall design stacking and motion.
With Material Design, one is capable of adding properties as weight and motion to the design aspects. Hence, it portrays a story.
A complete guide can be largely helpful in this regard and can be obtained through Google’s official documentation on Material Design.
Getting started
As per the official website, “A modern responsive front-end framework based on Material Design” is what Materialize has been termed as. So basically, it is very much like many other CSS Frameworks that are currently available like Foundation, Bootstrap etc.
It comes off as being based on a responsive grid system, and thus, it is also suitable for building websites for any kind of device.
Let us build something
A simple responsive design for a blog is what we will create using Materialize. You can try resizing your browser and further, you can try interacting with different elements to see their motion.
Download the script and set up the project
One can visit the Materialize Download Page to obtain CSS, Fonts and JS files. Now, create an index.html file and a css/style.css file. Also, create an image directory, where the images that are going to be used in our project, shall be kept.
The project directory should look something like
css --materialize.min.css --style.css js --materialize.min.js font --material-design-icons --roboto --images index.html
The Basic Template
The starting code for the index.html file is given below. We are basically loading the Materialize CSS, the JS library along with the custom style.css file.
Listing 1: A simple basic template
<html>
<head>
<title>Materialize CSS Framework Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" 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>
Creation of the Navigation Bar
The code here displays the navigation, in which the menu items are placed to the right, with the logo being placed to the left.
Listing 2: A simple navigation sample code
<nav>
<div class="nav-wrapper z-depth-1">
<div class="container">
<div class="col s12 m12 l12">
<a href="#!" class="brand-logo">Mrbool</a>
<ul class="side-nav">
<li><a href="#"><i class="mdi-action-perm-contact-cal left"></i>Contact Mrbool</a></li>
<li><a href="#"><i class="mdi-action-view-module left"></i>Home Mrbool</a></li>
</ul>
</div>
</div>
</div>
</nav>
Sample screen shot is attached below.
Figure 1 – Sample navigation bar
An icon is being displayed on left of every menu item so as to give the navigation bar more meaning and also make it engaging. If you wish to see the complete list of all support icon classes, you can find them at Materialize Icons Docs.
We should also keep a certain vertical space between the navigation bar and the body content and hence, you can place this code in the style.css file.
nav
{
margin-bottom: 35px;
}
Materialize Grid
Materialize makes use of a standard 12 column fluid responsive grid system, which enables you to easily lay out your page in an ordered manner.
The .container class isn’t a part of the grid, but nevertheless important, since it comes across as important when laying out content. Being set to about 70 percent of the window’s width, it allows the centering of your page content. Here, we shall use it in a similar fashion and center the content.
We can also makes use of .s, .m and .l =, in order to define specific layouts for viewport sizes, which are small, medium and large.
The code for the body layout is given below.
Listing 3: A sample body layout
<div class="col s12 m8 l8">
<div class="post-index z-depth-1">
<h5>Learn CSS3 </h5>
<h6>08/04/2015</h6>
<img class="responsive-img materialboxed" data-caption="CSS3 Image" src="images/css3.png" />
<p>Learning CSS is great experience.</p>
</div>
<div class="post-index z-depth-1">
<h5>Learn HTML5 </h5>
<h6>08/05/2015</h6>
<img class="responsive-img materialboxed" data-caption="HTML5 Image" src="images/html5.png" />
<p>Learning HTML5 is a great experience</p>
</div>
<div class="post-index z-depth-1">
<h5>Learn WordPress</h5>
<h6>08/09/2015</h6>
<img class="responsive-img materialboxed" data-caption="WordPress Image" src="images/wordpress.png" />
<p>Learning WP is a fun</p>
</div>
</div>
Figure 2 – Sample body layout
On small screens, we usually stack posts and widgets, and on larger screens, we lay them out horizontally.
Index for posts
Every post in the index usually has a heading, image, date and excerpt. Materialize offers readymade classes that can be used to style these elements.
<div class="post-index z-depth-1">
<h5>Learn HTML5 </h5>
<h6>08/05/2015</h6><img class="responsive-img materialboxed" data-caption="HTML5 Image" src="images/html5.png" />
<p>Learning HTML5 is a great experience</p>
</div>
The responsive-img class on the img tag allows the image to be responsive and the materialboxed class allows it to zoom on click. The image displayed when the image is zoomed is data-caption.
You will also need to initialize it using JavaScript, if you want the image zoom to work.
$(document).ready(function(){
$('.materialboxed').materialbox();
});
z-index-1 is to provide Material Design stacking to each of the posts. Here is some custom CSS that will allow you to leave certain space and also offer finishing to the post items. Put this in the style.css file.
Listing 3: A sample CSS file
.post-index
{
background-color: grey;
margin-bottom: 36px;
}
.post-index h5
{
padding-left: 16px;
padding-right: 16px;
padding-top: 16px;
padding-bottom: 4px;
margin: 2px;
}
.post-index h6
{
opacity: 0.8;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 16px;
}
.post-index p
{
padding-left: 16px;
padding-right: 16px;
padding-bottom: 16px;
}
Widgets
We will look to display widgets in the second column on the sidebar. Here is the code for a single widget wrapper –
<div class="widget-item z-depth-1"> <b> Insert title of widget</b> <div> Insert Body </div> </div>
Again, we have some custom CSS for providing space between elements and finishing to widgets. You can place this too, in the .css file.
.widget-item
{
background-color: grey;
margin-bottom: 38px;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-right: 16px;
}
.widget-item b
{
display: block;
margin-bottom: 16px;
}
Forms using Materialize
Form elements can be styled by making use of CSS classes which are provided by Materialize. The code for a “Sign In” form is given below.
Listing 4: A sample form
<div class="widget-item z-depth-1"> <b>Please 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">Enter Username</label> </div> <div class="input-field col s12"> <i class="mdi-action-https prefix"></i> <input id="password" type="text" class="validate"> <label for="password">Enter Password</label> </div> <button class="btn waves-effect waves-light" type="submit">Login Please<i class="mdi-action-lock-open right"></i></button> </div> </form> </div> </div> </div>
Figure 3 – Sample form section
Materialize Badges and Collections
List of anchor tags that are displayed vertically are called Collections. On the other hand, text that are displayed on the extreme right of anchor tags are known as badges.
Here is the code for such a widget –
Listing 5: A sample category navigation bar
<div class="widget-item z-depth-1"> <b>Content Categories</b> <div> <ul class="collection"> <a href="#!" class="collection-item">HTML5<span class="badge">6</span></a> <a href="#!" class="collection-item">CSS3<span class="badge">17</span></a> <a href="#!" class="collection-item">JavaScript<span class="badge">19</span></a> <a href="#!" class="collection-item">PHP<span class="badge">22</span></a> <a href="#!" class="collection-item">Android<span class="badge">90</span></a> <a href="#!" class="collection-item">Hadoop<span class="badge">34</span></a> </ul> </div> </div>
Figure 4 – Sample category side bar
Footer
There are many different classes that can be used to develop an attractive looking footer and they are provided by Materialize. Here is the code for a simple copyright text on the left, and for a link on the right.
<footer> <div class="footer-copyright"> <div class="container"> © 2015 Copyright Mrbool <a class="grey-text text-lighten-4 right" href="#!">About Us</a> </div> </div> </footer>
Figure 5 – Sample footer
Toasts
Materialize offers a very simple and easy way by which you can send alerts to your users. Toasts are sized and placed in a responsive manner.
Using JavaScript, we can easily display Toasts.
//Content & duration of toast
toast('New', 6000);
Other features by Materialize
There are several other features that are offered by Materialize in the form of CSS classes, such as tables, pre-loaders, buttons, etc. Modals, drop downs, parallax and tabbed navigation is also possible with the help of JavaScript APIs.
See the prices for this post in Mr.Bool Credits System below: