Homed here are the various assets that make the EBI Visual Framework (CSS, JS, and a few images and build scripts).
npm install ebi-framework
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.
See a full overview of changes in v1.4 in issue 162.
| 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 |
- 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
1. Remove the reference to foundation.min.css or foundation.css (this is now included in ebi-global.css)
1. Remove the HTML markup inside your div#masthead-black-bar. This will automatically be inserted by script.js.
1. 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
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.
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
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