Skip to main
Article

Isolation and Bleed in Susy

A few new features have landed in Susy 1.0.7, even as we work on more integrated syntaxes for 2.0. The isolate() and isolate-grid() mixins help you manage the worst effects of sub-pixel rounding, while bleed() helps you break items out of the box.

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 isolate() mixin:

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 added the isolate-grid() mixin. You just tell us how wide each item should be, and we’ll calculate the locations, applying them with nth-child selectors.

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 normally occupy.

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 $grid-padding. Simply bleed($grid-padding) and you’re there.

Happy coding!

Recent Articles

  1. A stand of smartphones
    Article post type

    When to Choose a Native Mobile App

    Part 2 – Responsive Web App vs Native Mobile App vs Progressive Web App

    If you have an idea for a digital product, you may be wondering if you should build a responsive web app, a native mobile app, or a progressive web app. Is one option inherently better? What are the pros and cons? This is part 2 of a three-part series unpacking…

    see all Article posts
  2. spider web with dew drops
    Article post type

    When to Choose a Responsive Web App

    Part 1 – Responsive Web App vs Native Mobile App vs Progressive Web App

    The decision of what platform to use to build your app is quite important – affecting project scope, timeline, and budget. But understanding the differences between a responsive web app, a native mobile app, and a progressive web app – and deciding which one is right for your project …

    see all Article posts
  3. The top front of a bright yellow shipping container with the door open and a blue sky behind it
    Article post type

    Can We Query the Root Container?

    The complexities of containment, overflow, and ‘propagation’

    I spoke about Container Queries at both Smashing Conference (San Francisco) and CSS Day (Amsterdam) – where I recommended setting up a root container to replace most media queries. Since then, Temani Afif pointed out a few issues with that approach, and sent me down a rabbit hole of overlapping…

    see all Article posts