Section 7.1 #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
  • Blocks have responsive modifiers to override specific 'block-{ number }' columns; i.e., Four block children in a block-container with tablet-up-2 applied will appear as two columns when viewed in the tablet viewport.

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.
  • Using block-container and adding block children will give you an evenly distributed block grid.
  • block-container has responsive modifiers can be placed on the block-{number} level item as well. The block-{number} will always reflect the mobile, smallest breakpoint, value.

12 Columns

Container: block-container blocks p-2

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
block block-7
block block-5
block block-8
block block-4
block block-9
block block-3
block block-10
block block-2
block block-11
block block-1
block block-12

Block Spacing

  • Spacing is based on Platform UI spacing with the following changes in behaviour; 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 apply the horizontal axis padding to the block children within the container.

Standard Grid

Container: block-container blocks p-2

block block-3
block block-3
block block-3
block block-3

Responsive Grid with Flex

Container: block-container blocks p-2 tablet-up-3 laptop-up-4

block
block
block
block
block
block
block block-fill

Container: block-container blocks p-2 tablet-up-3 laptop-up-4

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

Block grid breakpoints

Spacing in Platform UI is based on rem values with the exception of breakpoints.

  • Attaching a resposive modifier to 'block-container' uses individual block elements and will affect the number of columns show in a particular viewport.
  • Attaching a resposive modifier to block block-{ number } will affect the number of columns show in a particular viewport as above. Their approaches cannot be combined. You can either modify the block-container with block children, or the block level block block-{ number }.

Responsive Block Container

Container: block-container blocks p-2 laptop-up-3 desktop-up-4

block
block
block
block

Responsive Blocks

Container: block-container blocks p-2

block block-8 laptop-up-3 desktop-up-4
block block-4 laptop-up-3 desktop-up-4
block block-4 laptop-up-3 desktop-up-4
block block-8 laptop-up-3 desktop-up-4
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-
Source: sass/_blocks.scss, line 6