Space

Space is the distance between elements. The space settings here should be used in the construction of components not defined in Spark, or in arranging combinations of existing Spark components. These settings are defined as variables.

Information

  • There are five spacing sizes to select from for creating new components or objects (xs, s, m, l, and xl).
  • In the examples below, the green shows padding and orange shows margin.

Inset

Inset space is a consistent indent on all four sides. Incorporate the inset variables on your containers.

The green border shows the extra small inset of 4px.

The green border shows the small inset of 8px.

The green border shows the medium inset of 16px.

The green border shows the large inset of 32px.

The green border shows the extra large inset of 64px.

      
        // SCSS Variables
        $space-inset-xs: 4px 4px 4px 4px;
        $space-inset-s: 8px 8px 8px 8px;
        $space-inset-m: 16px 16px 16px 16px;
        $space-inset-l: 32px 32px 32px 32px;
        $space-inset-xl: 64px 64px 64px 64px;
      
    

Inset Short

Inset short decreases the top and bottom spacing by 50%. Spark Buttons use the $space-inset-short-l value for padding. This reduces the top and bottom padding of the buttons by 50%. This equates to padding of 16px for the top/bottom and 32px for the right/left.

Example:

The green border shows the extra small inset short of 2px 4px 2px 4px.

The green border shows the small inset short of 4px 8px 4px 8px.

The green border shows the medium inset short of 8px 16px 8px 16px.

The green border shows the large inset short of 16px 32px 16px 32px.

The green border shows the extra large inset short of 32px 64px 32px 64px.

      
        // SCSS Variables
        $space-inset-short-xs: 2px 4px 2px 4px;
        $space-inset-short-s: 4px 8px 4px 8px;
        $space-inset-short-m: 8px 16px 8px 16px;
        $space-inset-short-l: 16px 32px 16px 32px;
        $space-inset-short-xl: 32px 64px 32px 64px;
      
    

Inset Tall

Inset tall increases the top and bottom padding by 50%.

The green border shows the extra small inset tall of 6px 4px 6px 4px.

The green border shows the small inset tall of 12px 8px 12px 8px.

The green border shows the medium inset tall of 24px 16px 24px 16px.

The green border shows the large inset tall of 48px 32px 48px 32px.

The green border shows the extra large inset tall of 96px 64px 96px 64px.

      
        // SCSS Variables
        $space-inset-tall-xs: 6px 4px 6px 4px;
        $space-inset-tall-s: 12px 8px 12px 8px;
        $space-inset-tall-m: 24px 16px 24px 16px;
        $space-inset-tall-l: 48px 32px 48px 32px;
        $space-inset-tall-xl: 96px 64px 96px 64px;
      
    

Stack

Incorporate the stack variables to add a consistent margin bottom to items.

The orange shows the extra small stack spacing of 4px.

The orange shows the small stack spacing of 8px.

The orange shows the medium stack spacing of 16px.

The orange shows the large stack spacing of 32px.

The orange shows the extra large stack spacing of 64px.

      
        // SCSS Variables
        $space-stack-xs: 0 0 4px 0;
        $space-stack-s: 0 0 8px 0;
        $space-stack-m: 0 0 16px 0;
        $space-stack-l: 0 0 32px 0;
        $space-stack-xl: 0 0 64px 0;
      
    

Inline

Inline items should be spaced out consistently with right margin directional flow. When there is a component that involves a group of inline items there should be additional CSS written in that component on the :last-child CSS pseudo-class to remove the right margin on the last item in the group. Wrapping inline items should make use of the Stack space settings.

Inline items with xs spacing.

CatsDogsBirds

Inline items with s spacing.

CatsDogsBirds

Inline items with m spacing.

CatsDogsBirds

Inline items with l spacing.

CatsDogsBirds

Inline items with xl spacing.

CatsDogsBirds

Inline items with no right margin on the last item.

FishFrogsTurtles
      
        // SCSS Variables
        $space-xs: 4px;
        $space-s: 8px;
        $space-m: 16px;
        $space-l: 32px;
        $space-xl: 64px;
      
    

Misc Sizes

These spacing sizes are supplemental sizes to the XS-XL sizes.

The orange shows a margin right using the the misc "a" spacing of 24px.

CatsDogsBirds

The orange shows a margin right using the misc "b" spacing of 40px.

CatsDogsBirds

The orange shows a margin right using the misc "c" spacing of 48px.

CatsDogsBirds

The orange shows a margin right using the misc "d" spacing of 80px.

CatsDogsBirds
      
        // SCSS Variables
        $sprk-space-misc-a: 24px;
        $sprk-space-misc-b: 40px;
        $sprk-space-misc-c: 48px;
        $sprk-space-misc-d: 80px;