Learning MaterializeCSS
Tags: css, materializecss, codenewbie
Published: 2021-09-12 00:03:55


## What is [MaterializeCSS](https://materializecss.com/getting-started.html)?
From what I've seen, it's a CSS framework that's been used by thousands of websites around the world. [List](https://www.wappalyzer.com/technologies/ui-frameworks/materialize-css) 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](https://github.com/Dogfalo/materialize).

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](https://github.com/tolentinoel/randomHex) with materialize!

***
So this is what we're working with..
![Landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuvudn0x4octaeqer7sa.png)

***

### Installation
You can download it to you local machine with the [link](https://github.com/Dogfalo/materialize/releases/download/1.0.0/materialize-v1.0.0.zip) 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.
```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](https://materializecss.com/navbar.html)
- For demo purposes, let's just choose the first one. 
![Right aligned navbar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkamre8tp0xa5fmsihw9.png)<figcaption>Copy the html code snippet and paste it on your code.</figcaption>

Once done, our code would look like this; 
![Code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0e0w26ap04zqkll7vpfx.png)<figcaption>I had to change some attributes into JSX/JS format, and change the href values</figcaption>
And for our page, now it has a navbar!
![page navbar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hv0ghr3ea6fau1yzln8w.png)

***
### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pc3y32s9zujtioldw71t.png)

- Go to Components, then [Icons](https://materializecss.com/icons.html)
- Copy & paste the script they have and paste it in the <head> tag of your index.html, just like how we installed Materialize in the beginning.

```html
 <link href="https://fonts.googleapis.com/iconfamily=Material+Icons" rel="stylesheet">
```
Syntax for usage: (JavaScript)
```JS
<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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31zdumj2k3bymhn7canc.png)<figcaption>I chose the icons that were more fitting to our page's style. For demo purposes only.</figcaption>

***
### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/toh1lxlb95wh9mrpyo9f.png)

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:

```html
<div className="nav-wrapper pink lighten-3">
...
</div>
```
Results using a couple of the color palettes:
![Navbar color palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dr15lqhq08uzx2b9753x.png)

***
### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rjikkkno4hs1yw8uo4j.png)<figcaption>Added another icon to represent the logo and I adjusted the logo's position using CSS</figcaption>
***
![Night mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekpj4mtm39mkmk31ma1f.png)<figcaption>This is on night mode. Check out my [blog](https://dev.to/tolentinoel/learning-to-toggle-dark-mode-through-react-hooks-43l1) on how I implemented the day/night mode.</figcaption>
***
![day mode - footer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybqao6rcxturwlws5hdi.png)<figcaption>I added a footer with links for a more complete webpage look.</figcaption>
***
![Night mode - footer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjlfmjawggb5dq1kpc98.png)<figcaption>On night mode</figcaption>
***

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!