Adaptivetheme является мощным фреймворком для создания собственных тем в Drupal 7, который использует современную кроссбраузерную верстку с применением технологий HTML5 и СSS3, и позволяет разрабатывать веб-сайты с адаптивным дизайном для различных платформ (смартфоны, планшетные компьютеры, настольные системы).

Adaptivetheme позволяет без изменения CSS-кода устанавливать конкретные макеты для различных типов устройств – настольных компьютеров, планшетов или смартфонов. Кроме этого, Adaptivetheme хорошо интегрируется с модулями Panels, Display Suite и Gpanels, что дает возможность выводить панели, поддерживающие разметку мобильных устройств. Архитектура Adaptivetheme очень широко использует drupal_static и другие методы кеширования, которые ускоряют рендеринг страницы и снижают количество запросов.

Таким образом, можно выделить основные следующие преимущества темы AdaptiveTheme:

1. HTML5
2. Поддержка адаптивной верстки для различных типов устройств
3. Адаптивный JavaScript
4. Обратная совместимость со старыми браузерами
5. Интеграция с SAAS (мета-язык описания стилей)
6. SEO-оптимизированный код темы
7. Активная поддержка атрибутов RDF, ARIA и «чистая» разметка.

Установка Adaptivetheme

Установка темы Adaptivetheme проходит в несколько этапов:

