ModularGrid — модульная сетка в браузере (и не только сетка)

    ModularGrid — это небольшая программка на javascript (около 30 КБ), которая облегчает труд HTML-верстальщика.


    Основные возможности ModularGrid


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



    Демо


    Попробуйте modulargrid в действии — смотрите демо-страницу проекта.

    Чем ModularGrid отличается от аналогов


    • работает во всех браузерах
    • содержит в себе много инструментов для HTML-вёрстки
    • все настройки задаются прямо в к коде modulargrid, что позволяет подключить этот файл на всех страницах и использовать одну и ту же конфигурацию для всего проекта
    • легко настраиваются не только по функциональности (фиксированные и тянущиеся макеты, различные единицы измерения — пикселы, em’ы, проценты и т. п.), но и внешний вид и сочетания клавиш
    • не требует использования дополнительных CSS-файлов, изображений, сторонних библиотек

    Что еще


    Багрепорты прошу слать на страницу проекта на Google Code, за обновлениями следите там же. Также на Google Code есть краткий обзор похожих инструментов. Если у вас появятся уже свёрстанные страницы с помощью modulargrid, присылайте ссылки, с радостью размещу!

    Отдельной строкой спасибо Алексею Черенкевичу (cherenkevich) за идею, первые реализации и вдохновение к работе на проектом.
    Поделиться публикацией

    Похожие публикации

    Комментарии 65

      +6
      Спасибо
        –1
        Первый и очень неприятный минус — хоткеи управления в демке совпадают с некоторыми хоткеями браузера (Опера 10.50)
          +4
          Не подскажете какие? Ctrl +; и Ctrl + '?
          Просто специально старался на хоткеи не попасться
            0
            Пардонти =) Это я глючу, все ок.
              +3
              Ничего страшного )
              Ещё раз пройдусь по сочетаниям горячих клавиш в браузерах.
                –4
                В FF «Ctrl +» — увеличение шрифта.
                  +1
                  «+» я использую для обозначения одновременного нажатия.
                  То есть «Ctrl + ;» означает «нажмите Ctrl и; одновременно»
                    +1
                    У него написано «Ctrl+;» и «Ctrl+'»
                    Я, если честно, сам не сразу понял. (:
                  0
                  Пардон, туплю, кавычку не заметил…
                    0
                    ок, бывает =)
                0
                Эх, у меня задана комбинация Ctrl + ' для Punto (отменить смену раскладки).
                Зачетный скрипт, попробую в реальных условиях, спасибо!
              –4
              Было бы удобнее, если бы это реализовали в виде плагина на FF.
                +10
                Идея была в том, чтобы работало во всех браузерах — задал конфигурацию для страницы и проверяешь во всех браузерах.
                  +3
                  Ну нафиг. Все бы в плагины.
                  Я не пользуюсь при разработке только FF — а одновременно несколькими браузерами. В таком виде это работает везде — а так только в фф.
                    +1
                    web developer позволяет добавлять направляющие
                      0
                      Наш выбор.
                    0
                    Я, когда изредка что-то верстаю, очень люблю пользоваться Вот этим инструментом.
                      0
                      У этого инструмента и ModularGrid'а разное назначение: указанный вами инструмент больше похож на файрбаг и дебагер разметки (сетка там в роли приятной «плюшки»), а ModularGrid — исключительно для отладки визуальной компоновки страницы (вертикали, горизонтали, ритм и т.п.).
                      +2
                        0
                        Спасибо!
                        Про ваш инструмент у меня есть пара строк в обзоре на странице проекта.
                        Больше тулзов для верстальщиков — полезных и разных!
                          0
                          Инструмент отличный. Но у него есть один недостаток: он работает на jQuery. А из этого могут вытекать проблемы несовместимости, если Вы, например, будете с MooTools работать.
                            +1
                            У JQuery вроде есть неконфликтный режим
                          –1
                          На маке не работает!
                            +3
                            К сожалению (или к счастью) я работаю на Маке и у меня всё ок.
                            Проверьте всё ещё раз, и, если проблема останется, напишите багрепорт.
                              0
                              Мистика какая-то, заработало :))
                              Но, по-моему, было бы удобнее, если бы всесто ctrl использовался cmd.
                                +1
                                Оказалось, что дело не в мистике, а в раскладке.
                                На русской не работает.)
                                  0
                                  Учту, если оставите багрепорт
                                0
                                Я думаю с счастью.
                                  0
                                  Скажите, а Вы используете Ctrl или Cmd?
                                  Потому как у мен в ff3.6, mac os x 10.6.3 не арбайтен ни так, ни так (
                                    0
                                    В FF 3.6 Ctrl — пока работает. Попробуйте поменять раскладку, может дело в ней?

                                    Cmd под Оперой
                                0
                                Пользовался самопальным, но он он только макет накладывал, а Ваш круче. Решетка — ок
                                  +2
                                  Пишите пожелания, багрепорты и предложения — не стесьняйтесь!
                                  0
                                  На самом деле очень правильная штука, когда макеты дизайнеры с умом собирают, к счастью в нашей конторке с этим проблем нет, а вот до этого в предыдущей компании были ежедневные случаи, что дизайнеры попросту не знают что сетка должна быть! поэтому во втором случаи приходится попросту в FF подключать pixelperfect
                                    0
                                    С ModularGrid вы можете попросту использовать наложение изображения-макета не только для FF, а для любого браузера
                                    0
                                    На маке не работает( Планируется поддержка?
                                      0
                                      Уже обсуждалось.
                                      Скорее всего проблема в русской раскладке, также на Опере вместо Ctrl нужно нажимать Cmd.

                                      А баг про раскладку уже есть в ишьзах (спасибо неравнодушным!) исправлю как можно скорее.
                                      0
                                      В мемориз, полезный тулз, особенно с учётом поддержки флюидов и полного кросса.
                                      На 7х виндах работает вне зависимости от раскладки, кстати, наверное, это чисто макосевская трабла.
                                        0
                                        Over Quota
                                        This Google App Engine application is temporarily over its serving quota. Please try again later.

                                        хабраэфект?
                                          0
                                          Да, уже несу на другой хостинг.
                                          Попробуйте через 15 минут.
                                            0
                                            если нужна будет помощь — говорите ^_^
                                            весч оценил, пользуюсь!
                                              0
                                              если нужна будет помощь — говорите ^_^

                                              ок

                                              весч оценил, пользуюсь!

                                              очень приятно
                                          0
                                          большое спасибо за инструмент

                                          тут подумалось, может по аналогии с макетом-изображением на отдельное сочетание повесить вывод списка команд поверх окна?
                                          подозреваю, что функционал будет расти и сразу все кнопки не запомнишь, а с этой фишкой достаточно точно запомнить 1 сочетание, остальные будут в подсказке.
                                          +1
                                          Хоткеи очень смешаны. Мне, например, слишком непривычно, что одни действия на Ctrl, другие — на Shift.
                                          Понятно, что можно в исходниках поменять… но все-таки good defaults.
                                            0
                                            Сложно выбрать хоткеи, чтобы не пересекались.
                                            Обязательно учту замечание в ближайшем релизе.
                                            +1
                                            Т.к. рабочий инструмент — firefox+firebug, то вполне доволен плагином GridFox. Хорошо конечно что такое есть, но… это не новость «ухх, уникальная штука», это новость «сделали еще одну реализацию».
                                              +3
                                              Я, в общем-то, и не претендую)
                                              0
                                              www.sprymedia.co.uk/article/Grid

                                              Добавил этот скрипт на панель — работает во всех браузерах
                                                0
                                                Крутая штука, но нету «резиновой» сетки, направляющих и наложения макета.
                                                Добавлю в обзор похожих инструментов.
                                              0
                                              Чем проще — тем лучше. Спасибо, попробую применить на практике.
                                                0
                                                А что за сайт на скрине? Можно адрес узнать? =)
                                                –2
                                                Мы используем похожую методологию проектирования сайтов, и сделали онлайн сервис с похожей идеей: gridpapr.com
                                                Если есть полезные идеи — можно реализовать.
                                                  0
                                                  То есть ваш сервис совсем другой тематики.
                                                    0
                                                    Просто модульные сетки бывают разные.
                                                    Вы правы, наш сервис не точно по теме топика, но он относится к смежной тематике и может быть полезен людям использующим сетки в дизайне.
                                                  0
                                                  А возможно сделать сохранение параметров? Потому что после перезагрузки страницы снова настраивать сетку надоедает…
                                                    0
                                                    Параметры и так сохраняются.

                                                    Если вы имели ввиду состояние сетки (что показано, а что нет), то да, это будет в ближайшем обновлении буквально на днях уже.
                                                      0
                                                      Если вы имели ввиду состояние сетки...

                                                      Как раз именно это я имел ввиду :)
                                                      Спасибо.
                                                    +1
                                                    У вас получился удобный, простой и функциональный инструмент + красивая реализация, как по мне. Пожалуй, лучшее из того, что встречал. Спасибо, стану использовать.

                                                    Ещё будет здорово, если вы добавите поддержку сброса значения z-index у направляющих и сетки горячей клавишей. Т.е. чтобы z-index=255 менялся на z-index=0 и обратно. Это полезно, когда некоторые блоки появляются только onhover, но хочется выровнять их по сетке.
                                                      0
                                                      Ого! Спасибо за ценное предложение, обязательно пойдёт в релиз!
                                                        +1
                                                        Хмм, если ещё немного помечтать, то также хотелось бы иметь возможность задавать вертикальные направляющие не от границы окна браузера, а относительно «центральных» направляющих (type: 'center'). К примеру, сейчас я верстаю макет фиксированной ширины, и все вертикальные направлющие (кроме «центральных») меняют своё положение при ресайзе окна. В принципе, если направляющие совпадают с модульной сеткой, то описанная функциональность уже избыточна, но в редких случаях есть резон иметь такую опцию.

                                                        Возможно, тогда есть смысл вообще все вертикальные направляющие позиционировать только относительно центральных (если они заданы)?
                                                          0
                                                          Я думаю в будущем реализовать механизм вложения направляющих в type=«center».
                                                            0
                                                            Круто! ))

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

                                                    Самое читаемое