silc offcanvas
The offcanvas module is an ultra-lightweight web component for the silc framework. The offcanvas module allows you to place content outside of the viewport, with the ability to trigger its visibility.
HTML
The offcanvas pattern consists of two main elements:
Open Trigger
The open trigger must contain an anchor link that references an element on the page with a corresponding id.
Trigger Offcanvas
Content element
The content element should contain an anchor link that is self-referencing through an id for closing the offcanvas element.
Close This content is outside of the viewport.
Class modifiers
Direction
An offcanvas element appears from the right by default, but can be modified using one of the following classes:
.........
Options
You can control when an element becomes offcanvas by overriding the $silc-offcanvas--options--becomes-visible
variable. The default value is 800px
.
Styling
As with all silc components, no deliberate style has been added. However, through a SASS fallback system, a number of SASS variables are available to easily apply design without having to write your own selectors.