Structure
Screen, View, Layout, Title Bar, Columns, and Mashup form the fixed hierarchy that defines the display environment. Plugins render their content inside Views. Follow the exact div setup; deviating causes layout and rendering issues.
You don't specify Screen, Mashup, or View - the platform provides them automatically. You only specify the Layout and optionally a Title Bar.
You provide the full hierarchy yourself: Screen, View, Layout, and optionally a Mashup container and a Title Bar.
<!-- plugin's view markup -->
<div class="layout">...</div>
<div class="title_bar">...</div>
<!-- /plugin's view markup --><div class="screen">
<div class="view view--full">
<div class="layout">...</div>
<div class="title_bar">...</div>
</div>
</div>The Exact Structure
The framework uses a fixed div hierarchy. Each level has a specific role. The canonical structure is:
Screen → (Mashup →) View → Layout (+ optional Title Bar)
mashup--1Lx1R, mashup--2x2) positions the views, while each view's own modifier sets how much space it occupies. Fluid Mashups use the mashup--3x3 layout and cell placement modifiers for custom tilings.
optional
--1Lx1R --1Tx1B --2x2 --1Lx2R --2Lx1R --2Tx1B --1Tx2B
view--full inside the Screen; multiple views go inside a Mashup, where the view modifier sets each view's share of space and the Mashup modifier sets the arrangement. View and Layout receive calculated dimensions from the device and orientation.
--full --half_vertical --half_horizontal --quadrant
layout per view. It arranges content horizontally (layout--row) or vertically (layout--col), with alignment and stretch modifiers.
--row --col
Component Roles
Each foundation component has a specific role. Use them as intended.
Screen
Root container. Defines viewport dimensions, padding, and CSS variables that cascade throughout.
View
Container for a plugin slot. Size modifiers (view--full, view--half_horizontal, view--half_vertical, view--quadrant) set how much space the plugin gets. Non-full views must be nested inside a Mashup.
view--full inside the Screen; multiple views go inside a Mashup, where the view modifier sets each view's share of space and the Mashup modifier sets the arrangement. View and Layout receive calculated dimensions from the device and orientation.
Layout
Exactly one per View. The content container. Its direct children are typically Columns, Grid, or Flex. Use layout--row, layout--col, and alignment modifiers to arrange those children. See the Layout page's "What Goes Inside Layout" section for when to use each.
Title Bar
Optional. Sibling to Layout within a View. Displays icon, title, and instance label.
Columns
Use inside Layout for column-based content organization.
Mashup
Wraps multiple Views and arranges them within the Screen (1Lx1R, 1Tx1B, 2x2, etc.).
mashup--1Lx1R, mashup--2x2) positions the views, while each view's own modifier sets how much space it occupies. Fluid Mashups use the mashup--3x3 layout and cell placement modifiers for custom tilings.
Single View
For a single plugin occupying the full screen:
Plugin
Instance
<div class="screen">
<div class="view view--full">
<div class="layout">
<!-- Your content here -->
</div>
<div class="title_bar">...</div>
</div>
</div>Mashup (Multiple Views)
For multiple plugins on one screen, wrap views in a
Mashup
Mashup
Assemble multiple plugin views into a single interface
A Mashup arranges multiple plugin views within a single screen. A fixed mashup modifier (e.g. mashup--1Lx1R, mashup--2x2) positions the views, while each view's own modifier sets how much space it occupies. Fluid Mashups use the mashup--3x3 layout and cell placement modifiers for custom tilings.
. Each view has exactly one
Layout
Layout
Primary container for organizing plugin content
The Layout is the content container inside a View, exactly one layout per view. It arranges content horizontally (layout--row) or vertically (layout--col), with alignment and stretch modifiers.
.
<div class="screen">
<div class="mashup mashup--1Lx1R">
<div class="view view--half_vertical">
<div class="layout">...</div>
</div>
<div class="view view--half_vertical">
<div class="layout">...</div>
</div>
</div>
</div>