Cluster layout

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`

Variants

Spacing (400) variant

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using `include`

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "layout",
"cluster_child_flex" : "25% 1 0",
"cluster__spacing" : 400,
 }
%}
{% include "../path_to/vf-cluster/vf-cluster.njk" %}

Using `render`

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-cluster', {
  "component-type" : "layout",
  "cluster_child_flex" : "25% 1 0",
  "cluster__spacing" : 400,}
%}

HTML

<div class="vf-cluster vf-cluster--400" style=" --vf-cluster__item--flex: 25% 1 0;">

  <div class="vf-cluster__inner">


    <div class="vf-box vf-box-theme--primary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--primary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--primary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--secondary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--secondary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--secondary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

  </div>
</div>

Spacing (600) variant

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using `include`

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "layout",
"cluster_child_flex" : "25% 1 0",
"cluster__spacing" : 600,
 }
%}
{% include "../path_to/vf-cluster/vf-cluster.njk" %}

Using `render`

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-cluster', {
  "component-type" : "layout",
  "cluster_child_flex" : "25% 1 0",
  "cluster__spacing" : 600,}
%}

HTML

<div class="vf-cluster vf-cluster--600" style=" --vf-cluster__item--flex: 25% 1 0;">

  <div class="vf-cluster__inner">


    <div class="vf-box vf-box-theme--primary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--primary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--primary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--secondary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--secondary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--secondary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

  </div>
</div>

Spacing (800) variant

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using `include`

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "layout",
"cluster_child_flex" : "25% 1 0",
"cluster__spacing" : 800,
 }
%}
{% include "../path_to/vf-cluster/vf-cluster.njk" %}

Using `render`

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-cluster', {
  "component-type" : "layout",
  "cluster_child_flex" : "25% 1 0",
  "cluster__spacing" : 800,}
%}

HTML

<div class="vf-cluster vf-cluster--800" style=" --vf-cluster__item--flex: 25% 1 0;">

  <div class="vf-cluster__inner">


    <div class="vf-box vf-box-theme--primary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--primary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--primary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--secondary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--secondary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--secondary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

  </div>
</div>

Spacing (custom) variant

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using `include`

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "layout",
"cluster_child_flex" : "25% 1 0",
"cluster_custom_spacing" : "3rem",
 }
%}
{% include "../path_to/vf-cluster/vf-cluster.njk" %}

Using `render`

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-cluster', {
  "component-type" : "layout",
  "cluster_child_flex" : "25% 1 0",
  "cluster_custom_spacing" : "3rem",}
%}

HTML

<div class="vf-cluster" style=" --vf-cluster-margin: 3rem; --vf-cluster__item--flex: 25% 1 0;">

  <div class="vf-cluster__inner">


    <div class="vf-box vf-box-theme--primary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--primary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--primary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--secondary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--secondary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

    <div class="vf-box vf-box-theme--secondary vf-box--normal">

      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

  </div>
</div>

Alignment (start) variant

Did you know?

This is some more content that would be in the box. These examples also have make use of the --vf-cluster__item--width to minimise the width so you can see the differences in alignment.

Did you know?

This is even more content that would be in the box. So much information it spans multiple lines.

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using `include`

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "layout",
"cluster_child_flex" : "25% 1 0",
"cluster_custom_alignment" : "flex-start",
 }
%}
{% include "../path_to/vf-cluster/vf-cluster.njk" %}

Using `render`

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-cluster', {
  "component-type" : "layout",
  "cluster_child_flex" : "25% 1 0",
  "cluster_custom_alignment" : "flex-start",}
%}

HTML

<div class="vf-cluster" style="--vf-cluster-alignment: flex-start; --vf-cluster__item--flex: 25% 1 0;">

  <div class="vf-cluster__inner">

    <div class="vf-box vf-box-theme--primary vf-box--normal">
      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box. These examples also have make use of the <code>--vf-cluster__item--width</code> to minimise the width so you can see the differences in alignment.</p>
    </div>
    <div class="vf-box vf-box-theme--primary vf-box--normal">
      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is even more content that would be in the box. So much information it spans multiple lines.</p>
    </div>
    <div class="vf-box vf-box-theme--primary vf-box--normal">
      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

  </div>
</div>

Alignment (center) variant

Did you know?

This is some more content that would be in the box. These examples also have make use of the --vf-cluster__item--width to minimise the width so you can see the differences in alignment.

Did you know?

This is even more content that would be in the box. So much information it spans multiple lines.

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using `include`

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "layout",
"cluster_child_flex" : "25% 1 0",
"cluster_custom_alignment" : "center",
 }
%}
{% include "../path_to/vf-cluster/vf-cluster.njk" %}

Using `render`

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-cluster', {
  "component-type" : "layout",
  "cluster_child_flex" : "25% 1 0",
  "cluster_custom_alignment" : "center",}
%}

HTML

<div class="vf-cluster" style="--vf-cluster-alignment: center; --vf-cluster__item--flex: 25% 1 0;">

  <div class="vf-cluster__inner">

    <div class="vf-box vf-box-theme--primary vf-box--normal">
      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box. These examples also have make use of the <code>--vf-cluster__item--width</code> to minimise the width so you can see the differences in alignment.</p>
    </div>
    <div class="vf-box vf-box-theme--primary vf-box--normal">
      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is even more content that would be in the box. So much information it spans multiple lines.</p>
    </div>
    <div class="vf-box vf-box-theme--primary vf-box--normal">
      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

  </div>
</div>

Alignment (end) variant

Did you know?

This is some more content that would be in the box. These examples also have make use of the --vf-cluster__item--width to minimise the width so you can see the differences in alignment.

Did you know?

This is even more content that would be in the box. So much information it spans multiple lines.

Did you know?

This is some more content that would be in the box.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using `include`

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "layout",
"cluster_child_flex" : "25% 1 0",
"cluster_custom_alignment" : "flex-end",
 }
%}
{% include "../path_to/vf-cluster/vf-cluster.njk" %}

Using `render`

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-cluster', {
  "component-type" : "layout",
  "cluster_child_flex" : "25% 1 0",
  "cluster_custom_alignment" : "flex-end",}
%}

HTML

<div class="vf-cluster" style="--vf-cluster-alignment: flex-end; --vf-cluster__item--flex: 25% 1 0;">

  <div class="vf-cluster__inner">

    <div class="vf-box vf-box-theme--primary vf-box--normal">
      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box. These examples also have make use of the <code>--vf-cluster__item--width</code> to minimise the width so you can see the differences in alignment.</p>
    </div>
    <div class="vf-box vf-box-theme--primary vf-box--normal">
      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is even more content that would be in the box. So much information it spans multiple lines.</p>
    </div>
    <div class="vf-box vf-box-theme--primary vf-box--normal">
      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>

  </div>
</div>

Alignment (stretch) variant

Did you know?

This is some more content that would be in the box. These examples also have make use of the --vf-cluster__item--width to minimise the width so you can see the differences in alignment.

Did you know?

This is even more content that would be in the box. So much information it spans multiple lines.

Did you know?

This is some more content that would be in the box.

Did you know?

This is even more content that would be in the box. So much information it spans multiple lines.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using `include`

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "layout",
"cluster_child_flex" : "25% 1 0",
"cluster_custom_alignment" : "stretch",
 }
%}
{% include "../path_to/vf-cluster/vf-cluster.njk" %}

Using `render`

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-cluster', {
  "component-type" : "layout",
  "cluster_child_flex" : "25% 1 0",
  "cluster_custom_alignment" : "stretch",}
%}

HTML

<div class="vf-cluster" style="--vf-cluster-alignment: stretch; --vf-cluster__item--flex: 25% 1 0;">

  <div class="vf-cluster__inner">

    <div class="vf-box vf-box-theme--primary vf-box--normal">
      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box. These examples also have make use of the <code>--vf-cluster__item--width</code> to minimise the width so you can see the differences in alignment.</p>
    </div>
    <div class="vf-box vf-box-theme--primary vf-box--normal">
      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is even more content that would be in the box. So much information it spans multiple lines.</p>
    </div>
    <div class="vf-box vf-box-theme--primary vf-box--normal">
      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is some more content that would be in the box.</p>
    </div>
    <div class="vf-box vf-box-theme--primary vf-box--normal">
      <h3 class="vf-box__heading">Did you know?</h3>
      <p class="vf-box__text">This is even more content that would be in the box. So much information it spans multiple lines.</p>
    </div>
  </div>
</div>

Custom Child Flex variant

hello alt text — Version, 1982, Adenovirus with 217 dots

hello alt text — Version, 1982, Adenovirus with 217 dots

hello alt text — Version, 1982, Adenovirus with 217 dots

hello alt text — Version, 1982, Adenovirus with 217 dots

hello alt text — Version, 1982, Adenovirus with 217 dots

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using `include`

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "layout",
"cluster_child_flex" : "25% 1 0",
 }
%}
{% include "../path_to/vf-cluster/vf-cluster.njk" %}

Using `render`

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-cluster', {
  "component-type" : "layout",
  "cluster_child_flex" : "25% 1 0",}
%}

HTML

<div class="vf-cluster" style=" --vf-cluster__item--flex: 25% 1 0;">

  <div class="vf-cluster__inner">

    <figure class="vf-figure">
      <img class="vf-figure__image" src="../../assets/vf-figure/assets/figure-example.png" alt="hello alt text" loading="lazy">
      <figcaption class="vf-figure__caption">Version, 1982, Adenovirus with 217 dots</figcaption>
    </figure>
    <figure class="vf-figure">
      <img class="vf-figure__image" src="../../assets/vf-figure/assets/figure-example.png" alt="hello alt text" loading="lazy">
      <figcaption class="vf-figure__caption">Version, 1982, Adenovirus with 217 dots</figcaption>
    </figure>
    <figure class="vf-figure">
      <img class="vf-figure__image" src="../../assets/vf-figure/assets/figure-example.png" alt="hello alt text" loading="lazy">
      <figcaption class="vf-figure__caption">Version, 1982, Adenovirus with 217 dots</figcaption>
    </figure>
    <figure class="vf-figure">
      <img class="vf-figure__image" src="../../assets/vf-figure/assets/figure-example.png" alt="hello alt text" loading="lazy">
      <figcaption class="vf-figure__caption">Version, 1982, Adenovirus with 217 dots</figcaption>
    </figure>
    <figure class="vf-figure">
      <img class="vf-figure__image" src="../../assets/vf-figure/assets/figure-example.png" alt="hello alt text" loading="lazy">
      <figcaption class="vf-figure__caption">Version, 1982, Adenovirus with 217 dots</figcaption>
    </figure>

  </div>
</div>

Examples

Installation info

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

Changelog

Changelog

1.0.2

changes any set- style functions to cleaner version

1.0.1

fixes a bug where we overspecified the spacing custom property which affected left alignment of --600 and --800 variants.

1.0.0

replaces all spacing / sizing values with numbers

0.0.1

Initital launch of the component. It is useable but the documentation needs refining

Assets

File system location: components/vf-cluster

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