beta This component version is ready to be used but is still in active development.

Sidebar Layout layout

The vf-sidebar is a media query—less layout component that will alter the layout from inline to block depending on set parameters.

github location npm version

Usage

You can apply the vf-sidebar layout when you have two columns of content with one (if needed) being smaller than the other. When the browser width is small enough so that the 'main' content does not have enough space to be inline with the 'sidebar' it will make both pieces of content act and look like 'block' elements, stacked on top of each other.

By default the width of the main content is set at 50% but can be changed with the CSS custom property --vf-sidebar-main-width which, if using nunjucks can be changed with the yaml key sidebar__main_content_width.

Even thought the vf-sidebar layout has a default spacing design token applied as a CSS custom property fallback it is good practice in the system to use and decalre the spacing CSS class name in your project.

<div class="vf-sidebar vf-sidebar--400">...</div>

<div class="vf-sidebar">...</div>

Class Names

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 Properties

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

Nunjucks and Yaml Key/Value Pairs

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

Variants

A couple sat on a sofa looking at a laptop

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.

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>
              

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.

A couple sat on a sofa looking at a laptop
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>
              

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.

A couple sat on a sofa looking at a laptop
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>
              

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.

A couple sat on a sofa looking at a laptop
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>
              
A couple sat on a sofa looking at a laptop

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.

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>
              
A couple sat on a sofa looking at a laptop

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.

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>
              

Examples

Installation info

This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-sidebar with this command.

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

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-sidebar/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.0-alpha.2

  • updates examples to use image.

1.0.0-alpha.1

  • adds initial implementation of a two item sidebar layout.

Assets



File system location: components/vf-sidebar

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