Troubleshooting Grid Toggle

StackOverflow https://stackoverflow.com/questions/19118359

  •  30-06-2022
  •  | 
  •  

Question

Following the Visualizing Your Grids https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-grids instructions, I've been attempting to get the toggling functionality to work.

First off, can someone explain what the following is actually suppose to do? 

compass install singularitygs/grid-toggle

I am assuming create a folder and some files, but when I run the command, nothing happens. If I do the following..

compass install singularitygs/box-sizing

It creates directories and files as expected.

My project works fine with Singularity (this is just 1 SASS file, 1 html file)

@include background-grid works within the SCSS file, but that's the first way of doing it and I'm interested in the toggle version.

I have tried to manually include the grid.js AND grid.min.js file provided and referenced them in the head of my index.html file. I added the data-development-grid="show" to the body tag as suggested. I can't even get the grid to show by default, let alone getting it to work with the toggle.

Here is part of my gem file

gem 'toolkit', '~>1.0.0'
gem 'singularitygs', '~>1.0.7'
gem 'breakpoint', '~>2.0.2'

group :development do
  gem 'guard'
  gem 'guard-compass'
  gem 'guard-livereload'
end

And my simple HTML file

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/screen.css" />
<script type="text/javascript" src="javascripts/grid.min.js"></script>
<script type="text/javascript" src="javascripts/grid.js"></script>
</head>
<body data-development-grid="show">
  <h1>test</h1>
  <div id="mydiv" class="no-mqs container">
    <p>This is my div</p>
  </div>
</body>
</html>

And my 1 SCSS file

@import 'compass';
@import 'compass/reset';
@import 'toolkit';
@import 'singularitygs';
@import 'breakpoint';

There are some grid variables, a container class, some other basic styles below all of the above imports.

Any help appreciated.

Thanks

Was it helpful?

Solution

The quick answer is to refer you to my question and answer on the same topic, about two questions ago. However, basically, there are three ways. The first you have found and you can place '@include background-grid' in the element that you wish to have a grid shown. I think you will find that you can't install grid-toggle, as directed, but I don't think you need to. The second method is the toggle. You have to place '@include grid-toggle' in your style.scss in either a * { ... } selector or an html{ ... } selector. You reference the script grid.js in the head of your web page. However, that script assumes you want the grid on your body div. You add data-development-grid="show" (or "hide") inside the body opening div.

You can put the grid on another element such as a wrap div (don't we all use wrap?), by adding data-development-grid="show" to the wrap div, but then you need to modify the grid.js file. Here is my javascript version as a guide (seems to work, but I'm no programmer!):

(function() { 

  window.onload = function() {
    var body = document.body;
        body.onkeypress = function(e) {
            if (e.keyCode === 103 || e.charCode === 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');
                }
      }

    };

  };

})();

BTW, your body or wrap (whichever you choose) must not have a background colour or image because the grid will be underneath and therefore invisible.

The third method is the overlay, which I particularly like because it sits over the background colour. for this, add @include grid-overlay('#wrap'); to the *{ ...} or html{ ... } element in your style.scss file. You will get a 4-line symbol in the bottom left and when you mouseover it, it causes the grid to appear - mouseoff = disappear.

I've assumed that you want the grid in a wrap div, but you can put it where you like.

I hope this helps.

OTHER TIPS

For me it worked using the command: bundle exec compass install singularitygs/grid-toggle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top