The markup from the template is

#main
  #content
  #sidebar-first
  #sidebar-second

How do you define the sass using Susy so that the second sidebar is at the very right within #main? The keyword omega doesn't work here as the divs with the order 1-2-3 should be displayed in the order 2-1-3 and I wonder how to achieve that with Susy

Comments

Snugug’s picture

Snugug commented

You're looking for the Push and Pull mixins.

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented

Great. So I did @include push(3); to push the #content to the right but how do I pull the first sidebar to the left in the grid system?

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented

Played around with it and used a concept like in Zen theme and came up with this approach that seems to work:

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

@include at-breakpoint($large-columns) {
  #sidebar-first {
    @include span-columns($side);
  }

  #content {
    width: columns($main);
    margin-right: -100%;
    @include push($side);
  }

  #sidebar-second {
    @include span-columns($side omega);
  }
}
Snugug’s picture

Snugug commented
Status: Active » Closed (fixed)

If you are going to use the Zen style floating (called Isolation output method), I'd encourage you to use Singularity instead of Susy. As you've solved this, I'm going to close this issue.