https://github.com/patternfly-webcomponents/patternfly-webcomponents
This project provides a set of core Web Components for the PatternFly reference implementation
https://github.com/patternfly-webcomponents/patternfly-webcomponents
bootstrap css javascript webcomponents
Last synced: 9 months ago
JSON representation
This project provides a set of core Web Components for the PatternFly reference implementation
- Host: GitHub
- URL: https://github.com/patternfly-webcomponents/patternfly-webcomponents
- Owner: patternfly-webcomponents
- Created: 2016-10-31T16:12:08.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-01T11:07:03.000Z (over 8 years ago)
- Last Synced: 2025-03-20T15:52:54.752Z (10 months ago)
- Topics: bootstrap, css, javascript, webcomponents
- Language: JavaScript
- Homepage: https://patternfly-webcomponents.github.io/
- Size: 9.65 MB
- Stars: 19
- Watchers: 9
- Forks: 10
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# PatternFly Web Components
This project will provide a set of core web components for the [PatternFly](https://www.patternfly.org) project.
https://patternfly-webcomponents.github.io/
Note: This project is in alpha state and currently makes use of [Patternfly 4](https://github.com/patternfly/patternfly) / Bootstrap 3 CSS. In future releases, we will add support for [Patternfly 5](https://github.com/patternfly/patternfly-css) / 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](http://usejsdoc.org/). 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
### Testing
Unit and Peformance test notes can be found in [TESTS.md](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](https://github.com/babel/babel/issues/1548)
## Git Commit Guidelines
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](https://github.com/stevemao/conventional-changelog-angular/blob/master/convention.md)):
```
():
```
##### Patch Release
```
fix(pencil): stop graphite breaking when too much pressure applied
```
##### Feature Release
```
feat(pencil): add 'graphiteWidth' option
```
##### Breaking Release
```
perf(pencil): remove graphiteWidth option
```