Package org.patternfly.style

package org.patternfly.style
Styling utilities including CSS classes, modifiers, breakpoints, and CSS variables.

This package provides programmatic access to PatternFly's CSS styling system. It includes utilities for applying modifier classes, working with responsive breakpoints, managing CSS variables, and using typed modifier interfaces for component styling.

Key Classes

  • Classes - Constants for PatternFly CSS class names
  • Modifiers - Reusable modifier interfaces for common styling flags
  • Breakpoint - Responsive breakpoint definitions (sm, md, lg, xl, 2xl)
  • Breakpoints - Container for breakpoint-specific values
  • Variable - Type-safe CSS variable definitions
  • Variables - CSS variable assignments for components
  • Color - PatternFly color enumeration
  • Size - Size enumeration (default, sm, md, lg, xl, 2xl, 3xl, 4xl)

CSS Classes

The Classes class provides constants for PatternFly CSS classes: 

import static org.patternfly.style.Classes.*;

// Base classes
div().css(component("alert"))
    .add(div().css(component("alert", "title")));

// Modifier classes
div().css(modifier("bordered"), modifier("compact"));

Modifiers

The Modifiers interface defines sub-interfaces for common styling flags. Components implement these interfaces to provide type-safe modifier methods: 

// Components implement modifier interfaces
Card card = card()
    .bordered()      // from Modifiers.Bordered
    .compact()       // from Modifiers.Compact
    .fullHeight();   // from Modifiers.FullHeight

// Toggle modifiers conditionally
Alert alert = alert("Warning")
    .inline(isInlineMode)
    .plain(!hasIcon);

Available modifier interfaces include:

  • Bordered, Box, Center, Compact, Disabled
  • Fill, FullHeight, FullWidth, Gutter
  • Horizontal, Inline, Invalid
  • NoFill, NoPadding, NoOffset
  • Padding, PageInsets, Plain, Primary
  • Readonly, Required, Secondary, Static, Sticky, Vertical

Responsive Breakpoints

Use Breakpoint for responsive design: 

// Determine current breakpoint
Breakpoint current = Breakpoint.breakpoint(window.innerWidth);

// Apply breakpoint-specific styles
if (current == Breakpoint.lg || current == Breakpoint.xl) {
    showDesktopLayout();
}

// Use Breakpoints container for responsive values
Breakpoints<Integer> columns = new Breakpoints<Integer>()
    .default_(1)
    .sm(2)
    .md(3)
    .lg(4);

int cols = columns.get(current);

CSS Variables

PatternFly uses CSS custom properties (variables) for theming. The Variable class provides type-safe access: 

// Create a typed variable
Variable<String> colorVar = new Variable<>("--pf-v6-global--primary-color--100");

// Apply variables to elements
Variables variables = new Variables();
variables.set(colorVar, "#0066cc");
element.style.cssText = variables.toCss();

Colors and Sizes

Use enum constants for consistent colors and sizes: 

// Colors
Badge badge = badge("New")
    .color(Color.blue);

Label label = label("Success")
    .color(Color.green);

// Sizes
Button button = button("Click me")
    .size(Size.lg);

Title title = title(1, "Heading")
    .size(Size._2xl);

Typed Modifiers

Use TypedModifier for type-safe modifier application: 

TypedModifier<Size> sizeModifier = new TypedModifier<>(
    "size",
    size -> "pf-m-" + size.value
);

// Apply to element
element.classList.add(sizeModifier.modifier(Size.lg));

Additional Enums

The package includes enums for specific styling concerns:

  • Brightness - Light/dark theme variants
  • Status - Status colors (success, warning, danger, info, custom)
  • Orientation - Horizontal/vertical orientation
  • Sticky - Sticky positioning (top/bottom)
  • Visibility - Element visibility states
See Also: