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.

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).

Code

Note Layout has large borders and some spacing for illustration purposes on this page. In production, the elements have no visible style.
Example Code

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 class="ace-p">Items contain content - panels, messages, etc.</p>
                                                                                                </div>
                                                                                                <div class="ace-item"> 
                                                                                                  <p class="ace-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 %>

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.

Item fixed at 220px.

Remaining items are fluid width.

Item fixed at 220px.

Remaining items are fluid width.

Remaining items are fluid width.

 

                                                                                          <div class="ace-group">
                                                                                            <div class="ace-item demowidth">
                                                                                              <p class="ace-p">Item fixed at 220px.</p>
                                                                                            </div>
                                                                                            <div class="ace-item">
                                                                                              <p class="ace-p">Remaining items are fluid width.</p>
                                                                                            </div>
                                                                                          </div>
                                                                                          <div class="ace-group">
                                                                                            <div class="ace-item demowidth">
                                                                                              <p class="ace-p">Item fixed at 220px.</p>
                                                                                            </div>
                                                                                            <div class="ace-item">
                                                                                              <p class="ace-p">Remaining items are fluid width.</p>
                                                                                            </div>
                                                                                            <div class="ace-item">
                                                                                              <p class="ace-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 %>

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.

Item.

Item.

Item.

Item.

Item.

 

                                                                                      <div class="ace-group ace-group-split">
                                                                                        <div class="ace-item">
                                                                                          <p class="ace-p">Item.</p>
                                                                                        </div>
                                                                                        <div class="ace-item">
                                                                                          <p class="ace-p">Item.</p>
                                                                                        </div>
                                                                                      </div>
                                                                                      <div class="ace-group ace-group-split">
                                                                                        <div class="ace-item">
                                                                                          <p class="ace-p">Item.</p>
                                                                                        </div>
                                                                                        <div class="ace-item">
                                                                                          <p class="ace-p">Item.</p>
                                                                                        </div>
                                                                                        <div class="ace-item">
                                                                                          <p class="ace-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 %>

Although less common, groups can also include a header:

Group Header

Item.

Item. 


                                                                                          <div class="ace-group">
                                                                                                <header class="ace-group-header">
                                                                                                  <h3 class="ace-h3">Group Header</h3>
                                                                                                </header>
                                                                                                <div class="ace-item"> 
                                                                                                  <p class="ace-p">Item.</p>
                                                                                                </div>
                                                                                                <div class="ace-item"> 
                                                                                                  <p class="ace-p">Item.   </p>
                                                                                                </div>
                                                                                          </div>

                                                                                      <% ace.Group(Array()) %>
                                                                                        <header class="ace-group-header">
                                                                                          <h3 class="ace-h3">Group Header</h3>
                                                                                        </header>
                                                                                        <% ace.Item(Array()) %>
                                                                                          <p>Item.</p>
                                                                                        <% ace.ItemEnd
                                                                                        ace.Item(Array()) %>
                                                                                          <p>Item.</p>
                                                                                        <% ace.ItemEnd
                                                                                      ace.GroupEnd %>