Layout System
Core layout concepts in Momen: box model, positioning, Flexbox, overflow, and Web 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. |
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 — sticky nav, floating action buttons, bottom bars.
Fixed and absolute both use offsets; absolute is relative to the parent, fixed to the viewport.
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)
The Web client supports Desktop, Tablet, and Phone breakpoints so one client 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 only. Native App is a separate client and does not use Web 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.