Susy Next content source ordered layout

Question

I'm having a few issues understanding how to produce the following layout using Susy Next.

While this is pretty strait forward with strait CSS I can't seem to get my head around doing this cleanly in Susy, or at all really.

A caveat here is that I can't add any extra wrappers into the layout, it's just four DIV blocks and has to be that way. The other caveat is that I would really prefer to be using Susy Next (I am using alpha4 at the moment).

Really kind of hoping I am just not seeing the woods for the tress as I have only been using Susy for a few weeks.

The source order is:

first
second
third
fourth

The required layout is:

    -----------------------------------------
   |  fourth    |           first            |
   |             ----------------------------
   |            |    second   |     third    |
    -----------------------------------------

Update 1.

Update to add my current CSS solution, I've included the markup and all the CSS taking affect on the page, for completeness:

<main>
  <div class="container">
    <div class="region region-first"></div>
    <div class="region region-second"></div>
    <div class="region region-third"></div>
    <div class="region region-fourth"></div>
  </div>
</main>

.container {
  *zoom: 1;
  max-width: 73.75em;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.25em;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

main .region:first-child {
  width: 66.1016949%;
  float: right;
}
main .region:nth-child(2) {
  clear: right;
  float: right;
  margin-right: 33.8983051%;
  width: 32.2033898%;
}
main .region:nth-child(3) {
  margin-right: -66.1016949%;
  width: 32.2033898%;
  float: right;
}
main .region:last-child {
  width: 32.2033898%;
  margin: 0;
}

Some Ideas for a Solution?

I started to poke the internals of Susy Next and tried called the span() function directly to just get widths, hooray this works where I just need a value for width: , however...

...where I am doing margin-right: span(4 + $gutter) the margin-right value needs to be the same value as push or pre would return, but I can't quite understand all the internals of how they work, my "magical float" of .75 when calculating $gutter is ever so slightly inaccurate, it might be right, but of course change a value in set-grid and it can be wrong, so its a rough guess at best.

What I need is a way to get the same value as pre would return, but of course just the value OR just a whole better way of doing the whole thing :)

.region {

  &:first-child {
    @include span(8 omega of 12);
  }

  &:nth-child(2) {
    $gutter: $gutters * .75;
    margin-right: span(4 + $gutter);
    width: span(4);
    float: right;
    clear: right;
  }

  &:nth-child(3) {
    margin-right: - span(8);
    width: span(4);
    float: right;
  }

  &:last-child {
    width: span(4);
  }
}

Answer 1

You're right - it's totally possible and not even very hard in Susy Next:

.region {
  &:first-child { @include span(last 8); }
  &:nth-child(2) {
    clear: right;
    @include span(4 at 5 isolate);
  }
  &:nth-child(3) { @include span(last 4 isolate); }
  &:last-child { width: span(4); }
}

The isolation option allows you to position elements at specific locations on the grid.

Answer 2

I will answer my own question. You will need to read through the original question as to why this is an answer - essentially what it comes down to is the right tool for the job. I was trying to solve my problem using Susy mixins (initially), however turning to Susy functions helped get me most of the way to a solution.

The final part is to write my own function to return the right value that I needed for the nth-child(2) div, it needs a margin-right to push it back into position the correct amount. Copying the internals of the Susy pre mixin was the obvious course of action here, and it worked, hooray!

@function elf-margin-value(
  $span,
  $columns
) {
  $this: $span, $columns;
  $value: if(index($this, outer), $this, append($this, outer));
  @return span($value);
}

So in my code I can use it like this:

margin-right: elf-margin-value(4, 12);

Minor issue - I know what index and append are doing, but not I'm not quite sure about outer.

Not the place to discuss but I wonder if this abstraction would be good for Susy Next, rather than baking this same/similar logic into several mixins. I would benefit at least :)

Anyway this is how I solved this for now, I am still very interested to hear if Eric has some advice for this and if my solution can be done easier/better.

The solution thus far is the following:

$to: to($flow);
.region {

  &:first-child {
    @include span(8 omega of 12);
  }

  &:nth-child(2) {
    margin-#{$to}: elf-margin-value(4, 12);
    width: span(4);
    float: $to;
    clear: $to;
  }

  &:nth-child(3) {
    margin-#{$to}: - span(8);
    width: span(4);
    float: $to;
  }

  &:last-child {
    width: span(4);
  }
}