Getting Started with Materialize's CSS Tools
Tags: frontend, materialize, css, webdev
Published: 2020-12-06 06:52:39

I've just begun learning about [Materialize](https://materializecss.com) through [The Net Ninja](https://www.thenetninja.co.uk) (you'll find a link for his videos on this topic below).  It's a responsive CSS framework for websites, and I'm finding it pretty fun to work with.  I've only used Bootstrap up to this point, and I find it refreshing to try out something a little different (though there are similarities).

Here is a quick overview to get started with Materialize's CSS tools. 

## Setup 

The Materialize library can be directly downloaded from the website.  Alternatively, you can run the following in the command line: 

`npm install materialize-css@next`

or

`bower install materialize`

Another option is to copy-paste the [CDN](https://cdnjs.com/libraries/materialize) into the main `index.html` file:

```html
<html>
  <header>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  </header>
  <body>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>
```

Now we have access to the Materialize tools!  All we have to do is pass in certain (wonderfully intuitive) class names within the html tags that we are working with.

## Formatting Text

For elements that you want to align vertically, add the class `valign-wrapper`:

```html
<div class="valign-wrapper">
  <p>Vertically aligned text</p>
</div>
```

When aligning text, the following classes are used:

```html
<p class="center-align">centered text</p>

<p class="left-align">left aligned text</p>

<p class="right-align">right aligned text</p>
```

If you have text that is long and you want to shorten it on the page, the `truncate` class is used: 

```html
<p class="truncate">{insert some extremely long passage here}</p>
```

This will shorten the text to one line, with `...` at the end. 

## Hiding/Showing Content Based on Screen Size

One of the things you probably notice in a responsive website is how certain elements appear or disappear based on your screen size.  This is achieved by adding the class name `"hide"` to the content.  The following are some of its usages: 

```html
<p class="hide">This will be hidden on all screen sizes</p>

<p class="hide-on-small-only">This will be hidden only on small screen sizes></p>

<p class="hide-on-med-only">This will be hidden only on medium screen sizes></p>

<p class="hide-on-large-only">This will be hidden only on large screen sizes></p>

<p class="hide-on-med-and-down">This will be hidden on screen sizes from medium to smaller</p>

<p class="hide-on-med-and-up">This will be hidden on screen sizes from medium to bigger</p>
```

## Colors

You will find a whole range of colors on [Materialize's color palette](https://materializecss.com/color.html).  They list the basic colors with the option to lighten or darken them up to four levels. 

```html
<p class="green">regular green</p>

<p class="green darken-1">green darkened by 1 level</p>

<p class="green lighten-1">green lightened by 1 level</p>
```

The above code affects the color of the element's background only.  If we were to change the color of text, the name of the color would be followed by `"text"` in the class:

```html
<p class="green-text">green text</p>
```

Both the background color and text color can be changed in this way:

```html
<p class="green yellow-text">green background with yellow text</p>

<p class="green darken-2 yellow-text text-lighten-3">green background darkened by 2 levels with yellow text lightened by 3 levels</p>
```

## Shadow

Adding a shadow to an element helps make the image pop out more and give it depth.  With Materialize, this is achieved with the class `"z-depth"` followed by the number `1`, `2`, `3`, `4` or `5` to determine how the depth (`1` being the closest and `5` being the farthest):

```html
<div class="z-depth-1">closest shadow</div>

<div class="z-depth-5">farthest shadow</div>
```

These are just a few of the basics.  You can check out the documentation to play around with more of Materialize's tools, which I'll be doing as well! 

## Helpful Link

[The Net Ninja's Tutorial on Materialize](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gGrbtvASEZSlFEYBnPkmff)

[Materialize's documentation](https://materializecss.com/)