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.
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.
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
Icons automatically scales according to the font size of its parent but you can set the site explicitly using…
<i class=”large material-icons”>insert_chart</i>
|Browser||Version supporting ligatures|
|Apple MobileSafari||iOS 4.2|
Moreover, these icons are Vector-based that looks great at any scale, retina displays and low DPI display screens.
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:
<span class=”blue-text text-darken-2″>This is a card panel with dark blue text</span>
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.
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 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>
There are a few predefined colors like waves-light, waves-red etc., but any shade can be added based on need.
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.
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.
Stay in tune and never miss a post when you subscribe.