Materialize Design CSS Framework

15 Oct 2015Abhishek JoshiCSS, Design, HTML5 & CSS3, jQuery

Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform.

Principles

Material is the metaphor
The metaphor of material defines the relationship between space and motion. The idea is that the technology is inspired by paper and ink and is utilized to facilitate creativity and innovation. Surfaces and edges provide familiar visual cues that allow users to quickly understand the technology beyond the physical world.

Bold, graphic, intentional
Elements and components such as grids, typography, color and imagery are not only visually pleasing, but also create a sense of hierarchy, meaning and focus. Emphasis on different actions and components create a visual guide for users.

Motion provides meaning
Motion allows the user to draw a parallel between what they see on the screen and in real life. By providing both feedback and familiarity, this allows the user to fully immerse him or herself into unfamiliar technology. Motion contains consistency and continuity in addition to giving users additional subconscious information about objects and transformations.

Features

In this section, I will explain some features that Materialize offers.

1. Sass Mixins
This framework carries Sass Mixins which automatically adds all browser prefixes when you write certain CSS properties. It’s a great feature to have to ensure compatibility across all browsers, with as little fuss and code, as possible.

Take a look at the following animation properties:

1 -webkit-animation: 0.5s;
2 -moz-animation: 0.5s;
3 -o-animation: 0.5s;
4 -ms-animation: 0.5s;
5 animation: 0.5s;

Those lines of code can be rewritten with a single line of Sass mixin like so:

1 @include animation(.5s);

There are about 19 main mixins available. To see the full list, head over to the Sass category in the MIXINS tab.

DEMO: http://materializecss.com/sass.html

2. Flow Text
While other frontend frameworks use fixed text, Materialize implements truly responsive text. Text size and line height are also scaled responsively to maintain readability. When it comes to smaller screens, the line height is scaled larger.

To use Flow Text, you can simply add the flow-text class on your desired text. For instance:

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

Checkout below link for Flow Text section.

DEMO: http://materializecss.com/typography.html

3. Ripple effect with Waves
Material Design also comes with interactive feedback; one notable example is the ripple effect. In Materialize, this effect is called Waves. Basically when users click or tap/touch a button, card or any other element, the effect appears. Waves can be easily created by adding waves-effect class onto your elements.

This snippet gives you the wave’s effect.

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

The ripples are grey by default. But in a situation where you have a dark color background, you may want to change the color. To add a different color, just add waves-(color) to the element. Replace the "(color)" with a name of a color.

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

You can choose from 7 colors: light, red, yellow, orange, purple, green and teal. You can always create or customize your own colors if those colors don’t fit your needs.

DEMO: http://materializecss.com/waves.html

4. Shadow
To deliver relationships between elements, Material Design recommends using elevation on the surfaces. Materialize delivers on this principle with its z-depth-(number) class. You can determine the shadow depth by changing the (number) from 1 to 5:

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

All shadow depths are demonstrated with the image below.

DEMO: http://materializecss.com/shadow.html

5. Buttons and Icons
In Material Design there are three main button types: raised button, fab (floating action button) and flat button.

(1) Raised Button

The raised button is the default button. To create this button, just add a btn class to your elements. If you want to give it the wave effect when clicked or pressed, go with this:

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

Alternatively, you can also give the button an icon to the left or the right of the text. For the icon, you will need to add custom <i> tag with the icon class name and position. For instance:

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

In the above snippet we use mdi-file-file-download class for the download icon. There are about 740 different icons you can use. To see them head over to the Sass page in the Icons tab.

(2) Floating Button

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

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

In Material Design, the flat button is often used within the dialog box. To create it, just add btn-flat to your element like so:

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

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

DEMO: http://materializecss.com/buttons.html

6. Grid
Materialize uses a standard 12-column responsive grid system. The responsiveness is divided into three parts: small (s) for mobile, medium (m) for tablet and large (l) for desktop.

To create columns, use s, m or l to indicate the size, followed by the grid number. For example, when you want to create a half sized layout for mobile device then you should include an s6 class into your layout. s6 stands for small-6 which means 6 column on small device.

You must also include a col class in the layout you create and put it inside an element which has the row class. This is so the layout could be put into columns properly. Here’s an example:

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

Here’s the result:

By default, col s12 is fixed-size and optimized for all screen size, basically the same as col s12 m12 l12. But if you want to specify the size for the columns for different devices. All you need to do is to list the additional sizes like so:

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

DEMO: http://materializecss.com/grid.html

Those are just a few features of Materialize. To learn more about their other features, head over to the documentation page ( http://materializecss.com/ )

Credit: www.hongkiat.com/blog/materialize-material-design-framework/



Free Quote & Consultation