Recent releases, 2.4.0 CSS, JS rollup release

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 the vf-hero__content to the bottom of the vf-hero
  • --offset: pulls the vf-hero__content below the vf-hero container
  • --centered: centres the vf-hero__content component
  • --block: makes the vf-hero__content bleed all the way ot the left of the page
  • --striped: inverts the vf-hero__text to that of what's set in vf-hero__content
  • --800, --1200, and --1600 spacing variants
• replaces vf-hero-theme-- with vf-hero-- for the primary, secondary, and tertiary 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 the vf-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
• 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.

Discussion and PR

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 write spacing(400) for the same result
  • https://github.com/visual-framework/vf-core/pull/1258
• I've added this terse naming of the function for set-color and set-ui-color to be something like color(green) instead of set-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 with vf-card__content