Following the 14 October 2021 release, this release continues optimisations to how vf-stack distributes vertical spacing.

With 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.

This releases 2.5.3 to the CDN

https://assets.emblstatic.net/vf/v2.5.3/css/styles.css
https://assets.emblstatic.net/vf/v2.5.3/scripts/scripts.js

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.

Features

vf-tabs 2.1.0 npm git diff

• Support activation of specific vf-tabs on page load #vf-tabs__section=tab_id
• Exposes vfTabsSwitch function
• https://github.com/visual-framework/vf-core/issues/1700

vf-stack 3.0.0 npm git diff

• With vf-stack more consistently adopted we remove !important and vf-u-fullbleed override. Some spacing regressions are possible.
• Sets a null vf-stack at the lowest CSS specificity.
• https://github.com/visual-framework/vf-core/pull/1698

Refinements

embl-grid 2.2.0 npm git diff

• Drops custom margin-bottom, you should rely on vf-stack.
• https://github.com/visual-framework/vf-core/pull/1698

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)
• https://github.com/visual-framework/vf-core/pull/1698

vf-core 2.2.33 npm git diff

• Update sass to 1.43.2
• https://github.com/visual-framework/vf-core/pull/1677

vf-card 2.6.2 npm git diff

• Use vf-stack custom property for card text spacing.

vf-form__select 3.0.0 npm git diff

• Allow margins to be handled by set-type mixin.
• https://github.com/visual-framework/vf-core/pull/1698

vf-hero 3.3.2 npm git diff

• Drop use of vf-stack-margin--custom.
• https://github.com/visual-framework/vf-core/pull/1698

vf-sass-config 2.7.0 npm git diff

• @mixin set-type margin-top now inherits any applicable vf-stack margin.
• https://github.com/visual-framework/vf-core/pull/1698