Building a site

How to make a project with Visual Framework components.

In this section

Design tokens

Colour, typography, spacing and other stylistic decisions as structured data.

Quick starts

CSS and JS from a CDN

Get started quickly (and without customisation) and use prebuilt CDN files.

<!-- CSS only -->
  <link rel="stylesheet" href="https://devassets.emblstatic.net/vf/v2.5.9/css/styles.css">
  <!-- JS -->
  <script src="https://devassets.emblstatic.net/vf/v2.5.9/scripts/scripts.js"></script>
Manually install from npm

Use VF components directly in your existing build environment. This approach gets you a components Sass, JS, template and any other assets and lets you build what you need.

Recommended for more advanced developers who are 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';
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

  • yarn create @visual-framework/vf-project your-new-site-name vf-build-boilerplate
  • add Visual Framework components with yarn add @visual-framework/vf-component-name or make a new component with vf-component-generator
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

  • yarn create @visual-framework/vf-project your-new-site-name
  • add Visual Framework components with yarn add @visual-framework/vf-component-name or make a new component with vf-component-generator
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

  • yarn create @visual-framework/vf-project your-new-site-name vf-demo-design-system
  • add Visual Framework components with yarn add @visual-framework/vf-component-name or make a new component with vf-component-generator
WordPress theme and plugins

Build a WordPress site using VF components.

Available at github.com/visual-framework/vf-wp

React boilerplate

A demonstration React-based project using VF components.

Pre-alpha is available at github.com/visual-framework/vf-react

Angular boilerplate

A proof-of-concept Agnular-based project using VF components is available at codesandbox.io/s/vf-angular--test-o94e1

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

Working on an existing VF project?

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

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