The .u-sv set of utility classes adjusts the space after an element in positive or negative multiples of the baseline grid unit. A baseline grid unit is equivalent to .5rem.
For example, to pull the next element 1rem closer, apply .u-sv-2. To push it .5rem away from the current element, apply u-sv1.
Throughout Vanilla, margin is only applied to the bottom of an element. If elements beneath an element using this utility have a top margin applied, there is a risk of margin collapse. For predictable results, use single margin direction.
These classes should be used sparingly, and exist to give designers greater flexibility when it comes to spacing and alignment.
| Variable | Effect |
|---|---|
.u-sv-3 |
Decreases space by 3 baseline grid units |
.u-sv-2 |
Decreases space by 2 baseline grid units |
.u-sv-1 |
Decreases space by 1 baseline grid unit |
.u-sv1 |
Increases space by 1 baseline grid unit |
.u-sv2 |
Increases space by 2 baseline grid units |
.u-sv3 |
Increases space by 3 baseline grid units |
To import just this utility into your project, copy the snippet below and include it in your main Sass file.
// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;
@include vf-u-vertical-spacing;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.