Building a site

How to make a project with Visual Framework components.

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.

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.

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.5.0/css/styles.css">
    <!-- JS -->
    <script src="https://assets.emblstatic.net/vf/v2.5.0/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 and code editor, 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

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

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