Создание адаптивного дизайна с использованием шаблонов CQ5

CQ5 предлагает способы управления тем, что можно делать в шаблоне, поэтому представление о том, что компоненты «можно размещать где угодно», может ввести в заблуждение. Шаблоны страниц разработаны и настроены таким образом, чтобы вы могли контролировать, какие компоненты можно добавлять в определенную область страницы. Это позволяет вам только сделать доступными те компоненты, которые будут работать с макетом шаблона, исключая компоненты, которые могут нарушить макет. Тогда авторам разрешается использовать только то, что будет работать. Если они попытаются перетащить компонент в абзац (parsys), где этот компонент не был настроен как доступный, пользовательский интерфейс не позволит им использовать его там. Таким образом, CQ на самом деле позволяет легко не допустить, чтобы пользователи куда-то кинули элемент управления, который мог бы испортить макет.

Это изложено немного здесь:

• http://dev.day.com/docs/en/cq/current/howto/components_develop.html#Добавление%20a%20new%20component%20to%20the%20paragraph%20system%20%28design%20%20%20%20%20mode%29, в котором говорится, что

«Компоненты можно активировать (или деактивировать), чтобы определить, какие из них предлагаются автору при редактировании страницы».

Когда дело доходит до CSS и JavaScript, вы можете создать клиентскую библиотеку, а затем включить соответствующую клиентскую библиотеку на страницу. Функциональность Backend CQ позаботится об объединении нескольких файлов CSS (или JavaScript) в один мини-файл, чтобы обеспечить один HTTP-запрос оптимизированного файла. Это он изложил немного здесь:

• http://dev.day.com/docs/en/cq/current/developing/widgets.html#Including%20the%20Client-Sided%20Code%20in%20a%20Page, а также
• http://dev.day.com/docs/en/cq/current/howto/taglib.html#%3Ccq:includeClientLib%3E

Таким образом, вы можете разработать несколько компонентов, которые совместно используют клиентскую библиотеку, а затем, когда любой из компонентов будет добавлен в абзац, клиентская библиотека будет включена на страницу. Вы также можете захотеть, чтобы библиотека CSS применялась ко всем шаблонам, чтобы придать общий внешний вид, но при этом позволить компонентам добавлять свои собственные, когда они используются.

Эти рекомендации по использованию шаблонов и компонентов описывают, как вы обеспечиваете контроль и гибкость:

• http://dev.day.com/docs/en/cq/5-5/developing/developing_guidelines_bestpractices.html#Guidelines%20for%20Использование%20Шаблонов%20и%20Компоненты

Я задокументирую наш успешный опыт WIP с RWD и CQ5.

Предположения: хорошо документированное руководство по стилю.

Наши первые шаги: изменен существующий компонент управления столбцами css для использования css сетки начальной загрузки Twitter. Создайте свойство базовой страницы, позволяющее задавать два разных класса в контейнере сетки и наследовать их дочерними страницами. (контейнер||контейнер-жидкость). По возможности используйте готовые компоненты. Все значения ширины компонентов наследуют ширину своего родительского контейнера, что позволяет размещать компоненты в любом месте шаблона.

Проблемы. Стандартный компонент управления столбцом не может быть вложенным. Мы рассматриваем возможность создания пользовательского компонента управления столбцами.

Выводы: это эволюционный проект, и мы постоянно совершенствуемся.

После недавнего запуска AEM 6.0 у них появился пример веб-сайта под названием Geomatrixx Media. Этот веб-сайт является адаптивным.

Вы можете взять этот пример в качестве эталона и начать строить на его основе.