Difficulty: beginner
Estimated Time: 15 minutes

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

Modifiers and utility classes

Step 1 of 4

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.

index.html
myapp.scss