Building a site

Components and patterns

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

• Find buttons, tabs, cards and more in the components
• Example pages, boilerplates and patterns for quick starts and layouts

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

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

• Pre-alpha, no link yet
• Register your interest ken.hawkins@embl.de

React boilerplate

A demonstration React-based project using VF components.

• Pre-alpha, no link yet
• Register your interest ken.hawkins@embl.de

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