View
A View holds content (e.g. a plugin instance). Single views use 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.
You don't specify the view. The markup you write for any plugin layout is automatically wrapped in the appropriate view container by the platform.
You provide the view yourself. Include the appropriate wrapper in your markup: view view--full, view view--half_vertical, view view--half_horizontal, or view view--quadrant.
<!-- view view--full (platform-provided) -->
<div class="layout">...</div>
<div class="title_bar">...</div>
<!-- /view --><div class="view view--full">
<div class="layout">...</div>
<div class="title_bar">...</div>
</div>Base Structure
The Layout element
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.
is the core component of every View
View
View
Show your plugin in different sizes with Mashup view containers
A View holds content (e.g. a plugin instance). Single views use 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.
, providing a consistent container for your content.
Views can optionally include a Title Bar
Title Bar
Title Bar
Standardized title bar with plugin information and instance details
A header strip for a View, holding an icon, a title, and an optional instance label. Place it as a sibling of the Layout, not inside it.
for additional context.
There are four view types: view--full, view--half_horizontal, view--half_vertical, and view--quadrant.
The default full view (view view--full) lives directly inside the screen div.
Other view types must be nested inside 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.
component.
With Layout and Title Bar
When combined with a title bar, it provides context and navigation options.
Title
Instance
<div class="view view--full">
<div class="layout">
<!-- Your content here -->
</div>
<div class="title_bar">
<img class="image image--adaptive" src="/images/plugins/trmnl--render.svg" alt="TRMNL Logo">
<span class="title">Title</span>
<span class="instance">Instance</span>
</div>
</div>With only Layout
For simpler interfaces, you can create a view without a title bar using just the base view classes.
<div class="view view--full">
<div class="layout">
<!-- Your content here -->
</div>
</div>Views in Mashups
When multiple plugins share a single screen, each one gets its own view, and those views must be wrapped 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.
container.
The view modifier (view--half_vertical, view--quadrant, etc.) determines how much space each plugin gets.
The mashup modifier (mashup--1Lx1R, mashup--2x2, etc.) determines how those views are arranged on screen.