👋 Downloading or cloning this repo? 🛑

Most won't need to clone this repo. Do so if you only wish to develop the architecture of the Visual Framework core or contribute a global component, otherwise use one of the boilerplates or install a component directly.

The Visual Framework Core (vf-core)

If you’re new to the Visual Framework system for life science websites: think of it as a Bootstrap but made for flexibility. The Visual Framework is highly modular for compatibility allowing for non-breaking use alongside other frameworks, like Bootstrap. So you can use components made elsewhere without breaking your site. Learn more about the Visual Framework system here.

This repo, for the "VF Core", is one part of that effort and — as the name suggests — is at the heart of all Visual Framework-based tools. The VF Core allows for extendable components and builds CSS, JS and other image-style assets.

Much like an arch-based design of a cistern, the vf-core supports complex systems with a flexible space inside. (For those that didn’t guess it, this is a photo of the Basilica Cistern; Image by Clint on Flickr)

In short: The VF Core is a base to build systems.

Here’s that column metaphor translates as a schematic of relationships for VF Core.

The vf-core is built with:

• Fractal for component structure
• Node and Gulp; to:
  • rollup JavaScript and handle assets
  • allow custom Sass/CSS components to be added to local projects
• Dart Sass
• Yeoman to make custom components interactively
• Yarn to install components
• Nunjucks for component templates
• Lerna to publish components to npm as a mono-repo
• Name-spacing for JavaScript and CSS; more on that in the coding standards

Making use of the VF Core

Here's a guide with the most common approaches.

FAQ

Here's a guide to the most common questions.

Have a problem?

See the troubleshooting guide.

Want to help develop?

Great. See the development guide.

Have opinions, ideas, concerns or want to get involved?

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

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