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>
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>
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>
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>
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>
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>
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>
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>
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>
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!
Top comments (0)