flowmo is desktop-first: style the base breakpoint, then add smaller breakpoints whose overrides cascade down. Breakpoints can be max-width, min-width, or both, with an optional scale-lock.
Where: Top bar → breakpoint/device selector — Switch to a smaller breakpoint to edit its overrides
Before you start
- Finish a representative base/desktop layout and use responsive layout primitives such as flex/grid before adding many overrides.
Key ideas
- Desktop-first cascade: The base ("Desktop") breakpoint is the default; smaller breakpoints inherit it and store only what you change.
- Breakpoint shape: Each breakpoint has a name, maxWidth and/or minWidth, a preview width, optional frame height, and a scaleLock flag.
- Scale lock: scaleLock enables smooth proportional resizing for that breakpoint instead of reflow.
Steps
- Finish and review the base Desktop design.
- Open the breakpoint + menu and choose Mobile, Tablet, Tablet Landscape, Laptop, Big Screen, or Custom.
- Name the breakpoint and set its min/max bounds plus preview width; enable Scale Lock only for intentionally fixed-proportion layouts.
- Switch through the breakpoint selector and change only the properties that must differ from the inherited base.
- Preview around each boundary—not only at the named width—and verify hidden-element presence, typography, wrapping, overflow, and interaction targets.
Preset ranges
- Mobile: 0–767.
- Tablet: 768–1023.
- Tablet Landscape: 1024–1279.
- Laptop: 1280–1439.
- Big Screen: 1440+.
- Custom: user-defined min/max bounds and preview width.
Editing a breakpoint
- Rename the breakpoint.
- Change minWidth/maxWidth.
- Set the editor preview width.
- Enable Scale Lock and choose lockedWidth when proportional scaling is intended.
- Delete an unneeded breakpoint after checking its overrides.
Inheritance versus presence
Style overrides cascade by breakpoint. Element presence is a separate per-breakpoint behavior, and an element inserted while a breakpoint is active may receive breakpoint-specific presence automatically.
Tips
- Use fewer meaningful breakpoints and let fluid layout handle the widths between them.
- Check exact min/max boundaries to catch overlap or gaps.
Troubleshooting
A mobile edit changes desktop
Confirm the smaller breakpoint is active and the property is being written as an override rather than changing shared structure or content.
The design scales instead of reflowing
Edit the breakpoint and disable Scale Lock, or intentionally set its locked width when fixed-proportion behavior is desired.