Visual Framework building guide

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.

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 gulp vf-component

A pre-made boilerplate using VF components

Uses the performant 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 gulp vf-component

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 gulp vf-component

WordPress theme

Build a WordPress site using VF components.

  • Pre-alpha, link to come in autumn 2019

React boilerplate

A demonstration React-based project using VF components. Pre-alpha, link to come in autumn 2019.

  • Pre-alpha, link to come in autumn 2019

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 familar with Node and Sass.

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

I have an idea or concern!

There are a few ways that we discuss and track ideas:

  • ⁉ General: Chat for general ideas and discussion.
  • ⚙️ Technical: GitHub issues here for implementing deeply technical and specific issues, like the Sass build process, browser bugs. Also see the Troubleshooting guide.
  • 🏢 E-mail: if you have a sweeping Big Idea™️, e-mail Ken Hawkins ken.hawkins@embl.de.
View the Visual Framework on GitHub