Building a site

How to make a project with Visual Framework components.

Components: 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

Also in this section

More from the Building a site 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%.

Components are part of 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.

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.