Version 0.40.0

UI Grid

Grid

Our grid is a flexbox, responsive, mobile first fluid grid system.

Grid concept

The grid works with a grid container (.sui-g-grid) and items (.sui-g-grid__item):
  • A grid container (.sui-g-grid) can be placed anywhere you want.
  • An item (.sui-g-grid__item) must me placed in a grid container (.sui-g-grid) as a immediate child.
  • A grid container (.sui-g-grid) must have at least one item (.sui-g-grid__item) as a immediate child.
  • A grid container (.sui-g-grid) can only have items (.sui-g-grid__item) as immediate children.
  • The gutters (gaps between items) are done with padding-left and padding-bottom in the items (.sui-g-grid__item) and the grid (.sui-g-grid) prevent the horizontal shit with a negative margin-left and a negative margin-bottom.
You can modify the grid container (.sui-g-grid) and items (.sui-g-grid__item) with modifiers:
  • You can change the width of an item (.sui-g-grid__item) with a modifier like .as--x_y where x_y is a fraction of the available width in the grid container (.sui-g-grid). For example, three equal items would use three .as--1_3.
  • A grid container (.sui-g-grid) can have many items (.sui-g-grid__item) even if the sum of the width is greater than 100%. The items (.sui-g-grid__item) will be displayed into multiple lines. For example, six .as--1_3 will display two lines of three columns.
  • A modifier for the grid container or the items target all screen by default, but can target only specifics sizes by adding a responsive suffix @xx at the end of the modifier where xx is the identifier of the media query (sm, md, lg, xl, xxl). For example, .as--1_3@md will only target medium screen and above (600px and more).

Grid modifiers

Grid container modifiers

You can add the following modifier at the grid container (.sui-g-grid) level.
This modifiers can use a responsive suffix.

Modifier Description
as--auto Items will no longer take full width by default.
as--stretch Stretch elements in items to have the same height on the same line.
as--fill Force items to fill all the available space. (default)
as--no-wrap Prevent items to wrap on multi lines.
as--top Align items vertically: top. (default)
as--middle Align items vertically: center.
as--bottom Align items vertically: bottom.
as--start Align items horizontally: left.
as--center Align items horizontally: center.
as--end Align items horizontally: right.
as--gutter-X Set gutter between items (where X is none, xxs, xs, sm, md (default), lg, xl or xxl).
as--gutter-vertical-X Set gutter size only vertically (where X is none, xxs, xs, sm, md, lg, xl or xxl)
as--gutter-horizontal-X Set gutter size only horizontally (where X is none, xxs, xs, sm, md, lg, xl or xxl)
as--full Set container width to occupy all the space of the parent. Usefull if the grid is nested in other element like tabs

Grid items modifiers

You can add the following modifier at the grid items (.sui-g-grid__item) level.
This modifiers can use a responsive suffix.

Modifier Description
as--x_y Set the width of an item. x_y is a fraction like x ÷ y. x is an integer between 1 and y. y is an integer between 1 and 8.
as--full Set the width of an item at 100%, same as as--1_1. (default)
as--fill Force item to fill the available space.
as--auto Item will only take the space it needs.
as--flex-none Item will no longer behave as a flex element (CSS flex: none).
as--middle Align item vertically: center.
as--top Align item vertically: top.
as--bottom Align item vertically: bottom.
as--pull Pull an item to the left of the grid container.
as--push Push an item to the right of the grid container.
as--first Change flex order to put this item in first position.
as--last Change flex order to put this item in last position.
as--order-X Change flex order with X (Integer between 0 and 10).

Basic examples

Simple example

Item
Item
two lines
Item
Item
<div class="sui-g-grid">
    <div class="sui-g-grid__item as--1_2@md as--1_4@xl">
        ...
    </div>

    <div class="sui-g-grid__item as--1_2@md as--1_4@xl">
        ...
    </div>

    <div class="sui-g-grid__item as--1_2@md as--1_4@xl">
        ...
    </div>

    <div class="sui-g-grid__item as--1_2@md as--1_4@xl">
        ...
    </div>
</div>

All sizes

as--full
as--1_2
as--1_2
as--1_3
as--1_3
as--1_3
as--1_4
as--1_4
as--1_4
as--1_4
as--1_5
as--1_5
as--1_5
as--1_5
as--1_5
as--1_6
as--1_6
as--1_6
as--1_6
as--1_6
as--1_6
as--1_7
as--1_7
as--1_7
as--1_7
as--1_7
as--1_7
as--1_7
as--1_8
as--1_8
as--1_8
as--1_8
as--1_8
as--1_8
as--1_8
as--1_8
<div class="sui-g-grid as--gutter-xs">
    <div class="sui-g-grid__item as--full">
        ...
    </div>
    <div class="sui-g-grid__item as--1_2@sm">
        ...
    </div>
    ...
