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 help you grow a project.
HEADS UP This document will use the command line. If you feel uncomfortable with it you can install CodeKit. It does Bower, live reload and less compilation without having to type any command.
Create a project
With the Finder, create an empty folder where the the project will live.
Or do it the hardcore way, use the command line. Open the terminal and navigate to the folder where the project will be nested:
Then create a directory with the project name:
Use Bower to install Patternfly
Bower is a package manager. We are going to use bower to install patternfly framework. The first thing to do is to install bower globally. On the terminal type:
Sometimes it is require to run this command as root/Administrator. To do so add
npm and run it again.
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.
The folder now looks like this:
TIP Remember never to change /bower_components so patternfly can be easily updated.
Patternfly is based on bootstrap. We recommend the use of a CSS pre-processor. This case uses Less, but there is also Sass version.
Now create 2 folders, one for /less and another for /css
Leave the /css files empty, it is to place the compile css file there.
Open your favourite text editor and create a new file, call it styles.less.
On styles.less, first import patternfly:
Then change path of the fonts:
Now the less file is set up, you can write your styles here.
TIP By importing patternfly.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.
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. Here are very easy to follow instructions to set up Gulp
Or just use CodeKit
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
Call styles.css on the HTML head:
TIP: By calling just one CSS you avoid making unnecessary requests.
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.