This module covers how to use and create modifier classes per component and how to efficiently apply utility classes across user interfaces.
Congratulations! You finished the "modifiers and utility classes" course.
Please fill out a quick survey here
As a reminder, you will find the documentation for all modifier classes at the end of each component page. PatternFly also has a link to the total list of modifiers that we have: https://pf4.patternfly.org/modifiers

Steps
Modifiers and utility classes
Modify simple component
PatternFly is based on the BEM naming system, whereby modifiers are tied to a component's "block" and “element” classes. Read more about BEM here. This example will demonstrate applying a modifier class to the "block" class.
Components have multiple variations due in part to the use of modifier classes, which override or add new styling to the same component.
Modifiers use the pf-m-
prefix, followed by a suitable name for the modifier. PatternFly aims to use consistent names for modifiers across components, however the styles for each modifier are specific to that component element.
In this step, change the badge's state from unread to read.
Katacoda is setting up a new application. Begin coding once the server starts and "Welcome to PatternFly" appears on the lower pane.
1) Copy code to index.html
.
Click the Copy to Editor
button below to add HTML for two unread badge components.
<span class="pf-c-badge pf-m-unread"> 200 </span> <span class="pf-c-badge pf-m-unread"> 300 </span>
Note: Both badges will have a background color of blue. The modifier class pf-m-unread
modifies the background-color
property to be blue.
2) Update the second badge to be in the read state.
The badge also has a read state denoted by the modifier class pf-m-read
. Replace the modifier class on the second badge with the new modifier class for read.
Note: The background color of the second badge should change to grey because of the CSS styles attached to the modifier class pf-m-read
.
You’ll love Katacoda

Guided Path
Knowing what you need to know is the hardest part. Our guided pathways help build your knowledge around real-world scenarios.

Learn By Doing
The best way to learn is by doing. All our tutorials are interactive with pre-configured live environments ready for you to use.

Stay up-to-date
It's a competitive industry. Your skills need to keep up with the latest approaches. Katacoda keeps your skills up-to-date.
You’ll love Katacoda

Guided Path
Knowing what you need to know is the hardest part. Our guided pathways help build your knowledge around real-world scenarios.

Learn By Doing
The best way to learn is by doing. All our tutorials are interactive with pre-configured live environments ready for you to use.

Stay up-to-date
It's a competitive industry. Your skills need to keep up with the latest approaches. Katacoda keeps your skills up-to-date.