Configurar o contêiner de layout e o modo de layout configuring-layout-container-and-layout-mode

O Layout responsivo é um mecanismo para realizar o design responsivo da Web. Isso permite que o autor de conteúdo crie páginas da Web com layout e dimensões dependentes dos dispositivos que seus usuários utilizam.

O AEM permite um layout responsivo para suas páginas usando uma combinação de mecanismos:

Com esses mecanismos de grade responsivos, você pode:

Ativar o emulador enabling-emulator

O Arquétipo de Projeto e o Modelo de Site Padrão já estão habilitados para usar o emulador. Se você desenvolveu seu próprio conteúdo não baseado nos Componentes principais ou no arquétipo, consulte o documento Design responsivo para obter detalhes sobre como desenvolver seus componentes enquanto aproveita esses recursos.

Ativar modo de layout para o site activate-layout-mode-for-your-site

O modo Layout permite usar o emulador para ajustar o layout do conteúdo para diferentes dispositivos. O site de exemplo WKND já está habilitado para o modo Layout. Siga estas etapas para ativar seu próprio site.

Configurar pontos de interrupção configure-breakpoints

Os pontos de interrupção são essenciais para um design responsivo e definem como e quando o conteúdo é ajustado ao dispositivo de destino. No entanto, tenha cuidado, pois cada ponto de interrupção introduzido gerará trabalho adicional para os autores acomodarem o conteúdo. Muitas vezes, dois pontos de interrupção podem ser suficientes, incluindo o ponto de interrupção padrão que está sempre lá. A Adobe recomenda não criar mais de três pontos de interrupção, incluindo o padrão, ou seja, não mais de dois nós abaixo de cq:responsive/breakpoint.

Os pontos de interrupção devem ser considerados para projetos novos e existentes.

Por causa da herança, você só precisa fazer isso para a página raiz do seu conteúdo.

Configurar pontos de interrupção usando o CRXDE Lite configuring-breakpoints-using-crxde-lite

Configurar pontos de interrupção usando XML configuring-breakpoints-using-xml

Os pontos de interrupção estão localizados dentro da seção <jcr:content> de .context.html na pasta de modelo (ou conteúdo) apropriada.

Um exemplo de definição:

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

Ativar o redimensionamento de componentes para a página enable-component-resizing-for-the-page

Redimensionar componentes no modo Layout é uma parte importante do design responsivo, que pode ser usado no site de amostra WKND. Siga estas etapas para ativar seu próprio site.

Definir contêiner de layout como parsys principal set-layout-container-as-main-parsys

Para definir o parsys principal da página para ser um contêiner de layout, defina o parsys como:

wcm/foundation/components/responsivegrid

Em:

Os dois exemplos a seguir ilustram a definição:

Incluir o CSS responsivo include-the-responsive-css

CSS para pontos de interrupção usando MENOS css-for-breakpoints-using-less

O AEM usa MENOS para gerar partes do CSS necessário, que precisam ser incluídas em seus projetos.

Você deve criar uma biblioteca do cliente para fornecer configurações adicionais e chamadas de função. A seguinte extração MENOS é um exemplo do mínimo que você deve adicionar ao seu projeto:

@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

/* default breakpoint */
.aem-Grid {
  .generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid {
    .generate-grid(phone, @max_col);
  }
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid {
    .generate-grid(tablet, @max_col);
  }
}

A definição da grade base pode ser encontrada em:

/libs/wcm/foundation/clientlibs/grid/grid_base.less

Considerações sobre estilo styling-considerations

Os componentes mantidos em um contêiner responsivo são redimensionados (juntamente com seus respectivos elementos DOM de HTML) de acordo com o tamanho da grade responsiva. Portanto, nessas circunstâncias, é recomendável evitar (ou atualizar) definições de elementos DOM de largura fixa (contidos).

Por exemplo:

Conformidade com redimensionamento e imagem adaptável resizing-and-adaptive-image-compliance

Qualquer redimensionamento de um componente na grade acionará os seguintes ouvintes, conforme apropriado:

Para redimensionar e atualizar corretamente o conteúdo de uma imagem adaptável incluída em uma grade responsiva, é necessário adicionar um conjunto afterEdit definido como ouvinte REFRESH_PAGE no arquivo EditConfig de cada componente contido.

Por exemplo:

<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />

O mecanismo de imagem adaptável é disponibilizado por meio de um script que controla a seleção da imagem correta para o tamanho atual da janela. Ela é ativada depois que o DOM está pronto ou ao receber um evento dedicado. Atualmente, a página deve ser atualizada para refletir corretamente o resultado da ação do usuário.

Ativar o componente de Contêiner de layout para a página enable-the-layout-container-component-for-page

Para um layout responsivo eficaz, o autor de conteúdo deve ser capaz de arrastar instâncias do componente Contêiner de layout para a página. Isso já está habilitado para o site de exemplo WKND. Siga estas etapas para ativar seu próprio site.

Ativar o componente de Contêiner de layout para edição de página enable-the-layout-container-component-for-page-editing

Para permitir que os autores adicionem outras grades responsivas às páginas de conteúdo, é necessário ativar o componente Contêiner de layout para a página. Você pode fazer isso usando:

Configurar a grade do contêiner de layout configure-the-grid-of-the-layout-container

Você pode configurar o número de colunas disponíveis para cada instância específica do contêiner de layout editando seus modelos de página.