JavaScript guidelines

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

The Visual Framework isn't intended as a general-purpose JavaScript solution, however we know it is helpful that a minimal amount of basic functionality is supported.

All components are provided as functional solutions, so where JavaScript is required (such as tabs) there is a fully functional set of JavaScript bundled and available in:

An opt-in philosophy

But we know many users would prefer to use their own JavaScript tooling for all -- or some -- components on a case-by-case basis.

Why? As Adobe's Spectrum CSS puts it:

We have found that JavaScript is where a framework or library quickly becomes opinionated and stops being easy to use with or across other frameworks. To avoid this problem, Spectrum CSS avoids implementation details that require JavaScript.

Likewise we don't require the use of the Visual Framework JavaScript, instead the behviour can be optionally invoke per-component with JavaScript data selectors.

So to activate the Visual Framework JavaScript for vf-tabs we add data-vf-js-tabs and data-vf-js-tabs-content, like so:

<div class="vf-tabs">
  <ul class="vf-tabs__list" data-vf-js-tabs>
    <li class="vf-tabs__item">
      <a class="vf-tabs__link" href="#vf-tabs__section--10">Second tab set</a>
    <li class="vf-tabs__item">
      <a class="vf-tabs__link" href="#vf-tabs__section--11">Tab</a>

<div class="vf-tabs-content" data-vf-js-tabs-content>
  <section class="vf-tabs__section" id="vf-tabs__section--10">
    <h2>Section 10</h2>
  <section class="vf-tabs__section" id="vf-tabs__section--11">
    <h2>Section 11</h2>

Leaving these data selectors off will cause vf-tabs.js to simply ignore the tabs.


The name of your selector should follow your component's name, plus an additional -js- prefix.


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.