patternfly / patternfly-css

The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.

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.

This repository is javascript free: you'll only find CSS here.

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.

Communication channels

You can contact the patternFly community on the PatternFly mailing list or chat with us on the PatternFly slack channel.

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.

Prerequisites

The Pattern Lab Node - Gulp Edition uses Node for core processing, npm to manage project dependencies, and gulp.js to run tasks and interface with the core library. Node version 4 or higher suffices.

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.

Installing

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

Running npm install from a directory containing a package.json file will download all dependencies defined within.

Helpful commands

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:

1. Pull master
2. Rebase your branch against master
3. Checkout that branch
4. Run the build
5. Publish the script to github-pages in your repo with the command: npm run publish -- -r <reponame> public where <reponame> is the local name of your repo (eg. bleathem, origin, etc.)
6. The url is included on the Settings page of your repo under GitHub Pages.

---

Built with ❤️ by the PatternFly Community and supported by the Red Hat UXD Team.