Lumo Utility Classes: Responsive Breakpoints

// Instantiate a container component
Div container = new Div();

// Apply different align-items at different breakpoints
container.addClassNames(
        LumoUtility.Display.FLEX,
        // align-items: start on small screens
        LumoUtility.AlignItems.Breakpoint.Small.START,
        // align-items: center on medium screens
        LumoUtility.AlignItems.Breakpoint.Medium.CENTER,
        // align-items: end on large screens
        LumoUtility.AlignItems.Breakpoint.Large.END
);

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.theme.lumo.LumoUtility;

public class ResponsiveAlignItemsExample extends Div {

    public ResponsiveAlignItemsExample() {
        H3 title = new H3("Responsive Align Items Example");

        // Create a responsive flex container
        Div responsiveContainer = new Div();

        responsiveContainer.addClassNames(
             // Basic flex setup
            LumoUtility.Display.FLEX,
            LumoUtility.FlexDirection.COLUMN,
            LumoUtility.Padding.MEDIUM,

            // Responsive align-items

            // End on mobile
            LumoUtility.AlignItems.END,
            // Center on tablet
            LumoUtility.AlignItems.Breakpoint.Medium.CENTER,
            // Start on desktop
            LumoUtility.AlignItems.Breakpoint.Large.START
        );

        // Add content
        responsiveContainer.add(
            new Button("Button 1"),
            new Button("Button 2"),
            new Button("Button 3")
        );

        add(title, responsiveContainer);
    }
}

// Instantiate a container component
Div container = new Div();

// Apply different display values at different breakpoints
container.addClassNames(
        // Hide on small screens
        LumoUtility.Display.HIDDEN,
        // Show as block on medium screens
        LumoUtility.Display.Breakpoint.Medium.BLOCK,
        // Show as flex on large screens
        LumoUtility.Display.Breakpoint.Large.FLEX
);

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.theme.lumo.LumoUtility;

public class ResponsiveDisplayExample extends Div {

    public ResponsiveDisplayExample() {
        H3 title = new H3("Responsive Display Example");

        // Mobile-only message
        Div mobileMessage = createMessage(VaadinIcon.MOBILE, "Mobile view active",
                LumoUtility.Background.SUCCESS_10);
        mobileMessage.addClassNames(
                // Show on mobile
                LumoUtility.Display.FLEX,
                // Hide on tablet and up
                LumoUtility.Display.Breakpoint.Medium.HIDDEN,
                // Hide on desktop
                LumoUtility.Display.Breakpoint.Large.HIDDEN
        );

        // Tablet-only message
        Div tabletMessage = createMessage(VaadinIcon.TABLET, "Tablet view active",
                LumoUtility.Background.PRIMARY_10);
        tabletMessage.addClassNames(
                // Hide on mobile
                LumoUtility.Display.HIDDEN,
                // Show on tablet
                LumoUtility.Display.Breakpoint.Medium.FLEX,
                // Hide on desktop
                LumoUtility.Display.Breakpoint.Large.HIDDEN
        );

        // Desktop-only message
        Div desktopMessage = createMessage(VaadinIcon.DESKTOP, "Desktop view active",
                LumoUtility.Background.ERROR_10);
        desktopMessage.addClassNames(
                // Hide on mobile
                LumoUtility.Display.HIDDEN,
                // Hide on tablet
                LumoUtility.Display.Breakpoint.Medium.HIDDEN,
                // Show on desktop
                LumoUtility.Display.Breakpoint.Large.FLEX
        );

        add(title, mobileMessage, tabletMessage, desktopMessage);
    }

    private Div createMessage(VaadinIcon icon, String text, String background) {
        Div message = new Div(icon.create(), new Span(text));
        message.addClassNames(
                // Center the icon and text, with a gap between them
                LumoUtility.AlignItems.CENTER,
                LumoUtility.Gap.SMALL,
                background,
                LumoUtility.Padding.MEDIUM,
                LumoUtility.BorderRadius.MEDIUM
        );
        return message;
    }
}

