Materialize CSS Helpers, Working with Helpers in Materialize CSS

Materialize CSS Tutorial

Materialize Helpers

There are several utility classes in Materialize CSS which are used for designing needs.

Alignment classes : For example, .valign-wrapper, .left-align, .rightalign, .center-align, .left, .right.

Hiding Content classes : For example, .hide, .hideon-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med-and-up and .hide-on-large-only.

Showing Content classes : For example, .show-on-small, .show-on-medium, .show-on-large, .show-on-medium-and-up, .show-on-medium-and-down.

Formatting classes : For example, truncate, hoverable.

Vertical Align

You can adding the class valign-wrapper to the container holding the items you want to vertically align.

<div class="row">
    <div class="card-panel brown valign-wrapper">
      <h5 class="white-text">This is vertical alignement</h5>
    </div>
</div>

Output :

Text Align

Text alignment classes are : .left-align, .center-align, .right-align.

<div class="row">
    <div class="card-panel cyan">
      <h5 class="left-align">left aligned</h5>
    </div>
    <div class="card-panel cyan">
      <h5 class="center-align">Center aligned</h5>
    </div>
    <div class="card-panel cyan">
      <h5 class="right-align">Right aligned</h5>
    </div>
</div>

Output :

Hiding/Showing Content

hide/show content utility classes on specific screen sizes in following table.

Class	Screen Range
`.hide`	Hidden for all Devices
`.hide-on-small-only`	Hidden for Mobile Only
`.hide-on-med-only`	Hidden for Tablet Only
`.hide-on-med-and-down`	Hidden for Tablet and Below
`.hide-on-med-and-up`	Hidden for Tablet and Above
`.hide-on-large-only`	Hidden for Desktop Only
`.show-on-small`	Show for Mobile Only
`.show-on-medium`	Show for Tablet Only
`.show-on-large`	Show for Desktop Only
`.show-on-medium-and-up`	Show for Tablet and Above
`.show-on-medium-and-down`	Show for Tablet and Below

<div class="row hide-on-small-only">
    <div class="card-panel amber">
      <h5 class="center-align">Hide Only Small Screens</h5>
    </div>
</div>

Output :

Truncation

To truncate long lines of text in an ellipsis, add the .truncate class to the tag which contains the text. See an example below of a header being truncated inside a card.

<div class="row">
	<div class="col s12 m6 l4 offset-m3 offset-l4">
        <div class="card-panel blue white-text">
        	<!-- Start truncate class -->
            <h4 class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
            <!-- End truncate class -->
        </div>
    </div>
</div>

Output :

Hover

The hoverable is a hover class that adds an animation for box shadow as seen below. It can be used on most elements, but meant for use on cards.

<div class="container">
    <div class="card-panel hoverable orange center-align">
    	<img src="../images/Free-Time-Learning.png" class="responsive-img" alt="F T L">
		<h5 class="white-text">www.freetimelearning.com</h5>
    </div>
</div>

Output :

Materialize CSS Tutorial