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 repo contains three types of files:
- Components that are located in
- Build scripts located in the
.tools/of the project (mainly)
- The public web interface
├── .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)