Difficulty: beginner
Estimated Time: 20 minutes

In this module, you will learn how to override and extend PatternFly css in the context of your application to accomodate 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 utilizes 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 maintainability of the system, but also facilitates re-theming by consumers 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 overriding and extending variables course!

Please fill out a quick survey here

Overriding and extending variables.

Step 1 of 4

Step 1

Add code to the workspace

Before we get started, let's add some code to the workspace that we can modify.

1) Copy code into the index.html file.

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

<div class="pf-c-card pf-m-hoverable">
  <div class="pf-c-card__head">
    <img class="pf-c-brand" src="https://pf4.patternfly.org/assets/images/pf-logo-small.svg" alt="PatternFly Logo">
    <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__header pf-c-title pf-m-md">
    <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 your 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
}

When the server reloads, you should see something like this: card initial

index.html
myapp.scss