Compositions
These are flexible, compositional layouts that follow the CUBE CSS composition principles.
Configuration
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.
Gutters and Spacing
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-size-2">.
Justification and alignment
Each composition has a vertical and horizontal alignment Custom Property
if applicable, but you can also use the
flex-align and flex-justify utility classes like
this: <div class="repel flex-align-center">.
Auto Grid
.auto-grid
A flexible layout that will create an auto-fill grid with configurable grid item sizes.
Configuration
| Property | Default value | Description |
|---|---|---|
--gutter |
$global-gutter |
This defines the space between each item. |
--auto-grid-min-item-size |
20rem |
How large each item should be, as a minimum |
--auto-grid-placement |
auto-fill |
Set either auto-fit or auto-fill to change how empty grid tracks are handled |
Examples
Breakout
.breakout
A layout that allows you to break a an element out of the bounds of its parent, with a sensible lock to prevent it bleeding out.
Configuration
| Property | Default value | Description |
|---|---|---|
--breakout-max-width |
65rem |
This defines the maximum width of the element. |
Examples
Cluster
.cluster
A layout that lets you uto distribute items with consitent spacing, regardless of their size.
Configuration
| Property | Default value | Description |
|---|---|---|
--gutter |
$global-gutter |
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.. |
Examples
Repel
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 |
$global-gutter |
This defines the space between items. |
--repel-vertical-alignment |
20rem |
How items should align vertically. Can be any acceptable flexbox alignment value.. |
Examples
Sidebar
.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
Configuration
| Property | Default value | Description |
|---|---|---|
--gutter |
$global-gutter |
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 |
Exceptions
| Exception | Description |
|---|---|
.sidebar[data-direction='rtl'] |
Flips the sidebar to be on the right |
Examples
A standard sidebar.
Flipped sidebar.
Switcher
.switcher
A layout that allows you to lay 2 items next to each other until there is not enough horizontal space to allow that.
Configuration
| Property | Default value | Description |
|---|---|---|
--switcher-gutter |
$global-gutter |
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 |
Examples
Reference inspired by web.dev design system.