Любой web-разработчик должен постоянно расти и развиваться. Только постоянное развитие позволяет ему оставаться конкурентоспособным на быстро меняющемся рынке.
Следующим этапом моего развития, как web-разработчика, стало использование модульной сетки, о которой я знал давно, но как-то не мог найти подходящую реализацию.
В данный момент модульная сетка для меня – это инструмент для облегчения одинакового позиционирования элементов на всех страницах сайта. И не более того.
960gridder
Это плагин или виджет (правильного слова, увы, подобрать не могу) для использования любимой на Западе web-технологии 960grid. Она примечательна тем, что максимальная ширина интерфейса сайта составляет 960 пикселей и размещается строго по центру. Такой размер позволяет с некоторой долей вероятности говорить, что на большинстве современных мониторов, ваш сайт будет отображаться в читаемом виде.
Плагин 960gridder позволяет достаточно просто накладывать сетку на открытый сайт. Всеми размерами сетки достаточно легко управлять, меняя ширину и количество отступов, цвет сетки и так далее.
Использовать плагин 960gridder достаточно просто и он работает во всех современных браузерах. Для его использования необходимо создать новую закладку стандартными средствами браузера и в качестве url-адреса указать код:
javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://gridder.andreehansson.se/releases/latest/960.gridder.js';})();Вот как эта «установка» должна выглядеть в FireFox:
Пример работы 960gridder можно посмотреть здесь:
Хотелось бы сразу сказать, что дизайн блога AdminWay разрабатывался еще до использования мной модульных сеток, поэтому эта сетка здесь показана только для примера.
В плавающем меню слева сконцентрированы все настройки 960gridder.
Для работы используется только 2 шортката:
- Ctrl + Alt + C – вкл./выкл. отображения сетки
- Ctrl + Alt + A – инвертирование цветов.
Единственное ограничение, которое накладывает использование 960gridder – это максимальная ширина. Если это для Вас не ограничение, то стоит начать использовать 960gridder уже сейчас.
ModularGrid
ModularGrid – это инструмент, который имеет более широкое применение. ModularGrid не завязан на определенную ширину интерфейса и позволяет сформировать абсолютно любую сетку.
Вот официальная страница проекта.
Из всего архива, который качается со страницы загрузки, нам нужен только 1 файл – modulargrid.js, который кладем в корень сайта и между тегами
<head>...</head>вставляем html-код его вызова:
<script src="./modulargrid.js"></script>Далее открываем сайт в браузере и нажимаем сочетание клавиш – Shift + V, у Вас должны появиться вертикальные полосы модульной сетки.
Вот все шорткаты, которыми можно пользоваться при работе с modulargrid:
- Shift + V – показать/скрыть вертикальную сетку;
- Shift + H – показать/скрыть горизонтальную сетку;
- Ctrl + ; – показать/скрыть направляющие;
- Shift + ] – сделать менее прозрачными;
- Shift + [ – сделать более прозрачными.
Их конечно же больше, но на мой взгляд эти сочетания клавиш самые востребованные.
Визуальное отображение сетки изначально очень далеко от идеала и даже от 960gridder. Поэтому возникает необходимость в немедленной его настройки. Настройки производятся посредством прямого редактирования файла modulargrid.js в любом текстовом редакторе. В нем все подробно с комментариями расписано. Проблем настройка вызвать не должна.
P.S. Свой выбор я остановил на ModularGrid, так как приходиться работать с сайтами, которые выходят за пределы 960-ти точек.
upd. 01.09.2013 Вот сервис, который позволяет визуально подобрать размеры для модульной сетки.
Комментарии
Нет комментариев к данной статье.
Комментарии