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

  • Breakpoint - Responsive breakpoint definitions (sm, md, lg, xl, 2xl)
  • BreakpointCollector - Stream collector for building breakpoint maps
  • Breakpoints - Container for breakpoint-specific values
  • Classes - Constants for PatternFly CSS class names
  • Color - PatternFly color enumeration
  • Modifiers - Reusable modifier interfaces for common styling flags
  • Size - Size enumeration (default, sm, md, lg, xl, 2xl, 3xl, 4xl)
  • TypedModifier - Interface for type-safe modifier application
  • Variable - Type-safe CSS variable definitions
  • VariableAssignments - Utilities for applying CSS variable assignments to elements
  • Variables - CSS variable assignments for components

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
  • ExpandableModifier - Expandable/non-expandable section modifier
  • GridBreakpoint - Responsive grid breakpoints for data list and table
  • Inset - Inset spacing sizes for component padding
  • NotificationStatus - Notification read/unread/attention status
  • Orientation - Horizontal/vertical orientation
  • Padding - Padding/no-padding modifier
  • Placement - Popover/tooltip placement positions (top, bottom, start, end)
  • Rect - Simple width/height rectangle value type
  • Status - Status colors (success, warning, danger, info, custom)
  • Sticky - Sticky positioning (top/bottom)
  • Theme - Dark/light theme enumeration
  • Visibility - Element visibility states
  • Width - Column width percentages for table cells
See Also: