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:
<!DOCTYPE html><html> <head> <!--Import Google Icon Font--> <link href= rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= <!--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= </script></body> </html> |
Output:
Please Login to comment...