Before you begin, check out our overview of PatternFly to get acquainted with the basic elements of the design system.
Before you begin, install a package manager:
Get started with:
The React library provides a collection of React components you can use to build interfaces with consistent markup, styling, and behavior.
Start with a sample project
Start with the PatternFly React seed, which is an open source build scaffolding utility created to give developers a jump start when creating new projects that will use PatternFly.
Start with your existing project
If you want to start with your existing project, skip to: Install and configure PatternFly React.
Start with the React seed
- Fork the project
TypeScript: Fork and clone the PatternFly React Seed project.
For more information about how to fork and clone a repo, view GitHub Help.
Install the project
Follow the steps outlined in the README to install.
Install and configure PatternFly React
Using npm, run the following command to install:
npm install @patternfly/react-core --save
Using yarn, run the following command to install:
yarn add @patternfly/react-core
The HTML/CSS library provides a collection of code samples you can use to build interfaces with consistent PatternFly markup and styling.
Using npm, run the following commands to install:
npm install @patternfly/patternfly --save
Each of the three modules (layouts, components, and utilities) delivers a Sass file (.scss) and CSS file, so you can include them in your build environment or consume the CSS from your page header.
If you need to overwrite any elements, we recommend extending the variables found in the .scss files, rather than manually overwriting the CSS.
When you install PatternFly, the package includes:
- A single file for the entire compiled library:
- Individual files with each component compiled separately:
- A single file for the entire library's source (Sass):
- Individual files for each component's source (Sass):
Use these files to consume the library. The recommended consumption approach will vary from project to project.
Configure your project
Navigate to the patternfly package you just installed and find the PatternFly CSS stylesheet,
patternfly.cssto your project's CSS directory.
In your HTML file, add the following line to the bottom of your list of CSS files to link to your new stylesheet:
<link rel="stylesheet" href="css/patternfly.css">
This will ensure that PatternFly styles take precedence over anything that currently resides in your application.
If you want to use PatternFly utilities in your project, find the utilities file,
patternfly-addons.cssinto your project’s CSS directory.
In your HTML file, add the following line to the bottom of your list of CSS files:
<link rel="stylesheet" href="css/patternfly-addons.css">
PatternFly uses the Red Hat font family. By default, Red Hat fonts are included as part of the PatternFly distributed CSS file. You do not need to do anything with your configuration to use this font family.
The official documentation for the Red Hat font family can be found at the RedHatOfficial/RedHatFont repo. A number of opt-in classes to expand the feature set of the default Red Hat font family within PatternFly, including variable font files and updated monospace fonts, can be found on the Red Hat font page. For additional guidelines on typography implementation in PatternFly see the PatternFly typography guidelines.
PatternFly uses Font Awesome 5. Font Awesome 5 can be utilized in two different ways:
Built into PatternFly
By default, Font Awesome is included as part of the PatternFly distributed CSS file. You do not need to do anything with your configuration to use this icon font family.
Used as a CDN
If you wish to use the CDN for Font Awesome 5 rather than the default approach, you need to update the
sass-utilities/scss-variables.scssfile (from source
node_modules/@patternfly/patternfly/) and build PatternFly as part of your build process.
To use the CDN vs the standard build, update the
sass-utilities/scss-variables.scssfile as follows:
$pf-global--enable-fontawesome-cdn: true !default;
Customizing PatternFly for your project
The CSS variable system enables you to easily customize things like color or shape without overwriting existing PatternFly styles.
Many PatternFly components comply with the Open UI Automation (OUIA) guidelines, which are designed to ease the burden of creating and maintaining automated testing environments. Additional details about Open UI Automation and the full list of compliant components can be found on the Open UI Automation page.
View source on GitHub