User base of the Visual Framework code

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

The Visual Framework core ('vf-core') is not intended for direct consumption into websites, rather it's a component library that should be installed as an npm and Sass dependency to build design systems.

Common needs

For all supported audiences, we work to address shared needs:

  1. Reusable, structured CSS and JS
  2. CSS and JS that runs with and alongside other major tools (Foundation, Bootstrap and from the JS side Angular, React)
  3. A component library
  4. Sane defaults for new websites
  5. Make a "look and feel" more consistent
  6. Provide versioned upgrades
  7. Easily add your own patterns, tweak existing patterns
  8. No fixed look (doesn't have to look like any specific organisation, such as EMBL)

Audience types

Our target audience sits in three layers:

  1. Maintainers of design systems for life science websites
    • needs:
      • create a design system that utilises the vf-core
      • add a vf-core component to an existing vf-core compatible system
    • primary interface:
      • npm
      • online docs
  2. Lower-level developers
    • needs: build a design system for orgs that work with life science info
    • primary interface:
      • docs
      • code
      • command line utils
  3. Those curious/learning/evaluating the Visual Framework

What's not above: people building a site using generic VF-core CSS, JS and HTML components. That's currently not a use-case we encourage or see the need for beyond as a demonstrative design system.


In this section

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%.

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.

This codebase includes a folder and file creation tool.

The Visual Framework delivers much of its value through Sass.

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

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

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

For the language and spelling of documentation and code.

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

Each Visual Framework component carries its own semantic versioning.

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

Users with a visual, motor or cognitive impairment are far from rare.

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