Materialize CSS – Framework based on Material Design

Materialize CSS is the visual web language in the form of a framework that uses Google’s material design to create a meaningful and beautiful user experience.

Since Google created and released Material Design, designers and developers started exploring and using it. Material design can characterized as a design language which combines the classic principles of design with innovation. The main idea is to develop a unified design that will work great across all Google products on any platform.

Principles of Material Design


– Material is the metaphor
The material metaphor is characterized by the correlation between space and motion. The material itself is inspired by the study of paper and ink and it is used to promote innovation, creativity and imagination. Surfaces and edges of the material enhance user experience. The flexibility of the material creates usability and visual clues. The key fundamentals of light, surface and motion convey the interaction, movement and existance of the objects in space and their relation with each other.

– Bold, graphic, intentional
The basic principles and elements of graphic (print-based) design such as grid, space, colour, typography, scale are used to guide visual treatments. All the elements are used to provide meaning by creating hierarchy and focus. Deliberate choices in typography, colour and imagery create a graphic interface that engages user in the experience.

– Motion provides meaning
Motion is meaningful, it is used to create focus to the user without interruptions as the continuity and progression of the experience is the key factor. Transitions are efficient and the feedback is subtle.

Related post:  LiteBox – A versatile and responsive lightbox


About Materialize CSS

It was a matter of time a Material Design Framework to be created. Materialize CSS is such framework created by a team of four students from Carnegie Mellon University. A passion for design, usability and user experience has driven these young people to create a material design structure to work with.

How to use it

Materialize comes in two different forms – standard and SASS. You can select the one you would like to use depending on your experise.

Standard version – It includes both the minified and unminified CSS and JavaScript files. This option require little to no setup. Use this if you are unfamiliar with Sass.

Sass version – This version contains the source SCSS files. By choosing this version you have more control over which components to include. You will need a Sass compiler if you choose this option.

HTML Setup

      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src=""></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>

Click here for more information about the setup.

Related post: - Google Docs for visual people

Get Started

There are two templates to help you get started without the need to setup anything. You can download them to give it a try.


A standard 12 column fluid responsive grid system is used. The grid will help you out to create an ordered layout. The container class is not strictly part of the grid but 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.

Click here for more information about the grid


Materialize CSS is probably the first framework that has that extensive colour options. All the colors, shades and tints from the Material Design palette are included with the corresponding classes so it is very easy to select and use the desired one.


All the components from Google Material design are here – forms, buttons, cards, badges, icons, preloaders, navbars etc. Have a look to see what this framework can offer.


If you are curious about what can be done with Materialize CSS, check out the showcase.

Download Materialize CSS Learn more about Materialize CSS

Divi WordPress Theme

You may also like...

2 Responses

  1. Mister Lance says:

    I’m waiting for Google to money-up and do something with this awesome css framework. I’m not seeing much movement in the forums or other places where web devs hang out, other than people asking about it, some people dabbling and reporting issues, and the masses neither recognizing it nor adopting it.

    Way cool that the Angular 2.0 website uses it … optimism on their part?

  2. designify says:

    You are quite right. I was also expecting some kind of boom of MaterializeCSS websites but nothing much has happened.
    Haven’t seen Angular 2.0 website. Looks quite cool.

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.