Atomic Design is a methodology for creating design systems. Using Atomic Design, user interfaces are broken down into reusable components that can be reassembled 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 the organization and grouping of their immediate children on the page.
- Demos illustrate how to assemble components and layouts into complex structures.
In PatternFly, components are the basic building blocks of user interfaces. They cannot be broken down into smaller parts. Examples include the button, label, and badge components. A CodeSandbox link has been provided to experiment with and follow the proceeding steps.CodeSandbox - HTML fundamentals
Step 1. Add a button component.
Add a button element to the
<body> of the
index.html file. To apply PatternFly styling to the button, add the class
pf-v5-c-button. To also apply ‘primary’ styling to the button and make it a bright blue color, add the
<button class="pf-v5-c-button pf-m-primary" type="button"> Primary </button>
Note: A simple component can be reused multiple times.
<button class="pf-v5-c-button pf-m-primary" type="button"> Primary </button> <button class="pf-v5-c-button pf-m-primary" type="button"> Primary </button>
Step 2. Build more complex components
Simple components can be combined to make more complex components that are still reusable. When simpler components are used within more complex components, the layout of the elements are defined in the stylesheet for the complex component. In this step, add a badge component to the chip component.
To build a chip component, replace the contents of the
<body> in the index.html file with the following code snippet.
<div class="pf-v5-c-chip"> <span class="pf-v5-c-chip__text"> Chip </span> <button class="pf-v5-c-button pf-m-plain"> <i class="fas fa-times"></i> </button> </div>
This is the default chip component that already has another component in it: the button. This is why the chip can be considered as a more complex component.
Add the badge inside the chip. To do this, add this block of code between
<span class="pf-v5-c-badge pf-m-read"> 7 </span>
Note: Remember, this is a component and not a demo because the chip component includes styles that handle how the badge looks within the chip. For example, when the badge component is added to the chip, it receives styling that gives it a margin. You can see that the badge in a chip has its own CSS variable,
--pf-v5-c-chip__c-badge--MarginLeft, defined for the right margin under the CSS Variables section of the chip documentation.
The resulting chip should match the following image.
In PatternFly, layouts allow for organizing and grouping elements. This tutorial covers just 1 of the 7 layouts.
Copy code into the
<body> of the
<div> <div class="pf-v5-c-card"> <div class="pf-v5-c-card__title"> Title </div> <div class="pf-v5-c-card__body"> Body </div> <div class="pf-v5-c-card__footer"> Footer </div> </div> </div>
pf-v5-l-bullseye class to the card. This will center the card horizontally and vertically on the page.
Find the outermost
<div> wrapper for the card and add the class
It should look like:
Note: It’s important to follow the documentation for layouts because it demonstrates where to add the layout class. The documentation for bullseye specifies to add the class
pf-v5-l-bullseye to the parent container of its child.
Demos show how PatternFly’s components and layouts are put together to build more complex structures. Demos have no additional styling; they are strictly made from components and layouts. If styling is needed for a certain demo, then instead create new components or layouts, or variants of the components or layouts.
Create a form demo using components and layouts.
Step 1. Add five form components
Copy and paste this block of code 5 times in the index.html file.
<form class="pf-v5-c-form"> <div class="pf-v5-c-form__group"> <div class="pf-v5-c-form__group-label"> <label class="pf-v5-c-form__label"> <span class="pf-v5-c-form__label-text"> Form label </span> </label> </div> <div class="pf-v5-c-form__group-control"> <input class="pf-v5-c-form-control"/> </div> </div> </form>
Step 2. Apply a grid layout
<div> wrapper around all 5 form components with the
pf-v5-l-grid layout class. It should look like this:
<div class="pf-v5-l-grid"> /* 5 form components are here */ </div>
Wrap each form component in its own
pf-v5-l-grid__item layout class. To do this, look for each
index.html and wrap it in the
The wrapper should look like this:
<div class=”pf-v5-l-grid__item”> /* code for individual form component */ </div>
Step 4. Add the
pf-m-gutter modifier class to the grid layout
pf-m-gutter modifier class to the grid layout ensures there is equal spacing around all children.
Add the class
pf-v5-l-grid to the outermost wrapper, inside the quotation marks.
It should look like:
<div class="pf-v5-l-grid pf-m-gutter">
Note: Learn how modifier classes work with layout classes by looking at PatternFly's grid documentation.
Step 5. Add modifier classes to the grid item classes.
This step modifies the number of columns that a grid item spans. The maximum number of columns that a grid item can span is 12 (which is equivalent to 100%).
pf-v5-l-grid__item that was added in step 3 and add the class
pf-m-[number from 1 - 12]. The numbers across a row should add up to 12.
pf-m-6-col to the first 2 grid items and add
pf-m-4-col to the last 3 grid items.
The first 2 grid items should look like:
<div class="pf-v5-l-grid__item pf-m-6-col">
The second 2 grid items should look like:
<div class="pf-v5-l-grid__item pf-m-4-col">
Compare your results.
A fully constructed demo can be viewed and modified in the provided CodeSandbox solution. Compare your work with the solution.CodeSandbox solution - HTML fundamentals
View source on GitHub