Materialize – A Material Design CSS Framework

Material design is a visual language, a fusion of the aesthetics of design along with the innovation and boundless possibilities of technology and science.The UI/UX can be used in multiple web projects as several Material Design Frameworks which can be utilized without writing a single line of custom CSS. Check out a few of its major advantages with responsive CSS frameworks.

The current version of Android has a sleek Material Design user interface that is being developed by Google. Those who haven’t experienced using lollipop may wonder what on earth is Material Design and why should they be using it. Material design is a visual language, a fusion of the aesthetics of design along with the innovation and boundless possibilities of technology and science.
The same UI/UX can be used in multiple web projects as any one of the several Material Design Frameworks can be utilized without having to write a single line of custom CSS. Through research of a few similar frameworks, Materialize was in the spotlight as a result of the research. The needs are met and it is quite flexible too. The purpose of this article is to elucidate a few of its advantages in comparison with twitter bootstrap or other responsive CSS frameworks.

The user interface is truly amazing and is based on material design

materialize-design-paralax-1024x674

A site or an application should have an impressive look and feel providing as much feedback as possible to users. As a tool twitter bootstrap is excellent to get started but for that quality look and feel a lot of CSS has to be written that can be easily overcome by materialize CSS. It simply has a superb out-of-the-box look. http://materializecss.com/templates/starter-template/preview.html is an example of material design.

Numerous collection of icons

materialize-design-icons-1024x854

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

An add icon

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

Icons automatically scales according to the font size of its parent but you can set the site explicitly using…

<!–

Sizes:

tiny: 1rem

small: 2rem

medium: 4rem

large: 6rem

–>

<i class=”large material-icons”>insert_chart</i>

Browser support

BrowserVersion supporting ligatures
Google Chrome11
Mozilla Firefox3.5
Apple Safari5
Microsoft IE10
Opera15
Apple MobileSafariiOS 4.2
Android Browser3.0

Moreover, these icons are Vector-based that looks great at any scale, retina displays and low DPI display screens.

Galore of colors

materialize-design-color-pallete-1024x797

Materialize has plenty of colours as opposed 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 based on base colors. Each of these colors is defined with a base color class and an optional lighter or darker class making it possible to choose from numerous colors in an user interface.

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

materialize-design-shadow-1024x176

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

materialize-design-card-reveal-1024x652

material-design-image-card-1024x732

Cards with varied objects 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 Ink effect on Elements

The material design is an outline of the ink effect. This means when an 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 caused by the click or tap much like when a pen is dipped in ink. With Materialize similar effects can be created on the elements.

Add a wave effect on an anchor link using the classes

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

materialize-design-linear-preloader-1024x643There are a few predefined colors like waves-light, waves-red etc., but any shade can be added based on need.

Ready to Use Preloaders

materialize-design-circular-preloader-1024x526

Preloaders are useful for sites that incorporate AJAX so that there is visibility in terms of when AJAX is being used on a site. Users would also be aware that some program is running in the background. Earlier appropriate preloaders had to be found that would match the look and feel of a site. Preloaders are integrated with materialize along with the option of using a linear or a circular one that is equipped with flashing colors.

Handful of Javascript Plugins

Materialize has quite a few free plugins that can be used for user experience improvement purposes of a site. Some of the javascript plugins are as follows:

 

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

and many more.

The advantages of material CSS have been explained in this article. Anybody, after reading this article may want to give materialize CSS a go in their upcoming project. Material CSS will not disappoint anyone after having tried it. Moreover, those who know twitter bootstrap, can easily transition to materialize.

 

 

 
Written by:

Subhadip is a Web Developer, currently working at Codeclouds IT Solutions Pvt. Ltd. as Team Lead. After graduating from NIIT in 2011, he began his career as a Freelance Web Developer. In 2013 he joined Codeclouds. Subhadip has got more than four years of experience in PHP and Javascript. He believes programming should be fun and enjoyable. His dream in life is to build something extraordinary and innovative. Subhadip likes listening to music and playing his guitar when his hands are not on the keyboard.

 

Comments