Spacing and sizing

Spacing 0

Value: 0

Sass variable: $vf-spacing--0

CSS custom property: --vf-spacing--0

Spacing 50

Value: .125rem

Sass variable: $vf-spacing--50

Sass function: space(50)

CSS custom property: --vf-spacing--50

Spacing 100

Value: .25rem

Sass variable: $vf-spacing--100

Sass function: space(100)

CSS custom property: --vf-spacing--100

Spacing 200

Value: .5rem

Sass variable: $vf-spacing--200

Sass function: space(200)

CSS custom property: --vf-spacing--200

Spacing 400

Value: 1rem

Sass variable: $vf-spacing--400

Sass function: space(400)

CSS custom property: --vf-spacing--400

Spacing 500

Value: 1.25rem

Sass variable: $vf-spacing--500

Sass function: space(500)

CSS custom property: --vf-spacing--500

Spacing 600

Value: 1.5rem

Sass variable: $vf-spacing--600

Sass function: space(600)

CSS custom property: --vf-spacing--600

Spacing 800

Value: 2rem

Sass variable: $vf-spacing--800

Sass function: space(800)

CSS custom property: --vf-spacing--800

Spacing 1200

Value: 3rem

Sass variable: $vf-spacing--1200

Sass function: space(1200)

CSS custom property: --vf-spacing--1200

Spacing 1600

Value: 4rem

Sass variable: $vf-spacing--1600

Sass function: space(1600)

CSS custom property: --vf-spacing--1600

Extra Small Breakpoint

Value: 360px

Sass variable: $vf-breakpoint--xs

CSS custom property: --vf-breakpoint--xs

Small Breakpoint

Value: 600px

Sass variable: $vf-breakpoint--sm

CSS custom property: --vf-breakpoint--sm

Regular Breakpoint

Value: 768px

Sass variable: $vf-breakpoint--md

CSS custom property: --vf-breakpoint--md

Large Breakpoint

Value: 1024px

Sass variable: $vf-breakpoint--lg

CSS custom property: --vf-breakpoint--lg

Extra Large Breakpoint

Value: 1280px

Sass variable: $vf-breakpoint--xl

CSS custom property: --vf-breakpoint--xl