Есть ли пример или больше документации о том, как визуализировать сетку?

Question

У меня возникли небольшие проблемы с выяснением того, как включить визуализацию сетки: https://github.com/Team-Sass/Singularity/wiki/Creating-Grids. Может кто-нибудь указать мне на помощь или поделиться примером?

Answer 1

Это можно найти глубоко в геме Ruby сингулярности:

Сетка и фон

Есть три способа отображения сетки:

1. Вручную применить фон к элементу

   .container {
     @include background-grid;
   }
   

2. Добавьте переключатель для переключения наложения -

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

3. Переключить сетку с помощью JavaScript @include grid-toggle в элементе SCSS * { … } или html { … }. Добавьте [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 вертикальных полос в левом нижнем углу вашей веб-страницы, и сетка появляется при наведении мыши. Похож на домашнюю страницу Сьюзи