docs(lumo): add "Responsive Breakpoints" guide for Vaadin Lumo utilities #4508
Conversation
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
…oad file size section
Co-authored-by: Marco Collovati <[email protected]>
Remove 'The temporary files are automatically deleted when the upload is complete or the component is detached.'
Provided detailed documentation on what Custom Authorization Rules are, their use cases, and how they complement Vaadin's view-based access control.
Documented the purpose and effects of disabling CSRF configuration and Navigation Access Control in VaadinSecurityConfigurer. Clarified default behavior, when it is safe to disable, and the implications for application security.
jouni
reviewed
Aug 28, 2025
Co-authored-by: Jouni Koivuviita <[email protected]>
|
@jouni Can you have a second look at this PR so we can get it merged? |
|
I’m not very familiar with the Lumo utility classes, so I’d like if @anezthes would review this. |
|
|
anezthes
reviewed
Oct 28, 2025
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. |
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) {} |
There was a problem hiding this comment.
@media (min-width: 640px) {}
| ---- | ||
| -- | ||
|
|
||
| .Example of Position Responsive `Viewport >= Breakpoint.Large` |
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. |
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. |
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. |
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. |
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).