PatternFly 2.0 Migration Guide

This guide details how to upgrade from PatternFly 1.x to our latest version, PatternFly 2.0.

PatternFly 2.0 is (almost) backwards compatible with v1.x.

There are three major changes that you should know about:

  • We don’t support Internet Explorer 8 anymore.
  • We’ve split the CSS into two files (patternfly.*css and patternfly-additions.*css) to avoid a limitation of Internet Explorer 9, where only 4095 selectors are recognized in a single stylesheet.
  • We’ve moved components/boostrap-select/bootstrap-select.min.js to components/boostrap-select/dist/js/bootstrap-select.min.js.

Get PatternFly 2.0

The first step is to upgrade the PatternFly codebase. This process will be different depending on how your project manages its dependencies.

Upgrade using Bower:

$ bower install patternfly —save-dev

Upgrade using Npm:

$ npm install patternfly —save-dev

Upgrade using Git:

Add PatternFly as a remote repo, fetch it and rebase.

$ git remote add upstream [email protected]:patternfly/patternfly.git
$ git fetch upstream

Get the ZIP

Or just download the zip file from github.

Changes on the HTML

IE8 Support

Since we no longer support IE8, you can remove IE8 utilities (html5shiv and respond) from all your pages.

We’ve split PatternFly styles into two style sheets. The links to the styles will look something like this:

<link href="PATH_TO_PATTERNFLY/dist/css/patternfly.*.css" rel="stylesheet" media="screen, print">
<link href="PATH_TO_PATTERNFLY/dist/css/patternfly-additions.*.css" rel="stylesheet" media="screen, print">

Boostrap Select

If you are using Boostrap Select you should change the path to javascript. It’ll look something like this:

<script src="PATH_TO_PATTERNFLY/components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

Dependency Upgrades

We’ve upgraded most of our dependencies. Check out the Release Notes to see a complete list. If you need a version other than what is checked into patternfly/components, you’ll have to pull it yourself.

Changes on LESS

If you are extending PatternFly styles using less, import patternfly-additions.less as a base to your styles, and compile again. Remember to load both patternfly*.css and your styles on the HTML.

@import "PATH_TO_PATTERNFLY/patternfly/less/patternfly-additions.less";

For more information on upgrading to v2.0

Send an email to the mailing list or join the IRC channel #patternfly on Freenode.