Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are the different utility classes in Materialize CSS?
In this article, we will learn the different utility classes in Materialize CSS, but before proceeding, let's know what Materialize CSS is. Materialize CSS is a popular front-end development framework that offers various features and utilities to create responsive and appealing web applications. One of the essential components of Materialize CSS is its utility classes which offer an easy and efficient approach to adding styles to HTML elements
Utility classes are predefined CSS classes that can be applied to any HTML element to achieve a particular styling.
Here are Some Utility Classes that you can use
Color utility classes
Alignment Utility Classes
Hiding/showing content utility classes
Formatting utility classes
Color Utility Classes
The color utility classes in Materialize CSS provide a simple way to add colors to HTML elements. These classes allow developers to choose from a wide range of predefined colors or define custom colors for their web applications. The color utility classes include text-color and background-color classes.
Example
<html> <head> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </head> <body> <h1 class = "red-text text-darken-2">This is red color</h1> <h2 class = "red">This is red color</h2> </body> </html>
Alignment Utility Classes
Materialize CSS provides several alignment utility classes that allow developers to align their HTML elements. These classes include left-align, right-align, center-align, justify-align, valign-wrapper, and valign. The left-align, right-align, center-align, and justify-align classes are used to align text content, while the valign-wrapper and valign classes are used to vertically align elements.
Text Align
It allows you to control the horizontal alignment of text within an element, and it includes classes such as left-align, right-align, center-align, and justify-align.
Example
<html> <head> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </head> <body class = "container"> <h3 class = "left-align"> Left Aligned </h3> <h3 class = "right-align"> right Aligned </h3> <h3 class = "center-align"> center Aligned </h3> </body> </html>
Vertical Align
It allows you to vertically align an element using valign-wrapper class, this can be applied to a parent container element, and it will align the child elements vertically within that container.
Example
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class = "valign-wrapper" style = "height:50vh">
<h5>vertically aligned</h5>
</div>
</body>
</html>
Hiding/showing Content Utility Classes
By using hiding and showing utility classes, we can easily hide and show content based on the size of the device, and we are able to display content selectively. With these utility classes, it becomes possible to apply different properties to content based on the size of the device. For example, if we want to hide any text only for mobile devices, then we can simply use the “hide-on-small-only” class for the text that should only be visible on large screen sizes or desktop devices.
Here are many different classes that you can use, like .hide,.hide-on-small-only,.hide-on-med-only,.hide-on-med-and-down,.hide-on-med-and-up,.hide-on-large-only,.show-on-small,.show-on-large,.show-on-medium-and-up,show-on-medium-and-down.
Example
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div style = "border:black; border-style:solid; padding:20px; margin:20px">
<h4 class = "hide-on-small-only">hide on small only</h4>
</div>
</body>
</html>
Formatting Utility Classes
Materialize css provides several classes that can be used to format HTML content in a simple and effective way. By utilizing these formatting utility classes, we can easily truncate the content displayed in a browser and add a shadow effect to a card element when it is hovered over without having to use complex CSS code.
To achieve these formatting effects, we can make use of the following classes −
1. Truncate
This class is used to truncate content and display an ellipsis to indicate that there is more text that is not currently visible.
Example
<html> <head> <title> Document </title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </head> <body> <h4 class = "truncate">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam</h4> </body> </html>
2. Card-panel.hoverable
This class adds a shadow effect to a card element when it is hovered over, which helps to align and highlight the content contained within the card.
Example
<html>
<head>
<title> Document </title>
<link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class = "row">
<div class = "col s12 m6">
<div class = " card card-panel hoverable">
<div class = "card-content blue-text">
<span class = "card-title"> Card panel hoverable </span>
<p>:This class adds a shadow effect to a card element when it is hovered over, which helps to align and highlight the content contained within the card. </p>
</div>
<div class = "card-action">
<a href = "#"> This is a link </a>
<a href = "#"> This is a link </a>
</div>
</div>
</div>
</div>
</body>
</html>
In this article, we learned to materialize CSS is a powerful front-end development framework that offers various features and utilities to create responsive and visually appealing web applications. One of its most useful components is the set of utility classes, which provide a simple and efficient approach to adding styles to HTML elements. These utility classes include color, alignment, hiding/showing content, and formatting classes, among others. By utilizing these utility classes, developers can easily achieve their desired styling effects without having to write complex CSS code. Overall, Materialize CSS is an excellent choice for developers who seek to create beautiful and responsive web applications quickly and easily.
151 Views
