Layout Inheritance

The Inheritance Chain

Desktop (master — always fully specified)
    ↓ inherits, then Tablet overrides are applied
Tablet (effective = Desktop merged with Tablet overrides)
    ↓ inherits from effective Tablet, then Mobile overrides are applied
Mobile (effective = Tablet merged with Mobile overrides)

Resolved Layout Algorithm

// TypeScript — LayoutEngine.ts (simplified)
function resolveLayout(
  widget: WidgetPlacement,
  breakpoint: Breakpoint
): WidgetLayout {
  const desktop = widget.layout;  // always present

  if (breakpoint === "desktop") return desktop;

  const tablet = { ...desktop, ...widget.layoutBreakpoints?.tablet };

  if (breakpoint === "tablet") return tablet;

  // Mobile inherits from effective tablet layout
  const mobile = { ...tablet, ...widget.layoutBreakpoints?.mobile };
  return mobile;
}

Practical Implications

Inheritance means you work incrementally:

• Design for Desktop first — get it right at 12 columns
• Switch to Tablet preview — identify what needs to change (narrower columns, adjusted padding)
• Add Tablet overrides for only those elements that changed
• Switch to Mobile preview — identify what needs to change from the (already adjusted) Tablet layout
• Add Mobile overrides for those elements

When Tablet Override = Mobile Override

If both Tablet and Mobile should have the same override (e.g., single column for all non-desktop), set it only at Tablet — Mobile will inherit it:

// Widget: full-width on both tablet and mobile
{
  "layout": { "colStart": 1, "colSpan": 4 },  // Desktop: 4 columns
  "layoutBreakpoints": {
    "tablet": { "colSpan": 12 }  // Tablet: full width
    // Mobile inherits tablet → also full width
    // No need to set Mobile override
  }
}