A few new features have landed in Susy 1.0.7, even as we work on more
integrated syntaxes for 2.0.
Sub-pixel rounding has always been a problem for fluid design. Susy
takes care of the most egregious layout-breaking cases, but there is no
way to entirely eliminate the problem.
John Albin Wilkins has a demo of the problem, as well as a proposed
solution. He hasn’t eliminated rounding errors, he just found a way to
keep them from piling up. Every float is positioned relative to its
container, rather than the float before it. It’s a bit of a hack, and
removes content from the flow, so I don’t recommend building your entire
layout on isolated floats, but it can be very useful as a spot-check
when rounding errors are really causing you a headache.
(Note that rounding errors can still stack up when you use a gradient
background for testing. Gradient background grids are useful, but you
should never trust them as a pixel-exact guide.)
Using John’s method, you can now isolate any grid element in susy,
with the simple
See the Pen Susy Isolation Demo: Syntax by @miriamsuzanne on CodePen.
When you put several of those together, you can see how they have been
removed from the flow:
See the Pen Susy Isolation Demo: Multiple by @miriamsuzanne on CodePen.
The items can overlap, and stack in any order – almost as though they
are positioned absolutely.
Isolation is most useful when you are repeating the same grid math again
and again, such as image-galleries. To help with that use-case, we’ve
isolate-grid() mixin. You just tell us how wide each item
should be, and we’ll calculate the locations, applying them with
Change the span-width, and we’ll update everything for you:
See the Pen Susy Isolation Demo: Gallery by @miriamsuzanne on CodePen.
Bleed has nothing to do with isolation, it just happened to appear in
the same update. Bleed uses negative margins and equal-but-positive
padding to let an element’s background “bleed” outside the area it would
Here’s an element bleeding 1-column outside our 6-column page layout:
See the Pen Susy1 Bleed Demo: Syntax by @miriamsuzanne on CodePen.
You’ll notice that the context syntax is a bit different here:
(1 of 9) instead of
(1,9). That’s the direction we’re heading with
Susy 2.0, and it’s very helpful in this case, because there’s another
argument we want to access easily. Use the second argument to list which
sides should do the bleeding (defaults to “left right”). You can also
pass arbitrary widths in the first argument:
See the Pen Susy1 Bleed Demo: Sides by @miriamsuzanne on CodePen.
This can be especially useful to bleed across
bleed($grid-padding) and you’re there.