Local components

Class Name	description	usage
`vf-sidebar`	The layout components default Class	needs to be used once on instances of the `vf-sidebar` layout component
`vf-sidebar--start`	Expects the first child element to be the smallest
`vf-sidebar--end`	Expects the last child element to be the smallest
`vf-sidebar--Nn`	Determines the spacing of the layout when the components are inline or stacked (`Nn` refers to the spacing value)

CSS Custom Property	Description
--vf-sidebar-main-width	can be used inline on the parent to determine when the layout changes. It sets a minimum width on the larger child element
--vf-sidebar-spacing	sets the spacing between the gitwo child elements. This is set using a class name `vf-sidebar--Nn`

`nunjucjs`/`yaml` key	`nunjucjs`/`yaml` value	description
sidebar__position	left	use when the smallest width content (sidebar) is on the left or at the start
sidebar__position	start	use when the smallest width content (sidebar) is on the start or at the left
sidebar__position	right	use when the smallest width content (sidebar) is on the right or at the end
sidebar__position	end	use when the smallest width content (sidebar) is on the end or at the right
sidebar__spacing	400	gives the space of 1rem between the two child elements
sidebar__spacing	600	gives the space of 1.5rem between the two child elements
sidebar__spacing	800	gives the space of 2rem between the two child elements
sidebar__main_content_width	Nn%	sets the CSS custom property `--vf-sidebar-main-width` on the `vf-sibebar` parent which sets the maximum space the larger width content needs to be before switching from an inline layout to a block layout. This is set in the CSS as 50% by default

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",
"sidebar_position" : "left",
 }
%}
{% include "../path_to/vf-sidebar/vf-sidebar.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-sidebar', {
  "component-type" : "layout",
  "sidebar_position" : "left",}
%}

HTML

<div class="vf-sidebar vf-sidebar--start">
  <div class="vf-sidebar__inner">
    <div>
      <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">
    </div>
    <div>
      <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt, eum dolorem accusamus omnis ratione ex quidem, ducimus ab explicabo maxime animi ullam numquam nihil dignissimos quam vero. Recusandae, nihil nam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis nesciunt distinctio animi earum sint, cupiditate labore voluptate a pariatur maxime beatae dolor odit ducimus saepe? Laboriosam voluptatum delectus natus corporis.</p>

    </div>
  </div>

</div>

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",
"sidebar_position" : "right",
 }
%}
{% include "../path_to/vf-sidebar/vf-sidebar.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-sidebar', {
  "component-type" : "layout",
  "sidebar_position" : "right",}
%}

HTML

<div class="vf-sidebar vf-sidebar--end">
  <div class="vf-sidebar__inner">
    <div>
      <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt, eum dolorem accusamus omnis ratione ex quidem, ducimus ab explicabo maxime animi ullam numquam nihil dignissimos quam vero. Recusandae, nihil nam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis nesciunt distinctio animi earum sint, cupiditate labore voluptate a pariatur maxime beatae dolor odit ducimus saepe? Laboriosam voluptatum delectus natus corporis.</p>

    </div>
    <div>
      <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">
    </div>
  </div>

</div>

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",
"sidebar_position" : "end",
"sidebar_spacing" : 400,
 }
%}
{% include "../path_to/vf-sidebar/vf-sidebar.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-sidebar', {
  "component-type" : "layout",
  "sidebar_position" : "end",
  "sidebar_spacing" : 400,}
%}

HTML

<div class="vf-sidebar vf-sidebar--end vf-sidebar--400">
  <div class="vf-sidebar__inner">
    <div>
      <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt, eum dolorem accusamus omnis ratione ex quidem, ducimus ab explicabo maxime animi ullam numquam nihil dignissimos quam vero. Recusandae, nihil nam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis nesciunt distinctio animi earum sint, cupiditate labore voluptate a pariatur maxime beatae dolor odit ducimus saepe? Laboriosam voluptatum delectus natus corporis.</p>

    </div>
    <div>
      <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">
    </div>
  </div>

