Customize PatternFly

Add a page demo

In PatternFly, demos are used to show how PatternFly’s components and layouts can be put together to build more complex structures. They are made entirely from components and layouts.

In this exercise, use a page demo to create a new page for a web application.

Katacoda is setting up a new React application. Begin coding once the server starts and "Welcome to PatternFly" appears on the lower pane.

1) Navigate to the src folder and open src/App.js

2) Set up the general structure of the demo and the necessary import statements.

Copy the following code into the App.js file, replacing all of the content there:

import React from 'react';
import "@patternfly/react-core/dist/styles/base.css";
import "./app.css";
import {
  Brand,
  Button,
  Card,
  CardActions,
  CardHeaderMain,
  CardTitle,
  CardHeader,
  CardBody,
  CardFooter,
  Gallery,
  GalleryItem,
  Text,
  TextContent,
  TextVariants
} from '@patternfly/react-core';
import {
  TimesIcon
} from '@patternfly/react-icons';
import AppPage from './components/page';

class PageLayoutSimpleNav extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <React.Fragment>
        <AppPage>
        </AppPage>
      </React.Fragment>
    );
  }
}

export default PageLayoutSimpleNav;

3) Add a gallery of cards.

Gallery is a PatternFly layout that arranges content in a responsive grid. Set a gutter by adding a hasGutter property.

Add the gallery inside of <AppPage>, it should look like this:

<Gallery hasGutter>
</Gallery>

4) Add multiple cards inside of the gallery.

For the purpose of this example, make every card the same. Each Card should be wrapped in a GalleryItem.

<GalleryItem>
  <Card>
    <CardBody>This is a card</CardBody>
  </Card>
</GalleryItem>

To add cards to the layout programatically, use Array.apply and Array.map to iterate over the collection and produce a GalleryItem for each item in the list. The result should look like this:

{Array.apply(0, Array(9)).map((x, i) => (
  <GalleryItem key={i}>
    <Card>
      <CardBody>This is a card</CardBody>
    </Card>
  </GalleryItem>
))}

Once the preview reloads, it should look like this: Page demo

Add content to your cards

Add content to cards.

1) Make sure App.js is still open.

2) Locate the code for the <Card> component.

<Card>
  <CardBody>This is a card</CardBody>
</Card>

3) Replace the <Card> component located in step 2 with a <Card> component that has more information.

<Card>
  <CardHeader>
    <CardHeaderMain>
      <Brand src="https://pf4.patternfly.org/assets/images/pf-logo-small.svg" alt="Patternfly Logo" />
    </CardHeaderMain>
    <CardActions>
      <Button variant="plain">
        <TimesIcon />
      </Button>
    </CardActions>
  </CardHeader>
  <CardTitle>
    <Text component={TextVariants.p}>
      PatternFly
    </Text>
    <TextContent>
      <Text component={TextVariants.small}>
        Provided by Red Hat
      </Text>
    </TextContent>
  </CardTitle>
  <CardBody>
    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.
  </CardBody>
  <CardFooter>
    <Button variant="link" isInline>Link to PatternFly</Button>
  </CardFooter>
</Card>

Once the preview reloads, it should look like this: Page demo with cards

Modify the cards

Next modify the cards.

1) Add a hover effect to the Card component.

PatternFly components, including Card, can be customized with properties. Add a hover effect to the cards with the isHoverable property.

It should look like this:

<Card isHoverable>

2) Make the card selectable.

Further extend the Card component by adding a new property isSelectable to allow selection of individual cards.

The opening tag for the Card component should now look like the following:

<Card isHoverable isSelectable>

Once the preview reloads, the page should look like this when hovering over a card:

Page demo with cards and hover effect

Customize with CSS variables

Use CSS variables to further customize components.

1) Navigate to the src folder and open src/app.css

2) Set up the CSS file.

Copy the following code into the app.css file, replacing all of the content there:

:root {
}

.pf-c-page.myPageClass {
}

3) Add a new global color.

Inside of :root define a new variable that is assigned to a hex value. The :root contains styles that are applied to the global application.

In this example, use the variable name --my-app-card-theme--Color. For more information on PatternFly variable naming look at the "variable naming principles" tutorial.

Assign the variable to the color: #DC143C.

Hint:

:root {
  --my-app-card-theme--Color: #DC143C;
}

4) Override the global link color in the page.

To override styles for the page and the specific class, target the styles in the .pf-c-page.myPageClass class inside of the app.css file.

In this example, override the color for --pf-global--link--Color by assigning the variable to --my-app-card-theme--Color (the variable that was added to the root in step 3).

Hint:

.pf-c-page.myPageClass {
  --pf-global--link--Color: var(--my-app-card-theme--Color);
}

5) Override the page background color.

This override will still happen in the .pf-c-page.myPageClass block.

The variable for the background color of the page is --pf-c-page__header--BackgroundColor. Assign it to purple.

Hint: --pf-c-page__header--BackgroundColor: purple;

Once the preview reloads, the page should look like this: Completed custom page demo

cd <directory>	Change directory
ls	List directory
echo 'contents' > <file>	Write contents to a file
cat <file>	Output contents of file

i	In Command Mode	Change into Insert Mode, you can now insert and edit text in the file
esc	In Insert Mode	Change into Command Mode, you can now execute commands
:wq	In Command Mode	Save and Exit

Welcome!

Congratulations!

You've completed the scenario!

Scenario Rating

Steps