</div>

Grid item auto

Let the content of item define his size.

Item
Item
two lines
Item
Item
<div class="sui-g-grid as--auto">
    <div class="sui-g-grid__item">
        ...
    </div>

    <div class="sui-g-grid__item">
        ...
    </div>

    <div class="sui-g-grid__item">
        ...
    </div>

    <div class="sui-g-grid__item">
        ...
    </div>
</div>

Grid fill

Add any number of auto sizing item to a container. Let the grid figure it out.

Item
Item
two lines
Item
Item
<div class="sui-g-grid as--fill">
    <div class="sui-g-grid__item">
        ...
    </div>

    <div class="sui-g-grid__item">
        ...
    </div>

    <div class="sui-g-grid__item">
        ...
    </div>

    <div class="sui-g-grid__item">
        ...
    </div>
</div>

Grid stretch & fill

Item
Item
two lines
Item
Item
<div class="sui-g-grid as--stretch as--fill">
    <div class="sui-g-grid__item">
        ...
    </div>

    <div class="sui-g-grid__item">
        ...
    </div>

    <div class="sui-g-grid__item">
        ...
    </div>

    <div class="sui-g-grid__item">
        ...
    </div>
</div>

Grid stretch & auto

Item
Item
two lines
Item
Item
<div class="sui-g-grid as--stretch as--auto">
    <div class="sui-g-grid__item">
        ...
    </div>

    <div class="sui-g-grid__item">
        ...
    </div>

    <div class="sui-g-grid__item">
        ...
    </div>

    <div class="sui-g-grid__item">
        ...
    </div>
</div>

Alignment

Align all child items in container.

Horizontal

Item
Item
Item
Item
Item
Item
<div class="sui-g-grid as--start">
    ...
</div>


<div class="sui-g-grid as--center">
    ...
</div>


<div class="sui-g-grid as--end">
    ...
</div>

Vertical

Item
three
lines
Item
Item
three
lines
Item
Item
three
lines
Item
<div class="sui-g-grid as--top">
    ...
</div>


<div class="sui-g-grid as--middle">
    ...
</div>


<div class="sui-g-grid as--bottom">
    ...
</div>

Vertical alignment on the column

Align each item independently in the column. The class is in this case on the item.

as--top
Item
three
lines
as--middle
as--bottom
<div class="sui-g-grid">
    <div class="sui-g-grid__item as--1_4 as--top">
        ...
    </div>
    <div class="sui-g-grid__item as--1_4">
        ...
    </div>
    <div class="sui-g-grid__item as--1_4 as--middle">
        ...
    </div>
    <div class="sui-g-grid__item as--1_4 as--bottom">
        ...
    </div>
</div>

Distribution

Between and around

Distribute item between and around the main axis of the container.

Item
Item
Item
Item
Item
Item
<div class="sui-g-grid as--between">
  <div class="sui-g-grid__item as--1_5">
    ...
  </div>
  <div class="sui-g-grid__item as--1_5">
    ...
  </div>
  <div class="sui-g-grid__item as--1_5">
    ...
  </div>
</div>


<div class="sui-g-grid as--around">
  <div class="sui-g-grid__item as--1_5">
    ...
  </div>
  <div class="sui-g-grid__item as--1_5">
    ...
  </div>
  <div class="sui-g-grid__item as--1_5">
    ...
  </div>
</div>

Ordering

Add classes on item to reorder it.

First

1
2
3
4
<div class="sui-g-grid">
    <div class="sui-g-grid__item as--1_4">
        ...
    </div>

    <div class="sui-g-grid__item as--1_4">
        ...
    </div>

    <div class="sui-g-grid__item as--1_4 as--first">
        ...
    </div>

    <div class="sui-g-grid__item as--1_4">
        ...
    </div>
</div>

Last

1
2
3
4
<div class="sui-g-grid">
    <div class="sui-g-grid__item as--1_4">
        ...
    </div>

    <div class="sui-g-grid__item as--1_4">
        ...
    </div>

    <div class="sui-g-grid__item as--1_4 as--last">
        ...
    </div>

    <div class="sui-g-grid__item as--1_4">
        ...
    </div>
</div>

Handle order

In this case you need to specify order on each elements

1
2
3
4
<div class="sui-g-grid">
    <div class="sui-g-grid__item as--1_4 as--order-3">
        ...
    </div>

    <div class="sui-g-grid__item as--1_4 as--order-4">
        ...
    </div>

    <div class="sui-g-grid__item as--1_4 as--order-1">
        ...
    </div>

    <div class="sui-g-grid__item as--1_4 as--order-2">
        ...
    </div>
</div>

Reversing

Add classes on container to reverse order.

