Как начать использовать сетку для верстки сайтов

Меня этот вопрос мучил долгое время и более менее вменяемый ответ на него я нашел только недавно. Этим ответом является 960gridder для новичков и ModularGrid для более продвинутых.

Мне не понятна эта истерия по поводу Bootstrap`а и подобных ему фреймворков, так как по мне делать сайты с большим количеством избыточного кода – это неправильно. Ну а выигрыш по времени разработке может и есть, но жертвы на это великоваты.

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

Любой web-разработчик должен постоянно расти и развиваться. Только постоянное развитие позволяет ему оставаться конкурентоспособным на быстро меняющемся рынке.

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

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

Кстати, если Вы покупаете SSL-сертификаты для всех своих поддоменов сайта, то стоит рассмотреть вариант покупки одного wildcard SSL сертификата. Wildcard SSL сертификаты позволяют существенно сократить время на установку и дальнейшее продление, а также сократить материальные затраты при покупке.

960gridder

Это плагин или виджет (правильного слова, увы, подобрать не могу) для использования любимой на Западе web-технологии 960grid. Она примечательна тем, что максимальная ширина интерфейса сайта составляет 960 пикселей и размещается строго по центру. Такой размер позволяет с некоторой долей вероятности говорить, что на большинстве современных мониторов, ваш сайт будет отображаться в читаемом виде.

Плагин 960gridder позволяет достаточно просто накладывать сетку на открытый сайт. Всеми размерами сетки достаточно легко управлять, меняя ширину и количество отступов, цвет сетки и так далее.

Использовать плагин 960gridder достаточно просто и он работает во всех современных браузерах. Для его использования необходимо создать новую закладку стандартными средствами браузера и в качестве url-адреса указать код:

javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://gridder.andreehansson.se/releases/latest/960.gridder.js';})();

Вот как эта “установка” должна выглядеть в FireFox:

Пример работы 960gridder можно посмотреть здесь:

Пример работы 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 Вот сервис, который позволяет визуально подобрать размеры для модульной сетки.

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

Имя
e-mail
Сайт
Текст комментария: