Skip to content

matthewcarleton/patternfly-webcomponents

 
 

Repository files navigation

PatternFly Web Components

This project will provide a set of core web components for the PatternFly project.

Image of PatternFly

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.

Getting Started

   npm install --save patternfly-webcomponents

JS

Include dist\js\patternfly.js to load all components or load the *.js components individually.

CSS

Load the web component CSS in dist\css\patternfly-webcomponents.css alongside Patternfly CSS.

API Docs

API documentation for each component is generated with JSDocs. You can view these docs here:

https://patternfly-webcomponents.github.io/patternfly-webcomponents/

Build

npm install
gulp build

Serve

gulp serve

URL: http://localhost:3000/index.html

  • Uses gulp watch and browser-sync

image

Testing

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

Tech Notes

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.

Gotchas

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.

Source

About

This project provides a set of core Web Components for the PatternFly reference implementation

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 72.1%
  • HTML 27.1%
  • CSS 0.8%