https://github.com/visual-framework/vf-sample-integrations
A few demo pages showing how the VF 2.0 can be used (fairly) seamlessly with other CSS and JS stacks.
https://github.com/visual-framework/vf-sample-integrations
Last synced: 11 months ago
JSON representation
A few demo pages showing how the VF 2.0 can be used (fairly) seamlessly with other CSS and JS stacks.
- Host: GitHub
- URL: https://github.com/visual-framework/vf-sample-integrations
- Owner: visual-framework
- License: apache-2.0
- Created: 2019-01-25T11:24:36.000Z (about 7 years ago)
- Default Branch: gh-pages
- Last Pushed: 2023-12-15T08:34:17.000Z (over 2 years ago)
- Last Synced: 2025-02-17T03:18:24.912Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://visual-framework.github.io/vf-sample-integrations/
- Size: 526 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vf-sample-integrations
A few demo pages showing how the [Visual Framework 2.0](https://visual-framework.github.io/vf-welcome/) (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)
```html
```
2. show dismissible banners (uses CSS + JS)
```html
```
In both cases this can be done without disrupting existing page styles and JavaScript.
### View the demos
- [PDBe](samples/pdbe.html)
- [Uniprot](samples/uniprot.html)
- [Chembl](samples/chembl.html)
### What are you adding in
For each sample page, three things:
1. A CSS file
- ``
1. A JS file
- ``
1. Snippets of HTML
- look at the source for ``
## Work on the pages locally
Pages are simple `.html` files and can be easily previewed/refreshed with
[`browsersync`](https://browsersync.io/).
From the command line
- `npm install`
- `gulp`
☝ You'll need [`node`/`npm`](https://nodejs.org/en/) too