docs(lumo): add "Responsive Breakpoints" guide for Vaadin Lumo utilities#4508
Merged
Merged
Conversation
jouni
reviewed
Aug 28, 2025
Member
|
@jouni Can you have a second look at this PR so we can get it merged? |
Member
|
I’m not very familiar with the Lumo utility classes, so I’d like if @anezthes would review this. |
|
|
anezthes
reviewed
Oct 28, 2025
anezthes
left a comment
anezthes
left a comment
Contributor
There was a problem hiding this comment.
Overall, great job!
Just a few minor notes:
– The image captions could use some polish; they don’t read very smoothly.
– Some of the key points seem AI-generated and could use simplification and/or examples to better get their point across (remember the target audience).
| = Lumo Utility Classes: Responsive Breakpoints | ||
|
|
||
| Lumo includes a powerful set of responsive utility classes that allow you to apply specific styles based on the screen (viewport) size. | ||
| These classes use breakpoint CSS class name prefixes (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`) to apply styles only when the screen width meets a certain minimum threshold. |
Contributor
There was a problem hiding this comment.
(sm:, md:, lg:, xl: and 2xl:)
| Lumo includes a powerful set of responsive utility classes that allow you to apply specific styles based on the screen (viewport) size. | ||
| These classes use breakpoint CSS class name prefixes (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`) to apply styles only when the screen width meets a certain minimum threshold. | ||
|
|
||
| You can apply these classes to any Vaadin Flow component using the `addClassNames()` method. |
| |=== | ||
| |Breakpoint |CSS class name prefixes |Minimum width |Equivalent screens |Equivalent in CSS | ||
|
|
||
| |Breakpoint.Small |
| |Breakpoint |CSS class name prefixes |Minimum width |Equivalent screens |Equivalent in CSS | ||
|
|
||
| |Breakpoint.Small | ||
| |sm |
| |sm | ||
| |640px | ||
| |Mobile devices | ||
| |@media (min-width: 640px) {} |
Contributor
There was a problem hiding this comment.
@media (min-width: 640px) {}
| ---- | ||
| -- | ||
|
|
||
| .Example of Position Responsive `Viewport >= Breakpoint.Large` |
Contributor
There was a problem hiding this comment.
Not quite sure I understand the demo example. The "updates available" is visible on smaller viewports but not desktop?
|
|
||
| ==== Key Points | ||
|
|
||
| 1. *Position Type Changes:* Elements can change from `RELATIVE` on mobile to `ABSOLUTE` or `FIXED` on desktop, enabling different interaction patterns. |
Contributor
There was a problem hiding this comment.
I think an real-world example would be good to highlight/mention here to get the point across.
| ==== Key Points | ||
|
|
||
| 1. *Position Type Changes:* Elements can change from `RELATIVE` on mobile to `ABSOLUTE` or `FIXED` on desktop, enabling different interaction patterns. | ||
| 2. *Layout Strategy:* Mobile-first approach often uses normal document flow (`RELATIVE`, `STATIC`) and adds positioned overlays on larger screens. |
Contributor
There was a problem hiding this comment.
Example? A bit too abstract.
| 3. *Z-Index Management:* When using positioned elements, consider z-index stacking context for proper layering. | ||
| 4. *Performance:* Positioned elements, especially `FIXED`, can impact scroll performance on mobile devices. | ||
| 5. *Accessibility:* Ensure positioned elements don't obstruct important content and remain accessible via keyboard navigation. | ||
| 6. *Responsive Context:* Position changes work best when the parent container's positioning context is considered across breakpoints. |
Contributor
There was a problem hiding this comment.
Not sure I understand 6.
| == Conclusion | ||
|
|
||
| Lumo’s responsive breakpoint utilities offer a structured and consistent way to adapt layouts and styles across different device sizes directly from Java code. | ||
| By leveraging the six supported groups — *Align Items, Display, Flex Direction, Font Size, Grid,* and *Position* — developers can create responsive, mobile-first designs without writing custom media queries. |
…sponsive breakpoints guide - Correct LumoUtility.Breakpoint reference to the nested Breakpoint classes - Fix mobile-first key points: unprefixed classes apply to all sizes, breakpoint variants apply from their minimum width upward - Fix heading levels (=== / ==== under document intro) - Add missing VaadinIcon and Div imports in code examples - Fix copy-pasted comments in FontSize, Grid, and Position examples - Fix invalid AsciiDoc cols spec and column header in font size table - Remove 'Rows' from Grid example naming (example only uses columns) - Use present tense, proper ordered list syntax, and spelled-out numbers - Front matter: add Vaadin to page-title, trim meta-description to 150-160 chars, set order to 40 to follow Utility Classes (order 30)
Artur-
force-pushed
the
docs/lumo-responsive-breakpoints
branch
from
f6a5233 to
74b5487
Compare
- Use inline code for breakpoints, prefixes, and media queries in tables - Convert available-classes bullet lists to tables for all six groups - Rewrite image captions to read more naturally - Simplify key points and remove AI-sounding phrasing - Add gap/flex so icon and text sit together in message and notification examples - 'Vaadin Flow' -> 'Flow' and minor wording fixes
- Use inline code for breakpoints, prefixes, and media queries in the breakpoints table - Convert each "available classes" list to a table, matching the Font Size section (per review) - Reword image captions to read more naturally - Add gap between icons and text in the Display and Position examples - Tighten Key Points sections, drop AI-flavored filler, and replace abstract points with concrete examples (tab bar, dashboard cards, back-to-top button) - Clarify the Position demo behavior and fix the unclear positioning- context point - 'Vaadin Flow component' -> 'Flow component'; inline code in conclusion
- Make AlignItems Key Points concrete (mobile-first, cascading, combining) - Drop generic 'Testing' points and puffy 'breakpoint system' summary sentences from all sections to match the terse house style - Use inline code for the six group names in the Conclusion
Artur-
approved these changes
Jun 13, 2026
Artur-
left a comment
Artur-
left a comment
Member
There was a problem hiding this comment.
Performed some AI and some manual cleanup. Hope I did not change anything in a fundamentally wrong way.
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
6 participants
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
Adds a new documentation page “Lumo Utility Classes: Responsive Breakpoints” covering how to use breakpoint prefixes (
sm:,md:,lg:,xl:,2xl:) with theLumoUtility.*.BreakpointJava API in Vaadin Flow. The page includes:Motivation / Context
Developers frequently ask how to apply responsive styles directly from Java without writing media queries. This page centralizes the available breakpoint-enabled utilities, clarifies what’s currently supported, and shows idiomatic examples.
Scope of Changes
.adocpage:docs/<appropriate-path>/lumo-responsive-breakpoints.adoc(Please advise if a different folder or navigation entry is preferred.)
<<utility-classes.adoc#, Lumo Utility Classes>>.Visuals / Assets
articles/styling/_images/:How to Review
LumoUtility.*and their.Breakpointvariants.order: 0can be changed if needed).utility-classes.adoc(path and anchor).