Many projects we build are built off a single page – typically a full bleed map with with content panes that enter on & off the canvas. Base provides builtin ideas for creating such an interface which we'll take a look at in this example.

1. Canvas with left content pane

The main components to this interface is a parent container will be full bleed and a child container that has a col4 width and pin-left class to absolutely position this overtop of the canvas and to the left. This interface could easily be adaptable for a full width app with with slideout sidebar.

As with any absolute positioned element, the top and left position is governed by a parent element that has a position:relative. the base class contain provides this and is added to container surrounding the left pane

Map Canvas
Left panel with content
<div class='col12 pad4 contain fill-navy dark'>
  <div class='center quiet'>Map Canvas</div>

  <div class='col4 pad2 fill-darken1 pin-left'>
    Left panel with content
  </div>
</div>

2. offcanvas rule

For example sake We don't want to show the left panel right away but have it triggered on by user interaction. Let's hide it from the page by using a offcanvas-left rule which sets a negative left position to the element. To achieve the desired result the parent container will need a clip class so as to prevent the visibility of the element off the canvas.

Map Canvas
Left panel with content
<div class='col12 pad4 contain fill-navy dark clip'>
  <div class='center quiet'>Map Canvas</div>
  <div class='col4 pad2 fill-darken1 pin-left offcanvas-left'>
    Left panel with content
  </div>
</div>

3. Activate the panel with :trigger

offcanvas-left is set from -100% to 0 (on canvas) when either an active class is applied to it or a :target event is triggered. :target refers to the current hash name present in the url. I've added a 'trigger' link that has an href value of #step-3. This matches the id of the sliding panel. When the hash of #step-3 is present in the url we know that left panel should be active. The trigger link should therefore activate the presence of out sliding pane.
Map Canvas
Left panel with content
<div class='col12 pad4 contain fill-navy dark clip'>
  <div class='center quiet'>Map Canvas</div>
  <div class='pin-right pad2'>
    <a href='#step-3' class='button'>Trigger</a>
  </div>
  <div id='step-3' class='col4 pad2 fill-darken1 pin-left offcanvas-left'>
    Left panel with content
  </div>
</div>

4. Animate the panel

The current experience of a panel entering in and off the canvas is a little jarring. Let's make the experience a little smoother by applying an animate class to the sliding container. To close the panel, I've added a close link that has a href value of #. Rememeber that this resets the hash in the url and consequently returns the sliding panel back to the intial offcanvas position.

Map Canvas
<div class='col12 pad4 contain fill-navy dark clip'>
  <div class='center quiet'>Map Canvas</div>
  <div class='pin-right pad2'>
    <a href='#step-4' class='button'>Trigger</a>
  </div>
  <div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate'>
    <a href='#' class='fill-darken2 pad1 icon close'></a>
  </div>
</div>