Само понятие модульной сетки, за последние несколько лет стало чрезвычайно модным. В первую очередь у дизайнеров. И во-вторую очередь у верстальщиков.
В принципе это и неплохо. Верстальщик исходя из специфики своей профессии должен любить порядок и модульные сетки при их грамотном применении, довольно значительно упрощают жизнь и вносят приятную гармонию при верстке макета.
Немного про модульные сетки
Модульная система вёрстки — система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали. По мотивам Википедии.
И еще несколько ссылок:
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-лист, который из мечты превратился в реальность.
Что в итоге получилось?
Рис. 1 — Extend Grid в действии
Как пользоваться? Очень просто. Просто подключить три js-файла. Если кого-то смущает количество подключаемых файлов, их можно объединить в один. Ради удобства Extend Grid разделен на три части — локализация, настройки и собственно сам основной скрипт.
Пример:
Все исходники лежат тут.
Также можно все скачать в едином архиве.
Но не без минусов
В каждом браузере, придется заново вводить данные.
Нет разделения на проекты. Конечно можно разделять с помощью куков в настройках, но хотелось бы в интерфейсе.
Недостатки в интерфейсе. В данный момент четкая привязка к пикселям. Да, можно менять через настройки, но единица измерения через чур глобальна, применяется ко всем модулям, как к колонками, так и столбцам.
Основные минусы в интерфейсе, которые в принципе поправимы. Но в целом Extend Grid себя уже оправдывает, после боевых тестов в нескольких проектах.
Планы
Переписать код и оформить в виде JQuery плагина.
Исправить вышеперечисленные минусы.
Добавить несколько фич, таких как например линейка.
И собственно собрать баг-репорт и пожелания.
В принципе это и неплохо. Верстальщик исходя из специфики своей профессии должен любить порядок и модульные сетки при их грамотном применении, довольно значительно упрощают жизнь и вносят приятную гармонию при верстке макета.
Немного про модульные сетки
Модульная система вёрстки — система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали. По мотивам Википедии.
И еще несколько ссылок:
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 плагина.
Исправить вышеперечисленные минусы.
Добавить несколько фич, таких как например линейка.
И собственно собрать баг-репорт и пожелания.
