EBI-Framework
EBI-Framework copied to clipboard
The EMBL-EBI Visual Framework for websites and services.
This repository and old EBI framework is not supported anymore, please update your websites to use new Visual Framework - https://stable.visual-framework.dev/
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:
- Update your
v1.3
asset references tov1.4
- Update your
- From v1.2:
- Update your
v1.2
asset references tov1.4
- Remove the reference to
foundation.min.css
orfoundation.css
(this is now included inebi-global.css
) -
Remove the HTML markup inside your
div#masthead-black-bar
. This will automatically be inserted byscript.js
. - Bonus: you should also load assets from the EMBL-EBI CDN at ebi.emblstatic.net
- Update your
- From v1.1:
- Follow the update guide from v1.1 to v1.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
- Edit any CSS or JS and build with
npm run scss
andnpm run js
- 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