Stack component


About

This sets the vertical spacing of child components.

Usage

Most vf-core components come without any margin spacing to avoid adding margins where not needed. Instead vertical spacing is controlled by vf-stack.

Where vertical spacing is required withing a component, the vf-stack class name to existing containers (like vf-hero) or containers you create yourself in your codebase.

$3

We use CSS custom properties to control this vertical rhythm. For browsers that do not support CSS custom properties (IE 11) we provide a default value of 1rem so that child components get some spacing. This value is overridden by browsers that understand CSS custom properties.

| variant name | description |
| ------------ | -------------------------------------------------- |
| 200 | gives the vertical rhythm equal spacing of .5rem |
| 400 | gives the vertical rhythm equal spacing of 1rem |
| 500 | gives the vertical rhythm equal spacing of 1.25rem |
| 600 | gives the vertical rhythm equal spacing of 1.5rem |
| 800 | gives the vertical rhythm equal spacing of 2rem |
| 1200 | gives the vertical rhythm equal spacing of 3rem |
| 1600 | gives the vertical rhythm equal spacing of 4rem |

Even though the vf-stack layout has a default spacing design token applied as a CSS custom property fallback it is good practice in the system to declare the vf-stack spacing class name in your projects.

❌

✅

As we are using CSS custom properties we can also use a custom value by creating the custom property --vf-stack-margin--custom either in your stylesheet, or in your HTML.

``


This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-stack with this command.

`
$ yarn add --dev @visual-framework/vf-stack
`

$3

If your component uses Sass:

The source files included are written in Sass (scss) You can simply point your sass include-path at your node_modules directory and import it like this.

`
@import "@visual-framework/vf-stack/index.scss";
`

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter`

Help

- Read the Visual Framework troubleshooting
- Open a ticket
- Chat on Slack