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).
• В настройках можно указывать единицы измерения (пока опционально, в будущем перенесем в интерфейс).

Рис. 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 плагина.
Исправить вышеперечисленные минусы.
Добавить несколько фич, таких как например линейка.
И собственно собрать баг-репорт и пожелания.