Stack component
About
This can be used to set the flow of child components.
Usage
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.
Note: 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.
Variants
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.
| variant name | description |
|---|---|
| sm | gives the vertical rhythm equal spacing of 1rem
|
| md | gives the vertical rhythm equal spacing of 1.5rem
|
| lg | gives the vertical rhythm equal spacing of 2rem
|
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>
Install
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
Sass/CSS
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