ACE Labs feature: this element is under development and the API is not bound by SemVer. Watch the changelog!
2018.01.09: This component has been updated and is now in the proposed naming convention (item-1 not item-1-4 etc). The next phase is to add sizes that only apply at specific breakpoints, to make responsive layouts easier.

Design

We use a compound relative grid, which is usually six columns but can be combined with four columns. Note the centre gutter aligns here:

1-6

1-6

1-6

1-6

1-6

1-6

1-4

1-4

1-4

1-4

Code

Note: to test the non-grid layout in the new flexbox implementation, add the attribute data-aceenableflexbox="true" to the ace-group element. This will not be required after ACE 3.0.

To keep the code simple, the 4 and 6 column grid is supported by a 12-column implementation. Classes are named as a number out of 12: ace-item-(cols). It is important to understand that we do not use a 12 column grid design, this is just a translation between design and code!

The grid layout is invoked by setting the group element to gutters-on and specifying widths on all items. This is an all-or-none pattern: specify all desired grid layout sizes, or none. When no sizes are specified, the non-grid layout still applies and simply divides available space evenly. At small screen sizes, the layout linearises as usual.

Because this is a relative grid based on percentage widths, nesting the grid does not work. Set up your grid one time and work within it. If you nest grids they won't line up to the grid lines. Non-sized layouts like fit and fill will work when nested, as they are relative to content and not the overall viewport.

Use caution with tables and images

If you need responsive tables, set the containing item to 'fill'. With all other settings, large tables will push out of their containers when they can no longer wrap. This is not a bug, this is an inherent behaviour of tables - when they don't fit, they don't fit!

Similarly large, unconstrained images will break out when they don't fit. The best solution is to apply the helper class ace-fit to the img element; or set images to max-width:100% in your styles.

Example Code

Set group to gutters on.

3-6

3-6

Gutters on:


                                                                                          <div class="ace-group ace-group-gutters-on">
                                                                                          </div>

This feature was added to ACE after ACE Classic Templates went into maintenance mode (bugfixes only). By default new ACE features are not supported in Classic, but can be contributed if a specific need is identified.

Specify column widths as a number out of 12. To calculate the four-column grid, multiply by 3; for the six column grid, multiply by 2. So a 1/4 column is 3, and a 1/6 column is 2.

1-6

5-6

1-4

3-4

 

                                                                                          <div class="ace-group ace-group-gutters-on">
                                                                                                <div class="ace-item ace-item-2">
                                                                                                  <p>1-6</p>
                                                                                                </div>
                                                                                                <div class="ace-item ace-item-10">
                                                                                                  <p>5-6</p>
                                                                                                </div>
                                                                                          </div>
                                                                                          <div class="ace-group ace-group-gutters-on">
                                                                                                <div class="ace-item ace-item-3">
                                                                                                  <p>1-4</p>
                                                                                                </div>
                                                                                                <div class="ace-item ace-item-9">
                                                                                                  <p>3-4</p>
                                                                                                </div>
                                                                                          </div>

This feature was added to ACE after ACE Classic Templates went into maintenance mode (bugfixes only). By default new ACE features are not supported in Classic, but can be contributed if a specific need is identified.

Items can be offset with the same naming pattern as widths (ace-item-offset-(cols)) up to 11 (offset 12 would not leave room for any items). To 'offset' from the right, simply choose widths that do not extend to the right.

Size 10, Offset 2

Size 8, Offset 2

Size 9, Offset 3

Size 3, Offset 3

Size 2, Offset 2

