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.

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

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

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.

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

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.

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

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

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