About the Visual Framework

A toolkit for better life science websites.

Roadmap

Major projects and features planned for the next period of time.

This is a snapshot of work planned in the Visual Framework project milestones. These are in addition to ongoing feature development and support.

If you have a major idea not represented here, discuss it on Slack or raise an issue.

On this page

By end of October 2021

Navigation

With EMBL.org fully live and EBI.ac.uk moving to the VF 2, we have a better understanding of the diversity of deep navigation required.

We plan to revise and mature the VF’s assorted navigation components, including both page-to-page and within the page navigation. A sprint is planned for the week of 19 July.

Showcase VF adoption, usage

As of June, EMBL.org is now the primary EMBL web presence and shows a diversity of VF use cases. This is in addition to the EBI Training website, further the EMBL-EBI website is approved to migrate to the VF 2 throughout 2021. In addition to the COVID-19 Data Portal, the new Science in School website is in the early stages of a custom VF implementation.

We aim to make a “Showcase” on the VF website to assist users in seeing the variety of ways the VF can be used.

Standardise component examples

The past months have brought a renewed focus on the best way to use the VF’s technical tooling. In addition to the guidance and boilerplates, the VF’s UX, design and technical community have been contributing to documentation (such as that for the vf-button and vf-search).

Additionally, we now realise that many VF component variants are actually examples (such as those for vf-hero or vf-table) and we can better help users by making explicit examples in the component library.

By end of January 2022

Improved responsive design tooling and best practice

We have quite a few rough edges on mobile, it’s time to sort them. These go beyond simple “collapse on mobile” and involve more complex questions like “how do filter facets behave?”

Create a training programme for developers

How to get started with the VF common scenarios specific use cases.

Component long tail

There are several low-priority components that still need to be implemented, such as: data tables, definition lists, table of contents.

Explore internal and functional components and patterns

Most of the components and patterns in the VF 2.0 have been designed with the corporate EMBL websites in mind. Among the founding ideas was to have variants based on a two-dimensional axis (internal vs external, and functional vs inspirational). How would we deliver and document these? Is it the correct idea?

No fixed date

Important features and milestones in need of scheduling, typically due to a lack of capacity to deliver.

Code contributions and input are welcome.

Optimising the component library build efficiency

Currently, the component library relies on Fractal, this is helpful in many ways but also limits some options. In principle, we could solely rely on 11ty for our component library but there are performance questions.

contentHub metrics and editing

The contentHub allows us to pull content into any VF-powered page, however we can do more here: how to track where content is used? how to better support editing?

React and Angular components

While the Visual Framework does not require specific tooling, we know two of the places the VF will be used are in React and Angular. We could provide native templates as part of the individual components.

Complete

July 2021

A selection of example pages and boilerplates

There are many ways to implement a "search" page and section. What is the most common and standardizable? What about for a research group? A user's profile page?

Design documentation, alignment: Usage of icons, illustrations

What is the distinction? Can we document when each should be used? We need technical tooling.

Tables tooling and best practice

Tables are broadly used across scientific content and applications. What does a good one look like, and how does it behave? Tooling and foundational guidance.

Earlier in 2021

Create a desktop component library

That is: port the Sketch component library to Figma and update it to match changes.

Legacy browser support

Supporting older browsers (those without CSS grid and custom properties/variables) is a non-trivial task that needs constant monitoring and support.

Introduce a type scale

The VF typography and spacing continues to be refined, however we're still lacking an explicit type scale.

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