This sets the vertical spacing of child components.
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.
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.
❌ <div class="vf-stack">...</div>
✅ <div class="vf-stack vf-stack--400">...</div>
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.
<div class="vf-stack vf-stack--custom" style="--vf-stack-margin--custom: 3em;">
<div class="vf-box vf-box--normal vf-box-theme--primary">...</div>
<div class="vf-box vf-box--normal vf-box-theme--primary">...</div>
<div class="vf-box vf-box--normal vf-box-theme--primary">...</div>
</div>
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
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