PatternFly Elements - Home PatternFly Elements

Layout

Overview

PatternFly Elements Layouts, like Bootstrap, is based on a 12 column grid with similar breakpoints available. We also provide some helper classes that help with positioning and text alignment.

Installation

  npm install @patternfly/pfe-styles

Usage

To get started, include a link to pfe-layouts in the head of the document.

<link rel="stylesheet" type="text/css" href="/path/to/pfe-layouts.min.css">

Grid

If you want a simple 3 column grid with gutters, use the following:

<div class="pfe-l-grid pfe-m-gutters pfe-m-all-4-col">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>
Item
Item
Item
Item
Item

Bootstrap-style columns

This method allows you to have control over the width and offset of your columns.

<div class="pfe-l-grid pfe-m-gutters">
  <div class="pfe-l-grid__item">Default Item</div>
  <div class="pfe-l-grid__item pfe-m-2-col"><code>pfe-m-2-col</code></div>
  <div class="pfe-l-grid__item pfe-m-10-col"><code>pfe-m-10-col</code></div>
  <div class="pfe-l-grid__item pfe-m-4-col"><code>pfe-m-4-col</code></div>
  <div class="pfe-l-grid__item pfe-m-4-col"><code>pfe-m-4-col</code></div>
  <div class="pfe-l-grid__item pfe-m-4-col"><code>pfe-m-4-col</code></div>
  <div class="pfe-l-grid__item pfe-m-6-col pfe-m-3-col-on-md"><code>pfe-m-6-col pfe-m-3-col-on-md</code></div>
  <div class="pfe-l-grid__item pfe-m-6-col pfe-m-3-col-on-md pfe-m-startat-7-col-on-md"><code>pfe-m-6-col pfe-m-3-col-on-md pfe-m-startat-7-col-on-md</code></div>
  <div class="pfe-l-grid__item pfe-m-6-col pfe-m-3-col-on-md"><code>pfe-m-6-col pfe-m-3-col-on-md</code></div>
</div>
Default Item
pfe-m-2-col
pfe-m-10-col
pfe-m-4-col
pfe-m-4-col
pfe-m-4-col
pfe-m-6-col pfe-m-3-col-on-md
pfe-m-6-col pfe-m-3-col-on-md pfe-m-startat-7-col-on-md
pfe-m-6-col pfe-m-3-col-on-md

Grid layout classes and modifiers

Parent grid element classes

Class Description
pfe-l-grid Base grid class required
pfe-l-grid-fill-height Allows children elements to fill their container's height completely; equivalent of flex-grow
pfe-m-gutters Adds gutters based on --pfe-theme--container-spacer
pfe-m-all-*[1-12]*-col Sets width of children in grid to [1-12] columns
pfe-m-all-*[1-12]*-col-on-[xs-xl] Sets width of children to [1-12] columns on specified breakpoint [xs-xl]

Child grid element classes

Class Description
pfe-l-grid__item Base grid item class optional
pfe-m-*[1-12]*-col Sets width of this child to [1-12] columns
pfe-m-*[1-12]*-col-on-[xs-xl] Sets width of this child to [1-12] columns on specified breakpoint [xs-xl]
pfe-m-startat-*[1-12]*-col Start/indent this child to column #[1-12]
pfe-m-startat-*[1-12]*-col-on-[xs-xl] Start/indent this child to column #[1-12] on specified breakpoint [xs-xl]

Example:

<div class="pfe-l-grid pfe-m-gutters pfe-m-all-4-col">
  <div class="pfe-m-8-col">8 cols wide</div>
  <div>4 cols wide</div>
  <div class="pfe-m-startat-9-col">4 cols, indented</div>
  <div class="pfe-m-8-col">8 cols wide</div>
  <div>4 cols wide</div>
</div>
8 cols wide
4 cols wide
4 cols, indented
8 cols wide
4 cols wide

Breakpoints

  // Small devices
  @media (min-width: 576px) { ... }

  // Medium devices
  @media (min-width: 768px) { ... }

  // Large devices
  @media (min-width: 992px) { ... }

  // Extra large devices
  @media (min-width: 1200px) { ... }

Bullseye

Use a bullseye layout when there is a single child element, and that child is centered both vertically and horizontally in the parent.

Class Description
pfe-l-bullseye Centers child element vertically & horizontally

Example:

<div class="pfe-l-bullseye">
  <div>Perfectly centered child</div>
</div>
Perfectly centered child

Text alignment

Text alignment helper classes can also be applied to any block-level element.

Class Description
pfe-l--text-align--left Align text to left
pfe-l--text-align--center Align text to center
pfe-l--text-align--right Align text to right

Left aligned text

  <div class="pfe-l--text-align--left">
    <div>Left aligned text</div>
  </div>
Left aligned text

Centered aligned text

  <div class="pfe-l--text-align--center">
    <div>Center aligned text</div>
  </div>

  <div class="pfe-l--text-align--center example">
    <div>Center aligned text</div>
  </div>

Right aligned text

  <div class="pfe-l--text-align--right">
    <div>Right aligned text</div>
  </div>
Right aligned text