Building a site

How to make a project with Visual Framework components.

Components: creating new ones and revising existing

When and how to make and change components

Creating and amending code is a technical task that should follow a certain style and be actioned in process.

At a high level the component creation and revision process follows this flow diagram and consult the guidelines for the naming of things and coding standards.

New components and changes should be raised as issues first.

Creating new component files

This codebase includes a folder and file creation tool to quickly create all the required files to make a component — it gives you the option to create an element, block, or container.

  1. Install the vf-component-generator package
    • yarn add @visual-framework/vf-component-generator --dev
  2. Install Yeoman
    • If you've come this far and you don't have yo, you should be able to install it with yarn global add yo@latest
    • If you get stuck, see the official install guide
  3. Create a new component
  4. Add an @import 'vf-your-component.scss'; to components/vf-component-rollup/index.scss.

Visual design and design tokens

The visual design of the Visual Framework is done in the Design kit and visuals can be created or revised as part of the parent issue for a ticket.

The design decisions of spacing, colours, branding, typography and the like are stored in the Visual Framework's Design tokens and accessible to your code through the mixins in the Sass config and templates component; some common examples: color: set-color(vf-ui-color--black); and @include set-type(text-body--3);

Layout and spacing

Components can typically implement their layout and spacing by leveraging other components; here are the most common:

You can reference these components' classes from your HTML markup and avoid duplicating layout CSS.

Using VF Sass tooling

Follow the VF's CSS and Sass style guidance.

Using JavaScript

Typically we avoid using JavaScript with the Visual Framework, but sometimes it's requires and we have guidance on creating JavaScript.

Maintaining a

Developing your component

Sharing a component


The work is never done. Components will change and be improved based on learnings.

See also

Also in this section

More from the Building a site 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%.

Components are part of 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.

Content guidelines

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.