Visual Framework
Visual Framework
A toolkit for better life science websites.
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.
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.
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.
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.
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?”
How to get started with the VF common scenarios specific use cases.
There are several low-priority components that still need to be implemented, such as: data tables, definition lists, table of contents.
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?
Important features and milestones in need of scheduling, typically due to a lack of capacity to deliver.
Code contributions and input are welcome.
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.
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?
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.
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?
What is the distinction? Can we document when each should be used? We need technical tooling.
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.
That is: port the Sketch component library to Figma and update it to match changes.
Supporting older browsers (those without CSS grid and custom properties/variables) is a non-trivial task that needs constant monitoring and support.
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.