Add .collapse to .col-[num]. These columns comes with no borders as in this demo.
.col-6 .collapse
.col-6 .collapse
.col-4 .collapse
.col-4 .collapse
.col-4 .collapse
.col-3 .collapse
.col-3 .collapse
.col-3 .collapse
.col-3 .collapse
Centered columns
Usage:
.center--all for all devices.
Add .center followed by method target name --small-only, --medium-only, --large-only
or --medium-up or --medium-down for responsiveness.
These examples are printed out with .col-10 followed with .center--[target method name].
Centered for all devices.
Centered for medium up. (Scale down the window to un-center.)
Centered for medium down. (Scale down the window.)
Centered for large devices only. (Scale down the window.)
Centered for medium devices only. (Scale down the window.)
Centered for small devices only. (Scale down the window.)
Responsive column width
Change column width for devices with .col-[number]--[method-name].
Full width on small devices, 1/2 on medium devices and 1/3 on large devices
Full width on small devices, 1/2 on medium devices and 1/3 on large devices
Hidden for small and medium devices, 1/3 on large devices
Full width on small devices, 1/2 on medium devices and 1/3 on large devices
Full width on small devices, 1/2 on medium devices and 1/3 on large devices
Large only
Small 12, large 6
Vertical align
Adding .vertical to parent element and some of the following:
.vertical--middle or .vertical--bottom to the children will set desired alignment to children.
.vertical.vertical--middle
.vertical.vertical--bottom
Block list
.block-list-6--small .block-list-4--medium .block-list-3--large
Add .center to align items centered.
block-list-12--small block-list-4--medium block-list-3--large > li
block-list-12--small block-list-4--medium block-list-3--large > li
block-list-12--small block-list-4--medium block-list-3--large > li
block-list-12--small block-list-4--medium block-list-3--large > li