About the Visual Framework

A toolkit for better life science websites.

Tailored for life science websites.

The Visual Framework is designed with robust technical flexibility and goes beyond guidance for tables, graphs, data-heavy typography and focuses on bringing sane defaults.

The tooling implements its CSS and JS in a way that will not interfere with your existing components that use Bootstrap, Angular, or something else.

Above all, the VF is designed with the needs of life science websites and services.

Principles

Clarity through a default and look suitable to life science websites. It builds atop 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.

Flexibility to be fully theme-able, replaceable and adaptable to any aesthetic or functional needs.

Compatibility as 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:

Componentisation to 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 or components.

We ensure we remain true to these through a consultation process.

Get started

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