Materialize: The Ultimate CSS Framework for Material Design

Google’s Material Design is designed to deliver a consistent user experience across the web and mobile apps. It’s increasingly popular among developers, and if you’re considering adopting it, there are several ways to do so. You can use Polymer, Angular, or Materialize.

Materialize is a CSS framework based on Material Design principles with Sass support for more efficient development. It offers default styling for ease of use and comes with comprehensive documentation.

Materialize includes a variety of useful components such as dialogs, modals, date pickers, material buttons, parallax effects, cards, and more. It also provides multiple navigation options like drop-down menus, slide-in menus, and tabs. Materialize utilizes a 12-grid system with three default screen size media queries: a maximum width of 600px for mobile devices, 992px for tablets, and anything over 992px for desktop devices.

Getting Started with Materialize

There are two ways to get started with Materialize: using standard CSS or Sass. You can download both versions here. Alternatively, you can install Materialize with Bower using the following command:

 bower install materialize

Once you have the sources, ensure that you properly link them in your project files or compile the source if you are using the Sass version.

Features of Materialize

In this section, we will explore some of the key features that Materialize offers.

1. Sass Mixins

Materialize includes Sass Mixins, which automatically add all necessary browser prefixes when you write certain CSS properties. This feature ensures compatibility across all browsers with minimal code.

Consider the following animation properties:

 -webkit-animation: 0.5s;
 -moz-animation: 0.5s;
 -o-animation: 0.5s;
 -ms-animation: 0.5s;
 animation: 0.5s;

These lines of code can be condensed into a single line using a Sass mixin:

 @include animation(.5s);

There are about 19 main mixins available. To see the full list, visit the Sass category under the MIXINS tab.

2. Flow Text

Unlike other frontend frameworks that use fixed text sizes, Materialize implements truly responsive text. Text size and line height are scaled responsively to maintain readability. For smaller screens, the line height is scaled larger to improve legibility.

To use Flow Text, simply add the flow-text class to your desired text. For example:

 <p class="flow-text">This is Flow Text.</p>

Check out the demo here in the Flow Text section.

3. Ripple Effect with Waves

Material Design includes interactive feedback, such as the ripple effect. In Materialize, this effect is called Waves. When users click or tap a button, card, or any other element, the effect appears. You can easily create this effect by adding the waves-effect class to your elements.

Here’s a snippet to add the waves effect:

 <a href="#" class="btn waves-effect">Submit</a>

The ripples are grey by default. If you have a dark background, you may want to change the ripple color. To add a different color, simply add waves-(color) to the element, replacing (color) with the desired color name.

 <a href="#" class="btn waves-effect waves-light">Submit</a>

You can choose from seven colors: light, red, yellow, orange, purple, green, and teal. You can also create or customize your own colors if needed.

4. Shadow Effects

Material Design recommends using elevation to signify relationships between elements. Materialize supports this principle with its z-depth-(number) class, allowing you to set shadow depth by changing (number) from 1 to 5:

 <div class="card">
 <p>Shadow depth 3</p>
 <p class="z-depth-3"></p>
 </div>

All shadow depths are demonstrated in the image below.

5. Buttons and Icons

Material Design includes three main button types: raised button, floating action button (FAB), and flat button.

(1) Raised Button

The raised button is the default button. To create this button, simply add the btn class to your elements. To add the wave effect when clicked or pressed, use the following code:

 <a href="#" class="btn waves-effect waves-light">Button</a>

You can also add an icon to the left or right of the text. For the icon, include a custom <i> tag with the appropriate icon class name and position. For example:

 <a href="#" class="btn waves-effect waves-light"><i class="mdi-file-file-download left"></i>Download</a>

In the above snippet, the mdi-file-file-download class is used for the download icon. There are around 740 different icons available. To see them, visit the Sass page in the Icons tab.

(2) Floating Action Button (FAB)

A floating button can be created by appending the btn-floating class and your desired icon. For example:

 <a href="#" class="btn-floating waves-effect waves-light"><i class="mdi-content-send"></i></a>

(3) Flat Button

In Material Design, the flat button is often used within dialog boxes. To create it, simply add the btn-flat class to your element:

 <a href="#" class="btn-flat waves-effect waves-red">Decline</a>

Additionally, buttons can be disabled with the disabled class and made larger using the btn-large class.

6. Grid System

Materialize utilizes a standard 12-column responsive grid system. The responsiveness is divided into three categories: small (s) for mobile, medium (m) for tablets, and large (l) for desktops.

To create columns, use s, m, or l to indicate the size, followed by the grid number. For example, to create a half-width layout for a mobile device, use the s6 class in your layout. The s6 class stands for small-6, which means 6 columns on a small device.

Include the col class in the layout you create and place it inside an element with the row class. This ensures the layout is properly structured into columns. Here’s an example:

 <div class="row">
 <div class="col s12">I have 12 columns or full width here</div>
 <div class="col s4">4 columns (one-third) here</div>
 <div class="col s4">4 columns (one-third) here</div>
 <div class="col s4">4 columns (one-third) here</div>
 </div>

Here’s the result:

By default, col s12 is fixed-size and optimized for all screen sizes, essentially the same as col s12 m12 l12. However, if you want to specify the size of the columns for different devices, you can list the additional sizes like this:

 <div class="row">
 <div class="col s12">My width always has 12 columns everywhere</div>
 <div class="col s12 m6 l9">I have 12 columns on mobile, 6 on tablet, and 9 on desktop</div>
 </div>

Here’s what this looks like:

These are just a few features of Materialize. To learn more about other features, visit the documentation page.