Section 7.1 #Layout.Flex
Flex

Flexbox utilities to use when flexbox is present.

Usage: .flex .flex--align-center

.flex--center-content centers content horizontaly and vertically. it includes display: flex

Class Name
flex--align-center flex--column flex--justify-between flex--justify-end flex--justify-start
flex--justify-center flex--wrap flex--grow flex-inline flex--align-baseline
flex--align-start flex--align-end flex--align-center flex-nowrap flex--justify-between
flex--row-reverse flex--column-reverse flex--align-center flex-nowrap flex--justify-between
flex--align-self-start flex--align-self-end flex--align-self-center flex--align-self-baseline
Source: sass/utilities/_flex.scss, line 4

Section 7.2 #Layout.Blocks
Block Grid

Blocks are Platform UI's core structural component. Here are some of the features and concepts behind our grid.

Blocks

  • Blocks are based on a 12 column grid, they allow content to be evenly distributed. They are a mobile first approach.
  • Blocks can have responsive modifiers attached directly to them.
  • Each .block has a width of 100%. From there, you can add modifiers to each block to take up the desired amount of columns in the 12 column grid.
  • You can use responsive modifiers on each block as well. These modiifiers change the width (or amount of columns taken) of individual blocks from each breakpoint and up. The breakpoint modifiers use min-width media queries.
  • The block-{number} will always reflect the mobile, smallest breakpoint, value.

Block Containers

  • All block grids start with a wrapper of block-container that is set to display: flex with flex-wrap: wrap.
  • block-container can also act as a row.
  • block-container has modifiers to allow auto-placement based on responsive breakpoints.
  • Adding a {breakpoint}-up-{value} class will create a grid of equally size blocks within the grid. For example: block-container tablet-up-2 laptop-up-4 would result in a grid with 2 blocks per row starting at the tablet resolution, then when the screen size reaches the laptop resolution, you would see 4 blocks per row. Each block would have the same width as well.

12 Columns

block
block block-1
block block-11
block block-2
block block-10
block block-3
block block-9
block block-4
block block-8
block block-5
block block-7
block block-6
block block-6
<div class="block-container">
  <div class="block">
    <div class="card">
    <strong class="text-navy">block</strong>
    </div>
  </div>
  <div class="block block-1">
    <div class="card">
    <strong class="text-navy">block block-1</strong>
    </div>
  </div>
  <div class="block block-11">
    <div class="card">
    <strong class="text-navy">block block-11</strong>
    </div>
  </div>
  <div class="block block-2">
    <div class="card">
    <strong class="text-navy">block block-2</strong>
    </div>
  </div>
  <div class="block block-10">
    <div class="card">
    <strong class="text-navy">block block-10</strong>
    </div>
  </div>
  <div class="block block-3">
    <div class="card">
    <strong class="text-navy">block block-3</strong>
    </div>
  </div>
  <div class="block block-9">
    <div class="card">
    <strong class="text-navy">block block-9</strong>
    </div>
  </div>
  <div class="block block-4">
    <div class="card">
    <strong class="text-navy">block block-4</strong>
    </div>
  </div>
  <div class="block block-8">
    <div class="card">
    <strong class="text-navy">block block-8</strong>
    </div>
  </div>
  <div class="block block-5">
    <div class="card">
    <strong class="text-navy">block block-5</strong>
    </div>
  </div>
  <div class="block block-7">
    <div class="card">
    <strong class="text-navy">block block-7</strong>
    </div>
  </div>
  <div class="block block-6">
    <div class="card">
    <strong class="text-navy">block block-6</strong>
    </div>
  </div>
  <div class="block block-6">
    <div class="card">
    <strong class="text-navy">block block-6</strong>
    </div>
  </div>
</div>
Source: sass/_blocks.scss, line 6

Section 7.2.1 #Layout.Blocks.Grid
Building Grids

You can build a grid of equally sized blocks using the block layout. This can be done in a couple ways. The first way is by adding the classes to each individual block. Something like block block-3 on each block will result in a grid of 4 blocks per row.

