November 17, 2016

Materialize Helpers

Materialize Helpers : Materialize Provides inbuilt classes which fulfills the common and frequent tasks such as alignment, float, formatting, hover etc. Here in this tutorial we are going to explain how you can use these predefined classes. You can also use our online editor to edit and run the code online.

Materialize Helpers Example

Following helper classes are available-

Alignment Classes
Float Classses
Hiding Content Classes
Formatting Class
Hover Class
Browser Defaults Class

Alignment Classes

There are following alignment classes in Materialize-

Vertical Align
Text Align(Left Align, Right Align, Center Align)

Vertical Align

If you want to align the things vertically just add the class valign-wrapper to the container and valign class to the element you want to align vertically.

Materialize Helpers : Vertical Align Middle

<div class="valign-wrapper" style="height:400px;background:yellow">
  <h2 class="valign">Hello World!</h2>
</div>

Try it »

If You run the above example it will produce the output something like this –

Materialize Helpers : Vertical Align Middle Class

Text Align

There are following three classes which can be used to align text horizontally-

left-align : This class is used to left align the text.
right-align : This class is used to right align the text.
center-align : This class is used to center align the text.

Now let us create an example to understand this –

Materialize Helpers | Text Align | Left | Right | Center | Example:

<div style="background:yellow">
  <h2 class="left-align">Left Align Text</h2>
  <h2 class="right-align">Right Align Text</h2>
  <h2 class="center-align">Center Align Text</h2>
</div>

Try it »

If you run the above example it will produce the output something like this –

Text Align | Left | Right | Center | Example:

Float

There are basically two float classes available – left & right. You can use these classes to easily float the elements.

Materialize Helpers | Float | Left | Right Example:

<div class="left" style="background:yellow; width:100px;">
  Float Left
</div>
<div class="right" style="background:yellow; width:100px;">
  Float right
</div>

Try it »

If you run the above example it will produce the output something like this –

Hiding Contents Classes

Sometimes we need to hide some content for all devices or some specific devices. Materialize provides inbuilt classes to hide content on several devices.

.hide: Hide for all Devices
.hide-on-small-only: Hide for Mobile Only
.hide-on-med-only: Hide for Tablet Only
.hide-on-med-and-down:Hide for Tablet and Below
.hide-on-med-and-up:Hide for Tablet and Above
.hide-on-large-only:Hide for Desktop Only

Materialize Helpers | Hide Contents Example:


<div class="hide-on-large-only">
 <p>This will be hidden on desktop.</p>
</div>

Try it »

If you run the above example it will hide the div content on desktop.

Formatting

[su_divider top=”no” margin=”5″]

Materialize provides Formatting classes to format content.

Truncation
Hover

Truncation

This class is used to truncate the long text in an ellipsis.

Materialize Helpers | Truncate Text Contents Example:

<h2 class="truncate">This is large text heading Example</h2>

Try it »

If you run the above example it will produce the output something like this –

Truncate text example

Hover

Materialize provides the hoverable class that adds the box shadow animation.

Materialize Helpers | Hoverable Effect Example:

<div class="card-panel hoverable"> Hoverable Effect Demo</div>

Try it »

Browser Defaults

Some default styles are overridden in Materialize and sometimes we need default styles instead of overridden, so it provides browser-default class to revert the elements style to their original state.