This can be used to set the flow of child components.
Some (and soon all)
vf-core components will come without any margin spacing (this is to avoid adding margins where it is not needed).
You can add the
vf-stack class name to existing containers (like
vf-content) or containers you create yourself in your codebase.
vf-grid (1.0.0) and
embl-grid (2.0.1) now automaticaly add gaps to their child elements as needed. So you should not use
vf-stack alongside these.
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 overriden by browsers that understand CSS custom properties.
|sm||gives the vertical rhythm equal spacing of
|md||gives the vertical rhythm equal spacing of
|lg||gives the vertical rhythm equal spacing of
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>
$ 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.