@visual-framework/vf-sidebar

1.0.0-alpha.2 • Public • Published

vf-sidebar component

npm version

About

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

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

Install

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

Help

Readme

Keywords

Package Sidebar

Install

npm i @visual-framework/vf-sidebar

Weekly Downloads

320

Version

1.0.0-alpha.2

License

Apache 2.0

Unpacked Size

32.4 kB

Total Files

13

Last publish

Collaborators

  • bhushan-ebi
  • pacope92
  • ebiwebdev
  • sandykadam
  • khawkins98