Blocks

Block container

All block grids start with a wrapper of block-container that is display: flex with flex-wrap: wrap applied. Container modifiers, which affect all child blocks, allow auto-placement based on responsive breakpoints.

Modifiers

Modifier † Behavior
blocks

When applied, margins and padding placed on the container are applied to all child blocks instead.

The base class is always required.

Grid demo

block-4
block-8

Markup

<div class="block-container blocks p-2">
  <div class="block block-4"></div>
  <div class="block block-8"></div>
</div>

Block

Based on a 12 column grid, block is a core structural component when building your layout. Blocks are fully responsive - each block has a width of 100% applied for all resolutions and can be modified both on the container and block levels.

Size

Modifiers on each block, from 1-12, affect their native 100% width. The block-{number} will always reflect the smallest breakpoint which is mobile.

Grid demo

block-3
block-9
block-6
block-6

Markup

<div class="block-container blocks p-2">
  <div class="block block-3"></div>
  <div class="block block-9"></div>
  <div class="block block-6"></div>
  <div class="block block-6"></div>
</div>

Modifiers

Modifier † Behavior
block-1
block-2
block-3
block-4
block-5
block-6
block-7
block-8
block-9
block-10
block-11
block-12

The base class is always required.

Utilities

Breakpoint classes can be added to each of these utilities as well. For example, you could have a block-8 from mobile up. Then, if you wanted the block to shrink to the size of its content at a laptop size, you could add the class laptop-up--shrink. This would give the styles width: auto within that set media query. Your block would have the classes, block block-8 laptop-up--shrink.

Modifiers

Modifier † Behavior
block--shrink

width: auto

block--fill

flex-grow: 1

block--full

width: 100%

The base class is always required.

Grid demo

block
block
block
block
block—fill

Markup

<div class="block-container blocks p-3 tablet-up-2 laptop-up-3 desktop-up-4">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block block--fill"></div>
</div>

Responsive grids

You can build responsive grids using modifiers based on standard viewports. These modifiers can be added on the block or container levels.

Modifiers

Modifier † Behavior
{viewport}-up-{number}

Set the number of columns a block, or blocks in a container, span across a viewport.

The base class is always required.

Now let’s explain what we mean!

On the container

Adding {breakpoint}-up-{number-of-blocks-per-row} to display {number-of-blocks-per-row} at the breakpoint specified.

This method will override any block size set within the targeted scope of the modified container.

Grid demo

block
block
block

Markup

<div class="block-container tablet-up-2">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

On the block

Adding {breakpoint}-up-{number-of-columns-to-span} will do just that. A block set to block-6 will span 6 columns, or half the grid.

In the grid demo example, each block will take up an entire row at the smallest viewport. At tablet, each row will contain 2 blocks; laptop, each row will contain 3 blocks.

Grid demo
tablet-up-6laptop-up-4
tablet-up-6laptop-up-4
tablet-up-6laptop-up-4
tablet-up-6laptop-up-4

Markup

<div class="block-container">
  <div class="block tablet-up-6 laptop-up-4"></div>
  <div class="block tablet-up-6 laptop-up-4"></div>
  <div class="block tablet-up-6 laptop-up-4"></div>
  <div class="block tablet-up-6 laptop-up-4"></div>
</div>

Spacing

You can add spacing utilities to nested blocks by adding the classes to the block-container. You need to add blocks {spacer-class}. The blocks class is needed. Without it, you will simply be adding the spacers to the block-container rather than the nested blocks. This can be a great method for spacing multiple blocks equally. Adding blocks {spacer-class} will ensure that the spacing fits the container along the x-axis. Check out the example below. The block-container width increases based on the x-axis padding that is added.

Grid demo

block-3
block-9
block-6
block-6

Markup

<div class="block-container blocks p-3 mb-3">
  <div class="block block-3"></div>
  <div class="block block-9"></div>
  <div class="block block-6"></div>
  <div class="block block-6"></div>
</div>