Off-Canvas

# Intro

To create an off-canvas container you will need an off-canvas element that contains a checkbox with the class canvas-toggle along with a matching label, aside, content, and overlay classed elements. The show modifier can be added to show the sidebar on large (>=1140px) screens. Ash's documentation is made with an off-canvas.

<div class="off-canvas show">
	<input type="checkbox" id="canvas-toggle" class="canvas-toggle" />
	<label for="canvas-toggle"><i class="icon lni lni-menu"></i></label>
	<nav>
		...
	</nav>
	<aside class="--padding-4">
		...
	</aside>
	<div class="content">
		<div class="container">
			...
		</div>
	</div>
	<label class="overlay" for="canvas-toggle"></label>
</div>

# Aside

An aside is required and is what shows content on or off screen. Content inside off-canvas asides will overflow and scroll if too large. See aside documentation for more information.

...
<aside class="--padding-4">
	<a class="link">Home</a>
	<div class="links">
		<input type="checkbox" id="development" name="development" hidden>
		<label class="tab-label" for="development">Development <i class="icon lni lni-chevron-right"></i></label>
		<ul>
			<li><a href="https://atom.io" target="_blank">Atom</a></li>
			<li><a href="https://github.com" target="_blank">Github</a></li>
			<li><a href="https://slack.com" target="_blank">Slack</a></li>
		</ul>
	</div>
</aside>
...

# Content

A content classed element is required and is always displayed on screen. You can place a navbar or any other content inside. A direct child navbar will be fixed to the top. You should use the grid system inside the content.

...
<nav>
	...
</nav>
<div class="content">
	<div class="container">
		...
	</div>
</div>
...

# Overlay

An overlay classed label that matches the off-canvas checkbox is required to display an overlay when the sidebar is opened. Clicking on an overlay will toggle the checkbox and thus the sidebar.

...
<label class="overlay" for="canvas-toggle"></label>
...

# Caveats

While no JavaScript is required to make an off-canvas layout, there are a few things to consider:

• Page jumps using IDs in an anchor will not scroll correctly if there is a fixed navbar. Use the jump class on the ID of the element you wish to jump to or use JavaScript to correct the paddings/margins
• Clicking on a sidebar link on a SPA will not close the sidebar. Below is an example of some JavaScript that will close the sidebar and can be used as a function that is called using the onclick event:

var canvas = document.getElementById('canvas-toggle')

if (canvas.checked) {
	canvas.checked = false
}