responsive-layouts

Name: responsive-layouts
Availability: InStock
Author: Vaadin

Build responsive Vaadin 25 layouts with AppLayout and CSS breakpoints.

11|3|Updated Feb 26, 2026

Search Tags:#layout #css #responsive #breakpoints #container-queries #vaadin-25 #app-layout

Ready to run

npx skills add https://github.com/vaadin/claude-plugin --skill responsive-layouts-vaadin

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: responsive-layouts
Source: https://github.com/vaadin/claude-plugin/tree/main/skills/responsive-layouts
Command: npx skills add https://github.com/vaadin/claude-plugin --skill responsive-layouts-vaadin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Creating Vaadin 25 views that gracefully adapt to different screen sizes, ensuring usable layouts on mobile and desktop.

Core Features & Use Cases

Built-in responsive components (AppLayout, Dashboard, FormLayout, MenuBar, Tabs, Context Menu, Dialog, CRUD, Date Picker, Select) that adapt automatically to viewport size.
CSS-based strategies (media queries and container queries) to tailor layouts per viewport or container width.
Practical patterns for collapsible panels, responsive grids, and mobile-to-desktop transitions across Vaadin 25 apps.

Quick Start

Illustrate a mobile-first responsive view using AppLayout and CSS container queries to adapt the navigation drawer and content area.

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 mobile and desktop screens?▼

Build responsive Vaadin layouts by combining built-in adaptive components like AppLayout and FormLayout with CSS media queries and container queries to tailor the view per viewport or container width.

What's the best way to handle navigation drawer responsiveness in a Vaadin application?▼

Use AppLayout with CSS container queries to adapt the navigation drawer and content area, allowing the drawer to collapse or expand based on the available container width rather than just the viewport.

When should I use container queries instead of media queries for responsive CSS?▼

Use container queries when layout adaptability depends on a specific component's container width rather than the entire viewport, while media queries remain effective for global viewport-based breakpoints across the application.

Which Vaadin components automatically adapt to different viewport sizes?▼

Vaadin's built-in responsive components include AppLayout, Dashboard, FormLayout, MenuBar, Tabs, Context Menu, Dialog, CRUD, Date Picker, and Select, all designed to adapt automatically to viewport size.

Does this approach support responsive grids and collapsible panels in production apps?▼

Yes, the approach provides practical patterns for collapsible panels, responsive grids, and mobile-to-desktop transitions, ensuring usable layouts across different screen sizes in production Vaadin 25 apps.

Why are my Vaadin views not adapting correctly to mobile screen sizes?▼

Ensure your Vaadin views leverage built-in adaptive components and CSS strategies like media queries and container queries, as relying on fixed-width layouts without breakpoints prevents proper mobile adaptation.