Size 6, Offset 3

 

                                                                                          <div class="ace-group ace-group-gutters-on">
                                                                                                <div class="ace-item ace-item-10 ace-item-offset-2">
                                                                                                  <p>5-6</p>
                                                                                                </div>
                                                                                          </div>
                                                                                          <div class="ace-group ace-group-gutters-on">
                                                                                                <div class="ace-item ace-item-8 ace-item-offset-2">
                                                                                                  <p>4-6</p>
                                                                                                </div>
                                                                                          </div>
                                                                                          <div class="ace-group ace-group-gutters-on">
                                                                                                <div class="ace-item ace-item-9 ace-item-offset-3">
                                                                                                  <p>3-4</p>
                                                                                                </div>
                                                                                          </div>
                                                                                          <div class="ace-group ace-group-gutters-on">
                                                                                                <div class="ace-item ace-item-3 ace-item-offset-3">
                                                                                                  <p>Offset 3, Width 3</p>
                                                                                                </div>
                                                                                                <div class="ace-item ace-item-1 ace-item-offset-1">
                                                                                                  <p>Offset 1, Width 1</p>
                                                                                                </div>
                                                                                          </div>
                                                                                          <div class="ace-group ace-group-gutters-on">
                                                                                                <div class="ace-item ace-item-6 ace-item-offset-3">
                                                                                                  <p>2-4</p>
                                                                                                </div>
                                                                                          </div>

This feature was added to ACE after ACE Classic Templates went into maintenance mode (bugfixes only). By default new ACE features are not supported in Classic, but can be contributed if a specific need is identified.

The fit item disables wrapping (be careful!) and fits item to the boundaries of the content; while fill items simply expand to fill the remaining space. Fill is the default behaviour but it is recommended you declare that behaviour explicitly.

Note that if you need uniform-width items in IE11, you must use explicit sizes and not rely on fit/fill with uniform-sized content (eg. images with the same dimensions). Despite uniform content, in some cases IE11 does not calculate and apply uniform widths.

Fit content.

Fill the rest of the available space.

 

                                                                                          <div class="ace-group ace-group-gutters-on">
                                                                                                <div class="ace-item ace-item-fit">
                                                                                                  <p>Fit content.</p>
                                                                                                </div>
                                                                                                <div class="ace-item ace-item-fill">
                                                                                                  <p>Fill the rest of the available space.</p>
                                                                                                </div>
                                                                                          </div>

This feature was added to ACE after ACE Classic Templates went into maintenance mode (bugfixes only). By default new ACE features are not supported in Classic, but can be contributed if a specific need is identified.

The horizontal alignment modifiers are left, right and centre.

Left.

Centre.

Right.

 

                                                                                          <div class="ace-group ace-group-gutters-on">
                                                                                                <div class="ace-item ace-item-left">
                                                                                                  <p>Left.</p>
                                                                                                </div>
                                                                                                <div class="ace-item ace-item-centre">
                                                                                                  <p>Centre.</p>
                                                                                                </div>
                                                                                                <div class="ace-item ace-item-right">
                                                                                                  <p>Right.</p>
                                                                                                </div>
                                                                                          </div>

This feature was added to ACE after ACE Classic Templates went into maintenance mode (bugfixes only). By default new ACE features are not supported in Classic, but can be contributed if a specific need is identified.

The vertical alignment modifiers are top, bottom, middle and baseline. Note that baseline really only makes sense if all items in the group are using it.

Top.

Middle.

Bottom.

Some long content to push this around enough to see the alignment.

Some long content to push this around enough to see the alignment.

Some long content to push this around enough to see the alignment.

Some long content to push this around enough to see the alignment.

Align baseline.

Align baseline.

Align baseline.

 

                                                                                          <div class="ace-group ace-group-gutters-on">
                                                                                                <div class="ace-item ace-item-top">
                                                                                                  <p>Top.</p>
                                                                                                </div>
                                                                                                <div class="ace-item ace-item-middle">
                                                                                                  <p>Middle.</p>
                                                                                                </div>
                                                                                                <div class="ace-item ace-item-bottom">
                                                                                                  <p>Bottom.</p>
                                                                                                </div>
                                                                                          </div>
                                                                                          <div class="ace-group ace-group-gutters-on">
                                                                                                <div class="ace-item ace-item-baseline">
                                                                                                  <p>Align baseline.</p>
                                                                                                </div>
                                                                                                <div class="ace-item ace-item-baseline">
                                                                                                  <h1 class="ace-h1">Align baseline.</h1>
                                                                                                </div>
                                                                                                <div class="ace-item ace-item-baseline">
                                                                                                  <p>Align baseline.</p>
                                                                                                </div>
                                                                                          </div>

This feature was added to ACE after ACE Classic Templates went into maintenance mode (bugfixes only). By default new ACE features are not supported in Classic, but can be contributed if a specific need is identified.