Materialize CSS Helpers

There are several helpers in materialize CSS that are used for designing needs such as:

Alignment
Hiding/Showing content
Formatting

1. Alignment: Content can be aligned horizontally or vertically by using the following classes:

Vertical Align: It can be easily done by adding the class valign-wrapper to the container holding the items that you want to align.
```
<div class="valign-wrapper">
  <h5>This is vertically aligned</h5>
</div>
```

Horizontal Align: These classes are used for horizontally aligning the content: left-align, right-align, center-align.

 <div>
    <h5 class="left-align">This is left aligned</h5>
  </div>
  <div>
    <h5 class="right-align">This is right aligned</h5>
  </div>
  <div>
    <h5 class="center-align">This is center aligned</h5>
  </div>

Quick Float: There are other classes that is used to align the content are left and right.
```
<div class="left">...</div>
<div class="right">...</div>
```

2. Hiding/Showing content: To hide/show content on specific screen, materialize provides easy to use classes.

Class	Screen Range
hide	Hidden from 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="hide-on-small-only">
This will be hidden from mobile screen
</div>

3. Formatting: These classes helps to format various content. These classes are -

Truncation: To truncate long lines of text in an ellipsis, truncate class is added to the tag that contains text.
```
 <h4 class="truncate">
This is an extremely long title that will be truncated
</h4>
```
Hover: The hoverable is the hover class that is used to add animation for the box shadow.
```
<div class="card-panel hoverable">
 Hoverable Card Panel
</div>
```

Here is an example in which all of the above classes are used:

html

<!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">


    <!--Let browser know website is 
        optimized for mobile-->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>

<body>
    <div class="class green">
        <br>
        <div class="card-panel ">
            <div class="valign-wrapper">
                <h5>This is vertically aligned</h5>
            </div>
        </div>
        <div class="card-panel">
            <h5 class="left-align">
                This is left aligned
            </h5>
        </div>

        <div class="card-panel">
            <h5 class="right-align">
                This is right aligned
            </h5>
        </div>

        <div class="card-panel">
            <h5 class="center-align">
                This is center aligned
            </h5>
        </div>
        <div class="card-panel">
            <div class="left">...</div>
        </div>
        <div class="card-panel">
            <div class="right">...</div>
        </div>

        <div class="hide-on-small-only">
            Hidden for mobile only</div>
        <div class="hide-on-med-only    ">
            Hidden for Tablet Only </div>
        <div class="hide-on-large-only">
            Hidden for Desktop Only</div>

        <div class="card-panel">
            <h4 class="truncate">
                This is an extremely long text 
                that will be truncated to show 
                the changes.
            </h4>
        </div>


        <div class="card-panel hoverable center">
            this is hoverable
        </div>
        <br><br>
    </div>

    <!-- Compiled and minified JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
    </script>
</body>

</html>

Output:

Explore