Materializecss is the new motivation!

Home Design Materializecss is the new motivation!



One of the major problems of a UI Developer is the motivation to sketch the first few lines of code( not “hello world”). Then the pace picks up resulting in spectacular outcomes. Even with extreme development experience, sometimes it could be real heard to script those first few lines without being skeptical. Sometimes developers keep thier ready-to-go template which is accumulated over few iterations of UI development in the past. However, those templates wouldn’t be robust or modular enough to fit current design needs. In the past year, I explored a few libraries that could help me push and drive past first few lines of code. Being a Material Design UI(1.0) fan, I came across this library thats just perfect! The materializecss.com.

I’m amazed by the their CSS commitment to Material Design UI. There are very few or no other libraries that offer whole package of MDUI. So here are my thoughts on it. I couldn’t think of materialcss as bootstrap as their conventions and design pattern are totally different from the naive bootstrap.

The perfect motivation

Breaking up a page into grid system and thinking ahead of possible layers could loose grip if the big picture of webpage isn’t clear. Materializecss is build on the principles of bootstrap, the idealogy stays, but where it gets interesting is with the additional features that are upto date as of 2018. A few are,

Container view

Containers : Container feature appeals me the most. The responsiveness of a webpage is well taken care by this feature. Apart from HTML5 tags like head, main and footer, the container class binds the order of the page well that could very unlikely go distored. At 1280px width and above, the container wraps 90% with sufficient padding on left-right equally ensuring the content doesnt overflow and stay in the region reader’s interest. At lower resolutions blends extemely well without lags even while on swift resizing of window.


Navigation bar : Navbar has been the most anticipated feature for any website ever since it got published. Materialcss has nailed it! It feels so smooth and least buggy implement so far, apart from Google’s very own implementation. Totally customizeable and excuetable with javascript/jQuery offering fluent motion effect.


Color Palatte :

Based on code schemes showcased by MDUI, the colors-codes are represented by color-classes instead. This clears the hustle of making hard decisions to pick the right amount of hue and saturation. Rather than picking variants of same color based on shade value(from 50 to 900) an intuitive optimization for palatte is made that has a whole new scale. I feel this is the best colorimagination! Feels like interger scale though.

Cards : For a quick prototyping, cards seem very effecient without much efforts at all. They are sligtly buggy, but cant agree more with how effiecent they are.

Buttons : Another feature with wide range of customization. There are so-many variants built-in and just referencing the class name bring significant difference in the design of button. I’d leave this section for reader to experiment.


Here is quick demo of side navbar on codepen.io.
Note : View seperately, the sidebar might be hidden due to iframe size.


Final thoughts

Although there are a lot more features that aren’t featured on the article, I have handpicked a few thats serves the need of hour. I encourge readers to have a exposure to complete document on their offical website. There could be other libraries, but Materializecss is a step closer to Material Design UI and highly reliable. I have deployed two framesworks using it and I see that it melds well with website of any type. Besides, the code is written such that it doesn’t hamper the addtional css code. A clean, fluid and dynamic material design library at it’s best!



This article is absolutely very own opinion of self. They are neither paid nor advertised by materializecss.com. Credits to them for using a few images on their official website.

Leave a Reply

Your email address will not be published.