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: