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 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.
<!-- 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.
<div demo-grid class="l-grid l-col-12">
<div demo-box class="l-col-span-4">1</div>
<div demo-box class="l-col-span-8">2</div>
</div>There are times when the grid items that are sitting in your grid are not equal to the amount of columns you’ve set your grid to. For example a 12 column grid with only 2 grid items inside of it. In a scenario like this the default behavior is for each item to become as wide as the width of 1 column. If this is undesirable an item can be set to span multiple columns like the code example above shows.
Insight
To play around with spanning grid columns you can find a demo here<div demo-grid class="l-grid l-gap-4x l-col-12">
<div demo-box class="l-sm-col-span-12 l-md-col-span-6 l-col-span-3">1</div>
<div demo-box class="l-sm-col-span-12 l-md-col-span-6 l-col-span-3">2</div>
<div demo-box class="l-sm-col-span-12 l-md-col-span-6 l-col-span-3">3</div>
<div demo-box class="l-sm-col-span-12 l-md-col-span-6 l-col-span-3">4</div>
</div>
<hr class="horizontal-rule">
<div demo-grid class="l-grid l-gap-4x l-md-col-7 l-col-10">
<div demo-box class="l-sm-col-span-10 l-md-col-span-2 l-col-span-2">1</div>
<div demo-box class="l-sm-col-span-10 l-md-col-span-5 l-col-span-2">2</div>
<div demo-box class="l-sm-col-span-10 l-md-col-span-7 l-col-span-2">3</div>
<div demo-box class="l-sm-col-span-10 l-md-col-span-3 l-col-span-2">4</div>
<div demo-box class="l-sm-col-span-10 l-md-col-span-4 l-col-span-2">5</div>
</div>When building a grid using the util classes referenced in the previous sections, your layout can be flexible and use different column counts for different viewport ranges. The namespace pattern of optionally including a viewport range is also supported for the column spanning util classes. Consider the examples above to get an idea of how these could be used.
Insight
To play around with spanning grid columns you can find a demo here<!-- @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>
<hr>
<!-- example #4 -->
<div demo-flex tall class="l-flex l-justify-sp-between">
<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. For space between use .l-justify-sp-between or .l-h-sp-between
<!-- 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-combo demo-combo-1 class="l-flex l-d-column">
<div demo-box>Child #1</div>
<div demo-box>Child #2</div>
<div demo-box>Child #3</div>
</div>
<hr>
<!-- example #2 -->
<div demo-combo demo-combo-2 class="l-flex l-d-column-reverse">
<div demo-box>Child #1</div>
<div demo-box>Child #2</div>
<div demo-box>Child #3</div>
</div>
<hr>
<!-- example #3 -->
<div demo-combo demo-combo-3 class="l-flex l-d-row-reverse">
<div demo-box>Child #1</div>
<div demo-box>Child #2</div>
<div demo-box>Child #3</div>
</div>For flex direction you can use .l-d-column, .l-d-column-reverse, and .l-d-row-reverse. By default the flex direction is flex-direction: row; (.l-d-row)
<!-- 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>
<hr>
<!-- example #4 -->
<div demo-combo demo-combo-3 class="l-full-width">
<div demo-box>100% full width</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.