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

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


singularitygs
person jmoughon    schedule 21.08.2013    source источник
comment
Под небольшими проблемами вы имеете в виду сообщения об ошибках или что?   -  person David Starkey    schedule 21.08.2013
comment
Я не мог заставить его визуализировать. Я не уверен на 100%, как правильно вызвать миксин.   -  person jmoughon    schedule 21.08.2013

Ответы (1)


arrow_upward
2
arrow_downward

Это можно найти глубоко в драгоценном камне Singularitygs 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 вертикальных полос в левом нижнем углу вашей веб-страницы, а сетка появляется при наведении курсора мыши. Похоже на домашнюю страницу Susy

person prasutagus    schedule 07.09.2013