The EBI Visual Framework v1.4

The 1.x version of the Framework is at its end of life. You should only use 1.4 project if you have an existing 1.x project. For new project you should use 2.0, which can be used along side 1.x code.

What's new in v1.4?

See a full overview of changes in v1.4 in issue 162.

Upgrading?

Your current version	Effort required	What you'll get
v1.1	1-2 hours	Better performance, a more functional design
v1.2	minutes	Better performance, more design flexibility
v1.3	minutes	Alignment with the VF 2.0

Details on upgrading

• From v1.3:
  1. Update your v1.3 asset references to v1.4
• From v1.2:
  1. Update your v1.2 asset references to v1.4
  2. Remove the reference to foundation.min.css or foundation.css (this is now included in ebi-global.css)
  3. Remove the HTML markup inside your div#masthead-black-bar. This will automatically be inserted by script.js.
  4. Bonus: you should also load assets from the EMBL-EBI CDN at ebi.emblstatic.net
• From v1.1:
  1. Follow the update guide from v1.1 to v1.2
  2. Then follow the steps above for updating from v1.2

About the EBI Visual Framework

This project helps ensure brand consistency and the easy use of modern web design best practices -- such as responsive design, iterative maintenance cycles, and UX-tested patterns.

Outreach

Not all developers are in the same place, so we plan make use of multiple channels:

• Github: We know many developers already live in the Github ecosystem, so go ahead and open an issue with your question/comment/concern.
• Web Guidelines Committee: overseeing the tooling for the look, feel and function of EMBL-EBI websites

Deploying with npm

Releases are available via npm at https://www.npmjs.com/package/ebi-framework

Developing locally

1. Edit any CSS or JS and build with npm run scss and npm run js
2. Serve index.html

• npm install -g browser-sync
• browser-sync start --files index.html --server OR:
• browser-sync start --files local-dev.html --server
  • https://www.browsersync.io/docs/command-line