PatternFly open interface project
HTML CSS JavaScript Ruby
Failed to load latest commit information.
.github Merge branch 'master' into master-dist Sep 14, 2016
src Bumped version number to 3.18.1 Jan 19, 2017
tests Merge pull request #522 from dabeng/shift-key Jan 17, 2017
.bowerrc Removing git submodules in favor of using the Bower javascript packag… Nov 1, 2013
.codeclimate.yml Updated .codeclimate.yml to exclude /dist dir. Jul 8, 2016
.editorconfig Adding editorconfig Nov 11, 2015
.gitignore introduce an npmignore so /dist is included in npm Aug 3, 2016
.htmlhintrc Updates Patternfly HTML,LESS,JS Linting Aug 24, 2016
.npmignore introduce an npmignore so /dist is included in npm Aug 3, 2016
.nsprc Add nsp to travis CI pipeline Jul 15, 2016
.stylelintrc Updates Patternfly HTML,LESS,JS Linting Aug 24, 2016
.travis.yml Merge branch 'master-local' into master-dist Dec 21, 2016 change email address for reporting violations. Aug 12, 2016
Gemfile Removed unnecessary gems from the Gemfile Oct 25, 2016
Gemfile.lock Removed unnecessary gems from the Gemfile Oct 25, 2016
Gruntfile.js Copies the .less dependencies into the dist/less/dependencies folder Jan 14, 2017
LICENSE.txt added LICENSE.txt file Jun 20, 2014
OPEN_SOURCE_LICENCES.txt Adding Bootstrap-touchspin widget Sep 29, 2015 New readme file with detailed instructions on how to updat… May 10, 2016
PatternFlyIcons-webfont.json adds json file and icons to the test pages Oct 12, 2016 Updated readme and quick start to reflect dependency install location… Dec 9, 2016 Updated readme and quick start to reflect dependency install location… Dec 9, 2016
bower.json Bumped version number to 3.18.1 Jan 19, 2017
eslint.yaml Updates Patternfly HTML,LESS,JS Linting Aug 24, 2016
karma.conf.js Created a DataTables extension for row selection and select all funct… Nov 14, 2016
npm-shrinkwrap.json Bumped version number to 3.18.1 Jan 19, 2017
package.json Bumped version number to 3.18.1 Jan 19, 2017

Build Status Dependency Status Code Climate npm version


PatternFly reference implementation

This reference implementation of PatternFly is based on Bootstrap v3. Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations. For information on how to quickly get started using PatternFly, see the Quick Start Guide. If you wish to contribute to PatternFly, please follow the instructions under "Contributing to PatternFly".


Install with NPM

PatternFly can be installed and managed through NPM. To do so, either add patternfly as a dependency in your package.json or run the following:

npm install patternfly --save

Patternfly stays up to date with the Node LTS Release Schedule. If you're using Patternfly downstream, we suggest the use of an actively supported version of Node/NPM, although prior versions of Node may work.

Install with Bower

PatternFly can be installed and managed through Bower. To do so, either add patternfly as a dependency in your bower.json or run the following:

bower install patternfly --save

Using Wiredep?

Are you using Wiredep? PatternFly's CSS includes the CSS of its dependencies. As a result, you'll want to add the following to your Wiredep configuration so you don't end up with duplicate CSS.

