Susy Next content source ordered layout - css

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);
}
}