Блог экспериментатора инженера-разработчика: Infanty.
Я пишу how-to статьи на редкие темы или статьи обзоры - для себя и тех кто со мной работает.
Блог существует при поддержке: "Оккупационных сил Марса".

Для чистой вёрстки в Drupal понадобятся:

Описание базовой темы: Mothership

Mothership является базовой темой HTML5 предназначенной для создания собственных тем (под-тем) на её основе. Она содержит функционал позволяющий избежать добавления лишних обёрток DIV и лишних классов CSS вокруг контента сайта, которые так любит добавлять Drupal ко всем выводимым данным через стандартные функции темизации.

Назначение данной темы: сделать вёрстку сайта «чистой» удалив лишние DIV и классы CSS, а не сделать ваш сайт красивым с художественной точки зрения. Не забывайте об этом.

Подробнее об способах достижения «чистой» вёрстки можно прочитать на странице: https://www.drupal.org/node/1536448.

Mothership является респонсивной при включении css файлов базовых регионов («basic layout css file»).

Mothership умеет вырезать *css файлы модулей Drupal, что например позволяет обходить ограничение в максимум 31 файл *.css используемый при отображении страницы в IE8.

Хитрость связанная с тем как реализован функционал отмены загрузки стилей из системных модулей описана на странице: https://www.drupal.org/node/1536790.

Содержит JS библиотеки:

  • Respond - для поддержки mediaqueries в старых браузерах (работает только при активации css кэша).
  • Selectivizr - для поддержки расширенных CSS селекторов в старых браузерах (работает только при активации css кэша).
  • Modernizr2 — позволяет определять возможности браузера пользователя (подробнее на странице: http://habrahabr.ru/post/144352/), на «боевом» сайте рекомендуется сделать свою сборку данной библиотеки с необходимым функционалом для оптимизации размера библиотеки.

Mothership умеет показывать размер MediaQuery при просмотре страницы. Популярные размеры экранов: 320 – 480 – 600 – 768 – 993 – 1383 можно использовать в *.css указав:

 @media only screen and (min-width: XXXpx) and (max-width: XXXpx){
  body::before{ content: "foobar: were between heaven & hell";}
} 

Создание под-тем с использованием Mothership

  • Устанавим Mothership в папку: sites/all/themes.
  • Скопируем содержимое из папки Mothership: mothership/NEWTHEME в папку sites/all/themes/NEWTHEME/.
  • Переименуем папку NEWTHEME, например в «blackpearl».
  • В созданной в предшествующем пункте папке под-темы, переименуем файл NEWTHEME.info.example в blackpearl.info. Данный файл содержит строчку «base theme = mothership» указывающий, что эта тема оформления Drupal является под-темой Mothership.
  • Так же в этой папке, откройте файл template.php и замените во всех названиях функций «NEWTHEME» на «blackpearl».
  • Осталось перейти на сайте по URL: /admin/appearance/list и включить созданную под-тему, при этом не нужно включать Mothership. После чего вновь созданную под-тему можно модифицировать для достижения нужного результата визуальной красоты.
  • В любую тему можно добавить настройку «base theme = mothership» (в *.info файл) и она станет поддерживать все настройки Mothership.
  • Создать под-тему можно и с помошью Drush, подробнее на странице: https://www.drupal.org/node/1617890.

Устройство Mothership

Корневая папка темы содержит:

  • mothership.drush.inc — файл интеграции с drush;
  • README.txt — файл описания темы;
  • LICENSE.txt — файл лицензии темы;
  • documentation — папка с изображениями и файлом для модуля справки в Drupal;
  • mothership — основная папка темы;
  • NEWTHEME — папка под-темы, содержит минимальное количество файлов для создания под-темы на основании Mothership, а так же файлы заготовки для собственных стилей и скриптов под-темы.

Папка mothership содержит:

  • css — содержит файлы со стилями (в соответствии с именами файлов) с подключаемыми иконками, минимальными стилями для сайта, функциями для отображения MediaQuery, респонсивности, обнуления стилей браузера по умолчанию (в том числе и HTML 5 стилей) и приведения их к общему стартовому значению;
  • css-drupalcore — содержит файлы со стилями (в соответствии с именами файлов) для перекрытия системных стилей;
  • ds_layouts — содержит папки с файлами (в соответствии с именами папок и файлов) с шаблонами для определения одно, двух или трёх колоночной раскладке на сайте;
  • functions — содержит файлы с переопределёнными функциями ядра Drupal и дополнительных модулей для темизации выводимого содержимого сайта (в соответствии с именами файлов). Данные функции позволяют сделать вёрстку сайта «чистой» удалив лишние DIV и классы CSS и оформив оставшийся контент в соответствии c необходимой семантической вёрсткой стандарта HTML 5;
  • goodies — содержит файл с реализацией альтернативного блока авторизации на сайте;
  • images — содержит файлы иконок используемых в теме;
  • js — содержит jquery-1.8.2.min.js, respond.min.js, html5.js и contextual.js с функциями для модуля https://www.drupal.org/project/context_module (позволяет удалять интерфей управления модулей: Devel, Delete all, и т. п. на рабочих серверах и оставлять их на серверах разработки);
  • templates — содержит файлы с переопределёнными шаблонами оформления ядра Drupal и дополнительных модулей для темизации выводимого содержимого сайта (в соответствии с именами файлов). Данные шаблоны позволяют сделать вёрстку сайта «чистой» удалив лишние DIV и классы CSS и оформив оставшийся контент в соответствии c необходимой семантической вёрсткой стандарта HTML 5 в дополнение к функциям из файлов в папки: functions;
  • apple-startup.png — иконка для IOS;
  • apple-touch-icon.png, apple-touch-icon-72x72.png, apple-touch-icon-114x114.png, apple-touch-icon-144x144.png — иконки для IOS;
  • favicon.ico — иконка для отображения в браузере;
  • logo.png — логотип для отображения на сайте;
  • mothership.info — файл со стартовыми настройками данной темы;
  • screenshot.png — файл для отображения внешнего вида темы на странице тем в Drupal;
  • template.php — файл для подключения файлов CSS, JS, функций и шаблонов данной темы при генерации страницы сайта если активирована данная тема;
  • theme-settings.php — файл с реализацией интерфейса настроки данной темы из панели администрирования Drupal.

Настройка блоков с использованием clean_markup