The Visual Framework beta

A front-end toolkit to quickly 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 won't interfere with your existing components that use Bootstrap, Angular, or something else.

Guide: Building a VF-powered system

The when and how to making a project powered with Visual Framework components. See the building guide.

Tailored for life science websites

The Visual Framework address three major needs:

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

  2. 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: - Nope: .button {} or button {} or div.button {} - Like this .vf-button {}

JavaScript: Use ours or bring your own

We've included only a minimal amount of 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.

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

FAQ

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, Nunjuck 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?

Stable for your non-production development. We're in a beta phase and things are still subject to change, but there should be few breaking changes and we'll offer guidance on updating between betas.

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 webistes. This projecft 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 as components from vf-core.

Help!

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


I have an idea or concern!

There are a few ways that we discuss and track ideas:

  • ⁉ General: Chat for general ideas and discussion.
  • ⚙️ Technical: GitHub issues here for implementing deeply technical and specific issues, like the Sass build process, browser bugs. Also see the Troubleshooting guide.
  • 🏢 E-mail: if you have a sweeping Big Idea™️, e-mail Ken Hawkins ken.hawkins@embl.de.
View the Visual Framework on GitHub