Is there an example or more documentation for how to do visualize the grid?

Question

I am having a little trouble figuring out how to turn on the grid visualization: https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-grids. Can someone point me to more help or share an example?

Answer 1

This can be found deep within the singularitygs Ruby gem:

Grid Overlay & Background

There are three ways you can display a grid:

1. Manually apply the background to the element

   .container {
     @include background-grid;
   }
   

2. Add a switch to toggle an overlay -

   @include grid-overlay('.container');

3. Toggle grid with JavaScript @include grid-toggle in an SCSS * { … } or html { … } element. Add [data-development-grid="show"] to item you want grid applied to Add "grid.js" to the HTML head

   The first will apply a grid background to your container calculated using your grid settings, media breakpoints etc.

   The second will add a switch to your page which allows you to view a grid overlay over your container (or if none is provided) by hovering over the switch. if you need your mouse for other things you can toggle the overlay on permanently by inspecting and checking :hover in your styles panel.

   The third will allow you to toggle your background grid on and off by pressing the 'g' on your keyboard.

I couldn't get grid.js to work, so I rewrote it using a bit of jQuery. Here is my version:

// A working jQuery/javascript script for the hide/show grid

$(document).ready(function() {
    $('html').keypress(function(event) {

    if (event.which === 103) {
        var wrap = document.getElementById("wrap");
        var dev = wrap.getAttribute('data-development-grid');
        if (dev === null || dev === 'hide') {
            wrap.setAttribute('data-development-grid', 'show');
        }
        else {
            wrap.setAttribute('data-development-grid', 'hide');
        }
    }

});

});

I find method 2 is rather neat. You get a symbol of 4 vertical bars in the bottom left of your webpage and the grid appears with mouseover. Similar to Susy's Home Page