Materialize CSS Helpers

Materialize CSS provides different helper utility classes. These utility classes are primarily used for text alignment, coloring the element, hiding/showing the element, formatting the text, etc.

Here, we will discuss the following types of helper utility classes.

• Text Align- Horizontal & Vertical
• Floating Concept
• Hide & Show
• Truncate Concept
• Hover

Text Align

Text can be aligned in the left, center, or right direction along the main axis i.e x-axis.

Text Align: Left Direction

To align text in the horizontal left direction, assign the?.left-align?class to the HTML element base class.

General Syntax

<element class="left-align"></element>        

Source Code

<div class="container">
 <h5 class="left-align">This should be left aligned</h5>
</div>        

Text Alignment: Right

To align text in the right direction along the x-axis, add the?right-align?class to the HTML element base class.

General Syntax

<element class="right-align"></element>        

Source Code

<div class="container">
  <h5 class="right-align">This should be right aligned</h5>
 </div>        

Text Alignment: Center

To align text in the center of the horizontal axis, use the?center-align?class to the HTML element class.

General Syntax

<element class="center-align"></element>        

Source Code

<div class="container">
     <h5 class="center-align">This should be center aligned</h5>
  </div>        

Quick Floats

Materialize CSS provides float classes that are used to align things either in the left direction or right direction.

Float: Left

To float the things in the left direction use the?left?class.

General Syntax

<element class="left"></element>        

Source Code

<div class="container">
  <h5 class="left">Float Left</h5>
</div>        

Float: Right

To float things in the right direction, use the?right?class to the HTML element base class.

General Syntax

<element class="right"></element>        

Source Code

<div class="container">
   <h4 class="right">Right Aligned Text Using Float</h4>
</div>        

Vertical Align: Center

To align the element vertically center, assign the?valign-wrapper?class to the?container?base class that holds the aligning element.

General Syntax

<element class="valign-wrapper"></element>        

Source Code

<div class="valign-wrapper" style="min-height:100px;">
  <h5>This should be vertically aligned</h5>
</div>        

Hiding/Showing Content

Materialize CSS provides different predefined classes for displaying & hiding the text content with respect to the device viewport width. Let us understand the predefined hiding and showing classes.

• .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

Source Code

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

Truncation

To truncate long lines of text in an ellipsis, add the .truncate class to the HTML element base class.

General Syntax

<element class="truncate"></element>        

Source Code

<div class="container">
 <div class="row">
	<div class="col s12 ">
        <div class="card-panel blue white-text">
        	<!-- Start truncate class -->
            <h4 class="truncate">Shape Your Path provides tutorial on HTML5,CSS3,Javascript,Jquery,JSON,Materilaize CSS,Bulma,Pure,UIkit CSS framework,etc</h4>
            <!-- End truncate class -->
        </div>
    </div>
 </div>
</div>        

Hover

The hover utility class is used to create an animation for box shadow. It can be used with most of the elements.

General Syntax

<element class="hoverable"></element>        

Source Code

<div class="container">
  <div class="card-panel hoverable"> Hoverable Card Panel</div>
</div>        

To read more click here...