From 1d5e26a305949873c3e5d4cc56d2e7a2505851de Mon Sep 17 00:00:00 2001
From: Antonio Ospite <ao2@ao2.it>
Date: Mon, 10 Jul 2017 18:20:58 +0200
Subject: [PATCH] Allow to control showing grid rows and columns

The grid columns can be distracting when debugging the layout using
other tools, like for instance the svg grid from Susy:

  #page {
    @include set-container;
    background: susy-svg-grid() no-repeat scroll;
  }

So add two new configuration variables ($debug-grid-show-rows and
$debug-grid-show-columns) to control showing rows and columns of the
megatype debug grid.

The default behavior is unchanged, the user has to explicitly disable
the display of rows and columns in their configuration.
---
 megatype/_config.scss |  4 +++-
 megatype/_debug.scss  | 35 ++++++++++++++++++++++++-----------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/megatype/_config.scss b/megatype/_config.scss
index 59a04f6..2adbf0f 100644
--- a/megatype/_config.scss
+++ b/megatype/_config.scss
@@ -26,8 +26,10 @@ $site-color-names: map-keys($palettes) !default;
 // Debugging
 // ===================================
 
-// debug grid columns, grid, type baseline, & breakpoints
+// debug grid (rows, columns), type baseline, & breakpoints
 $debug-grid: true !default;
+$debug-grid-show-rows: true !default;
+$debug-grid-show-columns: true !default;
 $debug-type: true !default;
 $debug-breakpoints: true !default;
 
diff --git a/megatype/_debug.scss b/megatype/_debug.scss
index 30230bb..0f22ca9 100644
--- a/megatype/_debug.scss
+++ b/megatype/_debug.scss
@@ -54,19 +54,32 @@
 
             &:before {
                 @include all-breakpoints {
-                    background:
+                    $grid-rows-bg: null;
+                    $grid-columns-bg:null;
+                    @if $debug-grid-show-rows == true {
                         // vertical grid starts at 0
-                        linear-gradient(to bottom,
-                            transparentize(darken($debug-base, 5%), 0.4) 1px,
-                            transparent 1px, transparent $current-rootsize),
+                        $grid-rows-bg:
+                        "linear-gradient(to bottom, " +
+                            transparentize(darken($debug-base, 5%), 0.4) + " 1px, " +
+                            "transparent 1px, transparent #{$current-rootsize})";
+                    }
+                    @if $debug-grid-show-columns == true {
                         // for horizontal grid, starts at center, is more complex to draw
-                        linear-gradient(to right,
-                            transparent 0px,
-                            transparent $current-rootsize / 2 - 1px,
-                            transparentize(darken($debug-base, 5%), 0.9) $current-rootsize / 2 - 1px,
-                            transparentize(darken($debug-base, 5%), 0.9) $current-rootsize / 2,
-                            transparent $current-rootsize / 2,
-                            transparent $current-rootsize);
+                        $grid-columns-bg:
+                        "linear-gradient(to right, " +
+                            "transparent 0px, " +
+                            "transparent " + ($current-rootsize / 2 - 1px) + ", " +
+                            transparentize(darken($debug-base, 5%), 0.9) + " " + ($current-rootsize / 2 - 1px) + ", " +
+                            transparentize(darken($debug-base, 5%), 0.9) + " " + ($current-rootsize / 2) + ", " +
+                            "transparent " + ($current-rootsize / 2) + ", " +
+                            "transparent " + $current-rootsize + ")";
+                    }
+
+                    $separator: null;
+                    @if $debug-grid-show-rows == true and $debug-grid-show-columns == true {
+                        $separator: ", ";
+                    }
+                    background: #{$grid-rows-bg}#{$separator}#{$grid-columns-bg};
                     background-repeat: repeat;
                     background-position: center top;
                     background-size: $current-rootsize $current-rootsize;