Structure
The framework structure is a fixed hierarchy that defines the display environment. Screen, View, Layout, Title Bar, Columns, and Mashup each have a specific role. 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) controls how the views are positioned, while each view's own modifier determines how much space it occupies.
optional
--1Lx1R --1Tx1B --2x2 --1Lx2R --2Lx1R --2Tx1B --1Tx2B
view--full inside the Screen; multiple views go inside a Mashup. The view modifier sets each view's share of space; the Mashup modifier controls the arrangement. View and Layout receive calculated dimensions from the device and orientation.
--full --half_vertical --half_horizontal --quadrant
layout per view. Its height is calculated automatically based on the device type, orientation, and whether a title bar is present. It can arrange content horizontally (layout--row) or vertically (layout--col), with alignment and stretch modifiers. For organizing content inside it, use flex, columns, or grid.
--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. The view modifier sets each view's share of space; the Mashup modifier controls 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.
layout per view. Its height is calculated automatically based on the device type, orientation, and whether a title bar is present. It can arrange content horizontally (layout--row) or vertically (layout--col), with alignment and stretch modifiers. For organizing content inside it, use flex, columns, or grid.
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) controls how the views are positioned, while each view's own modifier determines how much space it occupies.
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. The mashup modifier (e.g. mashup--1Lx1R, mashup--2x2) controls how the views are positioned, while each view's own modifier determines how much space it occupies.
. Each view has exactly one
Layout
Layout
Primary container for organizing plugin content
The Layout is the content container inside a View. There should be exactly one layout per view. Its height is calculated automatically based on the device type, orientation, and whether a title bar is present. It can arrange content horizontally (layout--row) or vertically (layout--col), with alignment and stretch modifiers. For organizing content inside it, use flex, columns, or grid.
.
<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>