Реализация 960gs в Drupal (NineSixty theme)

О NineSixty

NineSixty это тема для Drupal на основе 960gs, предназначенная для использования в качестве базовой темы.

Преимущества NS:

• контент-ориентированная разметка с использованием классов «push» и «pull»
• динамическая ширина блоков в зависимости от контента
• инструменты для отладки и визуализация сетки
• поддержка языков с направлением письма справа налево

Контент-ориентированная разметка

Это подход к дизайну в котором контент выводится максимально близко к верху разметки. Контент должен выводится раньше всех боковых блоков. Некоторые дизайнеры полагают, что он должен выводится даже раньше основной навигации сайта. Этого сложно достичь на сайтах с одной или несколькими левыми колонками.

Классы «push» и «pull»

В NS вывод контента вначале осуществляется путем «отталкивания» блока с контентом вправо и «притягивания » боковых блоков влево. Эти классы используют такой же формат как .grid-X, .prefix-X, и .suffix-X, где Х — ширина блока:
.push-X and .pull-X
Значения push и pull должны соответствовать ширине перетаскиваемых блоков:

до добавления push и pull:

после добавления push и pull:

Динамическая ширина колонок

В некоторых случаях может понадобиться, чтобы колонки изменяли ширину, когда соседняя область не заполнена. Например, разметка 3-6-3 может превратится в 3-9 когда правая колонка пуста. Динамическая ширина управляется функцией ns() определенной в template.php

Структура ns()

• X, Y и Z — значения ширины
• class может быть grid, prefix, suffix, push, или pull
• $region может быть любым регионом темы
• можно использовать любое количество пар

Применение ns()

из page.tpl.php:

из #main

из #sidebar-left:

NineSixty в действии

Посетив ninesixty.fkdemos.com можно увидеть как NineSixty…

• использует push и pull для создания «контент-ориентированной разметки»;
• динамически присваивает ширину ячеек в зависимости от содержания;
• используется для создания различных компоновок сайта

Собственно знакомство с NineSixty на этом законченно. На сайте Drupal можно прочесть о создании субтемы на основе NineSixty — drupal.org/node/441088.

Перевод Drupal theming using the 960.gs grid system (с 56 по 69 слайды) Ранее идет общее описанее фреймворков в веб дизайне и сеток в дизайне вообще, а после ссылки и примеры работы этой темы.

Поделитесь, кто, как пользует и применяет ли вообще эту тему в Drupal.