PatternFly Elements is a work-in-progress collection of flexible and lightweight Web Components based on the Unified Design Kit. The repo also includes a generator to build new components. PatternFly Elements are:
- Lightweight: small file size, minimal boilerplate, no "framework-like" features.
- Universal: write once, use everywhere. PatternFly Elements work in React, Vue, Angular, vanilla JS, anywhere HTML elements are used.
- Themable: Make overrides as needed via attributes or CSS variables
The result of these principles is that you can plug one set of components into a wide variety of applications; bringing UX consistency and developer familiarity to any web project.
A Yeoman generator is included for creating web components that meet these goals.
git clone git@github.com:patternfly/patternfly-elements.git
cd patternfly-elements
npm install # this will take a while due to lerna bootstrap
npm run storybook
The storybook script will launch the interactive demo pages.
If you will be doing any release work, it is recommended that you install Hugo and Hub.
To install on a MacOS: brew install hugo hub.
For other systems, please see documentation: - Hub - Hugo
Note: You will need to use Node v.7 or higher.
Many commands have an optional argument of space-separated component name(s), if left off it will assume it should run on all components. These should run from the project root.
# Build and watch all components, run the server to preview demo pages
npm run dev
# Build and watch on one or more components, run the server to preview demo pages
npm run dev [component-name(s)]# Runs server process to preview files
npm start
# Runs storybook preview tool
npm run storybook
# Open documentation
npm run docs# Runs build and server (but doesn't watch)
npm run demo [component-name(s)]
# Runs build, watch, and server processes, both demo pages and storybook
npm run live-demo [component-name(s)]# Build and run tests on all components
npm run test
# Build and run tests on one component
npm run test [component-name(s)]# Open a new pull request
npm run prThough we have tested and verified general usability within these frameworks, PFE makes no guarantees about compatibility within specific sites & applications. Please test accordingly. For more details, check out the official status card per component or visit the status page on the documentation site.
Sign up for the for the active project participation email list and/or the informed email list.
You can also participate in discussions on patternfly.slack.com in the #patternfly-elements channel.
home | start | develop | theming | storybook | web components