Visual Framework
Visual Framework
Good defaults and technical flexibility for life science websites
With compatibility with existing CSS and JS, you can bring your Bootstrap, React or vanilla code base. The VF will not break your existing code.
About the VFHow to get the VF code, guidance and get help.
Individual building block components and pattern-level example boilerplates.
Developing and contributing to the Visual Framework Core and its components.
Colour, typography, spacing and other stylistic decisions as structured data.
Use Figma software to design and collaborate on ideas without using code.
Here you will find guidance on what, why and how.
Use an npm starter package for new projects or to graft existing code.
Build components into CSS and JS with vf-build-boilerplate:
yarn create @visual-framework/vf-project your-new-site-name vf-build-boilerplate
A full static site generator based off 11ty with vf-eleventy:
yarn create @visual-framework/vf-project your-new-site-name vf-eleventy
More about the above and further options and follow a guide to setting up your development environment.
Install the source Sass and JavaScript files via yarn to an existing project
# 1. Add the Sass config, starter and any components
yarn add @visual-framework/vf-sass-config @visual-framework/vf-sass-starter @visual-framework/vf-content @visual-framework/vf-analytics-google
# 2. Import it in your Sass
@import 'node_modules/@visual-framework/vf-sass-starter/index.scss';
@import 'node_modules/@visual-framework/vf-content/vf-content.scss';
# 3. Import JS modules
import { vfGaTrackInteraction } from 'node_modules/@visual-framework/vf-analytics-google/vf-analytics-google.js';Get a kitchen sink of pre-compiled CSS and JS from the CDN.
<!-- CSS only -->
<link rel="stylesheet" href="https://dev.assets.emblstatic.net/vf/develop/css/styles.css">
<!-- JS -->
<script src="https://dev.assets.emblstatic.net/vf/develop/scripts/scripts.js"></script>See examples in our HTML boilerplates for quick starts and layouts.
v2.5.20Find an issue on this page? Propose a change or discuss it.