silc-offcanvas
v0.6.0
Published
Offcanvas component for the silc framework
Downloads
15
Readme
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.
<a class="silc-offcanvas__trigger" href="#silc-offcanvas-1">Trigger Offcanvas</a>
Content element
The content element should contain an anchor link that is self-referencing through an id for closing the offcanvas element.
<div class="silc-offcanvas" id="silc-offcanvas-1">
<a class="silc-offcanvas__trigger silc-offcanvas__trigger--close" href="#silc-offcanvas-1">Close</a>
<p>This content is outside of the viewport.</p>
</div>
Class modifiers
Direction
An offcanvas element appears from the right by default, but can be modified using one of the following classes:
<div class="silc-offcanvas silc-offcanvas--left">...</div>
<div class="silc-offcanvas silc-offcanvas--top">...</div>
<div class="silc-offcanvas silc-offcanvas--bottom">...</div>
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.