This release of the prebuilt CSS and JS includes two major new versions of the vf-hero
and vf-card
components along with other optimisations and bug fixes. Read on for details.
This releases 2.4.0 to the CDN
https://assets.emblstatic.net/vf/v2.4.0/css/styles.css
https://assets.emblstatic.net/vf/v2.4.0/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.
Major refinements and breaking changes
vf-hero 2.0.0 npm git diff

- introduces new naming convention for design variants
--inverted
: that inverts the foreground and background colours--flush
: pulls thevf-hero__content
to the bottom of thevf-hero
--offset
: pulls thevf-hero__content
below thevf-hero
container--centered
: centres thevf-hero__content
component--block
: makes thevf-hero__content
bleed all the way ot the left of the page--striped
: inverts thevf-hero__text
to that of what's set invf-hero__content
--800
,--1200
, and--1600
spacing variants
- replaces
vf-hero-theme--
withvf-hero--
for theprimary
,secondary
, andtertiary
variants - removes the 'Mortal Kombat' naming convention
- reduces visible options of the new
vf-hero
- older versions degrade gracefully to the default variant
- deprecates the
--intense
variant
Discussion and PR See the component
vf-card 2.3.0 npm git diff

- adds new
--bordered
and--striped
design variants - added
vf-stack
to thevf-card__content
element to determine spacing - allows for the lack of
vf-stack
for older components - started the deprecation of the 'Mortal Kombat' variants, initially by hiding them in vf-core
- introduced
newTheme
so the 'Mortal Kombat' variants can live side-by-side with news versions for now- the
newTheme
moves us back to the 'primary' being the embl green, the secondary the embl blue, etc - we now remove the
-theme
part of the css class moving forward as it's cleaner, easier to read, and states the same thing without it
- the
- created theme variants of the new design variants (these are hidden, and should not be used)
Discussion and PR See the component
vf-frctl-theme deprecated git diff

When developing directly in ./tools/vf-core
running gulp vf-dev
will start the Fractal component library interface. Previously this was also the public-facing website for the Visual Framework, however we now use this 11ty-based website.
So the vf-frctl-theme
had become an ongoing technical debt without much upside. It has now been deprecated and running gulp vf-dev
will use Fractal's default Mandlebrot theme.
Minor features
vf-sass-config 2.3.0 npm git diff
- introduces a
space
Sass function to save the keystrokes- instead of typing
map-get($vf-spacing-map, vf-spacing--400)
you can writespacing(400)
for the same result - https://github.com/visual-framework/vf-core/pull/1258
- instead of typing
- I've added this terse naming of the function for
set-color
andset-ui-color
to be something likecolor(green)
instead ofset-color(vf-color--green)
. The old way still works - fixes import order of
vf-global-custom-properties.scss
- https://github.com/visual-framework/vf-core/pull/1263
vf-show-more 1.1.0 npm git diff
- drops dynamic css stylesheet in favour of a specific
.vf-show-more__item-overflow
class - support more than one vf-show-more on a page
- https://github.com/visual-framework/vf-core/issues/1243
vf-design-tokens 3.1.0 npm git diff
- adds
--1600
(4rem
) spacing token
vf-summary 1.4.0 npm git diff
- makes the title of summary a little larger
- reduces margin a little on news
- removes the padding from events
vf-box 2.3.0 npm git diff
- updates font size for title/heading
- makes sure the text is black inside the
--easy
variant
Bug fixes
vf-u-fullbleed 1.2.2 npm git diff
- adds fallbacks for CSS that relied on CSS custom properties
embl-breadcrumbs-lookup 1.0.2 npm git diff
- adds aria role detection of current page
vf-breadcrumbs 2.0.1 npm git diff
- removes
>
from related crumbs
vf-sass-config 2.3.1 npm git diff
- fixes bug in --page-grid-gap printing Sass function in CSS
vf-hero 2.0.1 npm git diff
- adds the option to add an url to
vf-hero__heading
with nunjucks/yaml- gives the element a classname
vf-hero 2.0.2 npm git diff
- adds a width of
max-content
to the__content
part of the component so short titles don't look silly
vf-card 2.3.1 npm git diff
- issue with margin-bottom still in place when using
vf-stack
withvf-card__content