vf-cluster component

Usage no npm install needed!

<script type="module">
  import visualFrameworkVfCluster from 'https://cdn.skypack.dev/@visual-framework/vf-cluster';


The Cluster Layout component

npm version


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.


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.



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.


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


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.



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


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


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


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