Building a site

If you still need to setup your development environment, follow our getting started guide.

Build static 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 pre-made boilerplate using VF components

Uses the preferment 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

Build a design system using VF components

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

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

Bare bones VF components

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.

• yarn add @visual-framework/vf-sass-config @visual-framework/vf-inlay