In this module, learn how to override and extend PatternFly CSS in the context of your application to accommodate your custom designs.
In PatternFly, the values that are assigned to CSS properties use custom properties (which are also referred to as variables in the source code and documentation for PatternFly).
PatternFly uses variables to create a two-layer theming system, where global variables inform component variables. Global variables represent concepts, like font size and spacer, and are used to provide consistency throughout the design system. Component variables are defined using global variables and are used to provide consistency across all instances of the component.
This approach improves code maintainability, but also facilitates re-theming by users who are using the design system. This module illustrates some of the ways that variables can be modified to customize the design system.
Congratulations! You finished the "override and extend variables" course.

Steps
Override and extend variables.
Create a PatternFly card component
Before getting started, add code to the workspace so that it can be modified.
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 into the index.html
file.
Click the Copy to Editor
button below to add markup for a card to the index.html
file.
<div class="pf-c-card pf-m-hoverable"> <div class="pf-c-card__header"> <div class="pf-c-card__header-main"> <img class="pf-c-brand" src="https://pf4.patternfly.org/assets/images/pf-logo-small.svg" alt="PatternFly Logo"/> </div> <div class="pf-c-card__actions"> <button class="pf-c-button pf-m-plain"> <i class="fas fa-times"></i> </button> </div> </div> <div class="pf-c-card__title"> <p>PatternFly</p> <div class="pf-c-content"> <small>Provided by Red Hat</small> </div> </div> <div class="pf-c-card__body"> PatternFly is an open source design system created to enable consistency and usability across a wide range of applications and use cases. PatternFly provides clear standards, guidance, and tools that help designers and developers work together more efficiently and build better user experiences. </div> <div class="pf-c-card__footer pf-l-flex"> <button class="pf-c-button pf-m-inline pf-m-link"> Link to PatternFly </button> <button class="pf-c-button pf-m-inline pf-m-link"> Link to home </button> </div> </div>
2) Set up a new styles file for overriding styles in the card component.
There are two blocks in this file: :root
targets styles across the entire application, and .pf-c-card
targets styles specifically in the card component.
Click the Copy to Editor
button below to add code for the card component to the myapp.scss
file.
:root { // Add global variables here } .pf-c-card { // Add Card component variables here }
Note: When the preview reloads, it should look like this:
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.