Tutorial

Make Material Design Websites with the Materialize CSS Framework

Draft updated on Invalid Date

Narayan Prusty

Make Material Design Websites with the Materialize CSS Framework

This tutorial is out of date and no longer maintained.

Introduction

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.

What is Material Design?

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.

What is Materialize?

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.

Setting up the Basic Materialize Template

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>

Materialize Colors

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>

See the Pen yyMjVO by Narayan Prusty (@qnimate) on CodePen.

Materialize Grid

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>

See the Pen xbqjrP by Narayan Prusty (@qnimate) on CodePen.

Complete Materialize Color Palette

Material SideNav

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>

See the Pen zxZLGg by Narayan Prusty (@qnimate) on CodePen.

Vertical Aligning using Materialize

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>

See the Pen rayvgp by Narayan Prusty (@qnimate) on CodePen.

Depth using Materialize

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>

See the Pen vExrBq by Narayan Prusty (@qnimate) on CodePen.

Materialize Buttons

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>

See the Pen GgWGJg by Narayan Prusty (@qnimate) on CodePen.

Materialize Forms

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>

See the Pen PwpabN by Narayan Prusty (@qnimate) on CodePen.

Materialize Icons

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>

See the Pen ByWVRQ by Narayan Prusty (@qnimate) on CodePen.

Materialize Tabs

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>

See the Pen LEWrQw by Narayan Prusty (@qnimate) on CodePen.

Materialize’s Material Box

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">

See the Pen PwpaRb by Narayan Prusty (@qnimate) on CodePen.

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>

See the Pen bNqKKr by Narayan Prusty (@qnimate) on CodePen.

Creating a Portfolio Site

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>

See the Pen vExrvG by Narayan Prusty (@qnimate) on CodePen.

Detail Information

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.

Displaying Projects

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>

See the Pen GgWGLr by Narayan Prusty (@qnimate) on CodePen.

Displaying Contact Information

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>

See the Pen vExrwX by Narayan Prusty (@qnimate) on CodePen.

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>

See the Pen WbpKbJ by Narayan Prusty (@qnimate) on CodePen.

Conclusion

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.

Learn more about our products

About the authors