// Instantiate a container component
Div container = new Div();

// Apply different flex-direction values at different breakpoints
container.addClassNames(
    LumoUtility.Display.FLEX,
    // Stack vertically on small screens
    LumoUtility.FlexDirection.Breakpoint.Small.COLUMN,
    // Arrange horizontally on medium screens
    LumoUtility.FlexDirection.Breakpoint.Medium.ROW
);

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.theme.lumo.LumoUtility;

public class ResponsiveFlexDirectionExample extends Div {

    public ResponsiveFlexDirectionExample() {
        H3 title = new H3("Responsive Flex Direction Example");

        // Container that changes flex direction based on screen size
        Div flexContainer = new Div();
        flexContainer.addClassNames(
            // Basic flex setup
            LumoUtility.Display.FLEX,
            LumoUtility.Gap.MEDIUM,
            LumoUtility.Padding.LARGE,
            LumoUtility.BorderRadius.MEDIUM,
            LumoUtility.Background.CONTRAST_5,

            // Responsive flex-direction

            // Stack on mobile
            LumoUtility.FlexDirection.COLUMN,
            // Horizontal on tablet
            LumoUtility.FlexDirection.Breakpoint.Medium.ROW,

            // Responsive alignment (works with flex-direction changes)
            LumoUtility.AlignItems.CENTER,
            LumoUtility.AlignItems.Breakpoint.Large.START
        );

        // Add content with indicators
        flexContainer.add(
            createFlexItem("First", "1", LumoUtility.Background.SUCCESS_10),
            createFlexItem("Second", "2", LumoUtility.Background.PRIMARY_10),
            createFlexItem("Third", "3", LumoUtility.Background.ERROR_10)
        );

        add(title, flexContainer);
    }

    private Div createFlexItem(String text, String number, String bgColor) {
        Div item = new Div();
        item.addClassNames(
            bgColor,
            LumoUtility.Padding.MEDIUM,
            LumoUtility.BorderRadius.SMALL,
            LumoUtility.Display.FLEX,
            LumoUtility.AlignItems.CENTER,
            LumoUtility.JustifyContent.CENTER,
            LumoUtility.FlexDirection.COLUMN,
            LumoUtility.Gap.SMALL
        );

        Span label = new Span(text);
        label.addClassName(LumoUtility.FontWeight.BOLD);

        Span numberSpan = new Span("#" + number);
        numberSpan.addClassName(LumoUtility.FontSize.SMALL);

        item.add(label, numberSpan);
        return item;
    }
}

// Instantiate a container component
Div container = new Div();

// Apply different font sizes at different breakpoints
container.addClassNames(
        // Large font on small screens
        LumoUtility.FontSize.LARGE,
        // Extra large on medium screens
        LumoUtility.FontSize.Breakpoint.Medium.XLARGE,
        // Extra extra large on large screens
        LumoUtility.FontSize.Breakpoint.Large.XXLARGE
);

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.theme.lumo.LumoUtility;

public class ResponsiveTypographyExample extends Div {

