PatternFly is an open interface project that promotes design commonality and improved user experience across enterprise IT products and applications.
A successful set up of the framework will help maintain, organise and grow a project. It will also allow to customize the default patternfly styles.
Create a project folder
Using the command line navigate to the folder where the project will be nested:
Then create a directory with the project name:
cd into your project folder:
Use Bower (or npm) to install Patternfly
Bower is a package manager. For this example I am going to use
bower to install PatternFly, but you can also use
npm and the process would be almost the same.
You’ll need npm to install bower, make sure you have node installed on your system.
The first step is to install bower globally. On the terminal type:
Sometimes it’s require to run this command as root/Administrator. To do so add
npm and run it again.
Now make sure you are in the project folder
path_to/projects/myProject and install patternfly:
TIP There are lots of command line basics tutorials. This excellent video series will teach you the basics.
Bower will create a folder called
bower_components/ where it will install
patternfly and all its dependencies.
Your project folder should now looks like this:
TIP Remember never to change /bower_components so patternfly can be easily updated.
Patternfly is based on bootstrap. I recommend to use of a CSS pre-processor to extend patternfly instead of overwritting it. There are Less and a Sass versions of patternfly, in this case I’ll use less.
Lets create a folders one for /less and add a file called styles.less
PatternFly CSS setup
PatternFly has splitted its styles to cope with Internet Explorer 9 rule that only reads 4,095 CSS line of CSS.
patternfly.css has bootstrap and all the styles to customize bootstrap, and
patternfly-addions.css has all the styles for the new components patternfly adds to extend bootstrap functionalities.
We are going to build our styles ontop of
Set up styles.less
Open your favourite text editor and open
On styles.less, first import
Then change path of the fonts:
Now the less file is set up, you can write your styles here.
By importing patternfly-addions.less you can use all the mixins built in bootstrap and patternfly, like clearfix or grandients. Plus you can take advantage of patternfly and bootstrap variables under /variables.less for colors, sizes and more.
For example if you want on your project to change the default blue for red, and change the font size from 12px to 13px, you would write:
To create a css file from the less file, you’ll need to compile your less file. There are several ways to compile less.
It is very usefull to set up Grunt or Gulp for live results. I’ve wrote instructions on how to set up a
gulpfile to compile less and do browser refresh.
This will generate a styes.css file under /css:
TIP: Do not edit the css file, changes should always be made on the less file.
Set up HTML
patternfly.min.css on the HTML head:
TIP: For a full guide of how to load the js for all patternfly dependencies, check the quickstart guide.
For a production you’ll probably want to seup a gulp or grunt task to take patternfly.min.css out of bower_components (or node_modules) and as well as all the other dependency js you are using.
I highly recommend fully reading Bootstrap 3 documentation to understand how the grid system and components works and how to change them.
Everything is where it should be, next is for you to check out PatternFly recomendations and specifications and start coding.
If you have questions please contact Patternfly Mailing List.