Compatibility with EBI-VF 1.x Components utility

Fixes, compatibility and workarounds for sites that use the EBI VF versions 1.1, 1.2, 1.3 or 1.4.

github location npm version

Usage

Enable its use by:

  • body class="ebi-vf1-integration", or
  • wrapping a section of html with the class .ebi-vf1-integration

Variants

A demonstration of a few fixes. To make an entire page "VF 2.x-ish" add `class="ebi-vf1-integration"` to your body element.

With .ebi-vf1-integration

With .ebi-vf1-integration

h1

h2

h3

I'm bold
A link



Without .ebi-vf1-integration

Without .ebi-vf1-integration

h1

h2

h3

I'm bold
(click the link to see the visited state)
A link
HTML
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-global.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/theme-embl-petrol.css" type="text/css" media="all" />

<p>A demonstration of a few fixes. To make an entire page "VF 2.x-ish" add `class="ebi-vf1-integration"` to your body element.</p>

<div class="ebi-vf1-integration">

  <h3>With .ebi-vf1-integration</h3>

  <p>With <code class="vf-code-example">.ebi-vf1-integration</code></p>

  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>

  <div><strong>I'm bold</strong></div>

  <div>
    <button class="vf-button vf-button--link">a link variant</button>
  </div>

  <div><a href="https://example.com">A link</a></div>

  <input type="search" class="vf-form__input | vf-search__input" value="" name="s">

</div>

<br /><br />

<hr class="vf-divider" />

<div class="">

  <h3>With<em>out</em> .ebi-vf1-integration</h3>

  <p>With<em>out</em> <code class="vf-code-example">.ebi-vf1-integration</code></p>

  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>

  <div><strong>I'm bold</strong></div>

  <div>
    <button class="vf-button vf-button--link">a link variant</button>
  </div>
  (click the link to see the visited state)

  <div><a href="https://example.com">A link</a></div>

  <input type="search" class="vf-form__input | vf-search__input" value="" name="s">

</div>
              

Examples

Installation info

Option 1

Use the global VF 2.0 CSS along side your existing VF 1.x CSS; see: https://stable.visual-framework.dev/

Option 2

If you don't want to include all the VF 2.0 CSS, add only the compatibility CSS:

https://assets.emblstatic.net/vf/v2.4.15/assets/ebi-vf1-integration/ebi-vf1-integration.css

Option 3

This repository is distributed with npm. After installing npm, you can install ebi-vf1-integration with this command.

$ yarn add --dev @visual-framework/ebi-vf1-integration

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-vf1-integration/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

1.0.7

  • Minor tweaks to docs.
  • Update max-width to match vf-body.
  • Fix a clash with vf-hero that uses text-decoration-thickness.

1.0.6

  • changes any set- style functions to cleaner version

1.0.5

  • Handle text color on vf-button--outline.
  • https://github.com/visual-framework/vf-core/pull/1336

1.0.4

  • dependency bump

1.0.3

  • dependency bump

1.0.2

  • updates max-width of component

1.0.1

  • vf-divider needs to be able go full width

1.0.0

  • Initial stable release

Assets



File system location: components/ebi-vf1-integration

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