Layout

Use the Toolkit helper classes to maintain harmony and alignment in the UI.

Like all of our helper classes, layout is namespaced and follows a pattern. For example, to set display we use: layout + media query (optional) + value

Example:

  • l-flex = flex layout
  • l-lg-grid = grid layout, on large viewports
  • l-sm-col-4 = 4 columns on small viewports
Note: our examples all use demo-* attributes for styling. Those are intended to make the layout class names more obvious, and are unnecessary outside of these docs.

Flex vs. Grid

Depending on the layout, you’ll choose different displays to use. Generally, the rule of thumb is: does this need to be aligned on both the x + y axis? If the answer is “no” (most common), then use flex. If it is “yes,” then you’ll want to use grid. Keep in mind that grid can contain flex children. This MDN article summarizes it nicely. And if you’re still confused, reach out to #ui_ux_guild for help.

Grid: columns

1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
<!-- all viewports = 4 columns-->
<div demo-grid class="l-grid l-col-4">
  <div demo-box>1</div>
  <div demo-box>2</div>
  <div demo-box>3</div>
  <div demo-box>4</div>
  <div demo-box>5</div>
  <div demo-box>6</div>
  <div demo-box>7</div>
  <div demo-box>8</div>
</div>

<hr>

<!-- @small viewports = 4 columns. @medium viewports = 6 columns.
Otherwise, it's 12 columns.-->
<div demo-grid class="l-grid l-col-12 l-sm-col-4 l-md-col-6">
  <div demo-box>1</div>
  <div demo-box>2</div>
  <div demo-box>3</div>
  <div demo-box>4</div>
  <div demo-box>5</div>
  <div demo-box>6</div>
  <div demo-box>7</div>
  <div demo-box>8</div>
  <div demo-box>9</div>
  <div demo-box>10</div>
  <div demo-box>11</div>
  <div demo-box>12</div>
</div>

<hr>

<!-- @xl viewports = 3 columns, otherwise it's 2 columns.-->
<div demo-grid class="l-grid l-xl-col-3 l-col-2">
  <div demo-box>1</div>
  <div demo-box>2</div>
  <div demo-box>3</div>
  <div demo-box>4</div>
  <div demo-box>5</div>
  <div demo-box>6</div>
  <div demo-box>7</div>
  <div demo-box>8</div>
  <div demo-box>9</div>
  <div demo-box>10</div>
  <div demo-box>11</div>
  <div demo-box>12</div>
</div>

<hr>

<!-- @small viewports = 2 columns, otherwise it's 5 columns.-->
<div demo-grid class="l-grid l-sm-col-2 l-col-5">
  <div demo-box>1</div>
  <div demo-box>2</div>
  <div demo-box>3</div>
  <div demo-box>4</div>
  <div demo-box>5</div>
  <div demo-box>6</div>
  <div demo-box>7</div>
  <div demo-box>8</div>
  <div demo-box>9</div>
  <div demo-box>10</div>
</div>

Description

If you need the layout to be aligned on both the vertical and horizontal axis, you might want to use grid. The number of grid columns can be between 1-12. Similar to our spacing helpers, these can target responsive sizes. Currently, the columns are evenly spaced. We may add flexibility in the future.

↕↔ Grid: spacing

1
2
3
4
5
6
<!-- @small viewports = gap of 4x. Otherwise, it's 8x. -->
<div demo-grid class="l-grid l-col-3 l-gap-8x l-sm-gap-4x">
  <div demo-box>1</div>
  <div demo-box>2</div>
  <div demo-box>3</div>
  <div demo-box>4</div>
  <div demo-box>5</div>
  <div demo-box>6</div>
</div>

Description

Grid gap defines the space between the rows and columns. Since we’re using a value (and not a quantity), we append x to the end. This example shows a grid with a horizontal and vertical gap of 4x on small. For all other sizes, it has a gap of 8x.

↕ Grid: spacing

1
2
3
4
5
6
<!-- @small viewports = gap of 3x. Otherwise, it's 5x. -->
<div demo-grid class="l-grid l-col-3 l-sm-v-gap-3x l-v-gap-5x">
  <div demo-box>1</div>
  <div demo-box>2</div>
  <div demo-box>3</div>
  <div demo-box>4</div>
  <div demo-box>5</div>
  <div demo-box>6</div>
</div>

Description

Grid gap can also be applied to the rows (vertically). This example shows a grid with a vertical gap of 3x on small. For all other sizes, it has a gap of 5x.

↔ Grid: spacing

1
2
3
4
5
6
<!-- @medium viewports = gap of 4x. Otherwise, it's 8x. -->
<div demo-grid class="l-grid l-col-3 l-h-gap-8x l-md-h-gap-4x">
  <div demo-box>1</div>
  <div demo-box>2</div>
  <div demo-box>3</div>
  <div demo-box>4</div>
  <div demo-box>5</div>
  <div demo-box>6</div>
</div>

Description

Grid gap can also be applied to the columns (horizontally). This example shows a grid with a horizontal gap of 4x on medium. For all other sizes, it has a gap of 8x.

Flex (most common)

