Extend Grid — делаем жизнь верстальщика немного проще

    Само понятие модульной сетки, за последние несколько лет стало чрезвычайно модным. В первую очередь у дизайнеров. И во-вторую очередь у верстальщиков.

    В принципе это и неплохо. Верстальщик исходя из специфики своей профессии должен любить порядок и модульные сетки при их грамотном применении, довольно значительно упрощают жизнь и вносят приятную гармонию при верстке макета.

    Немного про модульные сетки

    Модульная система вёрстки — система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали. По мотивам Википедии.



    И еще несколько ссылок:

    http://cherenkevich.livejournal.com/38085.html
    www.htmlbook.ru/content/?id=79

    Также про модульные сетки не раз писали и на Хабре.

    Одним из распространителей сеток, стал небезызвестный фреймворк 960.gs. Сейчас их много, любой уважающий себя CSS-фреймворк не обойдется без волшебного слова grid :), наример тот же Blueprint.

    Следую этим модным веянием и течениям, на верстку все чаще и чаще приходят макеты сделанные по той или иной стеке (чаще конечно 960.gs). Конечно же появилось масса инструментов и генераторов сеток, но неудобно. Неудобно каждый раз генерировать сетку и вставлять в css. Сложно редактировать, сложно отключать. Очень часто проявляются различные баги под разными браузерами.

    Да, есть несколько инструментов под Firefox. Первый минус, их немного — Web Developer и GridFox. А второй и самый главный минус, работает только под Firefox. А хотелось, что бы работало под всеми браузерами.

    Также есть еще один очень похожий аналог http://gridder.andreehansson.se/, но опять-таки строгая привязка к 960, увы… Но идея и реализация очень похожая.

    Может быть и еще есть, но искать было уже лень.

    В мечтах появилось желание сделать небольшую панельку, с помощью которой можно сделать любую сетку (необязательно 960) и вставить в любое место. И что бы данные о сетке сохранялись и что бы работало в любом браузере.

    Вот так такой небольшой short-лист, который из мечты превратился в реальность.

    Что в итоге получилось?
    • Небольшой скрипт на JavaScript. В сжатом в виде меньше 10 Кб.
    • Работает в любом браузере, который поддерживает JavaScript :)
    • Позволяет делать любые модульные сетки.
    • Специальная формочка (Линии) для балансировки вертикального ритма (пр вертикальный ритм можно почитать здесь ).
    • Сохраняет данные локально, в куках.
    • Можно вставить в любое место (по ID).
    • В настройках можно указывать единицы измерения (пока опционально, в будущем перенесем в интерфейс).


    Extend Grid

    Рис. 1 — Extend Grid в действии

    Как пользоваться? Очень просто. Просто подключить три js-файла. Если кого-то смущает количество подключаемых файлов, их можно объединить в один. Ради удобства Extend Grid разделен на три части — локализация, настройки и собственно сам основной скрипт.

    Пример:

    <script type="text/javascript" src="http://grid.wlcteam.ru/1.1/extend.grid.ru.pack.js"></script>
    <script type="text/javascript" src="http://grid.wlcteam.ru/1.1/extend.grid.settings.js"></script>
    <script type="text/javascript">
    // В каком диве показывать сетку (по ID)
    var parentGridLayout = "wrapper";
    </script>
    <script type="text/javascript" src="http://grid.wlcteam.ru/1.1/extend.grid.min.js"></script>


    Все исходники лежат тут.
    Также можно все скачать в едином архиве.

    Но не без минусов

    В каждом браузере, придется заново вводить данные.
    Нет разделения на проекты. Конечно можно разделять с помощью куков в настройках, но хотелось бы в интерфейсе.
    Недостатки в интерфейсе. В данный момент четкая привязка к пикселям. Да, можно менять через настройки, но единица измерения через чур глобальна, применяется ко всем модулям, как к колонками, так и столбцам.

    Основные минусы в интерфейсе, которые в принципе поправимы. Но в целом Extend Grid себя уже оправдывает, после боевых тестов в нескольких проектах.

    Планы

    Переписать код и оформить в виде JQuery плагина.
    Исправить вышеперечисленные минусы.
    Добавить несколько фич, таких как например линейка.
    И собственно собрать баг-репорт и пожелания.
    Метки:
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 28
    • +3
      В целом все максимально просто и удобно.
      Не хватает drag and drop окошка. И еще можно было бы сделать окошко прозрачным, а при наведении убрать прозрачность.
      • 0
        Как по мне — так все-равно верстальщику просто прийдется пройти через ФаерФокс, хотя бы для проверки кроссбраузерности. Т.е. таковое чудо МАСТ ХЭВ любой верстальщик… Исходя из этого WebDeveloper, в принципе, не стает проблемой… И зачем усложнять(ИМХО) жизнь и без того затурканного верстальщика Джава Скриптами???

        Хотя все это чисто мое мнение ;)
        • 0
          Можно было бы оформить для Greasemonkey в огнелисе там можно навешивать команды скрипта, то есть запускать только когда надо, а так же с помощью них же сохранять все в куках…
          Да и в остальных браузерах [кроме ИЕ] можно подключать сторонние скрипты, правда не знаю можно ли им добавлять пункты меню…
          • +5
            Тянется?
          • +3
            Плохо то, что приходится вычислять размер сетки — количество ячеек и толщину линии. Сделайте автоматическое вычисление сетки.
            Например, хочу сетку с шагом «десять» с учетом толщины линии для дива #content.

            И неплохо было бы сохранять позицию. В куки, например.

            И еще круто будет иметь резиновую сетку. С привязкой к процентам.
            • 0
              Автоматическое вычисление сетки сделать не сложно :)

              Но есть небольшая проблема, если по ошибке верстальщика блок схлопнется и высота будет не корректной, соответственно и сетка рассчитается не правильно. Но это все условности ) Сделать можно.

              Насчет резиновой верстки согласен, есть в планах, в следующей версии появится.

              А что вы имеет в виду с сохранением позиций?
              • +1
                чтобы по контрол+эфпять позиция сетки и состояние «скрыть/показать» не менялись. Сохраняйте значение всех полей в куки и читайте от туда же.
                • +1
                  Да хорошая идея. Обязательно сделаем
            • +3
              Я тут посмотрел как работают «столбцы» — это строки на самом деле ; )
              • 0
                поддерживаю. все-таки привычно, что и стоблы вертикальные, и колонны.
              • +1
                что-то у меня с глазами. не работает ни в хроме, ни в опере, ни в фф… :(
                • 0
                  Я так понимаю, опечатку в слове «отступ» надо править в extend.grid.ru.pack.js :) ??
                  • 0
                    Именно :) Спасибо, сейчас поправлю
                  • 0
                    олсо hashgrid.com/
                    • 0
                      Спасибо за ссылку, интересно
                    • 0
                      Еще один, очень удобный способ.

                      • +1
                        function _columns(a) {

                        document.write(' .column_ { position: fixed; '+
                        'z-index: 999; top: 0; display: block; height: 100%;' +
                        'border-right: 1px dashed #4affff; }' +
                        '* html .column_ {position: absolute; } ');

                        for (var i = 0, l = a.length; i < l; i++) {
                        document.write('');
                        }
                        }

                        _columns([2, 13, 15, 21, 34, 42, 50, 58, 66, 74, 82, 90, 98]);
                      • 0
                        Извините, я не совсем понял. Ну вот сохранил я локально в куке какую-то сетку для определенного ID, прогнал по браузерам, а дальше что?.. Не понял фокуса удобства.
                        • 0
                          вместо кук лучше пользовать localStorage например (есть в современных браузерах FF, Safari, Chrome, Opera, IE8)
                          и места больше, и апи нормальный и нет ограничений на работу в iframes,
                          а куки оставить для недобраузеров — IE6/7 (если вы их поддерживаете)
                          • 0
                            Да эту идею мы тоже рассматривали, так скорее всего и сделаем
                            • 0
                              А еще, для удобства, чтобы данные не приходилось вводить в каждом браузере вручную, можно сделать сериализацию в строку и давать возможность загружать сетку из строки. А так же можно это в параметр инициализации сетки вынести, чтобы вообще не заморачиваться с вводом настроек для разных браузеров )
                              • 0
                                Да, уже начали делать сериализацию :)
                          • 0
                            Ряды, названные «Столбцами», рвут шаблоны.
                            • +1
                              Японская мудрость.
                            • –2
                              чем же вам нравятся эти сетки? фиксированная ширина в пикселях — 19 век.
                              blog.myfreeweb.ru/post/why_i_dislike_css_grids/
                            • 0
                              Хм… Интересная штука. Только я не пойму, каким образом она упрощает работу? Столько править потом придется, или все авто сделается?
                              Думаю, лучше использовать свой фреймворк, хотя бы html+css, в котором внести небольшие правки при смене задачи, чем каждый делать новую сетку на js.

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.