vf-sample-integrations

A few demo pages showing how the Visual Framework 2.0 (alpha.5) can be used without disrupting a site’s CSS and JS stacks.

What does this show?

It demonstrates the VF 2.0’s CSS and JS isolation through namespacing and element isolation (add link).

To illustrate, on the below demos we use the VF to:

  1. pull in reusable content from the EMBL ContentHub (add link) (uses CSS + JS)
<!-- BEGIN: VF 2.0 sample -->
<!-- Jobs feed import -->
<link rel="import" href="https://dev.beta.embl.org/api/v1/pattern.html?pattern=vf-jobs-snippet&filter-content-type=jobs&filter-field-contains[field_jobs_description]=protein&filter-field-date-after[field_jobs_expiration]=today&limit=3&amp;source=contenthub" data-target="self" data-embl-js-content-hub-loader="">
<link rel="stylesheet" media="all" href="https://dev.assets.emblstatic.net/vf/v2.0.0-alpha.5/components/raw/vf-summary/vf-summary.css">
<!-- END: VF 2.0 sample -->
  1. show dismissible banners (uses CSS + JS)
<!-- BEGIN: VF 2.0 sample -->
<!-- Data protection banner -->
<link rel="import" href="https://dev.beta.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=581&pattern=node-body&amp;source=contenthub" data-target="self" data-embl-js-content-hub-loader>
<link rel="stylesheet" media="all" href="https://dev.assets.emblstatic.net/vf/v2.0.0-alpha.5/components/raw/vf-banner/vf-banner.css">
<!-- END: VF 2.0 sample -->

In both cases this can be done without disrupting existing page styles and JavaScript.

View the demos

What are you adding in

For each sample page, three things:

  1. A CSS file
    • <link rel="stylesheet" media="all" href="https://dev.assets.emblstatic.net/vf/v2.0.0-alpha.5/css/styles.css">
  2. A JS file
    • <script src="https://dev.assets.emblstatic.net/vf/v2.0.0-alpha.5/scripts/scripts.js"></script>
  3. Snippets of HTML
    • look at the source for <!-- BEGIN: VF 2.0 sample -->

Work on the pages locally

Pages are simple .html files and can be easily previewed/refreshed with browsersync.

From the command line

☝ You’ll need node/npm too

This site is open source. Improve this page.