Home » Resources » Ratio Driven Design »

Blocks

Self-contained chunks of content, inheriting basic global styles and logic to show proximity.

Basic use

Uses the var(--border-soft) custom property, by default, for just enough distinction from surroundings.

Standard

A block will fill available horizontal space, unless restricted within a surrounding layout.

Basic example

This is a block.

Nested example

This is another block.

This is a block within a block.

Examples within a grid

  • This is a block, in a grid.

  • This is a block, in a grid.

  • This is a block, in a grid.

  • This is a block, in a grid.

  • This is a block, in a grid.

CSS (SASS)

A var(--block-padding) custom property uses units from our modular scale and is increased at certain breakpoints.

The .block class can be added to any HTML block element.

A .container class, on an HTML block child element then controls the padding inside the block:

html {
    --block-padding: var(--size-1) var(--size-base);

    @media only screen and (min-width: 400px) {
      --block-padding: var(--size-1) var(--size-1);
    }

    @media only screen and (min-width: 900px) {
      --block-padding: var(--size-2) var(--size-2);
    }
  }

  .block {
    background: var(--color-background-standard);
    border: var(--border-soft);
    display: block;
    overflow: hidden;

    > .container {
      padding: var(--block-padding);
    }
  }

Optional adjustments

For tweaking spacing inside a block.

Natural internal spacing

...

This is a block.

CSS (SASS)

The .block--tight-spacing class can be added, to trigger this limited spacing:

.block--tight-spacing {
    > .container {
      padding: var(--size-1);
    }
  }

Base internal spacing

...

This is a block.

CSS (SASS)

The .block--tight-spacing class can be added, to trigger this limited spacing:

.block--tight-spacing {
    > .container {
      padding: var(--size-base);
    }
  }

Tight internal spacing

...

This is a block.

CSS (SASS)

The .block--tight-spacing class can be added, to trigger this limited spacing:

.block--tight-spacing {
    > .container {
      padding: var(--size-small);
    }
  }

Collapsed internal spacing

...

This is a block.

CSS (SASS)

The .block--no-spacing class can be added, to trigger this limited spacing:

.block--no-spacing {
    > .container {
      padding: 0;
    }
  }