Roadmap for v1.4

[khawkins98]

As the VF 2.0 matures, we expect most new projects will make use of its new architecture and look. However, there will be many existing projects that are unable to upgrade and will feel pressure to visually align with the newer look.

A v1.4 release would be a way for services to opt into visual changes like the typeface (Plex) and perhaps some of the other EMBL/EMBL-EBI colour changes, without needing to rearchitect their projects.

High-level features

• [x] new EMBL and EBI Plex typeface
• [x] thematic changes to header and footer
• [x] compatibility optimisations for posting will with vf2.0 CSS that may be co-loaded into a project
• [x] migration guide
• [x] updates to Style Lab and notes on 1.x EOL

Todo

• [x] circulate plan with Web Guidelines Committee
• [x] create 1.4 Dev branch
• [x] add example migration
  • 1.3 example: http://wwwdev.ebi.ac.uk/style-lab/websites/sample-site-v1.3/boilerplate/blank.html
  • 1.4 example: https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.4/index.html

Draft email to WGC

As many are aware there is a new major release of the VF 2.0 available (https://visual-framework.github.io/vf-core/) that is being used by new services (https://www.covid19dataportal.org/) and revised sections of the www.EBI.ac.uk website (https://www.ebi.ac.uk/about/our-impact/covid-19).

Not all sites and services will have the development capacity to update from 1.x to 2.0, so we're planning a v1.4 of the EBI VF to allow a more seamless user journey between EBI web services running 1.x and 2.0. The 1.4 release is designed as an easy change for existing sites and services while buying time or preventing the need to update 2.0 in many cases.

v1.4 is non-breaking change that does not require HTML updates.

v1.4 creates a visual sympathy between the 1.x architecture and 2.0 architecture and look. Here is an example boilerplate between 1.3 and 1.4:

• 1.3 example: http://wwwdev.ebi.ac.uk/style-lab/websites/sample-site-v1.3/boilerplate/blank.html
• 1.4 example: https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.4/index.html

To test an upgrade you only need to replace the 1.3 references with 1.4:

• https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.4/css/ebi-global.css
• https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.4/js/script.js
• https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.4/js/foundationExtendEBI.js
• note: we have not yet release 1.4 on npm

If you have a service running 1.2 or 1.3 we ask that you try changing the CSS and JS to this URL and report any concern, comment or idea by the end of the year.

[khawkins98]

You can get a feel for 1.4 in the wild, it's been applied to the dev Style Lab: http://wwwdev.ebi.ac.uk/style-lab/

You can see a comparison below. By design, the changes are quite minor and non-disruptive, but they will help users that frequent between 2.0 and 1.4 sites.

1.4

1.3