Foundation 5 Grid Debugger

_debug.css

.row > *:not(.columns) {
  outline: 1px solid #c00;
}
.row > *:not(.columns):after {
  color: white;
  font: bold 13px arial;
  background: #c00;
  padding: 3px;
  content: "grid: row child has no columns";
}

.row > .row {
  outline: 1px solid #c00;
}
.row > .row:after {
  color: white;
  font: bold 13px arial;
  background: #c00;
  padding: 3px;
  content: "grid: row inside row";
}

.columns > .columns,
.columns > .column,
.column > .columns,
.column > .column {
  outline: 1px solid #c00;
}
.columns > .columns:after,
.columns > .column:after,
.column > .columns:after,
.column > .column:after {
  color: white;
  font: bold 13px arial;
  background: #c00;
  padding: 3px;
  content: "grid: columns inside columns";
}

[class*=small-]:not(.columns),
[class*=medium-]:not(.columns),
[class*=large-]:not(.columns) {
  outline: 1px solid #c00;
}
[class*=small-]:not(.columns):after,
[class*=medium-]:not(.columns):after,
[class*=large-]:not(.columns):after {
  color: white;
  font: bold 13px arial;
  background: #c00;
  padding: 3px;
  content: "grid: columns class missing";
}

_debug.scss

@mixin bui-sass-debugger($message) {
  outline: 1px solid #c00;
  &:after {
    color: white;
    font: bold 13px arial;
    background: #c00;
    padding: 3px;
    content: $message;
  }
}

.row > *:not(.columns) {
  @include bui-sass-debugger("grid: row child has no columns");
}

.row > .row {
  @include bui-sass-debugger("grid: row inside row");
}

.columns > .columns,
.columns > .column,
.column > .columns,
.column > .column {
  @include bui-sass-debugger("grid: columns inside columns");
}

[class*=small-]:not(.columns),
[class*=medium-]:not(.columns),
[class*=large-]:not(.columns) {
  @include bui-sass-debugger("grid: columns class missing");
}

debug.js

var e = document.createElement("style");
e.setAttribute("type", "text/css");
e.innerText = ".column>.column,.column>.columns,.columns>.column,.columns>.columns,.row>.row,.row>:not(.columns),[class*=large-]:not(.columns),[class*=medium-]:not(.columns),[class*=small-]:not(.columns){outline:#c00 solid 1px}.row>.row:after,.row>:not(.columns):after{font:700 13px arial;background:#c00;padding:3px}.row>:not(.columns):after{color:#fff;content:'grid: row child has no columns'}.row>.row:after{color:#fff;content:'grid: row inside row'}.column>.column:after,.column>.columns:after,.columns>.column:after,.columns>.columns:after{color:#fff;font:700 13px arial;background:#c00;padding:3px;content:'grid: columns inside columns'}[class*=large-]:not(.columns):after,[class*=medium-]:not(.columns):after,[class*=small-]:not(.columns):after{color:#fff;font:700 13px arial;background:#c00;padding:3px;content:'grid: columns class missing'}";
document.getElementsByTagName("head")[0].appendChild(e);