1. Для начала вам необходимо скачать актуальную версию Adaptivetheme 7.x-3.x с официального сайта drupal.org (http://drupal.org/project/adaptivetheme). На данный момент текущая версия 7.x-3.1.

2. Загрузка темы на ваш сервер в папку по адресу sites/all/themes. После загрузки у вас появится папка adaptivetheme, в которой будет три подпапки at_admin, at_core, at_subtheme.

3. В административной панели необходимо включить подтему и сохранить единожды настройки темы для активации CSS-файлов макета.

AdaptiveTheme. Создание и настройка подтемы

Структура темы Adaptivetheme, как мы уже сказали, включает три папки:

- at_core (базовое ядро темы)
- at_admin (тема администратора)
- at_subtheme (подтема, с которой мы будем работать)

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

Внутри нашей папки находим файл adaptivetheme_subtheme.info и также переименовываем его в новое название schedule_laby.info. Внутри этого файла в строчке «name  =  AT Subtheme» вы можете поменять название подтемы, которое будет отображаться в административной панели Drupal 7, а строчка «description =» указывает на дополнительное описание вашего шаблона.

Кроме этого, внутри нашей папки необходимо найти файлы theme-settings.php и template.php и внутри их найти и заменить строчки со стандартным названием adaptivetheme_subtheme на текущее название нашей темы (schedule_laby). Для удобной работы с файлами используйте текстовый редактор с автозаменой символов, например Notepad ++.

Таким образом, у нас получается такая структура подтемы schedule_laby:

css\
images\
layouts\
saas\
scripts\
theme-settings.php
template.php
schedule_laby.info
logo.png
screenshot.png
_README.txt
config.rb
favicon.ico

Остается закачать нашу новую подтему в папку adaptivetheme, включить и назначить по умолчанию в административной панели CMS Drupal 7.

Таким образом, вы можете создавать неограниченное количество подтем, поддерживая архитектуру базовой темы в актуальном состоянии. Плюс ко всему, используя модуль Drush, вы можете легко создавать подтемы из командной строки при помощи команды: Drush adaptivetheme "имя вашей темы" yourthemename.

Перейдем к возможностям настройки нашей темы. Основные параметры темы заключены во вкладках Layout & General Settings:

1. Standard Layout (настройка расположения макета для персонального компьютера);
2. Tablet Layout (настройка расположения макета для планшетного компьютера)
3. Smartphone Layout (настройка расположения макета для смартфонов)
4. Panels & Gpanels (интеграция с модулем Panels)
5. CSS (настройки CSS-файлов вашей темы)
6. Polyfills (настройка «заглушек» для браузеров не поддерживающих HTML5 и СSS3)
7. Metatags (настройка мета-тегов для мобильных устройств)
8. Debuggers (режим отладки и перечень всех медиа-запросов)
9. Extensions (дополнительные расширения для оформления различных элементов темы).

Большинство параметров для каждого типа устройства настроены по умолчанию.

Основные настройки Adaptivetheme

Для Standard Layout мы можем указать месторасположение боковых панелей (Choose sidebar positions), указать их ширину в %, px и em (Set the width of each sidebar), установить ширину всей страницы (Set the page width), изменить максимальную ширину страницы (Set a max width).

Во вкладке Tablet Layout находятся настройки темы для планшетных компьютеров, в том числе для двух ориентаций экрана – пейзажной и портретной.

Во вкладке Smartphone Layout находятся настройки для смартфонов на базе операционных систем iOS, Android и Windows Phone с возможностью выбора расположения блоков для пейзажной ориентации экрана.

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

• Персональный компьютер (только экран и минимальная ширина 1025px);
• Планшет с горизонтальной ориентацией экрана (только экран и (минимальная ширина: 769px) и (максимальная ширина: 1024px));
• Планшет с вертикальной ориентацией экрана (только экран и (минимальная ширина: 481px) и (максимальная ширина: 768px));
• Смартфон с горизонтальной ориентацией экрана (только экран и (минимальная ширина: 321px) и (максимальная ширина: 480px));
• Смартфон с вертикальной ориентацией экрана  (только экран и максимальная ширина: 320px).

Таким образом, тема использует "сложенную" модель запросов (CSS файлы не перезаписывают стили друг от друга). Для каждого типа экрана существует свой отдельный CSS файл.  Также у вас есть отдельный файл responsive.custom.css , в котором можно указать стили, которые применяются ко всем макетам. Например, вам необходимо ввести дополнительный медиа запрос для специфических экранов смартфонов:

/* @media only screen and (min-width: 320px) {} */

Регионы макетов Adaptivetheme

По умолчанию тема имеет 14 регионов. В настройках темы мы можем легко менять расположение боковых панелей и видеть, как блоки будут отображаться на том или ином устройстве.

Panels и Gpanels

Несомненным преимуществом темы Adaptivetheme является интеграция с модулями Panels (http://drupal.org/project/panels), Display Suite (http://drupal.org/project/ds) и внедрение специфических PHP сниппетов Gpanels (http://drupal.org/project/genesis) для создания нескольких колонок внутри блоков.

Для каждого типа устройства (персональный компьютер, планшет, смартфон) мы можем настраивать  количество колонок (от 2 до 6), их расположение в макете, и относительные размеры. В итоге мы получаем 43 вариации расположения панелей в макете для одного вида устройства. Просто невероятно!

Для использования дополнительных возможностей Gpanels вам необходимо будет использовать небольшие фрагменты кода, которые находятся «по умолчанию» в папке sites/all/themes/adaptivetheme/at_core/layouts/gpanels/. В каждом файле находится фрагмент PHP-кода,  который вы можете вставлять в любую часть файлов page.tpl.php и node.tpl.php, а для определения новых регионов необходимо добавить соответствующий код в файл .info

Для примера, рассмотрим файл three-3x33.php. Он означает, что в макете нужно обозначить три колонки по 33% шириной каждая.

Код для вставки в файл .info

; 3 col 3x33 regions[three_33_top] = AT Three column 3x33 - top regions[three_33_first] = AT Three column 3x33 - left regions[three_33_second] = AT Three column 3x33 - center regions[three_33_third] = AT Three column 3x33 - right regions[three_33_bottom] = AT Three column 3x33 – bottom

PHP-код для вставки в файл .info

Следует сказать, есть существенное отличие ветки 7.x-2.x Adaptivetheme от 7.x-3.x. В более ранней версии 7.x-2.x, все определения Gpanels уже встроены в .info файл. Вам остается только раскомментировать нужные строки.

В заключении, не забываем очищать полностью кеш и активировать новые блоки в административной панели Drupal 7.

Вкладка Polyfills

В этой вкладке можно включить часто используемые функции для поддержки устаревших браузеров и технологий. Например, поддержка HTML5 в ранних версиях Internet Explorer, адаптивный JavaScript (на данный момент в стадии бета-тестирования), скругление углов в Internet Explorer 6-7, поддержка медиа-запросов в IE6-IE8, функция масштабирования для iOS.

Мобильные метатеги (Mobile Metatags)

Настройка мета-тегов для определения устройств, границ экрана устройства в целях отладки.

Расширенные настройки (Extensions)

Кроме основного функционала тема AdaptiveTheme имеет множество дополнительных расширений. Мы можем внедрять собственные шрифты (в том числе и Google Fonts) для заголовков меню, title node и других заголовков,  задавать собственное оформление для title, автоматически выравнивать изображения и подписи к ним, осуществлять поддержку Apple Touch иконок, быстро подключать собственные CSS-файлы, отключать определенные блоки при просмотре на мобильных телефонах (интеграция с модулем Browscap - http://drupal.org/project/browscap), настроить плавающие блоки и множество других настроек.

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