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
andpatternfly-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
tocomponents/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.
Link two CSS instead of one
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.