skills.rest
marcushellberg
marcushellbergCOMMUNITY
Explore all skills by this author →
GitHub

responsive-layouts

Build responsive Vaadin 25 layouts with CSS media queries and Lumo utilities.

6|1|Updated Feb 24, 2026
Search Tags:#layout#css#responsive#breakpoints#container-queries#vaadin#vaadin-25
One-click install
npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill responsive-layouts-marcushellberg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-layouts
Source: https://github.com/marcushellberg/vaadin-development-plugin/tree/main/skills/responsive-layouts
Command: npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill responsive-layouts-marcushellberg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Vaadin 25 layouts often struggle to adapt to different screen sizes and container widths. This skill provides a structured approach to creating responsive views using Vaadin's layout components, CSS queries, and the Lumo theme utilities.

Core Features & Use Cases

  • Guidelines for using AppLayout, Dashboard, FormLayout, and other components to build fluid, mobile-friendly UIs.
  • Strategies for breakpoints and container queries to ensure views reflow gracefully across devices.
  • Real-world use cases such as admin dashboards, responsive forms, and views that adapt to both mobile and desktop.

Quick Start

Create a Vaadin 25 view using AppLayout and a responsive grid and apply CSS media queries to adapt at breakpoints.

Frequently Asked Questions about responsive-layouts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build responsive Vaadin layouts that adapt to different screen sizes?▼

Build responsive Vaadin layouts by combining AppLayout composition with CSS media queries, container queries, and Lumo utility classes to ensure views reflow gracefully across mobile and desktop screen sizes.

What is the best way to make a Vaadin 25 dashboard responsive on mobile devices?▼

The best way to make a Vaadin 25 dashboard responsive is to use the Dashboard component alongside container queries and breakpoints, allowing the layout to adapt fluidly to varying container widths and mobile screen constraints.

How do CSS container queries work with Vaadin FormLayout for adaptive forms?▼

CSS container queries enable Vaadin FormLayout to respond to parent container widths rather than the viewport, allowing form fields to reflow gracefully and adapt layouts based on available space.

Can I use Lumo utility classes to handle breakpoints in Vaadin applications?▼

Yes, you can use Lumo utility classes to handle breakpoints in Vaadin applications, combining them with CSS media queries to enforce responsive behavior and ensure views scale appropriately across devices.

Does Vaadin 25 support container queries for mobile-first responsive views?▼

Yes, Vaadin 25 supports container queries for mobile-first responsive views, allowing components to react to their direct container size rather than the global viewport, ensuring fluid reflow in nested layouts.

Related Skills

Explore More Software Engineering Skills→
marcushellbergmarcushellberg
6

theming

Configure Vaadin 25 theme loading with @StyleSheet and ColorScheme.

Community
Intermediate
tansanraotansanrao

responsive-design

Implement responsive CSS layouts with container queries, fluid typography, and CSS Grid.

Community
Intermediate
vaadinvaadin
11

responsive-layouts

Build responsive Vaadin 25 layouts with AppLayout and CSS breakpoints.

Official
Advanced
Asymmetric-alAsymmetric-al
1

responsive-design

Build mobile-first CSS layouts with Grid, Flexbox, and media queries.

Official
Intermediate