What are the different utility classes in Materialize CSS ?
In this article, we will learn about the utility classes in Materialize CSS, along with understanding available classes and their implementation.
The utility class is generally used to make designing easier along with organizing the content in the proper structure, which contains aligning the content, setting the color of the text and hiding/showing the content with the required class name, formatting the various content i.e truncating or hover to the text. There are several utility classes in Materialize CSS, which are given below.
- Color utility classes
- Alignment utility classes
- Hiding/Showing content utility classes
- Formatting utility classes
Color utility classes: Color utility classes are used for changing the color of elements of the browser. Using the color utility classes, we can change the background colors of elements of HTML and even change the color of a font.
Background color: For changing the background color of a particular element of the HTML, we should give the desired color as the class name.
<div class="red-text"> </div>
The background color of the div in the above example will be red.
Font color: For changing the font color of a particular element of the HTML, we should give the desired color text as the class name.
<div class="red-text"> </div>
The font color of the div content will be red.
Alignment: Vertical align, Text Align, Quick Floats, they are used to align the content of HTML easily.
Vertical Align: Name the class as “valign-wrapper” to vertically center HTML content to the container holding the elements which are to be aligned vertically.
Text Align: There are specific classes in Materialize that help us in aligning the content to the left, right, and center in a very easy manner instead of adding all the CSS properties. Simply name the class accordingly to align the content.
The following class names are used to horizontally align the content.
- .left-align: It is used to align the content to the left.
- .right-align: It is used to align the content to the right.
- .center-align: It is used to align the content to the center.
Quick floats: Instead of using CSS, Materialize provides us with a very simple way to float the contents of the browser. Just name the class as left or right according to the float direction respectively.
The following classes are used to quickly float elements in HTML:
- .left: To float the content to the left.
- .right: To float the content to the right.
Example: Look at the following example to understand the concepts properly.
Hiding/Showing Content utility classes: Using hiding/showing content utility classes, we can hide/show content. Using, these utility classes, we can add different properties to different sized devices. For instance, let us consider a situation where we wish to display a specific text on a desktop and display some other text on a mobile device, then we can simply use .show-on-large class for the text that we wish to display only on desktop. Use .show-on-small class for a text that we wish to display only on a mobile.
Similarly we can use all the following utility classes used to hide/show content on different sized devices and add different properties to different sized devices.
- .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.
- tablet view:
- Desktop view:
- Mobile view:
Formatting utility classes:
There are some classes in materialize to format the HTML content easily. The formatting utility classes can be used to truncate the content of the browser and to add a shadow to the card aligning the content when hovered easily instead of using CSS.
The following classes are used to format the content.
- .truncate: This class is used to truncate the content in an ellipsis.
- card-panel hoverable: This class is used to add the shadow when hovered to the card.
Example: In the following example, when we used the truncate class, we just received a part of the content as the output. When we use hoverable class and hover on the card, we get a box-shadow as shown in the output.
Browser Defaults: While using classes is Materialize, we override many default styles of the browser. So the .browser-default class is used to revert these elements to the original style.
Name of element Reverted Style UL Bullet points SELECT Browser default select element INPUT Browser default input
Example: Let us understand browser default clearly by considering the following example for select elements. We used select in the form which allows the user to select among the specific options given. When we use materialize to do so, we get the following output which is very different from default browser properties i.e a browser that is made solely using HTML. We wish to revert the properties of the browser implemented using materialize and retrieve the original properties, we use this default browser class.
If we think of retrieving the default browser properties and revert to the original browser properties, all we need to do is add the browser-default class as shown below.