Grids
The design system provides a 12-column grid system built on the CSS Flexbox API. Flexbox was chosen over the CSS Grid API because of greater browser support and because it better represented the layout patterns used by the design system.
Grid wrapper
All grid columns must have a grid wrapper as a direct parent. A grid wrapper is
an element with either the class .uw-grid or with the SCSS mixin
@include grid(); applied.
The following is an example of a grid wrapper:
<div class="uw-grid">
<!-- grid columns will go here -->
</div>Auto span columns
Auto span columns use the class .uw-col or the SCSS mixin @include column();
and automatically resize to take up the available space in a grid.
Using auto span columns
| Context | Usage |
|---|---|
| SCSS mixin | @include column(); |
| CSS class | .uw-col |
Auto span column example
.uw-col.uw-col.uw-col<div class="uw-grid">
<div class="uw-col"><div class="inner"><code>.uw-col</code></div></div>
<div class="uw-col"><div class="inner"><code>.uw-col</code></div></div>
<div class="uw-col"><div class="inner"><code>.uw-col</code></div></div>
</div>Fixed span columns
Fixed span columns take up a number of grid columns chosen by the developer. The
number of columns to span can be between 1 and 12. More information about
how different span widths are computed is available in the
column span token table.
Using fixed span columns
| Context | Usage | Example |
|---|---|---|
| SCSS mixin | @include column(span); |
@include column(4); |
| CSS class | .uw-col-span |
.uw-col-9 |
Fixed span column example
.uw-col-4.uw-col-8.uw-col-12<div class="uw-grid">
<div class="uw-col-4"><div class="inner"><code>.uw-col-4</code></div></div>
</div>
<div class="uw-grid">
<div class="uw-col-8"><div class="inner"><code>.uw-col-8</code></div></div>
</div>
<div class="uw-grid">
<div class="uw-col-12"><div class="inner"><code>.uw-col-12</code></div></div>
</div>Responsive span columns
Often a column span that makes sense on desktops is too narrow on mobile or a span that makes sense on mobile is too wide for desktops. Responsive span columns help fix this problem by changing column span based on the width of the screen.
Responsive span column classes and mixins require a span value and one of the breakpoint tokens. The span value will be applied to the column whenever the screen is equal-to or larger-than the breakpoint. If multiple responsive column classes or mixins apply at the same time, the span value associated with the largest breakpoint is used.
Using responsive span columns
| Context | Usage | Example |
|---|---|---|
| SCSS mixin | @include column(span, breakpoint); |
@include column(6, 'md'); |
| CSS class | .uw-col-span-breakpoint |
.uw-col-6-md |
Column span tokens
The following span tokens are supported by the design system grid. If an element uses a span token not supported by the grid, that element will behave as an auto span column.
| Token | Percent | Example |
|---|---|---|
1 |
8.333% |
1 |
2 |
16.667% |
2 |
3 |
25% |
3 |
4 |
33.333% |
4 |
5 |
41.667% |
5 |
6 |
50% |
6 |
7 |
58.333% |
7 |
8 |
66.667% |
8 |
9 |
75% |
9 |
10 |
83.333% |
10 |
11 |
91.667% |
11 |
12 |
100% |
12 |
Spacing
The design system provides a collection of design tokens for controlling the spacing around elements. These tokens can be used to set margins and padding with either SCSS mixins or CSS classes.
Spacing tokens
| Token | Value | Example |
|---|---|---|
'none' |
0rem |
Content |
'xs' |
0.5rem |
Content |
'sm' |
1rem |
Content |
'md' |
1.5rem |
Content |
'lg' |
2rem |
Content |
'xl' |
2.5rem |
Content |
Using spacing tokens
| Context | Usage | Examples |
|---|---|---|
|
SCSS mixins Margin |
@include margin-all(spacing)@include margin-top(spacing)@include margin-right(spacing)@include margin-bottom(spacing)@include margin-left(spacing)@include margin-x(spacing)@include margin-y(spacing)
|
@include margin-all('none')@include margin-top('xs')@include margin-right('sm')@include margin-bottom('md')@include margin-left('lg')@include margin-x('xl')@include margin-y('none')
|
|
SCSS mixins Padding |
@include padding-all(spacing)@include padding-top(spacing)@include padding-right(spacing)@include padding-bottom(spacing)@include padding-left(spacing)@include padding-x(spacing)@include padding-y(spacing)
|
@include padding-all('none')@include padding-top('xs')@include padding-right('sm')@include padding-bottom('md')@include padding-left('lg')@include padding-x('xl')@include padding-y('none')
|
|
CSS classes Margin |
.uw-mar-all-spacing.uw-mar-top-spacing.uw-mar-right-spacing.uw-mar-bottom-spacing.uw-mar-left-spacing.uw-mar-x-spacing.uw-mar-y-spacing
|
.uw-mar-all-none.uw-mar-top-xs.uw-mar-right-sm.uw-mar-bottom-md.uw-mar-left-lg.uw-mar-x-xl.uw-mar-y-none
|
|
CSS classes Padding |
.uw-pad-all-spacing.uw-pad-top-spacing.uw-pad-right-spacing.uw-pad-bottom-spacing.uw-pad-left-spacing.uw-pad-x-spacing.uw-pad-y-spacing
|
.uw-pad-all-none.uw-pad-top-xs.uw-pad-right-sm.uw-pad-bottom-md.uw-pad-left-lg.uw-pad-x-xl.uw-pad-y-none
|
Breakpoints
The design system defines the following breakpoints. The accompanying breakpoint tokens are used throughout the design system to adapt apps and webpages to different screen sizes.
Breakpoint tokens
| Token | Size (rem) |
Size (px) |
|---|---|---|
'sm' |
32rem |
512px |
'md' |
48rem |
768px |
'lg' |
64rem |
1024px |
Using breakpoint tokens
The breakpoint tokens are used throughout the design system to create responsive span columns and responsive font sizes.
Whenever other design system APIs use breakpoints to selectively apply styles, those styles will always be applied on screens that are equal to or larger than the breakpoint’s size.