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.

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

Build static 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.


A pre-made boilerplate using VF components

Uses the preferment 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

Build a design system using VF components

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

Build a WordPress site using VF components.

React boilerplate

A demonstration React-based project using VF components.

Bare bones VF components

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.

In this section

Browser support

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

About components and patterns

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.

Creating new components

This codebase includes a folder and file creation tool.

Sass and CSS guidelines

The Visual Framework delivers much of its value through Sass.

Discussions, exchanges and help

Regardless of where, we welcome contribution, ideas and constructive criticism.

Image handling best practice

It's best to not let CSS do the image cropping.

JavaScript guidelines

We use "just enough" JavaScript in the Visual Framework.

Using British and American english if code and documentation

For the language and spelling of documentation and code.

User base of the Visual Framework code

This project is designed to be used by organisations with experienced developers delivery life science websites.

Component versioning interoperability

Each Visual Framework component carries its own semantic versioning.

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