Question

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

Answer 1

这可以在singularitygs Ruby gem中找到：

网格叠加＆amp;背景

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

手动将背景应用于元素

.container {
  @include background-grid;
}

添加一个开关以切换叠加层 -

@include grid-overlay（'。container'）;
使用JavaScript切换网格 @include SCSS * {...}或html {...}元素中的网格切换。将[data-development-grid =“show”]添加到要应用网格的项目将“grid.js”添加到HTML头

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

第二个将向您的页面添加一个开关，允许您查看网格通过悬停覆盖您的容器（或者如果没有提供）覆盖开关。如果你需要你的鼠标用于其他事情，你可以切换叠加层永久检查和检查：将鼠标悬停在样式面板中。

第三个允许您通过按键盘上的“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的主页相似

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

1 个答案: