<% switch (m.type) { %> <% case 'grouping': %>

Grouping

Groupings are a way of putting one or more slots into a single container.

<% break; %> <% case 'space': %>

Whitespace

Whitespace lets you add some empty space on a layout. No HTML is written to the screen (unless you enter some custom HTML in the box below).

<% break; %> <% case 'grid_break': %>

Gridbreak

Gridbreaks split a grid into two sections, interrupting the usual column structure.

Use gridbreaks to split a layout into say header, body and footer. A name (and hence class) is not mandatory, but will be needed if you wish to target the gridbreak with JS effects (typical names would be Gridbreak_Header, Gridbreak_Body, Gridbreak_Footer). Add a class called "Fixed" to a gridbreak near the top of a layout to make a sticky header.

Their HTML has a structure like this:

				    </div>

</div>
[[Custom HTML]]
<div class="{{m.data.grid_css_class|e}}">
    <div class="container ...">
<% break; %> <% case 'grid_break_with_slot': %>

Slot outside the grid

A slot outside of the grid creates a break in the grid, with a slot in the break that may contain a plugin. The HTML has a structure like this:

					    </div>

</div>
<div id="plgslt_{{m.data.name|e}}" class="zenario_slot ... ">
    [[Slot contents]]
</div>
<div class="{{m.data.grid_css_class|e}}">
    <div class="container ...">
<% break; %> <% case 'slot': %>

Slot

Slots are the most common element, have a width in columns, and may contain plugins. Their HTML has this structure:

					<div id="plgslt_{{m.data.name|e}}" class="zenario_slot ... ">

    [[Plugin contents]]
</div>
<% break; %> <% } %>
<% if (m.type == 'slot' || m.type == 'grid_break_with_slot') { %>

{{zenarioA.phrase.gridSlotName}}

{{zenarioGM.getSlotDescription(m.slot)}}
<% } %> <% if (m.type != 'grid_break' && m.type != 'grid_break_with_slot') { %>
{{m.data.width|e}} columns
<% } %> <% if (m.type != 'grid_break') { %>

{{zenarioA.phrase.gridCSSClass}}

<% } %> <% if (m.type == 'space' || m.type == 'grid_break') { %>

{{zenarioA.phrase.gridHtml}}

<% } %> <% if (m.type == 'slot') { %>
<% var h, heights = ['small', 'medium', 'large', 'xlarge', 'xxlarge']; %> <% for (h in heights) { %> <% } %>

<% } %> <% var show = false, showFirst = false, showOnly = false; %> <% if (m.type == 'grid_break' || m.type == 'grid_break_with_slot') { %>

{{zenarioA.phrase.gridGridCSSClass}}

<% if (m.type == 'grid_break_with_slot') { %> <% show = showOnly = true; %> <% } %> <% } else if (m.lib.data.responsive && m.type == 'space') { %>

<% } else if (m.lib.data.responsive) { %> <% show = true; %> <% var isLastSlot = !m.cell.is_alpha && m.cell.is_omega; %> <% var isFullSlot = m.cell.is_alpha && m.cell.at_right_edge; %> <% if (isLastSlot) { %> <% showFirst = true; %> <% } else if (isFullSlot) { %> <% showOnly = true; %> <% } %> <% } %> <% if (show) { %>


<% if (showFirst) { %>
<% } %> <% if (showOnly) { %>
<% } %>

<% } %>