Grid Toggle故障排除

时间:2013-10-01 14:06:39

标签: singularitygs

在可视化您的网格https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-grids说明之后,我一直试图让切换功能起作用。

首先,有人可以解释以下实际上是做什么的吗?

compass install singularitygs/grid-toggle

我假设创建一个文件夹和一些文件,但是当我运行命令时,没有任何反应。如果我做以下事情..

compass install singularitygs/box-sizing

它按预期创建目录和文件。

我的项目可以正常使用Singularity(这只是1个SASS文件,1个html文件)

@include background-grid 在SCSS文件中工作,但这是第一种方式,我对切换版本很感兴趣。

我尝试手动包含grid.js AND grid.min.js文件,并在index.html文件的头部引用它们。我按照建议将 data-development-grid =“show”添加到body标签中。我甚至无法在默认情况下显示网格,更不用说让它与切换一起使用了。

这是我的宝石文件的一部分

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

我的简单HTML文件

<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>

我的1个SCSS文件

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

在所有上述导入中,有一些网格变量,一个容器类,一些其他基本样式。

任何帮助表示感谢。

由于

2 个答案:

答案 0 :(得分:2)

快速回答是在两个问题之前,请您参考我的问题并回答相同的主题。但是,基本上有三种方式。您找到的第一个,您可以在您希望显示网格的元素中放置'@include background-grid'。我想你会发现你无法按照指示安装网格切换,但我认为你不需要。第二种方法是切换。您必须在style.scss中将'@include grid-toggle'放在* {...}选择器或html {...}选择器中。您可以在网页的头部引用脚本grid.js。但是,该脚本假设您希望在您的body div上使用网格。你可以在body body div中添加data-development-grid =“show”(或“hide”)。

您可以将网格放在另一个元素上,例如wrap div(我们都不使用wrap吗?),通过向wrap div添加data-development-grid =“show”,但是你需要修改grid.js文件。这是我的javascript版本作为指南(似乎工作,但我不是程序员!):

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

    };

  };

})();
顺便说一句,你的身体或包裹(无论你选择哪个)都不能有背景颜色或图像,因为网格会在下面,因此不可见。

第三种方法是叠加,我特别喜欢它,因为它位于背景颜色上。为此,添加@include grid-overlay('#wrap');到style.scss文件中的* {...}或html {...}元素。您将在左下方获得一个4行符号,当您将其鼠标悬停时,它会导致网格出现 - mouseoff =消失。

我假设你想要一个换行div中的网格,但你可以把它放在你喜欢的地方。

我希望这会有所帮助。

答案 1 :(得分:0)

对我而言,它使用命令:bundle exec compass install singularitygs / grid-toggle