Difficulty: Beginner
Estimated Time: 20 minutes

PatternFly Core is based on the principles of Atomic design (http://bradfrost.com/blog/post/atomic-web-design/) and BEM (Block, Element, Modifier) (http://getbem.com/introduction/).

Atomic design is a methodology for creating design systems, where page designs are broken down into reusable components that can be assembled to create reusable interaction patterns that can be assembled to create page designs.

PatternFly consists of isolated and modular structures that fall into 2 categories:

  • Layouts - the containers that allow for organizing and grouping its immediate children on the page
  • Components - modular and independent structures concerned with presentation

PatternFly also provides presentational Demos. Demos illustrate how to assemble complex structures with components and layouts. Unlike components and layouts, Demos do not include their own styles.

The Building Blocks for PatternFly Core

Step 1 of 5

PatternFly Components (Atoms)

In PatternFly, components follow the principles of atoms, molecules, and organisms. As described by Brad Frost in Atomic Design, “Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.”

Workshop: Add a button component

The button is an example of an atom, as it cannot be broken down into further parts. Its modular in the fact that it can be repeated over and over again by reusing the code. Let's add a button component.

1) Copy code into the index.html file.

Click the Copy to Editor button below to add html for a Button component to the index.html file.

<button class="pf-c-button pf-m-primary" type="button">
  Primary
</button>

2) You should see one Button component. Lets add one more Button component.

Click the Copy to Editor button below to add html for two Button components to the index.html file.

<button class="pf-c-button pf-m-primary" type="button">
  Primary
</button>
<button class="pf-c-button pf-m-primary" type="button">
  Primary
</button>

You can begin to see that these are modular atoms being added to the workspace!

index.html
myapp.scss