Singularity Grid-toggle

Question

I can't get Singularity's grid-toggle to work. When trying to install as per their wiki, I get the response that there is no such framework as singularitygs. It is actually installed, apparently under singularitygs/templates/ but adding the other lines anywhere doesn't seem to do anything. Does it work?

Grid-toggle is an alternative to '@include background-grid', allowing you to toggle the background grid with the key press 'g'. Having followed the installation and activation instructions (Singularity Wiki, 'visualising your grids'), I cannot get it to work. I wondered if anybody else is using it and might help. There is one sentence which reads: 'The grid-toggle mixin should not be used from within a a selector; it will write its own.' note I did not type the two letter 'a's before selector; it's in the wiki. I'm confused.

I don't have gemfile. The gem 'grid-toggle' is sitting there deep within my Ruby folder (OSX 10.7.5). I'm obviously not placing the right lines in the right place in my style.scss. The documentation isn't the best in the world, is it?

Answer 1

Try using this command: 'bundle exec compass install singularitygs/grid-toggle then you'll have a new directory inside the compass project called js containing grid.js and grid.min.js.

Answer 2

I've got the same error when using @include background-grid, but then I included it in the html {@include background-grid} and it worked :-) It should work in any css element.

Answer 3

This is my own answer - at last. Add 'data-development-grid="show"' to the html element with ID 'wrap' which is where I want the grid. Add '@include grid-toggle' to an SCSS element *{ ...} or to a html{ ...} element. I wrote a new javascript/jquery file as below in place of grid.js:

(function() {

$(document).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');
    }
        }

    });

})();

called it myToggle.js and referenced it in the head of the html page as normal. And hey presto a grid which toggles. I daresay the javascript is rubbish and there is a better way.