Component versioning interoperability

Each Visual Framework component carries its own semantic versioning.

While it may seem odd at first, not all components are on the same major version. You'll find that you might use vf-button@1.2.3 with vf-card@2.2.2.

We recommend using the latest version of each component, you can update your components with yarn upgrade-interactive --latest.

Here's what the usage of semantic versioning means for the Visual Framework:

Think of it like your computer's operating system, just because you update Windows 10 doesn't always mean your Firefox version needs to change.

Where to get the latest version

Versions of vf-core and components are published to npm; see the Visual Framework building guide.

What does this mean for component support?

Components should specify if they only support specific versions of vf-core or require other specific versions of patterns.

Other notes and tips on components:

Release notes

Release notes are published to the Updates blog and include notes from the associated CHANGELOG.md files in the release.

Where's version 1 of vf-core?

Where's version 1.x, you ask? That's the EMBL-EBI specific Visual Framework from where this concept originated, and evolved.

Test releases

Testing releases will be identified in their tag, a la: v2.0-alpha.1, where -alpha.1 is the tag. -alpha, -beta and -rc are tag suffixes.


See also


In this section

Browser support

We focus support on major browsers in use by 95%+ of our audiences, and we ensure the site is navigable and usable by the remaining 5%.

About components and patterns

Think of components as lego blocks you can use to build the look and content of your sites. Think of patterns as assembled packages of behaviour.

Creating new components

This codebase includes a folder and file creation tool.

Sass and CSS guidelines

The Visual Framework delivers much of its value through Sass.

Discussions, exchanges and help

Regardless of where, we welcome contribution, ideas and constructive criticism.

Image handling best practice

It's best to not let CSS do the image cropping.

JavaScript guidelines

We use "just enough" JavaScript in the Visual Framework.

Using British and American english if code and documentation

For the language and spelling of documentation and code.

User base of the Visual Framework code

This project is designed to be used by organisations with experienced developers delivery life science websites.

Component versioning interoperability

Each Visual Framework component carries its own semantic versioning.

Content guidelines

Unique to the web are certain types of content that support user interaction.

Find an issue on this page? Propose a change or discuss it.