Skip to content
A few demo pages showing how the VF 2.0 can be used (fairly) seamlessly with other CSS and JS stacks.
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
samples
.gitignore
LICENSE
README.md
gulpfile.js
package-lock.json
package.json

README.md

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

  • npm install
  • gulp

☝ You'll need node/npm too

You can’t perform that action at this time.