block block-3
block block-3
block block-3
block block-3
<div class="block-container blocks p-2">
  <div class="block block-3">
    <div class="card">
      <strong class="text-navy">block block-3</strong>
    </div>
  </div>
  <div class="block block-3">
    <div class="card">
      <strong class="text-navy">block block-3</strong>
    </div>
  </div>
  <div class="block block-3">
    <div class="card">
      <strong class="text-navy">block block-3</strong>
    </div>
  </div>
  <div class="block block-3">
    <div class="card">
      <strong class="text-navy">block block-3</strong>
    </div>
  </div>
</div>

The second approach is to add the sizing classes to the wrapping block-container. This way prevents you from needing to add the classes to each block. These classes look like {breakpoint}-up-{number-of-blocks-per-row}. So an example would be tablet-up-3. This would give you 3 blocks per row starting at the tablet screen size.

block
block
block
block
<div class="block-container blocks p-2 mobile-up-4">
  <div class="block">
    <div class="card">
      <strong class="text-navy">block</strong>
    </div>
  </div>
  <div class="block">
    <div class="card">
      <strong class="text-navy">block</strong>
    </div>
  </div>
  <div class="block">
    <div class="card">
      <strong class="text-navy">block</strong>
    </div>
  </div>
  <div class="block">
    <div class="card">
      <strong class="text-navy">block</strong>
    </div>
  </div>
</div>
Source: sass/_blocks.scss, line 178

Section 7.2.2 #Layout.Blocks.GridResponsive
Responsive Grid

You can build a responsive grid with blocks. You can add the responsive classes to the individual blocks, or add them to the container. Adding layout classes to the container works best when you need a grid of equally sized blocks.

Breakpoints 0px 768px 991px 1240px 1800px
label mobile tablet lg-tablet laptop desktop
prefix mobile-up- tablet-up- lg-tablet-up- laptop-up- desktop-up-

Adding the responsive classes on a block means, at that resolution, the block will take up as many columns in the 12 column row that are applied via the class. For example: <div class="block tablet-up-6 laptop-up-4"></div> This div will take up all 12 columns at the smallest screen size, 6 columns starting at the tablet screen size, and 4 columns at the laptop screen size.

On the blocks: In this example, each block will take up an entire row at the smallest screen sizes. When the screen reaches the tablet resolution, each row will contain 2 blocks, and at the laptop size, each row will have 3 blocks.

block tablet-up-6 laptop-up-4
block tablet-up-6 laptop-up-4
block tablet-up-6 laptop-up-4
block tablet-up-6 laptop-up-4
<div class="block-container blocks p-2">
  <div class="block tablet-up-6 laptop-up-4">
    <div class="card">
      <strong class="text-navy">block tablet-up-6 laptop-up-4</strong>
    </div>
  </div>
  <div class="block tablet-up-6 laptop-up-4">
    <div class="card">
      <strong class="text-navy">block tablet-up-6 laptop-up-4</strong>
    </div>
  </div>
  <div class="block tablet-up-6 laptop-up-4">
    <div class="card">
      <strong class="text-navy">block tablet-up-6 laptop-up-4</strong>
    </div>
  </div>
  <div class="block tablet-up-6 laptop-up-4">
    <div class="card">
      <strong class="text-navy">block tablet-up-6 laptop-up-4</strong>
    </div>
  </div>
</div>

On the block-container

Adding the responsive modifier to the block-container will show as many blocks in a row as are stated in the class name. For example: If you added block-container mobile-up-2 tablet-up-3 laptop-up-4 each row would have 2 blocks from the smallest screen size up, 3 blocks starting at the tablet resolution, and 4 blocks per row begining at the laptop resolution.

Take a look at the example below and scale the page.

block
block
block
block
<div class="block-container blocks p-2 tablet-up-2 laptop-up-3 desktop-up-4">
  <div class="block">
    <div class="card">
      <strong class="text-navy">block</strong>
    </div>
  </div>
  <div class="block">
    <div class="card">
      <strong class="text-navy">block</strong>
    </div>
  </div>
  <div class="block">
    <div class="card">
      <strong class="text-navy">block</strong>
    </div>
  </div>
  <div class="block">
    <div class="card">
      <strong class="text-navy">block</strong>
    </div>
  </div>
  <div class="block">
    <div class="card">
      <strong class="text-navy">block</strong>
    </div>
  </div>
  <div class="block">
    <div class="card">
      <strong class="text-navy">block</strong>
    </div>
  </div>
