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.

Is VF Core just a Bootstrap with a different theme?

No. VF Core is an architecture to build extensible components that contain CSS/Sass, JS, Nunjucks templates, and image assets. You could use the VF Core to make a Bootstrap-style framework.

I’m a small research team, should I use VF Core?

Yes, utilise the Visual Framework system with one of the above listed approaches.

Does it have a specific look and feel?

No. It has a default look out of the box, but it is fully customisable by altering the design tokens.

Is it really ready for use today?


Shouldn’t I just use Bootstrap or Solution X?

No, but yes … do both, if you need to.

This question involve the Visual Framework's architecture which addresses common issues with code sharing and compatibility with life science websites. This project allows you to share Visual Framework components without disrupting your freedom to choose Bootstrap, Foundation, jQuery, React or another framework for the rest of your site.

What components are available?

Many common component for tabs, boxes, links and so on are available in the component library.


Have a problem? See the Troubleshooting guide or chat the community on Slack.

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