CSS 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

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

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

I am a breakout element and bleed out of my parent's bounds.

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

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

Reel

.reel

The Reel provides a scrollable, overflow container. To add a scrollbar, you apply the .scrollbar utility, which provides consistent scrollbars where needed.

Configuration

Property Default value Description
--reel-item-width 33.333% (one third) This defines the size of each child element.

Exceptions

Exception Description
.reel[data-scroll='snap'] Enables scroll snapping

Examples

Item
Item
Item
Item
Item

With scrollbar

Item
Item
Item
Item
Item

With scroll snapping

Item
Item
Item
Item
Item

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

Item 1 repels item 2
Item 2 repels item 1

.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.

I am the sidebar

I am the content

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper.

Flipped sidebar.

I am the content

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper.

I am the RTL 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

Item 1
Item 2