About the Visual Framework

A front-end toolkit to quickly and collaboratively build better life science websites.

The Visual Framework (VF) is designed with the needs of life science websites and services. It goes beyond guidance for tables, graphs, data-heavy typography and focuses on being sane defaults and implements its CSS in a way that will not interfere with your existing components that use Bootstrap, Angular, or something else.

Tailored for life science websites.

The Visual Framework address three major needs:

Clarity
the VF is highly customisable, but out of the box it has a highly usable look that builds in solid UX principles to increase comprehension and decrease cognitive load. Just because the scientific material is challenging, it doesn't mean using the website needs to be.
Compatibility
the VF won't break your other framework's CSS or JS, so bring Bootstrap, Foundation, React or Angular. With the VF components (and brand design) can be shared between sites without cross-contaminating other functionality. We achieve this by a CSS Modules-style approach:

CSS: styling on HTML elements and only use namespaced classes, that is:

Not this: .button {} or button {} or div.button {}
Like this: .vf-button {}

JavaScript: Use ours or bring your own

We include only minimal JS in components and it's fully optional (just remove the JavaScript selectors). If you'd rather use Angular or Bootstrap for your tabs, the Visual Framework won't get in the way, just remove data-vf-js-tabs from your markup.

Componentisation
Use only the portions you need.

Use vf-core to build your CSS, JS dynamically based on the components you need, or bring your own build system.

Principles

Not lock you into a particular brand look and feel
Be useful to many organisations
Be mindful of constraints and use cases common for life science content and data
Be compatible with a variety of frontend solutions
Be modular and extensible

We achieve this through a consultation process.