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 variant
A link


Without .ebi-vf1-integration

Without .ebi-vf1-integration

h1

h2

h3

I'm bold
a link variant
(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>
    <a href="JavaScript:Void(0);" class="vf-button vf-button--link">a link variant</a>
  </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>
    <a href="JavaScript:Void(0);" class="vf-button vf-button--link">a link variant</a>
  </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.2.0

  • Update node-html-parser to 5.1.0
  • Use eleventy v1.0.0-beta.8
  • https://github.com/visual-framework/vf-core/pull/1257

1.1.16

  • Utilise new vf-navigation--on-this-page.
  • Update project boilerplate links at https://stable.visual-framework.dev/building/

1.1.13

  • Documentation updates
  • New release

1.1.12

  • Update milestones and roadmap.

1.1.11

  • Add ELIXIR banner to example EMBL-EBI page.
  • https://stable.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/
  • https://github.com/visual-framework/vf-core/pull/1615

1.1.7

  • Fixed issue of overlapping menu on VF components site
  • https://github.com/visual-framework/vf-core/issues/1518

1.1.6

  • dependency bump

1.1.2

  • Implements updated vf-search markup.
  • Changes a few pages on how it works with nunjucks and markdown.

1.1.0

  • updates Design Tokens homepage.
  • adds neutral colour tokens
  • adds 'status banners' for components in the documentation page.
  • Adds the form options as their own set of components in the list.
  • https://github.com/visual-framework/vf-core/pull/1390/files
  • Updates to use 11ty 0.12.1
  • https://github.com/visual-framework/vf-core/pull/1435

1.0.24

  • changes the vf-intro so it's a white background, removes the padding.
  • changes the links in vf-intro to be the 'correct' buttons.

1.0.23

  • small change to cards on homepage

1.0.18

  • dependency bump

1.0.17

  • dependency bump

1.0.16

  • dependency bump

1.0.13

  • dependency bump
  • adds roamap and consultation docs

1.0.12

  • design token documenation now lives in the component libary

1.0.7

  • adds updates blog

1.0.6

  • begin to make more pattern/boilerplate guidance
  • minor templating updates

1.0.5

  • dependency bump

1.0.4

  • uses vf-favicon
  • adds meta attributes

1.0.3

  • run vf-component-assets:everything on local dev
  • remove reference to removed /css/app.css

1.0.2

  • Add 404
  • Fix component CSS generation

1.0.1

  • Also generate per-component CSS with vf-css:generate-component-css

1.0.0

  • Initial release to be used with vf-core 2.2.0

Assets


File system location: components/ebi-vf1-integration

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