Прокачиваем шаблоны от 960.gs

Прокачиваем шаблоны от 960.gs

Небольшой полезный трюк для тех, кто постоянно использует в своей работе шаблоны модульной сетки от 960.gs. Этот фреймворк довольно распространен и, в последнее время, находит все больше и больше поклонников среди дизайнеров и верстальщиков.

Но в стандартных заготовках сетки есть один небольшой недостаток — там нет никакой привязки к вертикальному ритму (по сути, это просто колонки), поэтому все поиски вертикальных отступов основываются на личных предпочтениях рисующего дизайнера. С одной стороны правильно, с другой, хотелось бы упорядоченной системы отсчета для элементов будущего макета.

Размечать самостоятельно заготовки с помощью зебр-заливок и направляющих — не выход. Это лишняя трата рабочего времени, которое лучше потратить с большей пользой. Поэтому воспользуемся онлайн-генератором Modular Grid Pattern, чтобы доработать стандартные шаблоны 960.gs.

Задача: быстро получить из левой части картинки то, что изображено в правой:

Шаблоны 960.gs — до и после

Переходим по вышеприведённой ссылке, выставляем следующие параметры с картинок ниже и сохраняем полученные результаты в виде PNG или Photoshop-pattern.

Для 12-ти колоночного макета:

960.gs, 12-ти колоночный макет

Для 16-ти колоночного макета:

960.gs, 16-ти колоночный макет

Для 24-х колоночного макета:

960.gs, 24-х колоночного макета

Параметр Baseline (здесь используется для задания интерлиньяжа или line-height) я выставлял 18px в расчете, что размер основого шрифта 12px (font-size × 1,5 = line-height). У вас он может быть другим, в зависимости от личных убеждений и выбранного кегля для текста.

Высоту модулей (Module height) выставляйте по собственному вкусу, я оставил стандартные значения.

Полученные результаты в виде PNG-файлов также отлично подходят для наложения на макет в процессе HTML-верстки с помощью PixelPerfect (или подобных расширений для браузеров).

Особо внимательные могут обнаружить, что на сайте Modular Grid Pattern есть еще ссылка на расширение для Photoshop, но у меня с ним что-то не срослось. После n-ной попытки победить его недружественное автозаполнение параметров, я его удалил.

Ну и в конце, пара полезных ссылок в тему:

Критикам и троллям — просьба обойти стороной тему достоинств и недостатков подобных фреймворков, суть поста не в этом.

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

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

  1. Алькор, 29.08.2011 в 17:41

    Спасибо, никогда не слышал про такого онлайн-генератора, пригодится определенно.

    Ответить

  2. artweb, 26.02.2012 в 19:23

    А почему бы это не сделать в photoshop?

    Ответить

  3. олег, 15.05.2012 в 10:48

    для колоночной верстки нужно напрягать дизера рисовать по этому же принципу

    Ответить

  4. Новый пункт в ТЗ | white wind Новый пункт в ТЗ |, 09.06.2012 в 13:57

    [...] Прокачиваем шаблоны от 960.gs [...]

    Ответить

  5. Женя, 15.07.2012 в 20:36

    ничесе как сложно

    сам таким не занимался, просто покупаю шаблоны или заказываю корректировку

    Ответить

  6. @ Traveler, 08.01.2016 в 16:53

    Спасибо, о таком не слышал возможно пригодится.

    Ответить

Есть что сказать?