This tutorial is out of date and no longer maintained.
Materialize is a Responsive CSS Framework based on Google’s Material Design Language. In this tutorial I will explain what material design is and then we will build a portfolio website using Materialize. I will also compare Materialize with other popular CSS frameworks like Foundation and Bootstrap.
Material Design is a Design Language that challenges to create a visual language for users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.
Other competitive design languages are flat design, metro design, realism design etc. Material differs from them on the basics of color schemes, shapes, patterns, textures, or layouts. Material is the only design language that adds motion and depth to elements.
In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.
As the user interacts with the design, due to motion, the design transforms and reorganizes itself on a continuity fashion.
According to the official website, “Materialize is a modern responsive front-end framework based on Material Design”. So it’s just one of the many CSS frameworks like Bootstrap, Foundation etc.
The difference between Materialize, Bootstrap, and Foundation is that Materialize is based on Google’s Material Design language where as bootstrap and foundation are based on the mobile first design language and flat design language, respectively.
Materialize provides all CSS and JS components that are provided by bootstrap and foundation.
You can download Materialize CSS and JS files from Materialize Download Page. Now create index.html
and css/style.css
files. And finally create an images
directory where the images for our project will be kept in.
Here is how our project directory will look:
----- css/
---------- materialize.min.css
---------- style.css
----- js/
---------- materialize.min.js
----- images/
- index.html
Here is the starting code in our index.html
file. Here we are loading the 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 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 type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript">
//custom JS code
</script>
</body>
</html>
Material Design is based on some predefined colors. Materialize provides classes to provide those colors to font and background.
Here is an example:
BACKGROUND COLOR
<div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
TEXT COLOR
<div class="card-panel">
<span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
</div>
Materialize uses the standard 12 column fluid responsive grid system.
The .container
class is not strictly part of the grid, but it 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 use the container to contain our body content.
.row
class holds the grid. The .s
, .m
and .l
classes are used to define the width of columns for small, medium, and large screens.
Here is an example:
<div class="container">
<div class="row">
<div class="blue lighten-5 col s12 m1 l1">1</div>
<div class="blue lighten-4 col s12 m1 l1">1</div>
<div class="blue lighten-3 col s12 m1 l1">1</div>
<div class="blue lighten-2 col s12 m2 l2">2</div>
<div class="blue lighten-1 col s12 m3 l3">2</div>
<div class="blue col s12 m4 l4">2</div>
</div>
</div>
SideNav is a navigation that works on all widths. It toggles from the left/right side of viewport.
Here is an example:
<ul id="slide-out" class="side-nav full">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse">
<i class="large mdi-navigation-menu"></i>
</a>
You can easily, vertically center things by adding the class valign-wrapper
to the container, holding the items you want to vertically align.
<div class="box valign-wrapper">
<h5>Vertical</h5>
</div>
In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.
You can easily apply this shadow effect by adding a class=“z-depth-n” to an HTML tag.
<p class="z-depth-1">z-depth-1</p>
<p class="z-depth-2">z-depth-2</p>
<p class="z-depth-3">z-depth-3</p>
<p class="z-depth-4">z-depth-4</p>
<p class="z-depth-5">z-depth-5</p>
There are two main button types described in material design. The raised button is a standard button that signify actions and seeks to give depth to a mostly flat page. The floating, circular action button is meant for very important functions.
<a class="waves-effect waves-light btn">Stuff</a>
<a class="waves-effect waves-light btn"><i class="mdi-file-cloud left"></i>button</a>
<a class="waves-effect waves-light btn"><i class="mdi-file-cloud right"></i>button</a>
<a class="btn-floating btn-large waves-effect waves-light red"><i class="mdi-content-add"></i></a>
Forms are the standard way to receive user inputted data. The transitions and smoothness of these elements are very important because of the inherent user interaction associated with forms.
Text fields allow user input. The border should light up simply and clearly indicating which field the user is currently editing. You must have an .input-field
div wrapping your input and label. This helps our jQuery animate the label. This is only used in our Input and Textarea to form elements.
If you don’t want the Green and Red validation states, just remove the validate
class from your inputs.
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="username" type="text" class="validate">
<label for="username">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
</form>
</div>
Materialize has included 740 Material Design Icons, courtesy of Google. The icons font file is embedded into the Materialize CSS file in form of Data URI. Icon classes use pseudo elements to select the HTML element and use generated content to populate it with icons using the icon’s UNICODE.
To use these icons, just place the name of the icon into the class of an HTML tag
To control the size of the icon, change the font-size
property of your icon. Optionally, you can use small
, large
and medium
.
<i class="small mdi-content-add"></i>
<i class="medium mdi-content-add"></i>
<i class="large mdi-content-add"></i>
The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then, when you click on each tab, only the container with the corresponding tab id will become visible.
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#test1">Test 1</a></li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3"><a href="#test3">Test 3</a></li>
<li class="tab col s3"><a href="#test4">Test 4</a></li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>
</div>
Material box is a material design implementation of the Lightbox plugin, when a user clicks on an image that can be enlarged. Material box centers the image and enlarges it in a smooth, non-jarring manner. To dismiss the image, the user can either click on the image again, scroll away, or press the ESC key.
It is very easy to add a short caption to your photo. Just add the caption as a data-caption attribute.
<img class="materialboxed" width="300" src="https://cask.scotch.io/2015/01/784014790032582570.png" data-caption="Materialize Demo">
Add a dropdown list to any button. Make sure that the data-activates
attribute matches the id in the <ul>
tag.
You can add a divider with the <li class="divider"></li>
tag.
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
We covered some of the most important components of Materialize CSS Framework. Its time to put them together and create a portfolio site. Complete demo of the portfolio site which we will be creating in this tutorial.
In our portfolio site, first, we will have a big horizontal banner which displays your name and profession. We can create this using Materialize text formatting tags and little CSS.
<div class="intro deep-orange lighten-2 z-depth-1">
<h1 class="grey-text text-lighten-5">narayan prusty</h1>
<h5 class="grey lighten-4 grey-text text-darken-1">web and mobile developer</h5>
</div>
We need to display bio, profile, and current job statuses in our portfolio. For this, we can create a 3 column grid. This grid is 3 column is medium and large screen, but on mobile phones it’s stacked.
<div class="container about">
<h5>about me</h5>
<h6>let me introduce my self</h6>
<hr>
<div class="row">
<div class="col s12 m4 l4">
<h6>Story</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col s12 m4 l4">
<h6>Profile</h6>
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<img src="http://labs.qnimate.com/portfolio-materialize/images/profile.png" width="64" height="64">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
<div class="card-action">
<a href="#">Link</a>
<a href='#'>Link</a>
</div>
</div>
</div>
<div class="col s12 m4 l4">
<h6>current jobs</h6>
<ul class="collapsible">
<li class="active">
<div class="collapsible-header"><i class="mdi-av-web"></i>Designer</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-editor-format-align-justify"></i>Developer</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-av-play-shopping-bag"></i>Video Editor</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-editor-insert-comment"></i>Support Asst.</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
</ul>
</div>
</div>
</div>
See the Pen WbpyPM by Narayan Prusty (@qnimate) on CodePen.
We used Materialize cards in Middle column. Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.
Here we used Material Collapsible in the last column. Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.
You need to also display some of your awesome work on your portfolio. You’ll need a image of your work and a title/link.
We will display projects via floated material boxes.
<div class="container portfolio">
<h5>portfolio</h5>
<h6>MY LATEST PROJECTS</h6>
<hr>
<div class="row">
<div class="col s12 m12 l12 portfolio-holder">
<img class="materialboxed" src="http://labs.qnimate.com/portfolio-materialize/images/project.png">
<img class="materialboxed" src="http://labs.qnimate.com/portfolio-materialize/images/project.png">
<img class="materialboxed" src="http://labs.qnimate.com/portfolio-materialize/images/project.png">
<img class="materialboxed" src="http://labs.qnimate.com/portfolio-materialize/images/project.png">
<img class="materialboxed" src="http://labs.qnimate.com/portfolio-materialize/images/project.png">
<img class="materialboxed" src="http://labs.qnimate.com/portfolio-materialize/images/project.png">
</div>
</div>
</div>
We need to display a contact form in case the user wants to contact us. We have the capacity to display a phone number, an address, and an email address for other ways to communicate.
We can build the form using Material form classes.
<div class="container contact">
<h5>contact</h5>
<h6>get in touch with me</h6>
<hr>
<div class="row">
<div class="col s12 m6 l6">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">E-Mail</label>
</div>
</div>
<textarea class="materialize-textarea" placeholder="Your Message" required></textarea>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="mdi-content-send right"></i>
</button>
</form>
</div>
</div>
<div class="col s12 m6 l6 contact-holder">
<h6 class="mdi-action-home">Address</h6>
<p>Nr. 6, 21 Awesome Street, London, UK</p>
<h6 class="mdi-hardware-phone-android">Phone Number</h6>
<p>+91 9912776151</p>
<h6 class="mdi-action-open-in-browser">Website</h6>
<p>qnimate.com</p>
</div>
</div>
</div>
At the bottom of the site we will keep a footer which displays a copyright text and a link. Materialize provides classes to create a footer in no time.
<footer>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">Link</a>
</div>
</div>
</footer>
We saw some of the features and components of Material Design. There are lot more components offered by Materialize so that you can build any kind of website frontend.
If you’re 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 your site will stand out of the crowd. You can also use Materialize in designing hybrid mobile apps. Please share your experiences with Materialize below.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.