<ul class="grid">
    <li class="grid__column"></li>
    <li class="grid__column"></li>
    <li class="grid__column"></li>
    <li class="grid__column"></li>
    <li class="grid__column"></li>
    <li class="grid__column"></li>
    <li class="grid__column"></li>
    <li class="grid__column"></li>
    <li class="grid__column"></li>
    <li class="grid__column"></li>
    <li class="grid__column"></li>
    <li class="grid__column"></li>
</ul>
<ul class="grid">
  <li class="grid__column"></li>
  <li class="grid__column"></li>
  <li class="grid__column"></li>
  <li class="grid__column"></li>
  <li class="grid__column"></li>
  <li class="grid__column"></li>
  <li class="grid__column"></li>
  <li class="grid__column"></li>
  <li class="grid__column"></li>
  <li class="grid__column"></li>
  <li class="grid__column"></li>
  <li class="grid__column"></li>
</ul>
/* No context defined for this component. */
  • Content:
    .grid {
      @include reset-list;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      max-width: $page-width-max;
      min-height: 100vh;
      margin: 0 auto;
      opacity: .5;
      overflow: hidden;
      z-index: 500;
      pointer-events: none;
    }
    
    .grid__column {
      position: relative;
      height: 100%;
      background-color: $color-light;
    
      &::after {
        position: absolute;
        top: 0;
        right: $gutter-width-half;
        bottom: 0;
        left: $gutter-width-half;
        background-color: $color-medium-light;
        content: '';
      }
    
      @include breakpoint($breakpoint-sm-only) {
        @include span(1 of $column-count-sm);
      }
    
      @include breakpoint($breakpoint-md) {
        @include span(1 of $column-count-md);
      }
    }
    
  • URL: /components/raw/grid/grid.scss
  • Filesystem Path: src/components/01-elements/layout/grid/grid.scss
  • Size: 705 Bytes

This component exists for checking the alignment of components against the grid they were designed on. To use it, temporarily add this component to the first line of another component’s template, and remove it before committing changes.

A few notes:

  • This may evolve to have a control that toggles its visibility, etc., but for now it will have to be manually added and removed.
  • Susy, the grid framework used within the Sass, has similar debug functionality built-in, but unfortunately it doesn’t show the gutters (because we’re using inside-static for gutter-position) and is inaccurate (due to improper sub-pixel rendering of background images).