0

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

I can't seem to get my head around doing this cleanly in Susy, or at all really.

The source order is the following and may not be changed.

<div class="item a">A</div>
<div class="item b">B</div>
<div class="item c">C</div>
<div class="item d">D</div>

The required layout is on Mobile is like this:

    ---------
    |   B   |
    |-------|
    |   A   |
    |-------|
    |   C   |
    |-------|
    |   D   |
    ---------

The required layout is on Desktop is like this:

    ------------------
    |   A   |   B   |
    |-------|-------|
    |   D   |   C   |
    -----------------

I think this should be easy with Susy but the documentation doesn't help that much.

Thx in advacend for the Help

Felipe Gutierrez
  • 15
  • 5

1 Answers1

0

Susy Next is basically a calculator for grid-widths. When you want to reorder elements horizontally, that can be helpful - but vertical reordering is much more difficult. Susy can help with the second layout, but can't do much about the first.

Flexbox can handle both situations, though, using the order property:

.container {
  align-items: stretch; 
  display: flex;
  flex-direction: row-reverse; // flow right-to-left
  flex-wrap: wrap; // wrap top-to-bottom
}

.item {
  flex: 1 1 $preferred-width;
}

.b {
  order: 1;
}

.a {
  order: 2;
}

.c {
  order: 3;
}

.d {
  order: 4;
}

There would be other ways to achieve the different layouts using Flexbox or CSS Grid and media-queries. This seemed like the simplest option to me.

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Hi Miriam, thx for your reply. How would you do the second Layout in Susy? Because i could alter the code so that it would fit the first Layout. – Felipe Gutierrez May 22 '17 at 13:29
  • It depends a bit on your html structure. I would probably use `isolation` output on those elements. Assuming an 8-column grid: A & D `span(isolate first 4)`, B & C `span(isolate last 4)` (half width at the 5th position). Isolation uses negative margins on floats to allow somewhat "absolute" positioning off the left edge, without removing elements from the vertical flow. I find it a bit invasive as a float-hack, but it should get the job done. – Miriam Suzanne May 24 '17 at 06:25
  • Note that you have to isolate all the siblings involved for it to work reliably. Susy has no way of knowing the "default" position of an element, so it has to assume you are always working off the left edge. Isolating everything in the parent container should make that work. – Miriam Suzanne May 24 '17 at 06:27
  • Thank you so much Miriam. I love Susy & working with Susy! – Felipe Gutierrez May 24 '17 at 09:11