Realllllllly wide content
2
3
<div demo-flex class="l-flex">
  <div demo-box>Realllllllly wide content</div>
  <div demo-box>2</div>
  <div demo-box>3</div>
</div>

Description

For the majority of our layouts, we can use flex. This allows the layout to fluidly adapt to its content. This is useful for dynamic content where the width may vary.

For setting alignment, we use: layout + direction + value

Example:

  • l-h-center = center the layout horizontally
  • l-v-top = align the layout to the top

↔ Flex: alignment

Child #1
Child #2
Child #3
Child #1
Child #2
Child #3
Child #1
Child #2
Child #3
<!-- example #1 -->
<div demo-flex tall class="l-flex l-h-left">
  <div demo-box>Child #1</div>
  <div demo-box>Child #2</div>
  <div demo-box>Child #3</div>
</div>
<hr>
<!-- example #2 -->
<div demo-flex tall class="l-flex l-h-center">
  <div demo-box>Child #1</div>
  <div demo-box>Child #2</div>
  <div demo-box>Child #3</div>
</div>
<hr>
<!-- example #3 -->
<div demo-flex tall class="l-flex l-h-right">
  <div demo-box>Child #1</div>
  <div demo-box>Child #2</div>
  <div demo-box>Child #3</div>
</div>

Description

Flex default is to align its content to the left (flex-start). To align to the right or center, use l-h-center, or l-h-right.

↔ Flex: child alignment

Child #1
Child #2
Child #3
Child #1
Child #2
Child #3
<!-- example #1 -->
<div demo-flex class="l-flex">
  <div demo-box>Child #1</div>
  <div demo-box>Child #2</div>
  <div demo-box class="ml-auto">Child #3</div>
</div>

<!-- example #2 -->
<div demo-flex class="l-flex mt-4x">
  <div demo-box class="mr-auto">Child #1</div>
  <div demo-box>Child #2</div>
  <div demo-box>Child #3</div>
</div>

Description

For flex children, setting an auto margin will align the items horizontally. To do this, use our mr-auto and ml-auto classes.

↕ Flex: alignment

Child #1
Child #2
Child #3
Child #1
Child #2
Child #3
Child #1
Child #2
Child #3
<!-- example #1 -->
<div demo-flex tall class="l-flex l-v-center">
  <div demo-box>Child #1</div>
  <div demo-box>Child #2</div>
  <div demo-box>Child #3</div>
</div>

<hr>

<!-- example #2 -->
<div demo-flex tall class="l-flex l-v-top">
  <div demo-box>Child #1</div>
  <div demo-box>Child #2</div>
  <div demo-box>Child #3</div>
</div>

<hr>

<!-- example #3 -->
<div demo-flex tall class="l-flex l-v-bottom">
  <div demo-box>Child #1</div>
  <div demo-box>Child #2</div>
  <div demo-box>Child #3</div>
</div>

Description

For vertical alignment, we can use l-v-* to align to the top, center, or bottom.

↕ Flex: child alignment

Child #1
Child #2
Child #3
Child #1
Child #2
Child #3
Child #1
Child #2
Child #3
<!-- example #1 -->
<div demo-flex tall class="l-flex">
  <div demo-box>Child #1</div>
  <div demo-box class="l-v-center-child">Child #2</div>
  <div demo-box>Child #3</div>
</div>

<hr>

<!-- example #2 -->
<div demo-flex tall class="l-flex">
  <div demo-box>Child #1</div>
  <div demo-box class="l-v-bottom-child">Child #2</div>
  <div demo-box>Child #3</div>
</div>

<hr>

<!-- example #3 -->
<div demo-flex tall class="l-flex">
  <div demo-box>Child #1</div>
  <div demo-box class="l-v-top-child">Child #2</div>
  <div demo-box>Child #3</div>
</div>

Description

To align child elements vertically, we can use l-v-*-child to align to the top, center, or bottom.

More layout helpers

all sizes block
all sizes block
@small = flex. other sizes = grid.
@small = flex. other sizes = grid.
@small = flex. other sizes = grid.
@small = block. other sizes = flex.
@small = block. other sizes = flex.
@small = block. other sizes = flex.
<!-- example #1 -->
<div demo-block class="l-block">
  <div demo-box>all sizes block</div>
  <div demo-box>all sizes block</div>
</div>
<hr>
<!-- example #2 -->
<div demo-combo demo-combo-1 class="l-sm-flex l-grid l-col-3">
  <div demo-box>@small = flex. other sizes = grid.</div>
  <div demo-box>@small = flex. other sizes = grid.</div>
  <div demo-box>@small = flex. other sizes = grid.</div>
</div>
<hr>
<!-- example #3 -->
<div demo-combo demo-combo-2 class="l-sm-block l-flex">
  <div demo-box>@small = block. other sizes = flex.</div>
  <div demo-box>@small = block. other sizes = flex.</div>
  <div demo-box>@small = block. other sizes = flex.</div>
</div>

Description

We also have responsive classes if you need to combine layout techniques, or have a special case. For example: if using a custom element, you might need l-block to get margin to appear correctly.