Creating new components

This codebase includes a folder and file creation tool.

It allows you to quickly create all the required files to make a component -- it gives you the option to create am element, block, or container.

Tip: also consult the guidelines for the naming of things and coding standards.

  1. Install the vf-component-generator package
    • yarn add @visual-framework/vf-component-generator --dev
  2. Install Yeoman
    • If you've come this far and you don't have yo, you should be able to install it with yarn global add yo@latest
    • If you get stuck, see the official install guide
  3. Create a new component
  4. Maintain a
    • Add a line of what is new in your component.
    • Use sentence styling.
    • Keep your notes, short and punchy.
    • End your sentences with periods.
    • Link to any related issues or discussions, such as the above.
  5. Add the @import 'vf-your-component.scss'; to /assets/scss/styles.scss.
  6. Developing your component
  7. Sharing you component back

See also

In this section

We focus support on major browsers in use by 95%+ of our audiences, and we ensure the site is navigable and usable by the remaining 5%.

Think of components as lego blocks you can use to build the look and content of your sites. Think of patterns as assembled packages of behaviour.

This codebase includes a folder and file creation tool.

The Visual Framework delivers much of its value through Sass.

Regardless of where, we welcome contribution, ideas and constructive criticism.

It's best to not let CSS do the image cropping.

We use "just enough" JavaScript in the Visual Framework.

For the language and spelling of documentation and code.

This project is designed to be used by organisations with experienced developers delivery life science websites.

Each Visual Framework component carries its own semantic versioning.

Unique to the web are certain types of content that support user interaction.

Users with a visual, motor or cognitive impairment are far from rare.

Find an issue on this page? Propose a change or discuss it.