Difficulty: advanced
Estimated Time: 25 minutes

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.

Please fill out a quick survey here

Override and extend variables.

Step 1 of 3

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__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 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: card initial

myapp.scss