Materialize – A Material Design CSS Framework

Material Design is a visual language developed by Google. Its most popular framework is Materialize—a fusion of design aesthetics and clever CSS that lets you build perfect pages in no time at all. Learn about its advantages, and why you might finally want to move on from Bootstrap.

The current version of Android has a sleek Material Design user interface developed by Google. Those who haven’t experienced Android Lollipop may wonder what on earth Materialize is and why should they be using it. Materialize is a CSS framework for Google’s Material Design language that has a lot more flexibility and power than competing frameworks like Bootstrap.

We spent time researching a number of similar frameworks, and Materialize was our top pick. It met our needs excellently, while being extremely flexible. Let’s dig deeper into why:

Amazing Material Design UIs

A good UX responds to the user: their interactions all have clear responses so they can more easily navigate and understand your UI. As a tool, Bootstrap is excellent to get started, but if you want to build a real quality UI you need to write a huge amount of custom CSS to get anywhere close to the look and feel of Materialize. It looks great even out of the box: check out their starter template.

Excellent selection of user icons

Materialize includes 740 Material Design Icons, which are bundled in a single font file taking advantage of the typographic rendering capabilities of modern browsers—each one can be easily incorporated with a few lines of code.

An add icon

<i class=”material-icons”>add</i>

An icon automatically scales according to the font size of its parent but you can set the size explicitly using the following commands:

<!–
Sizes:
tiny: 1rem
small: 2rem
medium: 4rem
large: 6rem
–>
<i class=”large material-icons”>insert_chart</i>

Browser support

These icons are Vector-based—they look great at any scale, and on everything from retina displays and low DPI display screens.

Colors Galore

Materialize has a huge variety of colours compared to Bootstrap, which has only a few. In bootstrap the colour for warning is red, for success it’s green and so on. But in Material Design the color palette is built around base colors. Each of these colors is defined with a base color class and a selection of lighter or darker classes, creating a much broader palate for your UI design.

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

<div class=”card-panel teal lighten-2″>This is a card panel with a teal lighten-2 class</div>

To apply a text color, just append -text to the color class like this:

<div class=”card-panel”>
<span class=”blue-text text-darken-2″>This is a card panel with dark blue text</span>

</div>

Give Life to Your Page Elements

In all aspects of material design, there ought to be a definite z-depth that ascertains how far raised or close to the page the element is, a z- element depth would make them look alive just by using  class=”z-depth-2″ to a html tag. Up to z-depth-5 is available but more can be added by using custom CSS.

Beautiful Card Elements

Cards can conveniently display content composition. They’re also suitable for presenting similar objects with considerable variation in sizes or supporting actions, like photos with captions of variable length.

The Ripple Effect

When a user taps or clicks on an element in your page like a button or an image or a drop-down, a ripple/wave is formed by the click or tap, much like when a pen is dipped in ink. Effects like this are a big part of why we love Materialize: it makes browsing very tactile for the user—everything they do has a concrete visual response that helps to create a streamlined and easily-understood UI. Materialize can create many similar effects. If you want to add a ripple on an anchor link, use the classes:

<a class=”waves-effect waves-light btn-large” href=”#”>Wave</a>

There are a few predefined colors like waves-light, waves-red etc, but you can manually add any shade you need.

Ready to Use Preloaders

Preloaders are useful for sites that incorporate AJAX—they tell users that something is loading before it has had the chance to load, which has recorded effects on retention and clickthrough rates. Users can also be made aware that some program is running in the background. Earlier appropriate preloaders can be found to match the look and feel of a site. Preloaders are integrated with Materialize along with the option of using a linear or a circular designs.

A great selection of plugins

Materialize has quite a few free JS plugins that can be used to improve your site’s UI. Some of our favourites include:

• Collapsible
• Dialogs
• Drop-downs
• Media
• Modals
• Parallax

If you think you recognise some of those names from jQuery or Bootstrap, then you’re not going mad. Materialize has versions of almost any Bootstrap plugin you can think of, making transition from one to the other even easier. You don’t need to give up your favourite Bootstrap tricks when you switch over to Materialize.

I hope this article has given you the push you need to try out Materialize: I can promise you it won’t disappoint. Here at CodeClouds we’re web development specialists and CSS experts. We’re always hiring website developers in Kolkata, and also have positions open in New Zealand, Australia, and the United States. If you’re looking to take your web development game to the next level, don’t be afraid to drop us a line.