EvanLovely
8/17/2014 - 2:10 AM

Debug SCSS grid layouts (like Singularity) by adding the grid order and classes assigned to it over the item

Debug SCSS grid layouts (like Singularity) by adding the grid order and classes assigned to it over the item

grid-debugger.scss
content_copyfile_download
.grid-container {
  //debugger
  counter-reset: grid-item;
  [class*="grid-span-"] {
    outline: dotted 1px red;
    position: relative;
    &:hover {
      &:before,
      &:after {
        background: hsla(0,0%,0%,0.0);
        font-size: 1px;
      }
    }
    &:before {
      content: counter(grid-item);
      counter-increment: grid-item;
      color: white;
      font-size: 40px;
      font-weight: bold;
      text-align: center;
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: hsla(0, 0%, 0%, 0.5);
      padding-top: 15px;
    }
    &:after {
      content: "class: " attr(class);
      position: absolute;
      top: 70px;
      font-size: 18px;
      color: white;
      text-align: center;
      z-index: 2;
      display: block;
      width: 100%;
    }
  }
}