DEV Community

Cover image for Getting Started with Materialize's CSS Tools
Maasa Kono
Maasa Kono

Posted on

Getting Started with Materialize's CSS Tools

I've just begun learning about Materialize through The Net Ninja (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 into the main index.html file:

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

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:

<div class="valign-wrapper">
  <p>Vertically aligned text</p>
</div>
Enter fullscreen mode Exit fullscreen mode

When aligning text, the following classes are used:

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

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

<p class="right-align">right aligned text</p>
Enter fullscreen mode Exit fullscreen mode

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

<p class="truncate">{insert some extremely long passage here}</p>
Enter fullscreen mode Exit fullscreen mode

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:

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

Colors

You will find a whole range of colors on Materialize's color palette. They list the basic colors with the option to lighten or darken them up to four levels.

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

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:

<p class="green-text">green text</p>
Enter fullscreen mode Exit fullscreen mode

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

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

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):

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

<div class="z-depth-5">farthest shadow</div>
Enter fullscreen mode Exit fullscreen mode

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

Materialize's documentation

Discussion (0)