Set up Patternfly

patternfly.md

Patternfly: Set up instructions

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.

Add Image: Finder

Or do it the hardcore way, use the command line. Open the terminal and navigate to the folder where the project will be nested:

cd path_to/projects

Then create a directory with the project name:

mkdir myProject

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:

npm install -g bower

Sometimes it is require to run this command as root/Administrator. To do so add sudo before npm and run it again.

Make sure you are in the project folder path_to/projects/myProject and install patternfly:

bower install patternfly

TIP: There are lots of command line basics tutorials. This excellent video series will teach you the basics.

File structure

The folder now looks like this:

Add Image: Finder

• myProject
  • bower_components
    • patternfly

TIP: Remember never to change /bower_components so patternfly can be easily updated.

Add styles

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

Add Image: Finder

• myProject
  • bower_components
    • patternfly
  • less
  • css

Leave the /css files empty, it is to place the compile css file there.

TIP: Do not edit the css file, changes should always be made on the less file.

Create styles.less

Open your favourite text editor and create a new file, call it styles.less.

Add Image: Finder

• myProject
  • bower_components
    • patternfly
  • less
    • styles.less
  • css

On styles.less, first import patternfly:

@import "../bower_components/patternfly/less/patternfly.less";

Then change path of the fonts:

@fa-font-path:      "../bower_components/patternfly/components/font-awesome/fonts/";
@font-path:         "../bower_components/patternfly/dist/fonts";
@icon-font-path:    "../bower_components/patternfly/components/bootstrap/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.

Compile

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 instructions on how to set up Gulp

Or just use CodeKit

This will generate a styes.css file under /css:

Add Image: Finder

• myProject
  • bower_components
    • patternfly
  • less
    • styles.less
  • css
    • styles.css

Set up HTML

Call styles.css on the HTML head:

<link href="css/styles.css" rel="stylesheet" media="screen, print">

TIP: By calling just one CSS you avoid making unnecessary requests.

Add Image: Finder

• My_Project
  • bower_components
    • patternfly
  • less
    • styles.less
  • css
    • styles.css
  • index.html

Enjoy!

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.

This is great, Andres! Do you think it's worth mentioning how to create a customized version of PatternFly (i.e., one that only includes the parts a user cares about rather than the complete implementation--like a manual version of http://getbootstrap.com/customize/)?

@rhamilton yeap. Do we have a custom builder on patternfly? To do so, I would just go on paternally.less and comment out the lines I don't want to load.
Is that how you would do it?