Building a site

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

Visual Framework components can be utilised in many ways, here are a few recommended approaches that will fit most use cases.

Components and patterns

If you already have VF CSS and JS available to your project, follow the documentation and guidance on components and patterns.

Option 1: CSS and JS from a CDN

For getting started quickly (and without customisation) you can use the prebuilt CDN files.

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

Option 2: Install from npm

The most basic use of the Visual Framework components allows usage directly into your existing build environment. This approach gets you a components Sass, JS, template and any other assets and lets you build what you need.

This approach is recommended for more advanced developers who are highly familiar with Node and Sass.

# 1. Add the Sass config, starter and any components

yarn add @visual-framework/vf-sass-config
yarn add @visual-framework/vf-sass-starter
yarn add @visual-framework/vf-content
yarn add @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';

Option 3: Starter packages

If you still need to setup your development environment, follow our development getting started guide.

Compile CSS, JS

Need help converting VF components to static CSS and JS to pair with your existing application or site? Use the vf-build-boilerplate.

It's also a good introduction into integrating VF components into an application.

vf-build-boilerplate

A static site generator

Uses the preformat 11ty as a static site generator to build sites with VF components. This approach pre-integrates the VF Core, giving you easy access to component assets and a rollup build process to generate compiled CSS and JS.

vf-eleventy boilerplate

A design system

Extendsvf-eleventyto document your design system, create+document components, patterns and boilerplates. You can also generate static CSS and JS assets for simple use elsewhere in vanilla HTML+CSS+JS pages.

vf-demo-design-system boilerplate

WordPress theme and plugins

Build a WordPress site using VF components.

React boilerplate

A demonstration React-based project using VF components.

Can't find what you need? Ask for help on Slack


## In this section
We focus support on major browsers in use by 95%+ of our audiences, and we ensure the site is navigable and usable by the remaining 5%. Think of components as lego blocks you can use to build the look and content of your sites. Think of patterns as assembled packages of behaviour. This codebase includes a folder and file creation tool. The Visual Framework delivers much of its value through Sass. Regardless of where, we welcome contribution, ideas and constructive criticism. It's best to not let CSS do the image cropping. We use "just enough" JavaScript in the Visual Framework. For the language and spelling of documentation and code. This project is designed to be used by organisations with experienced developers delivery life science websites. Each Visual Framework component carries its own semantic versioning. Unique to the web are certain types of content that support user interaction.

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