Layout
Design
The Layout system implements basic page divisions and broad layout such as columns. It is part of the system which ultimately implements the grid.
Layout is a workhorse subcomponent and is used as part of several other components.
Code
Note Layout has large borders and some spacing for illustration purposes on this page. In production, the elements have no visible style.
Base pattern
The flexible grid works by combining an .ace-group element with one or more .ace-item elements.
Items contain content - panels, messages, etc.
Items contain content - panels, messages, etc.
<div class="ace-group">
<div class="ace-item">
<p>Items contain content - panels, messages, etc.</p>
</div>
<div class="ace-item">
<p>Items contain content - panels, messages, etc. </p>
</div>
</div>
<% ace.Group(Array())
ace.Item(Array()) %>
<p>Items contain content - panels, messages, etc.</p>
<% ace.ItemEnd
ace.Item(Array()) %>
<p>Items contain content - panels, messages, etc.</p>
<% ace.ItemEnd
ace.GroupEnd %>
On a large screen, groups will be rendered as 'rows' and items as 'columns'; while on a small screen the items will simply be linearised (appearing one after the other, in source order).
Although less common, groups can also include a header:
Content width and alignment
By default the group's items will be set to an even width and the content left-aligned. That means if there are two items in a group they will be 50% each, four will be 25% each, etc. Unlike a fixed grid which needs all spacing defined explicitly (eg. 1/4 must be accompanied by 3/4), the flexible grid will simply lay out the currently-rendered items. The number of items determines the propotional widths.
If a single item in the group has a set width, the rest of the items will divide the remaining space evenly.
Remaining items are fluid width.
Remaining items are fluid width.
Remaining items are fluid width.
<div class="ace-group">
<div class="ace-item demowidth">
<p>Item fixed at 220px.</p>
</div>
<div class="ace-item">
<p>Remaining items are fluid width.</p>
</div>
</div>
<div class="ace-group">
<div class="ace-item demowidth">
<p>Item fixed at 220px.</p>
</div>
<div class="ace-item">
<p>Remaining items are fluid width.</p>
</div>
<div class="ace-item">
<p>Remaining items are fluid width. </p>
</div>
</div>
<% ace.Group(Array())
ace.Item(Array("class", "demowidth")) %>
<p>Item fixed at 220px.</p>
<% ace.ItemEnd
ace.Item(Array()) %>
<p>Remaining items are fluid width.</p>
<% ace.ItemEnd
ace.GroupEnd
ace.Group(Array())
ace.Item(Array("class", "demowidth")) %>
<p>Item fixed at 220px.</p>
<% ace.ItemEnd
ace.Item(Array()) %>
<p>Remaining items are fluid width.</p>
<% ace.ItemEnd
ace.Item(Array()) %>
<p>Remaining items are fluid width. </p>
<% ace.ItemEnd
ace.GroupEnd %>
Split Group
In split groups the content 'splits' away from the centre. The first item will be left-aligned, the last will be right-aligned and all items between the two will be centre-aligned.
Split groups are commonly used with two or three items - a left/right split, and a left/right split plus some centre-aligned content in the middle. It is rare to use split groups in other configurations.
<div class="ace-group ace-group-split">
<div class="ace-item">
<p>Item.</p>
</div>
<div class="ace-item">
<p>Item.</p>
</div>
</div>
<div class="ace-group ace-group-split">
<div class="ace-item">
<p>Item.</p>
</div>
<div class="ace-item">
<p>Item.</p>
</div>
<div class="ace-item">
<p>Item. </p>
</div>
</div>
<% ace.Group(Array("type", "split"))
ace.Item(Array()) %>
<p>Item.</p>
<% ace.ItemEnd
ace.Item(Array()) %>
<p>Item.</p>
<% ace.ItemEnd
ace.GroupEnd
ace.Group(Array("type", "split"))
ace.Item(Array()) %>
<p>Item.</p>
<% ace.ItemEnd
ace.Item(Array()) %>
<p>Item.</p>
<% ace.ItemEnd
ace.Item(Array()) %>
<p>Item.</p>
<% ace.ItemEnd
ace.GroupEnd %>