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.
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:
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:
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:
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.
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:
We can simply customize the button by adding
pink darken-1 into the class. Here’s what it’ll look like:
To give you a comparison, here’s a snapshot on the before and after the customization:
You can view the rest of the color palette by checking out their page here.
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:
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:
To view the list of icons available, you can check out their page here.
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.
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!
Originally published on my blog