Materialize: A Responsive Front-End Framework

Branching Out

As a web-developer, I’m constantly learning new tools and finding new ways to make my day easier. For many of us, students at the Firehose Project, we’re used to using Twitter Bootstrap 3 as our front-end framework. I encourage you to look past the fog of bootstrap and engage other frameworks. If you happen to love bootstrap, then go ahead and use it. I am just saying that I strongly prefer Materialize. The choice is yours and there is an entire world outside of bootstrap and materialize. A world that probably has the perfect framework for you — for me, that’s Materialize.

I, too, was comfortable with bootstrap and didn’t see a reason to change anything. Then, during the Team Project Kick-Off Call today one of the guys in my group suggested going outside the lines and using Materialize.

I got the link to their website and after reading through it I thought, “damn, that’s really cool.” I immediately setup a test-materialize folder with an index.html file and all their resources. For the fun of it, I decided to make the website about how I made the website. It’s hosted here. It’s not much, and it’s not outrageously elegant; however, it was so fast. With a whole lot more effort and time put into it, I feel like I can actually get what I always wanted out of bootstrap.

Colors, Colors, Colors.

My favorite thing right off the bat with Materialize is that ability to define the background color and text color cleanly inline with the class declaration. You can quickly look at the color guide on their website and add any of them to your code. It’s great. Maybe other frameworks have this, I don’t really know, but I found that it could be quite useful and it felt worth mentioning.

Collapsible Popout.

This was really cool too, you can create a wrapper with the class=”collapsible popout” and instantly turn any ul - li elements into a responsive collapsible popout menu, like the one featured here.


I don’t know that much about all the front-end frameworks, but I can definitely say that the Materialize Framework is a great fit for me this week. If you aren’t satisfied with your current front-end developing, I’d suggest trying it out!

Follow Up — 2 days later

So, I’ve completely transitioned to using Materialize now; however, I found that their image carousel was a little lacking and have decided to mix in an OwlCarousel instead of the Materialize one. Owl has way more documentation and I’m not sure why Materialize has such a minimal amount of it, but it is still really good.

I think Materialize is just more visually appealing than bootstrap, and it seems to do exactly what I want it to do. The carousel worked fine I just didn’t have the customization options I wanted. I wanted a clients website to look like this, and now it does.

Thanks for reading!