Patternfly Logo

About PatternFly

PatternFly is an open source design system created to enable consistency and usability across a wide range of applications and use cases. PatternFly provides clear standards, guidance, and tools that help designers and developers work together more efficiently and build better user experiences.

Basic structure

Components

Components are like building blocks. Designed to be flexible and modular, you can mix and match components to create a solution for almost any UI problem.

Layouts

A layout provides a fully responsive page structure that keeps your components organized and aligned regardless of screen size.

Demos

Components are better together. Demos show how multiple components can be used in a single design. They also provide some useful starter code, so the days of creating complex layouts from scratch are over.

Design guidelines

Styles

Style guidelines define foundational elements of the design system, like color, typography, and spacing.

Usage and behavior

Usage and behavior guidelines communicate standards and best practices for common design patterns like navigation, dashboards, or forms.

UX writing

Content guidelines provide principles and best practices around writing for user experience along with general voice and style guidance.

View design guidelines

Additional tools

CSS variables

You can customize PatternFly for your project using the CSS variable system, which enables you to change style elements like color across your project. The CSS variable system is a two-layer theming system where global variables inform component variables.

Global variables Global variables define and enforce style elements (like global values for color, spacing, and font size) across the entire system.

Component variables Component variables are used to define custom properties at the component level. Component variables are always defined by global variables.

Learn more and view CSS variables

Utilities

Utilities are a set of classes that enable you to further customize and modify elements in your project without having to write any custom CSS.

For example, you might use a utility class to add additional spacing between elements, align content in a layout, or even add a box shadow to an element.

Supported browsers

Browser
Version
Chrome
latest
Firefox
latest
Safari
latest
Edge
latest

If you encounter an issue with an earlier browser version and have a question about whether or not that behavior should be supported, please feel free to contact us.


View source on GitHub