Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What are the different utility classes in Materialize CSS?
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 provide an easy and efficient approach to adding styles to HTML elements without writing custom CSS.
Utility classes are predefined CSS classes that can be applied to any HTML element to achieve specific styling effects quickly and consistently.
Types of Utility Classes
Color utility classes for text and background colors
Alignment utility classes for text and element positioning
Hiding/showing content utility classes for responsive visibility
Formatting utility classes for text truncation and visual effects
Color Utility Classes
The color utility classes in Materialize CSS provide a simple way to add colors to HTML elements. These classes include both text color and background color options with various shades and intensities.
Example
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> </head> <body> <h1 class="red-text text-darken-2">This is red text with darker shade</h1> <h2 class="blue white-text">This is blue background with white text</h2> <p class="green-text text-lighten-1">This is green text with lighter shade</p> </body> </html>
Text appears with red color (dark shade), blue background with white text, and green text with a lighter shade.
Alignment Utility Classes
Materialize CSS provides several alignment utility classes for both horizontal text alignment and vertical element positioning.
Text Alignment
Control the horizontal alignment of text within elements using left-align, right-align, center-align, and justify-align classes.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> </head> <body class="container"> <h3 class="left-align">Left Aligned Text</h3> <h3 class="right-align">Right Aligned Text</h3> <h3 class="center-align">Center Aligned Text</h3> </body> </html>
Text appears aligned to the left, right, and center respectively within the container.
Vertical Alignment
Use the valign-wrapper class on a parent container to vertically center child elements within it.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="valign-wrapper" style="height: 200px; border: 1px solid #ccc;">
<h5>Vertically Centered Content</h5>
</div>
</body>
</html>
The text appears vertically centered within a bordered container.
Hiding/Showing Content Utility Classes
These utility classes allow you to hide and show content based on device screen sizes, enabling responsive design without custom CSS media queries.
Available classes include: hide, hide-on-small-only, hide-on-med-only, hide-on-large-only, show-on-small, show-on-medium, and show-on-large.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div style="border: 1px solid black; padding: 20px; margin: 20px;">
<h4 class="hide-on-small-only">Hidden on small screens only</h4>
<h4 class="show-on-large">Visible only on large screens</h4>
</div>
</body>
</html>
Content visibility changes based on screen size - some text is hidden on small screens while other text shows only on large screens.
Formatting Utility Classes
Materialize CSS provides formatting classes for common text and visual effects.
Truncate
The truncate class shortens long text and adds an ellipsis (...) to indicate there's more content.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div style="width: 300px;">
<h4 class="truncate">Lorem ipsum dolor sit amet consectetur adipisicing elit. This is a very long text that will be truncated.</h4>
</div>
</body>
</html>
The long text is cut off with "..." showing where content continues beyond the container width.
Hoverable
The hoverable class adds a subtle shadow effect to elements when hovered, commonly used with cards.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="row">
<div class="col s12 m6">
<div class="card hoverable">
<div class="card-content">
<span class="card-title">Hoverable Card</span>
<p>This card has a shadow effect when you hover over it.</p>
</div>
<div class="card-action">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
</div>
</div>
</div>
</body>
</html>
A card appears with subtle shadow that becomes more pronounced when hovered, creating an interactive visual effect.
Conclusion
Materialize CSS utility classes provide a powerful and efficient way to style HTML elements without writing custom CSS. These classes cover essential styling needs including colors, alignment, responsive visibility, and common formatting effects, making web development faster and more consistent.
414 Views
