Q
Version: 0.12.2
Source on Github

Blueprint Debug

Styles for debugging your grid alignments

This file can be imported using: @import "blueprint/debug"

Imports

  1. Grid Background
  2. Grid
  3. Typography

Mixins

view source 

=showgrid($image: false)
  @if $image
    background: image-url($image)
  @else
    +grid-background($total: $blueprint-grid-columns, $column: $blueprint-grid-width, $gutter: $blueprint-grid-margin, $baseline: $blueprint-font-size * 1.5)

@mixin showgrid($image: false) {
  @if $image {
    background: image-url($image);
  }
  @else {
    @include grid-background($total: $blueprint-grid-columns, $column: $blueprint-grid-width, $gutter: $blueprint-grid-margin, $baseline: $blueprint-font-size * 1.5);
  }
}

Shows a background that can be used to check grid alignment. By default this is a pure css version that only works in browsers that support gradients and multiple backgrounds, but you can pass an image url if you prefer.

view source 

=blueprint-debug($grid-image: false)
  // Use this class on any column or container to see the grid.
  // TODO: prefix this with the project path.
  .showgrid
    +showgrid($grid-image)

@mixin blueprint-debug($grid-image: false) {
  // Use this class on any column or container to see the grid.
  // TODO: prefix this with the project path.
  .showgrid {
    @include showgrid($grid-image);
  }
}