</div>

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",
"sidebar_position" : "right",
"sidebar_spacing" : 600,
 }
%}
{% include "../path_to/vf-sidebar/vf-sidebar.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-sidebar', {
  "component-type" : "layout",
  "sidebar_position" : "right",
  "sidebar_spacing" : 600,}
%}

HTML

<div class="vf-sidebar vf-sidebar--end vf-sidebar--600">
  <div class="vf-sidebar__inner">
    <div>
      <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt, eum dolorem accusamus omnis ratione ex quidem, ducimus ab explicabo maxime animi ullam numquam nihil dignissimos quam vero. Recusandae, nihil nam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis nesciunt distinctio animi earum sint, cupiditate labore voluptate a pariatur maxime beatae dolor odit ducimus saepe? Laboriosam voluptatum delectus natus corporis.</p>

    </div>
    <div>
      <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">
    </div>
  </div>

</div>

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",
"sidebar_position" : "start",
"sidebar_spacing" : 800,
 }
%}
{% include "../path_to/vf-sidebar/vf-sidebar.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-sidebar', {
  "component-type" : "layout",
  "sidebar_position" : "start",
  "sidebar_spacing" : 800,}
%}

HTML

<div class="vf-sidebar vf-sidebar--start vf-sidebar--800">
  <div class="vf-sidebar__inner">
    <div>
      <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">
    </div>
    <div>
      <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt, eum dolorem accusamus omnis ratione ex quidem, ducimus ab explicabo maxime animi ullam numquam nihil dignissimos quam vero. Recusandae, nihil nam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis nesciunt distinctio animi earum sint, cupiditate labore voluptate a pariatur maxime beatae dolor odit ducimus saepe? Laboriosam voluptatum delectus natus corporis.</p>

    </div>
  </div>

</div>

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",
"sidebar_position" : "start",
"sidebar_spacing" : 400,
"sidebar__main_content_width" : "60%",
 }
%}
{% include "../path_to/vf-sidebar/vf-sidebar.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-sidebar', {
  "component-type" : "layout",
  "sidebar_position" : "start",
  "sidebar_spacing" : 400,
  "sidebar__main_content_width" : "60%",}
%}

HTML

<div class="vf-sidebar vf-sidebar--start vf-sidebar--400" style="--vf-sidebar-main-width: 60%;">
  <div class="vf-sidebar__inner">
    <div>
      <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">
    </div>
    <div>
      <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt, eum dolorem accusamus omnis ratione ex quidem, ducimus ab explicabo maxime animi ullam numquam nihil dignissimos quam vero. Recusandae, nihil nam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis nesciunt distinctio animi earum sint, cupiditate labore voluptate a pariatur maxime beatae dolor odit ducimus saepe? Laboriosam voluptatum delectus natus corporis.</p>

    </div>
  </div>

</div>

The Visual Framework

Patterns

Container

Block

Element

Layout

Forms

Utility

Tools

Search

Sidebar Layout layout

Usage

Class Names

CSS Custom Properties

Nunjucks and Yaml Key/Value Pairs

Variants

Start variant

Using `include`

Using `render`

End variant

Using `include`

Using `render`

End 400 variant

Using `include`

Using `render`

End 600 variant

Using `include`

Using `render`

Start 800 variant

Using `include`

Using `render`

Start 400 60 variant

Using `include`

Using `render`

Examples

Sass/CSS

Changelog

1.0.0-alpha.2

1.0.0-alpha.1

Assets

Sidebar Layout layout

Usage

Class Names

CSS Custom Properties

Nunjucks and Yaml Key/Value Pairs

Variants

Using include

Using render

Using include

Using render

Using include

Using render

Using include

Using render

Using include

Using render

Using include

Using render

Examples

Sass/CSS

Changelog

1.0.0-alpha.2

1.0.0-alpha.1

Assets

Using `include`

Using `render`

Using `include`

Using `render`

Using `include`

Using `render`

Using `include`

Using `render`

Using `include`

Using `render`

Using `include`

Using `render`