Working repo for PatternFly 4
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
build feat(tabs): Introduce Tabs component (#868) Nov 15, 2018
patternfly-cli Add theme colors (#173) Apr 25, 2018
plugins/gatsby-plugin-page-creator refactor(eslint): Added eslint and prettier for javascript code. (#182) Apr 24, 2018
src refactor(grid): refactor css vars (#1079) Dec 7, 2018
static/assets fix(header): update spacing, remove tall css (#969) Nov 27, 2018
test-a11y fix(a11y): ensure id attributes are unique (#1057) Dec 6, 2018
test refactor(eslint): Added eslint and prettier for javascript code. (#182) Apr 24, 2018
.eslintignore added aria-hidden=true to caret down icon in dropdown component. (#706) Sep 7, 2018
.eslintrc.js chore(preview): add handlebars preview ability for the workspace (#366) Jun 18, 2018
.gitignore fix(icons): add icons to build folder and ignore svgs in src (#777) Oct 2, 2018
.npmignore Add missing updates for build (#50) Mar 19, 2018
.nvmrc chore(node version): add nvm support, at Node >= v8.0.0 (#855) Nov 2, 2018
.prettierignore refactor(eslint): Added eslint and prettier for javascript code. (#182) Apr 24, 2018
.prettierrc chore(rename): refactor component names to match contribution guideli… Jul 17, 2018
.stylelintrc chore(stylelint): new rule requirement, line after each comma in a li… Sep 19, 2018
.travis.yml A11y Support in CI (#611) Aug 17, 2018 fix(whitespace): Whitespace changes to trigger release (#960) Nov 20, 2018
gatsby-config.js Modify build ghpages functionality (#215) May 16, 2018
gatsby-node.js fix(uniqueid): add unique id helper to handlebars (#773) Oct 2, 2018
generateSitemap.js feat(a11y): add scripts for reporting a11y violations (#517) Aug 7, 2018
gulpfile.js fix(icons): add icons to build folder and ignore svgs in src (#777) Oct 2, 2018
package-lock.json feat(PopoverUpgradeExamples): Adding PF3 and PF4 right popover for co… Dec 5, 2018
package.json chore(hbs): add contains helper to handlebars (#904) Nov 8, 2018

PatternFly Next


When you install PatternFly Next, the package includes:

  • a single file for the entire compiled library: node_modules/@patternfly/patternfly-next/patternfly.css
  • individual files with each component compiled separately: node_modules/@patternfly/patternfly-next/<ComponentName>/styles.css
  • a single file for the entire library's source (SASS): node_modules/@patternfly/patternfly-next/patternfly.scss
  • individual files for each component's source (SASS): node_modules/@patternfly/patternfly-next/<ComponentName>/styles.scss

Any of the files above are meant for use in consuming the library. The recommended consumption approach will vary from project to project.


PatternFly Next Development requires Node v8.0.0 or greater

To setup the PatternFly Next development environment:

  • clone the project
  • run npm install from the project root
  • run npm run cli:setup (only needed if doing development)
  • run npm run dev
  • open your browser to http://localhost:8000

After working on your contribution, check for accessibility violations.

Create a new component

  • run pf generate component <name>

To view visit http://localhost:8000/components/

Create a new layout

  • run pf generate layout <name>

To view visit http://localhost:8000/layout/

Create a new utility

  • run pf generate utility <name>

To view visit http://localhost:8000/utilities/

Create a new demo

  • run pf generate demo <name>

To view visit http://localhost:8000/demos/

Testing for Accessibility

PatternFly uses aXe: The Accessibility Engine to check for accessibility violations. Our goal is to meet WCAG 2.0 AA requirements, as noted in our Accessibility Guide.

How to Perform an Accessibility Audit with aXe

aXe is available as either a browser extension or npm script.

To run the a11y audit locally:

  • install the latest chromedriver and ensure its available on your system $PATH
    • alternatively, macOS users can simply brew cask install chromedriver
  • run npm run dev
  • run npm run a11y (in another console)

The tool is configured to return WCAG 2.0 AA violations for the full page renderings of all components, layouts, utilities, and demos. The tool will provide feedback about what the violation is and a link to documentation about how to address the violation.

The same tool is also available as a browser extension for Chrome and Firefox.

Fixing Violations

Ignore the violations that aren’t related to your contribution.

Fix violations related to your contribution.

If there are violations that are not obvious how to fix, then create an issue with information about the violation that was found. For example, some violations might require further discussion before they can be addressed. And some violations may not be valid and require changes to the workspace or tooling to stop flagging the violation.

If you have any suggestions about ways that we can improve how we use this tool, please let us know by opening an issue.


How do I use SCSS variables to customize the library?