Skip to content

A few demo pages showing how the VF 2.0 can be used (fairly) seamlessly with other CSS and JS stacks.

License

Notifications You must be signed in to change notification settings

visual-framework/vf-sample-integrations

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

A few demo pages showing how the VF 2.0 can be used (fairly) seamlessly with other CSS and JS stacks.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published