Susy-next off-canvas example

Question

Does anybody have a working example of using Susy-next (2.0 beta) showing the off-canvas layout

Similar to this http://oddbird.net/2012/11/27/susy-off-canvas/ but with the latest susy (susy-next) ?

I had tried simply to replace several missing mixins in the example above, but I do not think I find the correct analogs eg. I replaced at-breakpoint with breakpoint, span-columns with columns (and left the arguments the same)

However, I am just getting unstyled text (not even the debug grid background)

I have the breakpoint plugin installed (looking at susy-next code it appears to detect if exists and then it can use it).

At this particular juncture - I do not know quite understand what to pass into span mixin as far as the $layout variable (again I am just trying to replicate the old example referenced above line by line, may be with susy-next there are better idioms to follow)

Markup:

<div class="container">
  <header>
    <a href="#left" class="toggle">show-left</a>
    <a href="#right" class="toggle">show-right</a>
    header
  </header>
  <div class="left" id="left">left</div>
  <div class="main">main</div>
  <div class="right" id="right">right</div>
 <footer>footer</footer>

Style:

// copied from http://oddbird.net/2012/11/27/susy-off-canvas/


@import "compass";
@import "susy";

@import "config";




// --------------------------------------------
// settings

$total-columns : 5;
$column-width : 4em;
$gutter-width : 1em;
$grid-padding : 1em;

$medium-columns : 8;
$large-columns : 12;

$container-width : container-outer-width($large-columns);



// for susy-next we need layout structure

$my-susy-medium: (
    columns: $medium-columns,
    show-grids: show, // hide,
);



$my-susy-large: (
    columns: $large-columns,
    show-grids: show, // hide,
);



//  global variable used as default $layout

$susy: (
  columns: 12,
  show-grids: show, // hide,
);



// --------------------------------------------
// layout

@include border-box-sizing;




.container {
    @include container;
//    @include show-grid;
  overflow: hidden;
}

// --------------------------------------------
// small

$anchor : 1;
$side : $total-columns - $anchor;

.left {
  @include span($side);
  margin-left: -100%;
  .show-left & { margin-left: 0; }
}

.main {
  @include span($total-columns);
  margin-right: - 100%;
  .show-right & { margin-left: - space($side); }
}

.right {
  @include span($side omega);
  margin-right: -100%;
  .show-right & { margin-right: 0; }
}

// --------------------------------------------
// medium

$main : 5;
$side : $medium-columns - $main;

@include susy-breakpoint($my-susy-medium) {
  [href="#left"] { visibility: hidden; }

  .left {
    @include span($side);
    margin-left: 0;
    .show-right & { margin-left: - 100%; }
  }

  .main {
    width: columns($main);
    .show-right & { margin-left: 0; }
  }

  .right {
    width: columns($side);
    .show-right & { margin-right: 0; }
  }
}

// --------------------------------------------
// large

$main : 6;
$side : ($large-columns - $main)/2;

@include susy-breakpoint($my-susy-large) {
  [href="#right"] { visibility: hidden; }

  .left {
    @include span($side);
    .show-right & { margin-left: 0; }
  }

  .main {
    width: columns($main);
  }

  .right {
    @include span($side omega);
  }
}

// --------------------------------------------
// styles (for demo only)

.container {

    @include susy-breakpoint($my-susy-medium) { @include show-grid; }
    @include susy-breakpoint($my-susy-large) { @include show-grid; }
    text-transform: uppercase;

}

header, footer {
  @include clearfix;
  clear: both;
  min-height: 3em;
  padding: 1em;
  background: rgba(#fcf,.75);
  text-align: center;
}

.toggle { text-transform: none; }
[href="#left"] { float: left; }
[href="#right"] { float: right; }

.left, .right, .main {
  @include transition(.3s all ease);
  height: 20em;
  padding: 1em;
}
.left, .right { @include opacity(0); }

.left {
  background: rgba(#cff,.75);
  .show-left & { @include opacity(1); }
  @include susy-breakpoint($my-susy-medium) {
    @include opacity(1);
    .show-right & { @include opacity(0); }
  }
  @include susy-breakpoint($my-susy-large) {
    &, .show-right & { @include opacity(1); }
  }
}

.main {
  background: rgba(#eee,.75);
  &:after {
    @include leader;
    content: " [adjust your browser width to see the demo in action]";
    display: block;
    text-align: center;
    font-style: italic;
    text-transform: none;
  }
}

.right {
  background: rgba(#ffc,.75);
  .show-right & { @include opacity(1); }
  @include susy-breakpoint($my-susy-large) { @include opacity(1); }
}

Answer 1

Sorry, that code is a mess of old and new Susy, so I just wrote a demo from scratch, using the same technique. There would be many other ways to do off-canvas layouts, and you can use Susy with any of them. I don't know that this is the best off-canvas solution, but it's a simple one to demo.