</div>
Source: sass/_blocks.scss, line 294

Section 7.2.3 #Layout.Blocks.Spacing
Block Spacing

  • Spacing is based on Platform UI spacing with the following changes in behavior; Attaching padding to the horizontal axis, px-2, with a modifier of blocks will add that spacing to the block-container.
  • Without the blocks modifier, placing block-container px-2 will not apply the horizontal axis padding to the block children within the container but rather apply padding: 0 .5rem to the block-container.

Each block in the example below has padding: .5rem applied.

Example:

block block-4
block block-8
block block-6
block block-6
block block-9
block block-3
<div class="block-container blocks p-2">
  <div class="block block-4">
    <div class="card">
    <strong class="text-navy">block block-4</strong>
    </div>
  </div>
  <div class="block block-8">
    <div class="card">
    <strong class="text-navy">block block-8</strong>
    </div>
  </div>
  <div class="block block-6">
    <div class="card">
    <strong class="text-navy">block block-6</strong>
    </div>
  </div>
  <div class="block block-6">
    <div class="card">
    <strong class="text-navy">block block-6</strong>
    </div>
  </div>
  <div class="block block-9">
    <div class="card">
    <strong class="text-navy">block block-9</strong>
    </div>
  </div>
  <div class="block block-3">
    <div class="card">
    <strong class="text-navy">block block-3</strong>
    </div>
  </div>
</div>
Source: sass/_blocks.scss, line 432

Section 7.2.4 #Layout.Blocks.Cards
Blocks - Card height

The block layout uses flexbox. So based on your markup, the height of the content inside a block may vary. If you used a card within your blocks, like we have been in the examples, you might notice the height is off based on the content. To fix this, you can add the class cards to the parent block-container. This will give height: 100% to each card inside a block.

Here's a lot of text in a pretty small space. The width of this box is pretty small.

So the heights aren't equal.

<div class="block-container blocks p-2">
  <div class="block block-2">
    <div class="card">
      <p >Here's a lot of text in a pretty small space. The width of this box is pretty small.</p>
    </div>
  </div>
  <div class="block block-10">
    <div class="card">
      <p>So the heights aren't equal.</p>
    </div>
  </div>
</div>

cards class added to block-container

Here's a lot of text in a pretty small space. The width of this box is pretty small.

The heights are equal.

<div class="block-container blocks p-2 cards">
  <div class="block block-2">
    <div class="card">
      <p >Here's a lot of text in a pretty small space. The width of this box is pretty small.</p>
    </div>
  </div>
  <div class="block block-10">
    <div class="card">
      <p>The heights are equal.</p>
    </div>
  </div>
</div>
Source: sass/_blocks.scss, line 515

Section 7.2.5 #Layout.Blocks.Utilities
Blocks - Flex utilities

Block Flex Utilities
Flexbox property width: auto flex-grow: 1 width: 100%
class block--shrink block--fill block--full

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

The utility classes use the BEM syntax.

block
block
block
block
block block--fill
<div class="block-container blocks p-2 tablet-up-2 laptop-up-3 desktop-up-4">
  <div class="block">
    <div class="card">
      <strong class="text-navy">block</strong>
    </div>
  </div>
  <div class="block">
    <div class="card">
      <strong class="text-navy">block</strong>
    </div>
  </div>
  <div class="block">
    <div class="card">
      <strong class="text-navy">block</strong>
    </div>
  </div>
  <div class="block">
    <div class="card">
      <strong class="text-navy">block</strong>
    </div>
  </div>
  <div class="block block--fill">
    <div class="card">
      <strong class="text-navy">block block--fill</strong>
    </div>
  </div>
</div>
Source: sass/_blocks.scss, line 590