网格切换疑难解答

按照可视化网格 https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-grids 说明，我一直在尝试使切换功能正常工作。

首先，有人可以解释以下内容实际上应该做什么吗？

compass install singularitygs/grid-toggle

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

compass install singularitygs/box-sizing

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

我的项目与奇点一起工作得很好(这只是 1 个 SASS 文件，1 个 html 文件(

@include背景网格在 SCSS 文件中工作，但这是第一种方法，我对切换版本感兴趣。

我尝试手动包含提供的 grid.js 和 grid.min.js 文件，并在我的索引.html文件的头部引用它们。我按照建议将数据开发网格="显示">添加到正文标签中。我什至无法让网格默认显示，更不用说让它与切换一起使用了。

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

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

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

任何帮助表示赞赏。

谢谢

快速的答案是让你参考我关于同一主题的问题和答案，大约两个问题前。但是，基本上有三种方法。您找到的第一个，您可以将"@include背景网格"放置在您希望显示网格的元素中。我想你会发现你不能按照指示安装网格切换，但我认为你不需要。第二种方法是切换。您必须将 style.scss 中的 '@include grid-toggle' 放在 * { ... } 选择器或 html{ ... } 选择器中。您在网页的头部引用脚本网格.js。但是，该脚本假定您希望在正文div 上使用网格。您可以在正文打开div 中添加 data-development-grid="show"(或"hide"(。

你可以通过将 data-development-grid="show" 添加到 wrapdiv 中，将网格放在另一个元素上，例如 wrapdiv(我们不是都使用wrap吗？(，但随后您需要修改 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网格覆盖('#wrap'(; 到 style.scss 文件中的 *{ ...} 或 html{ ... } 元素。您会在左下角得到一个 4 行符号，当您将鼠标悬停在它上面时，它会导致网格出现 - mouseoff = 消失。

我假设您希望网格包含在包装div 中，但您可以将其放在您喜欢的位置。

我希望这有所帮助。

对我来说，

它使用以下命令工作：捆绑执行指南针安装奇点gs/网格切换

相关内容

最新更新

热门标签：