Add Responsive Layouts and CSS Grid Layouts articles#5652
Draft
peholmst wants to merge 2 commits into
Draft
Conversation
Move the layouts overview into layouts/index.adoc and add a sibling responsive.adoc migrated from the responsive-layouts agent skill: three strategies, built-in responsive components, CSS media and container queries, and Lumo utility classes, written as an overview for humans and agents. Fix the now-relative Write HTML cross-reference broken by the move and link the overview to the new responsive article. Co-Authored-By: Claude Opus 4.8 <[email protected]>
Split the why/how between designing-apps/responsiveness (design strategies and the responsive-component catalog) and the building-apps responsive layouts how-to (implementation for both Lumo and Aura), removing duplicated media/container-query and Lumo code from the design article and cross-linking the two. Add a CSS Grid Layouts article as a sibling to Responsive Layouts and link to it from the layouts overview, the responsive guide, and the design article. Fix the Lumo utility classes reference path. Co-Authored-By: Claude Opus 4.8 <[email protected]>
Preview DeploymentThis PR has been deployed for preview. URL: https://docs-preview-pr-5652.fly.dev Built from cd412ff |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Continues the layouts documentation work by adding two new articles under
building-apps/ui-basics/layouts/and making the repo's responsive-layout content tell one coherent story.New articles
layouts/responsive.adoc) — the implementation how-to: built-in responsive components, CSS media queries, container queries, and Lumo utility classes. Covers both Lumo and Aura (the CSS techniques are theme-agnostic; Lumo utility classes are a Lumo-only shortcut; Aura uses the CSS techniques).layouts/css-grid.adoc) — how to build two-dimensional grids with CSS Grid in a Vaadin view, including fluidauto-fill/minmax()card grids that wrap without media queries. Includes a disambiguation note distinguishing CSS Grid from the VaadinGriddata-table component.Restructure
layouts.adoc→layouts/index.adocso the section can hold sibling articles, and fixed theWrite HTMLcross-reference the move would otherwise have broken.Coherence (why/how split)
designing-apps/responsiveness.adockeeps the design strategies and the responsive-component catalog, but its duplicated implementation code (media/container-query CSS, Lumo example) is removed and it now points to the building-apps how-to./styling/themes/lumo/utility-classes).Companion
Pairs with vaadin/agent-skills#4, which thins the
vaadin-layoutsandresponsive-layoutsskills to point at these articles via the MCP server.Notes
dspublisherbuild to confirm the new pages, thelayouts/restructure, and the cross-reference anchors render correctly.🤖 Generated with Claude Code