Package com.oorian.html.layout.responsive

Class ResponsiveStyle

java.lang.Object
com.oorian.html.layout.responsive.ResponsiveStyle
public class ResponsiveStyle extends Object
A utility for generating responsive CSS styles that vary by breakpoint.

ResponsiveStyle allows building CSS rules that apply different property values at different screen sizes. It generates the appropriate media queries and can apply the styles to specific elements or generate standalone CSS.

Features:

  • Mobile-first approach with cascading values
  • Fluent builder API for defining breakpoint-specific styles
  • Automatic media query generation
  • Support for multiple properties per breakpoint

Usage:


 // Create responsive padding
 ResponsiveStyle padding = ResponsiveStyle.forElement(myDiv)
     .property("padding", "8px")
     .at(Breakpoint.MD, "padding", "16px")
     .at(Breakpoint.LG, "padding", "24px");

 // Apply to page
 padding.apply();

 // Multiple properties
 ResponsiveStyle layout = ResponsiveStyle.forElement(container)
     .property("display", "block")
     .property("padding", "1rem")
     .at(Breakpoint.MD, "display", "flex")
     .at(Breakpoint.MD, "padding", "2rem")
     .at(Breakpoint.LG, "gap", "24px");

 // Get CSS string for custom use
 String css = layout.toCss();

 // Apply using ResponsiveValue
 ResponsiveStyle.applyProperty(element, "font-size",
     ResponsiveValue.of("14px").md("16px").lg("18px"));
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:

  • Method Details

    • forElement

      public static ResponsiveStyle forElement(Element<?> element)
      Creates a ResponsiveStyle builder for the specified element.

      Uses the element's ID as the CSS selector.

      Parameters:
      element - the element to style
      Returns:
      a new ResponsiveStyle builder

    • forSelector

      public static ResponsiveStyle forSelector(String selector)
      Creates a ResponsiveStyle builder for a CSS selector.
      Parameters:
      selector - the CSS selector (e.g., ".my-class", "#my-id")
      Returns:
      a new ResponsiveStyle builder

    • property

      public ResponsiveStyle property(String property, String value)
      Adds a base (mobile/XS) property-value pair.

      This value applies at all breakpoints unless overridden.

      Parameters:
      property - the CSS property name
      value - the CSS value
      Returns:
      this ResponsiveStyle for method chaining

    • at

      public ResponsiveStyle at(Breakpoint breakpoint, String property, String value)
      Adds a property-value pair at a specific breakpoint.
      Parameters:
      breakpoint - the breakpoint at which the property applies
      property - the CSS property name
      value - the CSS value
      Returns:
      this ResponsiveStyle for method chaining

    • sm

      public ResponsiveStyle sm(String property, String value)
      Adds properties for SM breakpoint (640px and up).
      Parameters:
      property - the CSS property name
      value - the CSS value
      Returns:
      this ResponsiveStyle for method chaining

    • md

      public ResponsiveStyle md(String property, String value)
      Adds properties for MD breakpoint (768px and up).
      Parameters:
      property - the CSS property name
      value - the CSS value
      Returns:
      this ResponsiveStyle for method chaining

    • lg

      public ResponsiveStyle lg(String property, String value)
      Adds properties for LG breakpoint (1024px and up).
      Parameters:
      property - the CSS property name
      value - the CSS value
      Returns:
      this ResponsiveStyle for method chaining

    • xl

      public ResponsiveStyle xl(String property, String value)
      Adds properties for XL breakpoint (1280px and up).
      Parameters:
      property - the CSS property name
      value - the CSS value
      Returns:
      this ResponsiveStyle for method chaining

    • xxl

      public ResponsiveStyle xxl(String property, String value)
      Adds properties for XXL breakpoint (1536px and up).
      Parameters:
      property - the CSS property name
      value - the CSS value
      Returns:
      this ResponsiveStyle for method chaining

    • toCss

      public String toCss()
      Generates the CSS string for all defined responsive styles.
      Returns:
      the generated CSS

    • toStyleElement

      public Style toStyleElement()
      Creates a Style element containing the responsive CSS.
      Returns:
      a new Style element with the generated CSS

    • apply

      public ResponsiveStyle apply()
      Applies the responsive styles by adding a Style element to the page head.

      Requires that the element is attached to a page.

      Returns:
      this ResponsiveStyle for method chaining

    • applyProperty

      public static void applyProperty(Element<?> element, String property, ResponsiveValue<String> values)
      Applies a single responsive property to an element.

      Convenience method for applying a ResponsiveValue to an element property.

      Parameters:
      element - the element to style
      property - the CSS property name
      values - the responsive values

    • applyPropertyPx

      public static void applyPropertyPx(Element<?> element, String property, ResponsiveValue<Integer> values)
      Applies responsive property with integer values (converted to pixels).
      Parameters:
      element - the element to style
      property - the CSS property name
      values - the responsive values (integers converted to "Xpx")