Use the Toolkit helper classes to maintain harmony and alignment in the UI.
l-flex
= flex layoutl-lg-grid
= grid layout, on large viewportsl-sm-col-4
= 4 columns on small viewportsdemo-*
attributes for styling. Those are intended to make the layout class names more obvious, and are unnecessary outside of these docs.
Depending on the layout, you’ll choose different display
s 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.
<!-- 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>
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.
<!-- @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>
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.
<!-- @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>
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.
<!-- @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>
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.
<div demo-flex class="l-flex">
<div demo-box>Realllllllly wide content</div>
<div demo-box>2</div>
<div demo-box>3</div>
</div>
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.
l-h-center
= center the layout horizontallyl-v-top
= align the layout to the top<!-- 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>
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
.
<!-- 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>
For flex children, setting an auto margin will align the items horizontally. To do this, use our mr-auto
and ml-auto
classes.
<!-- 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>
For vertical alignment, we can use l-v-*
to align to the top, center, or bottom.
<!-- 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>
To align child elements vertically, we can use l-v-*-child
to align to the top, center, or bottom.
<!-- 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>
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.