    public ResponsiveTypographyExample() {
        // Main heading with significant size changes
        H1 mainHeading = new H1("Welcome to Our Platform");
        mainHeading.addClassNames(
                // Responsive font sizes

                // Large on mobile
                LumoUtility.FontSize.LARGE,
                // XXLarge on tablet
                LumoUtility.FontSize.Breakpoint.Medium.XXLARGE,
                // XXXLarge on desktop
                LumoUtility.FontSize.Breakpoint.Large.XXXLARGE,

                // Additional styling
                LumoUtility.FontWeight.BOLD,
                LumoUtility.TextColor.PRIMARY,
                LumoUtility.Margin.NONE,
                LumoUtility.Padding.MEDIUM
        );

        // Subtitle with moderate scaling
        H2 subtitle = new H2("Discover amazing features and services");
        subtitle.addClassNames(
                // Medium on mobile
                LumoUtility.FontSize.MEDIUM,
                // Large on tablet
                LumoUtility.FontSize.Breakpoint.Medium.LARGE,
                // XL on desktop
                LumoUtility.FontSize.Breakpoint.Large.XLARGE,

                LumoUtility.TextColor.SECONDARY,
                LumoUtility.FontWeight.NORMAL,
                LumoUtility.Margin.SMALL
        );

        // Body text with subtle scaling
        Span bodyText = new Span(
                "Our platform offers cutting-edge solutions for modern businesses. " +
                "Experience seamless integration, powerful analytics, and intuitive design " +
                "that adapts to your needs across all devices."
        );
        bodyText.addClassNames(
                // Small on mobile
                LumoUtility.FontSize.SMALL,
                // Medium on tablet+
                LumoUtility.FontSize.Breakpoint.Medium.MEDIUM,
                // Large on desktop
                LumoUtility.FontSize.Breakpoint.Large.LARGE,

                LumoUtility.TextColor.BODY,
                LumoUtility.LineHeight.MEDIUM,
                LumoUtility.Padding.MEDIUM
        );

        add(mainHeading, subtitle, bodyText);
    }
}

// Instantiate a container component
Div container = new Div();

// Apply different numbers of grid columns at different breakpoints
container.addClassNames(
            LumoUtility.Display.GRID,
            // 1 column on small screens
            LumoUtility.Grid.Column.COLUMNS_1,
            // 2 columns on medium screens
            LumoUtility.Grid.Breakpoint.Medium.COLUMNS_2,
            // 3 columns on large screens
            LumoUtility.Grid.Breakpoint.Large.COLUMNS_3,
            // 4 columns on extra large screens
            LumoUtility.Grid.Breakpoint.XLarge.COLUMNS_4
);

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.theme.lumo.LumoUtility;

public class ResponsiveGridExample extends Div {

    public ResponsiveGridExample() {
        H3 title = new H3("Responsive Grid Columns");

        // Grid container with responsive columns and rows
        Div gridContainer = new Div();
        gridContainer.addClassNames(
            LumoUtility.Display.GRID,
            LumoUtility.Gap.MEDIUM,
            LumoUtility.Padding.LARGE,
            LumoUtility.Background.CONTRAST_5,
            LumoUtility.BorderRadius.LARGE,

            // Responsive grid columns

            // 1 column on mobile
            LumoUtility.Grid.Column.COLUMNS_1,
            // 2 columns on tablet
            LumoUtility.Grid.Breakpoint.Medium.COLUMNS_2,
            // 3 columns on desktop
            LumoUtility.Grid.Breakpoint.Large.COLUMNS_3,
            // 4 columns on large desktop
            LumoUtility.Grid.Breakpoint.XLarge.COLUMNS_4,
            // 6 columns on extra large
            LumoUtility.Grid.Breakpoint.XXLarge.COLUMNS_6
        );

        // Create grid items with different spans
        for (int i = 1; i <= 12; i++) {
            Div gridItem = createGridItem("Item " + i, i);

            gridContainer.add(gridItem);
        }

        add(title, gridContainer);
    }

    private Div createGridItem(String title, int index) {
        Div item = new Div();

        // Different background colors for visual distinction
        String bgColor = switch (index % 4) {
            case 1 -> LumoUtility.Background.SUCCESS_10;
            case 2 -> LumoUtility.Background.PRIMARY_10;
            case 3 -> LumoUtility.Background.ERROR_10;
            default -> LumoUtility.Background.CONTRAST_10;
        };

        item.addClassNames(
            bgColor,
            LumoUtility.BorderRadius.MEDIUM,
            LumoUtility.Padding.LARGE,
            LumoUtility.Display.FLEX,
            LumoUtility.AlignItems.CENTER,
            LumoUtility.JustifyContent.CENTER,
            LumoUtility.Height.LARGE
        );

        item.add(new Span(title));
        return item;
    }
}