1
2
3
4
<div class="sui-g-grid as--reverse">
    <div class="sui-g-grid__item as--1_4">
        ...
    </div>

    <div class="sui-g-grid__item as--1_4">
        ...
    </div>

    <div class="sui-g-grid__item as--1_4">
        ...
    </div>

    <div class="sui-g-grid__item as--1_4">
        ...
    </div>
</div>

Item pull & push

Pull or push element regardless of order.

Item left
Item right
Item with a very large content aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<div class="sui-g-grid as--no-wrap">
    <div class="sui-g-grid__item as--pull">
        ...
    </div>

    <div class="sui-g-grid__item as--push">
        ...
    </div>

    <div class="sui-g-grid__item as--1_6">
        ...
    </div>
</div>

Nested grids

Item
Item
Item
two lines
Item
Item
Item
<div class="sui-g-grid as--stretch">
    <div class="sui-g-grid__item as--1_2@md">
        <div class="sui-g-grid as--stretch">
            <div class="sui-g-grid__item as--1_2@md">
                ...
            </div>
            <div class="sui-g-grid__item as--1_2@lg">
                <div class="sui-g-grid as--stretch">
                    <div class="sui-g-grid__item as--1_2@lg">
                        ...
                    </div>
                    <div class="sui-g-grid__item as--1_2@lg">
                        ...
                    </div>
                </div>
            </div>
            <div class="sui-g-grid__item as--1_2@md">
                ...
            </div>
            <div class="sui-g-grid__item as--1_2@md">
                ...
            </div>
        </div>
    </div>

    <div class="sui-g-grid__item as--1_2@md">
        ...
    </div>
</div>

Advanced examples

Actions buttons example

<div class="sui-g-grid as--auto as--middle as--center">
    <div class="sui-g-grid__item as--pull@md">
        <button class="sui-a-button">
            Back
        </button>
    </div>
    <div class="sui-g-grid__item as--push@md">
        <button class="sui-a-button as--primary">
            Continue
        </button>
    </div>
    <div class="sui-g-grid__item as--full as--auto@md sui-h-text-center">
        <div class="sui-a-step-indicator as--step-3">
            <span class="sui-a-step-indicator__step"></span>
            <span class="sui-a-step-indicator__step"></span>
            <span class="sui-a-step-indicator__step"></span>
            <span class="sui-a-step-indicator__step"></span>
            <span class="sui-a-step-indicator__step"></span>
        </div>
    </div>
</div>

Grid inside tabs

Tab Tab Tab
Showing 1 to 20 of 120 datasets
<div class="sui-m-tabs as--lg">
    <a href="#" class="sui-m-tabs__item as--active">
        Tab
    </a>
    <a href="#" class="sui-m-tabs__item">
        Tab
    </a>
    <a href="#" class="sui-m-tabs__item">
        Tab
    </a>
    <div class="sui-g-grid as--auto as--full as--middle as--end">
      <div class="sui-g-grid__item">
          Showing 1 to 20 of 120 datasets
      </div>
      <div class="sui-g-grid__item">
          <button class="sui-a-button as--disabled">
              Clear all criteria
          </button>
      </div>
    </div>
</div>

Play with forms

Some form helper
Some form helper
<div class="sui-g-grid as--gutter-lg@lg">
    <div class="sui-g-grid__item as--1_2@lg">
        <div class="sui-m-form-group">
            <label class="sui-a-form-label as--uppercase">Label</label>

            <div class="sui-g-grid as--auto as--no-wrap">
                <div class="sui-g-grid__item">
                    <select class="sui-a-form-control">
                        <option value="">Choose...</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div class="sui-g-grid__item as--fill">
                    <input class="sui-a-form-control" />
                </div>
            </div>

            <div class="sui-a-form-helper">Some form helper</div>
        </div>
    </div>

    <div class="sui-g-grid__item as--1_2@lg">
        <div class="sui-m-form-group">
            <label class="sui-a-form-label as--uppercase">Label</label>
            <input class="sui-a-form-control" />
        </div>
    </div>

    <div class="sui-g-grid__item as--1_3@lg">
        <div class="sui-m-form-group">
            <label class="sui-a-form-label as--uppercase">Label</label>
            <input class="sui-a-form-control" />
        </div>
    </div>

    <div class="sui-g-grid__item as--1_3@lg">
        <div class="sui-m-form-group">
            <label class="sui-a-form-label as--uppercase">Label</label>
            <select class="sui-a-form-control">
                <option value="">Choose...</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <div class="sui-a-form-helper">Some form helper</div>
        </div>
    </div>

    <div class="sui-g-grid__item as--1_3@lg as--middle">
        <div class="sui-m-form-group">
            <label class="sui-a-form-check">
                <input type="checkbox" name="demo-checkbox-10" checked>
                <span class="sui-a-form-check__indicator"></span>
                <span class="sui-a-form-check__label">Checkbox</span>
            </label>
        </div>
    </div>
</div>