docs icon indicating copy to clipboard operation
docs copied to clipboard
verified publisher icon vaadin

docs(lumo): add "Responsive Breakpoints" guide for Vaadin Lumo utilities

Open fredpena opened this issue 6 months ago • 3 comments

Summary

Adds a new documentation page “Lumo Utility Classes: Responsive Breakpoints” covering how to use breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:) with the LumoUtility.*.Breakpoint Java API in Vaadin Flow. The page includes:

  • A table of default breakpoints (min-widths and CSS equivalents)
  • Supported responsive utility groups: Align Items, Display, Flex Direction, Font Size, Grid, Position
  • Code samples (Java) for each group
  • Guidance on limitations (e.g., spacing/gap/justify-content currently require custom CSS)
  • A short Conclusion with best practices (mobile-first, testing, custom CSS for non-supported utilities)

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

  • Adds a new .adoc page:
    docs/<appropriate-path>/lumo-responsive-breakpoints.adoc
    (Please advise if a different folder or navigation entry is preferred.)
  • References the main utility classes page: <<utility-classes.adoc#, Lumo Utility Classes>>.

Visuals / Assets

  • Adds illustrative images under articles/styling/_images/:

Alt text is included in the image::...[] directives for accessibility.
If the repo has an image naming or compression guideline, I can adjust.

How to Review

  1. Content accuracy: Confirm API names and enum constants for LumoUtility.* and their .Breakpoint variants.
  2. Scope and tone: Verify the technical tone and that claims (supported groups/limitations) match the current API.
  3. Navigation: Confirm location in the docs tree and side nav ordering (order: 0 can be changed if needed).
  4. Cross-links: Validate the cross-reference utility-classes.adoc (path and anchor).
  5. Images: Confirm paths and filenames match repo conventions.

fredpena avatar Aug 18 '25 18:08 fredpena

@jouni Can you have a second look at this PR so we can get it merged?

peholmst avatar Sep 23 '25 06:09 peholmst

I’m not very familiar with the Lumo utility classes, so I’d like if @anezthes would review this.

jouni avatar Sep 23 '25 10:09 jouni

CLA assistant check
All committers have signed the CLA.

CLAassistant avatar Oct 26 '25 20:10 CLAassistant