Layout System
Core layout concepts in Momen: box model, positioning, Flexbox, overflow, and web app responsive breakpoints. For the editor fields that map to these concepts, see Design Panel.
Box model
Purpose: control a component’s physical bounds and spacing.
Think of each element as a box with padding and margin:
| Part | Description |
|---|---|
| Content | Text, images, and other rendered content |
| Size | How width and height are calculated (see table below) |
| Padding | Space between border and content |
| Margin | Space between this component and siblings |
Size modes
| Mode | Description |
|---|---|
| Pixels (px) | Fixed size; does not flex |
| Fit content | Sized by inner content |
| Percent (%) | Share of parent container |
| Fraction (fr) | Proportional share of remaining space |
Set min/max width and height to avoid extreme layouts on small or large screens.
| Padding | Margin |
|---|---|
 |  |
Positioning
Purpose: decide whether a component participates in normal flow and what it is positioned against.
| Type | Description |
|---|---|
| Relative | Default. Stays in parent layout flow and follows Flex direction, alignment, and gap. |
| Absolute | Removed from normal flow; positioned with offsets relative to the parent. |
| Fixed | Removed from scroll flow; positioned relative to the viewport. |
| Sticky | Scrolls with content until it reaches the chosen edge of its scroll container, then stays pinned there. |
Relative
Use for most layouts: cards, vertical stacks, horizontal rows, and responsive reflow with the parent.
Absolute
Use when an element must sit at a precise spot inside a parent without affecting siblings — badges, close buttons, overlay decorations.
| Question | Answer |
|---|---|
| Positioned against what? | Usually the direct parent container |
| Does it take layout space? | No — siblings layout as if it were not there |
Fixed
Use for elements that should stay on screen while scrolling — page-level nav, floating action buttons, bottom bars.
Fixed and absolute both use offsets; absolute is relative to the parent, fixed to the viewport.
Fixed is only offered to components placed directly on the page. Inside a View or other container the type selector has no Fixed option; use Sticky below to pin something within a container.
Sticky
Sticky sits between relative and fixed. The component takes up space and scrolls with its siblings like a relative one; once scrolling would carry it past the chosen edge of its scroll container, it pins to that edge and stays there until its parent scrolls out of view.
Use for:
- Section headers in a long list that stop at the top and get pushed away by the next header.
- A filter bar inside the content area that stays at the top after you scroll past it.
- A buy bar at the bottom of a detail page that sits in the flow on short content and pins to the bottom on long content.
| Question | Answer |
|---|---|
| Pinned against what? | The nearest ancestor whose overflow is Scroll or Auto. The reliable setup is a View with a fixed height and Y overflow set to Scroll as the parent. |
| Does it take layout space? | Yes — it remains a child in the parent’s Flex layout and siblings leave room for it. |
| What does the offset mean? | The distance from the chosen edge once pinned. Top = 60 pins the component 60 px below the top of the scroll container. |
| When does it let go? | When the parent container scrolls out; a sticky component never leaves its parent’s bounds. |
| Can it be covered? | Yes. Components paint in order, so once pinned it overlaps the content scrolling up behind it and is hidden unless it has a higher Z-index, which looks as if sticky did nothing. |
Steps:
- Prepare a scrolling container: add a View, give it a fixed pixel height, set Y overflow to Scroll, and put both the header and the content below it inside.
- Select the component to pin and set Position · Type to Sticky.
- Pick the edge and distance with the four-way offset control: one vertical (top or bottom) and one horizontal (left or right) edge can be active; most layouts use only Top or only Bottom, and 0 means flush with the container edge.
- Set its Z-index higher than the siblings after it, for example 1.
Both Sticky and Fixed can produce a pinned header, but they differ: Fixed leaves the content flow immediately and is nailed to the viewport; Sticky scrolls with the content first, pins when it arrives, and is bounded by its parent. Use Fixed for page-level nav and bottom bars, Sticky for section headers and filter bars inside the content.
Layer and Z-index fields: Design Panel · Position.
Flexbox layout
Purpose: arrange children inside Page and container components.
Pages and Views are containers; relatively positioned children follow the rules below.
Direction
| Direction | Description |
|---|---|
| Horizontal | Children along the X-axis |
| Vertical | Children along the Y-axis |
Distribution and alignment
| Distribution | Description |
|---|---|
| Stack (start) | Children grouped at the start |
| Space between | Equal gaps; first and last flush to edges |
| Space evenly | Equal gaps including container ends |
| Space around | Equal space on both sides of each child; end gaps are half of between gaps |
Wrap
When a row (or column) is full, children can wrap to the next line.
Gap
Uniform spacing between adjacent children.
Overflow
| Mode | Description |
|---|---|
| Scroll | Show scrollbar when content overflows |
| Visible | Overflow remains visible |
| Hidden | Clip overflow |
When wrap is off, horizontal and vertical overflow can be controlled separately.
Responsive breakpoints (web apps)
A web app supports Desktop, Tablet, and Phone breakpoints so one web app can adapt layout and style to viewport width.
Desktop is the primary breakpoint. Tablet and Phone inherit Desktop; they are siblings — neither inherits the other.
Breakpoints belong to web apps only. A mobile app is a separate client and does not use web app breakpoints.
| Config | Example |
|---|---|
| Position | Move a floating button on Phone |
| Size | Full-width cards on Phone, fixed width on Desktop |
| Layout | Horizontal on Desktop, vertical on Phone |
| Style | Hide decoration on Phone |
Width ranges, override rules, and per-breakpoint hide rules: Breakpoints Reference.