Lumos uses a breakpointless technique that uses responsive rem based styles instead of Webflow’s native pixel based breakpoints. This has major benefits with accessibility and allows for more flexible responsive designs.

Why Use Breakpointless:

Most Webflow Layouts Are Broken

• When a user doubles their preferred font size, no text should overflow.
• Because Webflow breakpoints are set with PX, the layout doesn't wrap when a user increases their preferred font size and text overflows.

image.avif

Benefits of Building Without Breakpoints

• Improves accessibility by allowing layouts to wrap when users increase their font size
• Often creates less code than manually defining styles on each breakpoint
• Allows for faster development since styles are automatically responsive
• Makes future design changes easier, since updates only have to be made in one place

Techniques For Breakpointless Builds

Apply no styles to the tablet, mobile landscape, or mobile portrait breakpoints. Do this instead.

1. Enable wrapping for any horizontal flexboxes

• This lets the browser decide when the layout should wrap.
• If new links are added later, if the user translates the site into a longer language, or if the user increases their preferred font size, the layout will still wrap before we run out of space.

image (1).avif

2. Use Lumos Grids (u-grid-autofit, u-grid-autofill, and the Grid component)

• Automatically responsive: The number of columns adjusts based on the available space and the minimum column size we define.
• If the content or font sizes change later, we can update our minimum column size from one place instead of needing to update each breakpoint manually.

3. Use accessible fluid typography