Visual Framework
How to make a project with Visual Framework components.
Support for using the EMBL-EBI header and footer from the EMBL-EBI VF 1.3.
This component provides the minimum amount of legacy CSS to make the header and footer work while avoiding conflicts with other 2.0 styles.
//ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/script.js to load the HTML for the header.data-protection-message-disable="true"
ebi-header-footer--footer template.There is no default. Use the variant templates to load the portions you need.
<!-- embl-ebi global footer -->
<link rel="import" href="https://www.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=106902&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader>
<!--
When using legacy EBI 1.x JS, we disable the old cookie banner.
https://stable.visual-framework.dev/components/ebi-header-footer/
-->
<div class="vf-u-display-none" data-protection-message-disable="true"></div>
<!-- Tell the VF 1.4 not to display a data protection banner. -->
<!-- You should use the 2.0 data protection banner from the contentHub. -->
<span data-protection-message-disable="true"></span>
<!-- embl-ebi global header -->
<header id="masthead-black-bar" class="clearfix masthead-black-bar | ebi-header-footer vf-content vf-u-fullbleed"></header>
<link rel="import" href="https://www.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=6682&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader>
<link rel="stylesheet" href="//ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" type="text/css" media="all" />
<script defer="defer" src="//ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.4/js/script.js"></script>
<link rel="stylesheet" href="https://assets.emblstatic.net/vf/v2.4.12/assets/ebi-header-footer/ebi-header-footer.css" type="text/css" media="all" />
This repository is distributed with npm. After installing npm, you can install ebi-header-footer with this command.
$ yarn add --dev @visual-framework/ebi-header-footer
The style files included are written in Sass. If you're using a VF-core project, you can import it like this:
@import "@visual-framework/ebi-header-footer/index.scss";
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter
vf-intro so it's a white background, removes the padding.vf-intro to be the 'correct' buttons.vf-component-assets:everything on local dev/css/app.cssvf-css:generate-component-css
File system location: components/ebi-header-footer
Find an issue on this page? Propose a change or discuss it.