1.0.0-alpha.2 • Public • Published

    vf-sidebar component

    npm version


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


    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


    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


    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



    npm i @visual-framework/vf-sidebar

    DownloadsWeekly Downloads





    Apache 2.0

    Unpacked Size

    32.4 kB

    Total Files


    Last publish


    • pacope92
    • ebiwebdev
    • nitinja
    • sandykadam
    • khawkins98