The 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.

Learn more, build something or get help.

Sections

Design kit

Use Figma software to design and collaborate on ideas without using code.

Contributing

Developing and contributing to the Visual Framework Core and its components.

Components and patterns

The Visual Framework provides dozens of individual building block components and pattern-level example boilerplates.

Building a site

The when and how to making a project powered with Visual Framework components.

Design Tokens

The colour, typography, spacing, and other stylistic decisions as design tokens for consumption.

Starter packages

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.

Pick and choose

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';

Browse all available components

Prebuilt CDN

Get a kitchen sink of pre-compiled CSS and JS from the CDN.

<!-- CSS only -->
<link rel="stylesheet" href="https://assets.emblstatic.net/vf/v2.5.0-beta.2/css/styles.css">
<!-- JS -->
<script src="https://assets.emblstatic.net/vf/v2.5.0-beta.2/scripts/scripts.js"></script>

See examples in our HTML boilerplates for quick starts and layouts.


What's current?

Find an issue on this page? Propose a change or discuss it.