This project will provide a set of core web components for the PatternFly project.
https://patternfly-webcomponents.github.io/
Note: This project is in alpha state and currently makes use of Patternfly 4 / Bootstrap 3 CSS. In future releases, we will add support for Patternfly 5 / Bootstrap 4 Atomic CSS.
npm install --save patternfly-webcomponents
Include dist\js\patternfly.js
to load all components or load the *.js
components individually.
Load the web component CSS in dist\css\patternfly-webcomponents.css
alongside Patternfly CSS.
API documentation for each component is generated with JSDocs. You can view these docs here:
https://patternfly-webcomponents.github.io/patternfly-webcomponents/
npm install
gulp build
gulp serve
URL: http://localhost:3000/index.html
- Uses gulp watch and browser-sync
Unit and Peformance test notes can be found in TESTS.md
Test pages for each component can also be found at the following url: https://rawgit.com/patternfly-webcomponents/patternfly-webcomponents/master-dist/index.html
Repository uses the following:
- Babel - Essentially an ECMAScript 6 to ECMAScript 5 Javascript compiler. It allows you to use ES6 features in your projects and then compiles ES5 for you to use in production.
- Plumber - Prevent pipe breaking caused by errors from gulp plugins
- Webpack - Webpack is a module bundler. Webpack takes modules with dependencies and generates static assets representing those modules.
If you choose to include components individually, you will also want to include dist\js\customElementShim.js
. This resolves an issue currently with the HTMLElement prototype in Safari.
PatternFly Web Components uses a semantic release process to automate package publishing, based on the following commit message format.
Each commit message consists of a header, a body and a footer. The header has a special format that includes a type, a scope and a subject (full explanation):
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
fix(pencil): stop graphite breaking when too much pressure applied
feat(pencil): add 'graphiteWidth' option
perf(pencil): remove graphiteWidth option