Materialize CSS Framework for Beginners

Subscribe to my newsletter and never miss my upcoming articles

What is Materialize?

Materialize is a modern responsive CSS framework based on Material Design by Google. The purpose behind the CSS framework would allow users to speed up the development process, provide focus to the user experience while touting it as an easy to use framework through their detailed documentation on their website.

Benefits of using Materialize

If you’ve used Bootstrap in the past and had a hard time understanding the syntax and components used from the framework, Materialize provides flexibility in designing your layouts using the UI components in the library. A couple of features that are worth mentioning on what makes Materialize unique:

Grid System

With the grid system, the .container class is set to ~70% of the window width. Doing so will allow the content to be contained and to remain centered.

The standard grid system in Materialize is comprised of 12 columns (similar to Bootstrap’s system). The columns are all in equal width, no matter the size of the browser width. To give you a sense of how the columns are constructed, here’s the code below:

carbon (1).png

Columns defined with “s” means that it’ll fit with small screens. Columns that are defined with “m” and “l” means it’ll fit with medium and large screens, respectfully. If we were to code the following:

carbon.png

We’re telling the browser the following instructions:



  • On small screens, we want to take up 12 columns.
  • On medium screens, we want to take up 4 columns.
  • On large screens, we want to take up 3 columns.

With Materialize’s grid system, we can be explicit with our size requirements on our columns, making our website layouts more responsive.

Color Palette

One of the perks in using Materialize's framework is the ability to harness the extensive color palette that’s based off on Material Design’s color library. You are not confined to using the standard color scheme that you see on Bootstrap (i.e. primary, success, warning, danger, etc.).

Let’s say we want to change the button color from teal to dark pink. Here’s what the code looks like without any edits:

carbon 4.png

We can simply customize the button by adding pink darken-1 into the class. Here’s what it’ll look like:

carbon 3.png

To give you a comparison, here’s a snapshot on the before and after the customization:

Materialize_Sandbox_Live_Preview.png

You can view the rest of the color palette by checking out their page here.

Icons

Rather than relying on Font Awesome to add your icons on your layouts, Materialize included 932 Material Design Icons courtesy of Google. To enable their icons set, you add the following line within the <head> tags in your HTML file:

carbon 5.png

Once you have it added, you can start adding your icons onto your page.

Let’s say you want to add a heart shape symbol in your button and you want it positioned to the left side from the text. We can achieve this by calling upon the material-icons class, add “favorite” in between the div tags and also add the left property right after material-icons to tell the browser that our icon will be on the left side. Here’s what the code looks like:

carbon 6.png

The result:

Materialize_Sandbox.png

To view the list of icons available, you can check out their page here.

Materialize in action

To see how the components work together in Materialize, I've created a CodePen where you can see my custom card that includes a hoverable state, some buttons, and text that scales when the browser changes in size.

Conclusion

Materialize is a great CSS framework to use for those who are looking to create websites and apps in a short amount of time using the built-in components from the UI library. It offers a readable grid system, a plethora of color options, unique icons, and much more. To learn more about the CSS framework and see more examples in action, head over to their website. If you happen to like this article, feel free to follow and tweet me here!

Jome Favourite's photo

So do you suggest Boostrap first or Material UI first?

Diana Chin's photo

Hey Jome! Before getting into any CSS framework, it's important to have a good grasp of the CSS fundamentals before proceeding with the frameworks. With that said, if you want to start off small, I do recommend Materialize if you want to stylize your layout quickly. Once you get comfortable, you can then proceed to Bootstrap if you want to have more flexibility with the styling. It's entirely up to you which framework you want to start. But it's vital to have a good understanding of CSS.

Jome Favourite's photo

I feel confident with CSS at least to start learning a framework, I'll search on both. Thanks for the advice Diana

Victoria Lo's photo

Nice one! I enjoyed reading this :)

Diana Chin's photo

Thanks so much, Victoria :) Glad you like it!!