Gonk Design: Pattern Library
These are flexible, compositional layouts that follow the CUBE CSS composition principles.
If you want to change the value of a custom property, you can either set a value
in your context, or target the composition itself (E.G .sidebar) for extra specificity.
The default values are fallbacks for custom properties, so are easily overridden.
All compositions use a consistent
--gutter Custom Property to manage spacing between items. You
can either set a value for this in context, just like in the configuration
section above, or you can use the gutter utility classes.
For example, you could increase the gutter on the sidebar like this:
<div class="sidebar gutter-xl">.
Each composition has a vertical and horizontal alignment Custom Property
if applicable, but you can also use the items
and justify
Tailwind utility
classes like this: <div class="repel
items-center">.
The flow utility provides flow and rhythm between direct sibling elements. Where --flow-space is not defined: the default value is 1em, which equals the font size of the affected element.
| Property | Default value | Description |
|---|---|---|
--flow-space
|
1em
|
This defines the space between each item. |
Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.
Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
--flow-space set with an inline style to 3em: style="--flow-space: 3em"
You can also use the flow-space generated utility that allows you to use the spacing design tokens. For example, If you want that last paragraph
to have M spacing, from the spacing scale, you would change the code to the following:
Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.
Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
--flow-space is set to use XL on the spacing scale, using the flow-space-xl utility class.
.grid
A flexible layout that will create an auto-fill grid with configurable grid item sizes.
| Property | Default value | Description |
|---|---|---|
--gutter
|
var(--space-m)
|
This defines the space between each item. |
--grid-min-item-size
|
20rem
|
How large each item should be, as a minimum |
--grid-placement
|
auto-fill
|
Set either auto-fit or auto-fill to change how empty grid tracks are handled |
.cluster
A layout that lets you to distribute items with consitent spacing, regardless of their size.
| Property | Default value | Description |
|---|---|---|
--gutter
|
var(--space-m)
|
This defines the space between each item. |
--cluster-horizontal-alignment
|
flex-start
|
How items should align horizontally. Can be any acceptable flexbox alignment value.. |
--cluster-vertical-alignment
|
center
|
How items should align vertically. Can be any acceptable flexbox alignment value.. |
A little layout that pushes items away from each other where there is space in the viewport and stacks on small viewports.
.repel
| Property | Default value | Description |
|---|---|---|
--gutter
|
var(--space-m)
|
This defines the space between items. |
--repel-vertical-alignment
|
20rem
|
How items should align vertically. Can be any acceptable flexbox alignment value.. |
.sidebar
A layout that allows you to have a flexible main content area and a "fixed" width sidebar that sits on the left or right. If there is not enough viewport space to fit both the sidebar width and the main content minimum width, they will stack on top of each other
| Property | Default value | Description |
|---|---|---|
--gutter
|
var(--space-m)
|
This defines the space between the sidebar and main content. |
--sidebar-target-width
|
20rem
|
How large the sidebar should be |
--sidebar-content-min-width
|
50%
|
The minimum size of the main content area |
| Exception | Description |
|---|---|
.sidebar[data-direction='rtl']
|
Flips the sidebar to be on the right. |
.sidebar[data-reversed]
|
Switches the flex direction so you can maintain content ordering while visually appearing flipped. |
A standard sidebar.
.switcher
A layout that allows you to lay 2 items next to each other until there is not enough horizontal space to allow that.
| Property | Default value | Description |
|---|---|---|
--gutter
|
var(--space-m)
|
This defines the space between each item |
--switcher-vertical-alignment
|
flex-start
|
How items should align vertically. Can be any acceptable flexbox alignment value. |
--switcher-target-container-width
|
30rem
|
How large the container needs to be to allow items to sit inline with each other |
A horizontally centered wrapper that provides a consistent central column.
This should be used in all contexts where the content needs to be in the center of the page.
<div class="wrapper">I am centered and have a nice, consistent gutter.</div>
Gonk Design: Pattern Library