Learning MaterializeCSS

What is MaterializeCSS?

From what I've seen, it's a CSS framework that's been used by thousands of websites around the world. List from wappalyzer.com. So far, I can see how it has a similar principles with Bootstrap but HTML! While a lot of times compared to Bootstrap, I learned that Bootstrap mainly uses JS-based templates unlike MaterializeCSS that mainly uses HTML & vanilla JS. But like Bootstrap, it's free, is an open-source tool and has a public repo on Github.

So how are we going to try our Materialize today? We'll try to apply some components to one of my projects and see how it works! I'm going to tinker this project with materialize!

So this is what we're working with..

Installation

You can download it to you local machine with the link they provided, through npm (npm install materialize-css@next) or through a link that you can add to your html(which we'll be using today).

Copy & paste these inside the <head> tag in your index.html.

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

And viola! Now we can use Materialize to add more components to our mini project!

Navbar

If you saw the page, it seems like it needed more components like a navbar. Application goes so easy like this;

Go to Components, then Navbar
For demo purposes, let's just choose the first one.
Copy the html code snippet and paste it on your code.

Once done, our code would look like this;

Code snippet — I had to change some attributes into JSX/JS format, and change the href values

And for our page, now it has a navbar!

Icons

Now you may ask, the examples on the website has icons. Yes! Materialize can also provide icons for your project with easy steps and a lot of options to choose from.

Go to Components, then Icons
Copy & paste the script they have and paste it in the tag of your index.html, just like how we installed Materialize in the beginning.

 <link href="https://fonts.googleapis.com/iconfamily=Material+Icons" rel="stylesheet">

Syntax for usage: (JavaScript)

<i className="[SIZE] material-icons">[NAME OF ICON]</i>
//So, if we want a small sun icon
<i className="small material-icons">wb_sunny</i>

Then after adding it to our code, now we have this cool navbar with some nifty icons!

Navbar icons — I chose the icons that were more fitting to our page's style. For demo purposes only.

Color

Now we have our navbar, but I want to change its color? Definitely can do this with CSS, but let's try and utilize more of our framework here. Materialize also provides a range of colors we can apply to our components!

You can use SASS/CSS for this. But the one we're using will be the className method.

To add a specific color to our Navbar, let's add it in it's className:

<div className="nav-wrapper pink lighten-3">
...
</div>

Results using a couple of the color palettes:

Finishing touches & Results

Now that we had a chance to play around with some components, I tried to add more things in our mock website and this is how it turned out!

Day mode - showing navbar — Added another icon to represent the logo and I adjusted the logo's position using CSS

Night mode — This is on night mode. Check out my blog on how I implemented the day/night mode.

day mode - footer — I added a footer with links for a more complete webpage look.

I hope i got you curious on MaterializeCSS's potential and inspire you to use it on your projects!

Will definitely keep this in my arsenal and keep trying it out! What do you guys think of it? Let me know in comments below. Until the next!

Blog