
Guidance and principles
Here you will find guidance on what, why and how.
Good defaults for life science websites, plus compatibility with existing CSS and JS. Bring your Bootsrap, Angular or vanilla CSS code base.
Use an npm starter package for new projects or to graft existing code.
Build components into CSS and JS with vf-build-boilerplate:
yarn create @visual-framework/vf-project your-new-site-name vf-build-boilerplate
A full static site generator based off 11ty with vf-eleventy:
yarn create @visual-framework/vf-project your-new-site-name vf-eleventy
More about the above and further options and follow a guide to setting up your development environment.
Install the source Sass and JavaScript files via yarn to an existing project
# 1. Add the Sass config, starter and any components
yarn add @visual-framework/vf-sass-config @visual-framework/vf-sass-starter @visual-framework/vf-content @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';
Get a kitchen sink of pre-compiled CSS and JS from the CDN.
<!-- CSS only -->
<link rel="stylesheet" href="https://assets.emblstatic.net/vf/v2.4.7/css/styles.css">
<!-- JS -->
<script src="https://assets.emblstatic.net/vf/v2.4.7/scripts/scripts.js"></script>
See examples in our HTML boilerplates for quick starts and layouts.
Here you will find guidance on what, why and how.
Use Figma software to design and collaborate on ideas without using code.
More than components, this is how you should do things.
Developing and contributing to the Visual Framework Core and its components.
These components are available.
The when and how to making a project powered with Visual Framework components.
The colour, typography, spacing, and other stylistic decisions as design tokens for consumption.
v2.4.7
Find an issue on this page? Propose a change or discuss it.