Gotchas

• Accounting for scrollbars in IE
• Handling Declarations Across Specs
• Configuration Breakpoints Caveats
• Offsetting an nth child
• Using a CSS Custom Property as a tidy-* property value

Accounting for scrollbars in IE

In order to make vw set the correct width without overflowing in IE, set scrollbars to autohide.

body {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

Handling Declarations Across Specs

If the same span or offset is used across configured breakpoints, either:

1. Append the declaration with !tidy (new in 0.4.1-beta)
2. Redeclare the values in a media query for the breakpoint at which the columns spec changes

Note: When compiling from Sass, you're required to escape the ! in the !tidy rule: \!tidy

Configuration Breakpoints Caveats

• Each breakpoints key must be based on a min-width breakpoint.
• The breakpoints keys must all use the same units.
• The media query declarations in the CSS must use the same units as those declared in breakpoints.
• If there is more than one match from the CSS, the plugin will fall back to the root options.
  • For example, if a media query were to match two breakpoint configurations, it would use neither rather than trying to choose.

Offsetting an nth-child

Offsetting an element other than the first in the row requires the previous sibling have a gap margin applied in order to maintain alignment.

.item {
  tidy-span: 3;
}

.item:first-child {
  /* without this, the next sibling would be too far left */
  margin-right: tidy-var(gap);
}

.item:nth-child(2) {
  tidy-offset-left: 2;
}

Using a CSS Custom Property as a tidy-* property value

don't do this. it won't work. sorry.

div {
  --span-value: 3;
  tidy-span: var(--span-value); // This won't work.
}