Getting started with Materialize

Materialize is a modern responsive front-end framework based on Material Design.

Material design is a design language developed by Google. It is a design with increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Have a look at the Material Design introductory video below which illustrates how Google’s own android apps adapt with this new design guideline.

In this tutorial, you will know how to get started will the Materialize framework and how to use Materialize components with live examples embeded using CodePen

Introduction

To start using Materialize, all you have to do is download Materialize CSS and JS files from Official Materialize Page.

After downloading, extract the files into the directory where your website is located. Your directory will look something like this.

MyWebsite/
  |--css/
  |  |--materialize.css
  |
  |--font/
  |  |--material-design-icons/
  |  |--roboto/
  |
  |--js/
  |  |--materialize.js
  |
  |--index.html

Create index.html file in the root folder and style.css under the css folder. The following example below shows how to import Materialize into your webpage. Make sure to import jQuery before importing materialize.js. View on Github for this basic template

Basic Template to import Materialize

Materialize Colors

Materialize Colors

Have a look at the Materialize Color Palette. Each of these colors is defined with a base color class and an optional lighten or darken class.

To apply a background color, just add the color name and light/darkness as a class to the element

To apply a text color, just append -text to the color class as show in the following CodePen example.

Grid

Container class helps you to center and contain your page content. We use the container to contain our body content.

Take a look at the CodePen embed below to quickly understand how the grid works. The standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width.

To offset, simply add offset-s2 to the class where s signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by.

Materialize Grid

Alignment

You can easily vertically center things by adding the class valign-wrapper to the container holding the items you want to vertically align.

The classes .left-align, .right-align and .center-align are used to align text left, right and center.

Example to demonstrate alignment

Shadow

Shadow effect is applied by adding a class=”z-depth-1" to an HTML tag. You can increase the depth further by adding classes such as ‘z-depth-2’, ‘z-depth-3’, ‘z-depth-4’, ‘z-depth-5’.

Example to demonstrate shadow

Buttons

There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.

Example to demonstrate buttons

Cards

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.

Example to demonstrate cards

Mobile Collapse Button

When your nav bar is resized, you will see that the links on the right turn into a hamburger icon menu. Take a look at the example below to get this functionality. Add the entire button-collapse line to your nav.

Navbar Dropdown Menu

To add a navbar dropdown menu, add the ul dropdown structure into the page. Then, add an element to trigger the dropdown menu. Make sure to supply the id of the dropdown structure to the data-activates attribute of the dropdown trigger.