Following the 14 October 2021 release, this release continues optimisations to how
vf-stack distributes vertical spacing.
vf-stack now more broadly adopted, spacing now "just works" in the vast majority of cases.
vf-stack now moves to version
3.0.0 and drops the
!important rules allowing for utility-class based overrides where required.
Here's one example of how
vf-stack now does better spacing when pairing two containers with
vf-u-fullbleed backgrounds; before and after:
We've also introduced a new
vf-tabs feature for linking to a page and activating a specific tab.
Read below for details on the changes in each component.
Oh, and you'll also now see an overhaul to the component previews.
As always, you can join the conversation on Slack.
This releases 2.5.3 to the CDN
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, you can find a guide here.
- Support activation of specific vf-tabs on page load
vf-stackmore consistently adopted we remove
vf-u-fullbleedoverride. Some spacing regressions are possible.
- Sets a null vf-stack at the lowest CSS specificity.
- Drops custom margin-bottom, you should rely on vf-stack.
vf-card-container 3.2.1 npm git diff
- Uses vf-stack for spacing to apply to elements immediately before or after vf-card-container.
- Removes spacing between fullbleed card containers and fullbleed items (footers, heroes)
- Update sass to 1.43.2
- Use vf-stack custom property for card text spacing.
vf-form__select 3.0.0 npm git diff
- Allow margins to be handled by
- Drop use of vf-stack-margin--custom.
vf-sass-config 2.7.0 npm git diff
@mixin set-typemargin-top now inherits any applicable vf-stack margin.