Difficulty: Beginner
Estimated Time: 20 minutes

PatternFly Core is based on the principles of Atomic design and BEM (Block, Element, Modifier).

Atomic design is a methodology for creating design systems. In Atomic Design user interfaces are broken down into reusable components that can be re-assembled to create reusable interaction patterns.

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

  • Components are modular and independent structures concerned with presentation
  • Layouts allow for organizing and grouping their immediate children on the page
  • Demos illustrate how to assemble complex structures with components and layouts only

Congratulations! You finished the "building blocks of PatternFly" course.

Please fill out a quick survey here

The building blocks of PatternFly

Step 1 of 4

Simple PatternFly components

In PatternFly, components which cannot be broken down into smaller parts are known as the basic building blocks of user interfaces. Examples include the button, label and badge components.

This step will look at the button component.

Workshop: 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) Let's 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>
index.html
myapp.scss