The Cluster Layout component

About

The vf-cluster is a layout component that can be used when we need to give various content items (of indeterment sizes) an equaly spaced layout on the page that can respond to the browsers viewport width.

Usage

The main use case for vf-cluster is to be mainly used when something the available grid systems are too 'rigid' because of the different widths of the content.

Integration

Eleventy

To use the vf-cluster component we make use of the @extends directive from Nunjucks to 'wrap' around the content we want this layout component to render.

Requirements

To use the vf-cluster component you must be using vX.X.X of vf-eleventy.

Code

In the .njk file you are wanting to use the vf-cluster you must include the following code to 'extend' the file with the vf-cluster component.

{% raw %}

{% extends layout.cluster %}

{% endraw %}

You will then need to create a 'block' to put the relevant content inside so that it renders within the vf-cluster layout when rendered.

{% raw %}

{% block cluster_content %}
...
{% endblock %}

{% endraw %}

To make use of .yml to render the vf-cluster to the variant you wish to use, you will have to 'set' the context in the .njk file.

{% raw %}

{% set context = cluster1 %}

{% endraw %}

note: cluster1 is an example, please pick your own semantic, readable context names With these set you can then add the relevant content as needed.

WordPress

Requirements

To use the vf-cluster component you must be using vX.X.X of vf-wp.

Variants

There are four spacing variants and three alignment variants available for this component as well as an option to define the width of the vf-clusters children.

| custom property | options | default | | -------------- | ----------------------------- | ----------- | | spacing | small, medium, large | none | | alignment | start, center, end | none |

Spacing Variants

There are three spacing variants that determina the inline and block spacing between items of content inside of vf-cluster.

Alignment Variants

This variant determines where the child components align in the vertical space available. When setting this in your .yml file it will add the relevant CSS value as the inline CSS custom property -vf-cluster-alignment.

CSS Custom Properties

| custom property | options | example | | ------------------------ | ------------------------------------------------------- | ----------- | | --vf-cluster-alignment | could be used for a different vertical alignment value | baseline | | --vf-cluster-margin | can take a CSS size value to overide the defualt | 31px | | --vf-cluster__item--flex | can take a CSS flex value to determine the child widths | 210px 1 0 |

Install

This repository is distributed with npm. After installing npm and yarn, you can install vf-cluster with this command.

$ yarn add --dev @visual-framework/vf-cluster

Sass/CSS

The source files included are written in scss syntax of Sass. You can point your sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-cluster/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Help

• Read the Visual Framework troubleshooting
• Open a ticket
• Chat on Slack