Override PatternFly variables to achieve a new theme

Now that we have a card on our page, let's customize the styles applied to it.

1) Add a new color variable to use in the card. Let's make the links in the card purple! In PatternFly, all of the css values we use are first assigned to variables. We recommend doing the same when making customizations in your application.

In myapp.scss inside of the :root block make a new variable name called --my-app-card-theme--Color and assign it to be purple: #6200EE.

Hint:

  --my-app-card-theme--Color: #6200EE;

2) Override the global link color. In our current example of the card, the buttons in the card footer use the global link color. We can reassign the global link color variable to use our new custom color variable, so that all properties that use the global link color variable in the card will now use this color.

Inside of the .pf-c-card block of myapp.scss set the global variable --pf-global--link--Color to use the value defined in the custom variable --my-app-card-theme--Color.

Hint:

  --pf-global--link--Color: var(--my-app-card-theme--Color);

Note: Variable definitions declared for a component .pf-c-[component name] class selector are scoped to that component. So even though we are assigning a new value to the global variable, that value will only apply to the Card component, and not other components.

3) Change the font-size of the title in the card header. Not all changes require custom css. Many components include modifier classes that enable you to customize the appearance of a component. For this update, we'll use a modifier class available for the Title component.

Search in index.html for <div class="pf-c-card__header pf-c-title pf-m-md"> and replace pf-m-md with pf-m-xl.

Hint: <div class="pf-c-card__header pf-c-title pf-m-xl">

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

Extend a PatternFly component to achieve a new design

Now that we have practiced overriding variables, let's practice extending PatternFly's system to create a new element in the card. Let's add a separator element to the card.

1) Add the html markup.

In index.html add the html markup for the separator element that is a sibling to the pf-c-card__body element. Add this new code between pf-c-card__header and pf-c-card__body and pf-c-card__body and pf-c-card__footer. We will prefix the variable name with my-app so that it can be easily distinguished from the PatternFly codebase.

<div class="my-app-c-card__separator">
</div>

2) Add a variable for the height.

In the myapp.scss file, we will add new styles for my-app-c-card__separator. The first variable to add is for height and it should use PatternFly's global variable for small border width, and go under the variable declarations inside the .pf-c-card block.

  --my-app-c-card__separator--Height: var(--pf-global--BorderWidth--sm);

3) Add a variable for background color. The second variable to add is for background color and it should use PatternFly's global variable for border color.

  --my-app-c-card__separator--BackgroundColor: var(--pf-global--BorderColor--100);

4) Add a variable for the margin. The third variable to add is for the margin and it should use PatternFly's global variable for spacing.

  --my-app-c-card__separator--Margin: var(--pf-global--spacer--lg);

5) Assign the variables for the Separator element.

In myapp.scss assign the variables that were declared to the height, background-color and margin style properties. Add this as a new block under .pf-c-card:

.my-app-c-card__separator {
  background-color: var(--my-app-c-card__separator--BackgroundColor);
  height: var(--my-app-c-card__separator--Height);
  margin-right: var(--my-app-c-card__separator--Margin);
  margin-bottom: var(--my-app-c-card__separator--Margin);
  margin-left: var(--my-app-c-card__separator--Margin);
}

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

Add a PatternFly class for the layout

Now that we have an updated Card design, let's add several Cards and use the gallery layout to organize them on the page.

1) Copy code into the index.html file.

Click the Copy to Editor button below to add html for multiple Cards 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" type="button" aria-label="Remove">
        <i class="fas fa-times" aria-hidden="true"></i>
      </button>
    </div>
   </div>
   <div class="pf-c-card__header pf-c-title pf-m-xl">
    <p>PatternFly</p>
    <div class="pf-c-content">
      <small>Provided by Red Hat</small>
    </div>
  </div>
  <div class="my-app-c-card__separator">
  </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="my-app-c-card__separator">
  </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>
<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" type="button" aria-label="Remove">
        <i class="fas fa-times" aria-hidden="true"></i>
      </button>
    </div>
   </div>
   <div class="pf-c-card__header pf-c-title pf-m-xl">
    <p>PatternFly</p>
    <div class="pf-c-content">
      <small>Provided by Red Hat</small>
    </div>
  </div>
  <div class="my-app-c-card__separator">
  </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="my-app-c-card__separator">
  </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>
<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" type="button" aria-label="Remove">
        <i class="fas fa-times" aria-hidden="true"></i>
      </button>
    </div>
   </div>
   <div class="pf-c-card__header pf-c-title pf-m-xl">
    <p>PatternFly</p>
    <div class="pf-c-content">
      <small>Provided by Red Hat</small>
    </div>
  </div>
  <div class="my-app-c-card__separator">
  </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="my-app-c-card__separator">
  </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>
<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" type="button" aria-label="Remove">
        <i class="fas fa-times" aria-hidden="true"></i>
      </button>
    </div>
   </div>
   <div class="pf-c-card__header pf-c-title pf-m-xl">
    <p>PatternFly</p>
    <div class="pf-c-content">
      <small>Provided by Red Hat</small>
    </div>
  </div>
  <div class="my-app-c-card__separator">
  </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="my-app-c-card__separator">
  </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) Create a wrapper around the Cards. Multiple Cards were just added and we need to create a wrapper around them.

Add an opening <div> tag to the first line, and a closing </div> tag to the bottom of the file.

(3) Add a layout class.

To the opening <div> tag, add the gallery layout class: pf-l-gallery.

Hint: <div class="pf-l-gallery">

(4) Add a gutter modifier.

Modify the gallery layout so that it includes a gutter. To the same opening <div> tag add the class pf-m-gutter.

Hint: <div class="pf-l-gallery pf-m-gutter">