PatternFly 5 CSS
PatternFly 5 is the best open source modular design system you'll ever use to build enterprise web applications.
Think of PatternFly as a "skinned" version of Bootstrap v4 with additional components and customizations.
Are we there yet?
No, we are not there yet. PatternFly 5 is in its very early stages.
If you as passionate about CSS as we are, you would love to participate in the community and become a contributor.
Contributing to PatternFly 5
PatternFly 5 is implemented using Pattern Lab Node - Gulp Edition.
Coding style guidelines
Please read the coding style guidelines for PatternFly 5.
The guidelines are a work in progress and a live document, if you have any suggestion please contact the PatternFly community or send a PR.
You can follow the directions for installing Node on the Node website if you haven't done so already. Installation of Node will include npm.
npm is a dependency management and package system which can pull in all of the Gulp Edition's dependencies for you. To accomplish this run the following:
npm install from a directory containing a
package.json file will download all dependencies defined within.
These are some helpful commands you can use on the command line for working with Pattern Lab.
List all of the available commands
To list all available commands type:
npm run gulp patternlab:help
Generate Pattern Lab
To generate the front-end for Pattern Lab type:
npm run gulp patternlab:build
Watch for changes and re-generate Pattern Lab
To watch for changes, re-generate the front-end, and serve it via a BrowserSync server, type:
npm run gulp patternlab:serve
BrowserSync should open http://localhost:8082 in your browser.
Sharing your result on GitHub Pages
Follow this steps to publish your results to GitHub pages:
- Pull master
- Rebase your branch against master
- Checkout that branch
- Run the build
- Publish the script to github-pages in your repo with the command:
npm run publish -- -r <reponame> publicwhere
<reponame>is the local name of your repo (eg. bleathem, origin, etc.)
- The url is included on the Settings page of your repo under GitHub Pages.