EMBL-EBI Header and Footer utility

Support for using the EMBL-EBI header and footer from the EMBL-EBI VF 1.3.

github location npm version

Usage

This component provides the minimum amount of legacy CSS to make the header and footer work while avoiding conflicts with other 2.0 styles.

  • This component requires the EMBL contentHub loader, which is included in most EMBL VF builds.
  • This requires VF 2.0 footer CSS and other styles.
  • If you do not currently have VF 2.0 CSS and JS as part of your project, you can use the CDN JS.
  • This uses the existing //dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/script.js to load the HTML for the header.
  • The EBI VF 1.x will also included a data protection banner, to disable this with 1.4 you can an included an element with data-protection-message-disable="true"
    • This will be inserted by default when using the ebi-header-footer--footer template.

Variants

Default variant

There is no default. Use the variant templates to load the portions you need.
HTML 
There is no default. Use the variant templates to load the portions you need.

Footer variant

HTML 
<!-- embl-ebi global footer -->
<link rel="import" href="https://wwwdev.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>

Header variant

HTML 
<!-- 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://wwwdev.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="//dev.ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" type="text/css" media="all" />
<script defer="defer" src="//dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.4/js/script.js"></script>
<link rel="stylesheet" href="https://dev.assets.emblstatic.net/vf/v2/assets/ebi-header-footer/ebi-header-footer.css" type="text/css" media="all" />

Examples

Installation info

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

Sass/CSS

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

Changelog

Changelog

2.1.3

  • Resolve accessbility issues for EBI blackbar header for v1.4 and also fixes overlapping x button for search box.

2.1.2

  • Resolve a vf-stack + vf-content-hub + legacy black bar edge case.

2.1.1

  • No space between EBI black bar and a hero.
  • https://github.com/visual-framework/vf-core/pull/1724

2.1.0

  • Fix readme for proper display in component library docs.
  • For ebi-header-footer--footer.njk add context disable_ebi_1x_cookie_banner to disable EBI 1.x cookie banner (defaults to true).

2.0.3

  • Directly load CSS for global header to prevent flashes of non-styled elements.

2.0.2

  • changes any set- style functions to cleaner version

2.0.1

  • Use VF 1.4 JS to load the HTML for the global header.
  • Add documentation and example on disabling the 1.4 data protection banner, as you should use the 2.0 data protection banner from the contentHub.

2.0.0

  • Adds distinct footer, header templates as the header currently has more legacy dependencies.
  • Uses the new 2.0 look and feel footer.
  • Uses contentHub to load templates.
  • Ensure black bar does not have a margin at the top due to vf-stack.
  • https://github.com/visual-framework/vf-core/pull/1316

1.0.1

  • Adds webkit-appearance: none; as needed for Safari browsers as autoprefixer is not doing this.

1.0.0

  • EBI Header is once again fullbleed after changes in vf-grid-page 2.0.0.

1.0.0-beta.2

  • Resolves changes in other VF components, spacing, links, etc.

Assets


File system location: components/ebi-header-footer

Find an issue on this page? Propose a change or discuss it.