File structure

Design decisions and tokens

The Visual Framework uses the Design Token concept to specify design (colour, spacing, type) as reusable JSON or YAML that are translated from .yml data into .scss using Theo.

This Design Token abstraction helps portability and integration with other technical systems.

You can find the design tokens in vf-core/components/vf-design-tokens.

File structure

The vf-core repo contains three types of files:

1. Components that are located in ./components
2. Build scripts located in the .tools/ of the project (mainly)
3. The public web interface ./tools/vf-component-library

Detailed overview

    ├── .editorconfig
    ├── CHANGELOG.md
    ├── CONTRIBUTING.md
    ├── README.md
    ├── components  (all the components you wish to use)
    │   ├── _previews (templates for the web component browser)
    │   ├── vf-activity-group
    |   |   ...
    │   └── vf-video-teaser
    ├── docs (documentation files for the web interface)
    ├── lerna.json
    ├── package.json
    ├── public (dynamic folder used for rendering of global CSS, JS, component assets)
    └── tools
        ├── vf-component-generator (make new components)
        ├── vf-component-initilization (collect components from the file system)
        ├── vf-component-library (web interface)
        ├── vf-core (the central build process)
        |   ├── gulpfile.js
        |   └── fractal.js (configuration for the web component library)
        ├── vf-frctl-extensions (extensions useful when manipulating Fractal-specific data)
        ├── vf-extensions (reusable utilities for VF projects)
        └── vf-sass-compilation (compile invites)