Building a site

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

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

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

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

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

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

Build a WordPress site using VF components.

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

A demonstration React-based project using VF components.

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

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