singularitygs - 是否有关于如何可视化网格的示例或更多文档？

Question

我在弄清楚如何打开网格可视化时遇到了一些麻烦：https ://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-grids 。有人可以为我提供更多帮助或分享一个例子吗？

Answer 1

这可以在singularitygs Ruby gem 的深处找到：

网格叠加和背景

可以通过三种方式显示网格：

1. 手动将背景应用于元素

   .container {
     @include background-grid;
   }
   

2. 添加一个开关来切换覆盖 -

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

3. 在 SCSS * { ... } 或 html { ... } 元素中使用 JavaScript @include grid-toggle 切换网格。将 [data-development-grid="show"] 添加到要应用网格的项目将“grid.js”添加到 HTML 头部

   第一个将网格背景应用于使用网格设置、媒体断点等计算的容器。

   第二个将向您的页面添加一个开关，通过将鼠标悬停在该开关上，您可以查看容器上的网格覆盖（或者如果没有提供）。如果您需要鼠标进行其他操作，您可以通过检查和检查样式面板中的 :hover 来永久打开叠加层。

   第三个将允许您通过按键盘上的“g”来打开和关闭背景网格。

我无法让 grid.js 工作，所以我用一点 jQuery 重写了它。这是我的版本：

// 用于隐藏/显示网格的有效 jQuery/javascript 脚本

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

});

});

我发现方法2相当简洁。您会在网页的左下方看到一个由 4 个垂直条组成的符号，并且鼠标悬停时会出现网格。类似于 Susy 的主页