Difficulty: beginner
Estimated Time: 15 minutes

Module 3: Modifier and utility classes

This module will deep dive into 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. You can read more about BEM (here)[http://getbem.com/introduction/]. 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.

Task: Change the Badge component's state from unread to read

In this step we are going to add two Badge components that use the unread modifier and we are going to change the Badge to the read variation by replacing the modifier.

1) Copy code to the editor.

Click the Copy to Editor button below to add html for a Badge to the index.html file.

<span class="pf-c-badge pf-m-unread">
  200
</span>
<span class="pf-c-badge pf-m-unread">
  300
</span>

2) You should see two Badges appear with the background-color of blue. The modifier class: pf-m-unread modifies its styles to be “unread”.

3) The Badge also has a “read” state denoted by the modifier class pf-m-read. Update the second Badge so that it has the modifier for “read”.

Hint: The background color of the second Badge should have changed to grey because of the css styles attached to the modifier class pf-m-read.

index.html
myapp.scss