Position elements with Susy

Question

I've got a bunch of articles defined in HTML5 like so:

    <section class="applications">
        <article>
            <a href="..."><img ... /></a>
            <h2>...</h2>
            <p>...</p>
            <a ... class="appstore">...</a>
        </article>

Each article has those exact same elements. Using Susy 2.x I'm trying to figure out how to place things such that the image is at the top left with empty space below it (i.e. column 1) and then to the right, taking up the rest of the width of the page, I have a vertical layout where the <h2> is above the <p> is above the <a class="appstore">.

You can see the desired format that I'm looking for in this picture:

I have the styling working the way I want, but as to the layout...I'm pretty sure I have to use the '@include span' stuff now, but after an hour of playing I just can't get it right. Thanks!

Answer 1

You never have to use Susy at all, but you certainly can. :)

This is a pretty common CSS issue because we often use floats for layout, when they were never intended that way. Susy is really just a set of shortcuts to help manage layout math, but it can't fix CSS. First solve your layout problems in CSS, and then determine where Susy can help clarify and simplify your code.

For example, here are several possible solutions in CSS, just using floats:

// Option A
// --------

.image-link {
  float: left;
  width: 24%;
}

.title, .description, .purchase {
  float: right;
  width: 75%;
}

// Option B
// --------

.image-link {
  float: left;
  width: 24%;
}

.title, .description, .purchase {
  margin-left: 25%;
}

// Option C
// --------

article {
  padding-left: 25%;
}

.image-link {
  float: left;
  width: 24%;
  margin-left: -25%;
}

There would be plenty of other solutions using absolute positioning, extra markup, or many other approaches. Which one you prefer depends on exactly how you want it to work, how much control you have over markup, etc.

Susy's span() mixin outputs a float direction (left by default, but right if you use the last keyword), a width, and optionally a gutter of some kind. The pre()/push()/pull() and prefix() mixins set margins or padding, respectively. Or you can skip the mixins entirely and use the span() function to get grid calculations anywhere you want them.

// Option A
// --------

.image-link {
  @include span(1 of 4);
}

.title, .description, .purchase {
  @include span(last 3 of 4);
}

// Option B
// --------

.image-link {
  float: left;
  width: span(1 of 4);
}

.title, .description, .purchase {
  @include pre(1 of 4);
}

// Option C
// --------

article {
  @include prefix(1 of 4);
}

.image-link {
  @include span(1 of 4);
  @include pull(1 of 4);
}

You could also use Susy's isolation feature, or a number of other approaches — all of them simply wrappers for math and CSS. Don't let Susy's abstraction hide the fact that you are working in CSS, and floats are just floats.