DEV Community

Cover image for Learning MaterializeCSS
Ellaine Tolentino
Ellaine Tolentino

Posted on • Updated on

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..
Landing page


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>
Enter fullscreen mode Exit fullscreen mode

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.
    Right aligned navbar
    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!
page 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.
Icon list

  • 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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!
Color component

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>
Enter fullscreen mode Exit fullscreen mode

Results using a couple of the color palettes:
Navbar color palette


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.


Night mode - footer
On night mode


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!

Discussion (1)

Collapse
eduar2tc profile image
Eduardo Tolentino

Materialize is death