exclude: [

Sass and/or Rails

A Sass port of PatternFly is available, as is a Sass-based Rails Gem.


A set of common AngularJS directives for use with PatternFly is available.

Contributing to PatternFly

The following sections provide information on how to get started as a developer or designer in the PatternFly codebase. In order to set up your environment, two different types of dependencies will need to be set up. Please follow the instructions under "Development - Build Dependencies" (Node.js/Ruby) and "Development - Code Dependencies" below. If you wish to use PatternFly in your project, please follow the Quick Start Guide instead.

Development - Build Dependencies

Development setup requires Node.js and Ruby. If you do not already have Node.js, npm, and Ruby installed on your system, see and

Development - Code Dependencies

The PatternFly code includes a number of dependencies that are not committed to this repository. To add them, follow the instructions below under "Install NPM Dependencies". Please make sure you keep them updated (see "Keeping NPM Dependencies Updated").

Install NPM Dependencies

The development includes the use of a number of helpful tasks. In order to setup your development environment to allow running of these tasks, you need to install the local nodejs packages declared in package.json. To do this run:

npm install

Since Patternfly is shrink wrapped, npm 3 will install all necessary development packages into node_modules/patternfly/node_modules. At this point, the gruntjs tasks are available for use such as starting a local development server or building the master CSS file.

If you prefer a flat dependency structure, you can define your own dependencies explicitly. That will flatten out the node_modules structure and place dependencies in the root node_modules directory.

Additionally you may need to install the grunt command line utility. To do this run:

npm install -g grunt-cli

Test pages are generated using Jekyll. Ensure Ruby is installed and available then run:

gem install jekyll -v 3.1.6

Note: You can use any 3.1.x version with at least 3.1.4 (3.1.4 includes necessary fixes to #4433 and #4442)

Keeping NPM Dependencies Updated

Anytime you pull a new version of PatternFly, make sure you also run

npm update

so you get the latest version of the dependencies specified in package.json.

Live Reload Server

A local development server can be quickly fired up by using the Gruntjs server task:

grunt server

This local static asset server (i.e., http://localhost:9000) has the advantage of having livereload integration. Thus, if you start the Gruntjs server, any changes you make to .html or .less files will be automatically reloaded into your browser and the changes reflected almost immediately. This has the obvious benefit of not having to refresh your browser and still be able to see the changes as you add or remove them from your development files. Additionally, any changes made to Jekyll source files (tests\pages/) will trigger a Jekyll build.

Coding Style




In development, styling is written and managed through multiple lesscss files. In order to generate a CSS file of all styling, run the build Gruntjs task:

grunt build

This task will compile and minify the lesscss files into CSS files located at dist/css/patternfly.min.css and dist/css/patternfly-additional.min.css.

PatternFlyIcons Font

PatternFlyIcons font is generated using IcoMoon. Go to manage projects and import the project PatternFlyIcons-webfont.json. Load it and update as necessary. When finished, return to manage projects, and download the updated PatternFlyIcons-webfont.json file. Also generate the fonts. Please commit the updated PatternFlyIcons-webfont.json file, the updated font files and supporting LESS/CSS changes. For detailed instructions, please see our PatternFly Icon Guide


The tests/ directory contains HTML pages with component and pattern examples in order to facilitate development. Please consult the official documentation (see below) for full details on how to use PatternFly. The latest PatternFly test directory examples can be seen at

If you are developing on PatternFly and would like to provide a link to a test directory from your fork, TravisCI can be configured to create a copy of your branch with the dist files generated for you. No code changes are necessary to enable this, all that is needed is to login to TravisCI and configure it to point at your PatternFly fork. The first three steps at their Getting Started page provide instructions on how to do this. You will also need to add an AUTH_TOKEN variable to Travis generated in your GitHub account to allow Travis to connect to your fork.

The HTML pages in dist/tests are generated using Jekyll. Do not edit these files directly. See tests/pages to change these files.

Unit Testing

Unit tests are written for Karma test server with Jasmine

grunt karma


PatternFly is released through the Bower and npm.

To release a new version version of PatternFly, edit bower.json and package.json accordingly.

Update the version listed in bower.json by editing the file and changing the line:

"version": "<new_version>"

Update the version listed in package.json by editing the file and changing the line:

"version": "<new_version>"

Commit the version bump:

git commit -a -m "Version bump to <new_version>"

Tag and push upstream (assuming you have commit access):

git tag <new_version>
git push && git push --tags

The Bower package manager determines available versions and installs based upon git tags, so the new version will now be automatically available via Bower.

To publish a new version to npm, execute:

npm publish


See and

Browser and Device Support

Since PatternFly is based on Bootstrap, PatternFly supports the same browsers as Bootstrap excluding Internet Explorer 8, plus the latest version of Firefox for Linux.

Important: starting with the v2.0.0 release, PatternFly no longer supports Internet Explorer 8.

Product Backlog


Bug List

Official tracking of bugs occurs in Jira. See


Modifications to Bootstrap are copyright 2013 Red Hat, Inc. and licensed under the Apache License 2.0.