@visual-framework/vf-explainer v0.0.2

vf-explainer Component

Life science websites love a bit of jargon and complicated concepts and "explainers" help for terms like: ORCID, transcript isoform, and lymphoblastoid cell lines.

This will likely be similar to "tooltips" or "foldable info tabs".

Conceptual code:

<span aria-describedby="whatis-orcid">ORCID</span>

<div id="whatis-orcid" class="vf-explainer">
 <dfn class="vf-explainer--dfn">ORCID</dfn> is a unique identifier for researchers to distinguish themselves, and make it easier to find specific work; 
 <a href="https://orcid.org" target="_blank" class="vf-explainer__link">learn more</a>
</div>

This is a draft component, it is not yet functional. Background on the implementation, goals and work plan can be found in the issue.

Install

This repository is distributed with npm. After installing npm, you can install vf-explainer with this command.

$ yarn add --dev @visual-framework/vf-explainer

Usage

The source files included are written in Sass (scss) You can simply point your sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-explainer/index.scss";

Make sure you import Sass requirements along with the modules.