Home > Article > Web Front-end > What are the different utility classes in Materialize CSS?
What are the different utility classes in Materialize CSS?
- WBOYforward
- 2023-09-12 17:57:071389browse
In this article, we will learn about the different utility classes in Materialize CSS, but before continuing, let’s understand what Materialize CSS is. Materialize CSS is a popular front-end development framework that provides various features and utilities to create responsive and attractive web applications. One of the fundamental components of Materialize CSS is its utility classes, which provide a simple and efficient way to add styles to HTML elements
Utility classes are predefined CSS classes that can be applied to any HTML element to implement specific styles.
Here are some utility classes you can use
Color utility class
Alignment Utility Class
Utility classes for hiding/showing content
Format utility class
Color utility class
Materialize The color utility class in CSS provides a simple way to add color to HTML elements. These classes allow developers to choose from a wide range of predefined colors or define custom colors for their web applications. 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 Class
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 align elements vertically.
Text Alignment
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 alignment
It allows you to vertically align elements using the valign-wrapper class, this can be applied to a parent container element and it will vertically align child elements 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>
Hide/show content utility class
By using utility classes for hiding and showing, we can easily hide and show content based on the size of the device and be able to show content selectively. Using these utility classes, you can apply different properties to content based on the size of the device. For example, if we want to hide any text on mobile devices, then we can simply use the "hide-on-small-only" class for the text that should be visible only on large screen sizes or on desktop devices.
There are many different classes available here, such as .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>
Format utility class
Materialize CSS provides several classes that can be used to format HTML content in a simple and effective way. By leveraging these formatting utility classes, we can easily truncate the content displayed in the browser and add a shadow effect when the mouse is hovering over the card element without using complex CSS code.
In order to achieve these formatting effects, we can use the following classes -
1. Truncate
This class is used to truncate content and display ellipses to indicate that there is more text that is currently invisible.
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 card elements when hovering over them, which helps align and highlight the content contained in 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 that CSS is a powerful front-end development framework that provides various features and utilities to create responsive and visually appealing web applications. One of its most useful components is a set of utility classes that provide a simple yet effective way to add styles to HTML elements. These utility classes include color, alignment, hiding/showing content, and formatting classes, among others. By leveraging these utility classes, developers can easily achieve the styling effects they want without writing complex CSS code. Overall, Materialize CSS is an excellent choice for developers looking to create beautiful and responsive web applications quickly and easily.
The above is the detailed content of What are the different utility classes in Materialize CSS?. For more information, please follow other related articles on the PHP Chinese website!