Search code examples
csssassgridsusy

Problems with debug mode and isolate gutter-position on Susy Grid system

I'm trying to see the debug mode on Susy to know how is the grid working and figure out if we have problems, but when I add this to my susy-config it's showing no debug mode.

I'm using version 2.2.12. This is my code on _variables.scss:

$susy: (
  column-width: 45px,
  columns: 12,
  container-position: center,
  container: auto,
  global-box-sizing: border-box,
  gutter-position: after,
  gutters: 18px / 45px,
  math: static,
  output: isolate,
  debug: (
    image: show,
    color: rgba($debugg-color, .2),
    output: background,
  )
);

$susy-desktop: (
  column-width: 67px,
  columns: 12,
  container-position: center,
  container: auto,
  global-box-sizing: border-box,
  gutter-position: after,
  gutters: 30px / 67px,
  math: static,
  output: isolate,
  debug: (
    image: show,
    color: rgba($debugg-color, .2),
    output: background,
  )
);

Image of the full Grid without the debug mode and the buttons with a margin-top: -100% added because we use output: isolate.

We want the first button to span(2 at 8) and second one span(2 at 10)).

The grid overlay is a Chrome Plugin (not the Susy debug mode) that doesn't work as needed as you can see.

I'm using this Sass in our buttons:

.btn--full {
  @include span(2 at 8);
  margin-bottom: 28px;

  &.btn--ghost-darkgrey {
    @include span(2 at 10);
  }
}

This is the representation of the buttons without gutter-position: isolate and math: fluid, output: float

So we have this problems:

  • We can's see Susy's debug mode.
  • If we use isolate mode the buttons break
Solution

  • It looks like debug mode is working properly in your CodePen sample. I forked that, and added a sample $desktop breakpoint.

    Isolation is a technique developed by John Albin Wilkins, using negative right margins to help avoid sub-pixel rounding errors. Isolation removes elements from the natural flow, so it works best if you isolate all the elements in a given context. You could solve that several ways: isolating all the paragraphs so they don't overlap, or using last on the button paragraph (rather than isolation) to float the buttons right.

    Without knowing your markup limitations, or the desired look, it's hard to be more specific.

    Let me know if I missed something.