Spacing

The spacing scale consists of both floating and static values. The fluid ones, calculates a current vmin value based on current screen size, from screen size 30rem up to 90rem, to create better adaptation to different devices automatically. In the code, the values are translated into the unit rem where 1rem is equal to 16px, set at the root.

  • Space xxlarge

    Fluid value scales between 144px and 192px.

    CSS variable
    var(--gh-space-xxlarge)

  • Space xlarge

    Fluid value scales between 96px and 128px.

    CSS variable
    var(--gh-space-xlarge)

  • Space large

    Fluid value scales between 48px and 64px.

    CSS variable
    var(--gh-space-large)

  • Space medium

    Fluid value scales between 32px and 48px.

    CSS variable
    var(--gh-space-medium)

  • Space small

    Static value is 24px.

    CSS variable
    var(--gh-space-small)

  • Space xsmall

    Static value is 16px.

    CSS variable
    var(--gh-space-xsmall)

  • Space xxsmall

    Static value is 12px.

    CSS variable
    var(--gh-space-xxsmall)

  • Space xxxsmall

    Static value is 8px.

    CSS variable
    var(--gh-space-xxxsmall)