Loading...
Loading...
Created to promote design commonality and improved user experience across enterprise IT products and applications.
Avg 54.2 stars per repo.
8 new projects with 7 stars.
Coding for 12 years.
We welcome contributions to PatternFly! Please read our Contributing Guide to learn how to get started, submit issues, and contribute code to the project.
npm install @patternfly/patternfly --saveWhen you install PatternFly, the package includes:
Any of the files above are meant for use in consuming the library. The recommended consumption approach will vary from project to project.
PatternFly Development requires Node v20.18.3 or greater
To setup the PatternFly development environment:
corepack enableyarn install from the project rootyarn starthttp://localhost:8001After working on your contribution, check for accessibility violations.
To create source file scaffolding for a new component, layout, utility, or demo, run the NPM script:
node generate <CamelName>
Below are the full options for this script:
Options:
-f, --folder <folder> Source folder (components, demos, layouts, or utilities) (default: "components")
To create a "Test component" component (.pf-v6-c-test-component), run:
node generate TestComponent
To create a "Test layout" layout (.pf-l-test-layout), run:
node generate TestLayout -f layouts
To create 3 new demos named "Test demo", "Test demo 2", and "Test demo 3", run:
node generate TestDemo TestDemo2 TestDemo3 -f demos
When making visual changes to a full page example, new example preview screenshots must be generated. To update the screenshots:
yarn build && yarn serveyarn screenshotsFor information on how to contribute, refer to our contribution guide.
For more information on using CSS, Sass, and handlebars, refer to our development guidelines.
For more information on custom icons, refer to our custom icon guidelines.
When creating a brand new component, it should be released as beta in order to get feedback.
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.
aXe is available as either a browser extension or npm script.
To run the a11y audit locally:
$PATH
brew cask install chromedriveryarn build && yarn serveyarn a11yThe 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.
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 CSS variables to customize the library?
PatternFly is supported on the latest two major versions of the following browsers: