0

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
pablocarmona
  • 5
  • 4
  • 1
    The "debug" mode should apply a background image to any use of the `container` mixin. Is that mixin used anywhere? If so, is there any chance you are overriding the generated background-image with one of your own? Also: I'm not sure I understand yet how `isolate` is breaking the buttons. Can you provide more explanation? – Miriam Suzanne Jul 10 '17 at 20:04
  • 1
    We need to have two Susy static layouts. One for small breakpoints (`$tablet: 46.125em; - 738px`) and another to bigger ones (`$desktop: 70.875em; - 1134px`) want to archive this https://codepen.io/IgnaciodeNuevo/pen/XgPgVG So we want when the layout gets bigger than `$desktop: 70.875em` to chanche to $susy-desktop – pablocarmona Jul 11 '17 at 11:10
  • To give you more info here is the output http://imgur.com/a/r5rIj As you can see the code in the DevTools the `.w01-wrapper .btn--full ` gets a `margin-right: -100%;` – pablocarmona Jul 11 '17 at 11:42

1 Answers1

0

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.

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43