// Instantiate a container component
Div container = new Div();

// Apply different position values at different breakpoints
container.addClassNames(
        // Relative positioning on small screens
        LumoUtility.Position.RELATIVE,
        // Absolute positioning on medium screens
        LumoUtility.Position.Breakpoint.Medium.ABSOLUTE,
        // Fixed positioning on large screens
        LumoUtility.Position.Breakpoint.Large.FIXED
);

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.theme.lumo.LumoUtility;
import com.vaadin.flow.component.icon.VaadinIcon;

public class ResponsivePositionExample extends Div {

    public ResponsivePositionExample() {
        H3 title = new H3("Responsive Position Example");

        // Container with relative positioning
        Div container = new Div();
        container.addClassNames(
                LumoUtility.Position.RELATIVE,
                LumoUtility.Background.CONTRAST_5,
                LumoUtility.Height.XLARGE,
                LumoUtility.Width.FULL,
                LumoUtility.BorderRadius.LARGE,
                LumoUtility.Margin.LARGE
        );

        // Main content
        Div mainContent = new Div("Main Content Area");
        mainContent.addClassNames(
                LumoUtility.Background.BASE,
                LumoUtility.Padding.LARGE,
                LumoUtility.BorderRadius.MEDIUM,
                LumoUtility.Height.LARGE,
                LumoUtility.Display.FLEX,
                LumoUtility.AlignItems.CENTER,
                LumoUtility.JustifyContent.CENTER
        );

        // Floating action button - responsive positioning
        Button fab = new Button(VaadinIcon.ENVELOPE_O.create());
        fab.addClassNames(
                // Position types change with screen size

                // On mobile, keep it in the normal document flow to avoid overlap issues
                LumoUtility.Position.RELATIVE,
                // On tablets and up, float it over the content
                LumoUtility.Position.Breakpoint.Medium.ABSOLUTE,

                // --- Position offsets (only apply when position is absolute/fixed) ---
                LumoUtility.Position.Bottom.MEDIUM,
                LumoUtility.Position.End.MEDIUM,

                // Styling
                LumoUtility.Background.PRIMARY,
                LumoUtility.TextColor.PRIMARY_CONTRAST,
                LumoUtility.BorderRadius.FULL,
                LumoUtility.Width.LARGE,
                LumoUtility.Height.LARGE,
                LumoUtility.BoxShadow.LARGE
        );

        // Notification banner - responsive positioning
        Div notification = new Div(VaadinIcon.BELL_O.create(), new Span("New updates available!"));
        notification.addClassNames(
                // Changes from static to sticky to fixed

                // On mobile, it's just a static block at the top
                LumoUtility.Position.STATIC,
                // On tablets, it sticks to the top when you scroll
                LumoUtility.Position.Breakpoint.Medium.STICKY,
                // On desktops, it's always fixed to the top of the viewport
                LumoUtility.Position.Breakpoint.Large.FIXED,

                // Position when fixed/sticky

                // Top of viewport
                LumoUtility.Position.Top.NONE,
                // Left edge
                LumoUtility.Position.Start.NONE,

                // Styling -- flex row so the icon and text sit together with a gap
                LumoUtility.Display.FLEX,
                LumoUtility.AlignItems.CENTER,
                LumoUtility.JustifyContent.CENTER,
                LumoUtility.Gap.SMALL,
                LumoUtility.Background.SUCCESS,
                LumoUtility.TextColor.SUCCESS_CONTRAST,
                LumoUtility.Padding.MEDIUM,
                LumoUtility.Width.FULL,
                LumoUtility.BoxShadow.MEDIUM
        );

        container.add(mainContent, fab);
        add(title, notification, container);
    }
}