Configuring the Layout Container and Layout Mode configuring-layout-container-and-layout-mode

Responsive Layout is a mechanism for realizing responsive web design. This allows the content author to create web pages that have a layout and dimensions dependent on the devices their users use.

AEM realizes responsive layout for your pages using a combination of mechanisms:

With these responsive grid mechanisms you can:

Enabling the Emulator enabling-emulator

The Project Archetype and the Standard Site Template are already enabled to use the emulator. If you have developed your own content not based on the Core Components or archetype, please see the document Responsive Design for details on how to develop your components while leveraging these features.

Activate Layout Mode for your Site activate-layout-mode-for-your-site

Layout mode allows you to use the emulator to adjust the layout of your content for different devices. The WKND sample site is already enabled for Layout mode. Follow these steps to enable your own site.

Configure Breakpoints configure-breakpoints

Breakpoints are vital to responsive design and define how and when content is adjusted to the target device. However, be cautious since each breakpoint you introduce will generate additional work for your authors to accommodate the content. Many times, two breakpoints can be sufficient, including the default breakpoint which is always there. Adobe recommends not to create more than three breakpoints including the default, i.e. not more than two nodes below cq:responsive/breakpoint.

Breakpoints should be considered for both new and existing projects.

Because of inheritance you only have to do this for the root page of your content.

Configuring Breakpoints using CRXDE Lite configuring-breakpoints-using-crxde-lite

Configuring Breakpoints using XML configuring-breakpoints-using-xml

Breakpoints are located inside the <jcr:content> section of the .context.html under the appropriate template (or content) folder.

An example definition:

<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>

Enable Component Resizing for the Page enable-component-resizing-for-the-page

Resizing components in Layout mode is an important part of responsive design, which can be used in the WKND sample site. Follow these steps to enable your own site.

Set Layout Container as Main Parsys set-layout-container-as-main-parsys

To set the main parsys of your page to be a layout container, define the parsys as:

wcm/foundation/components/responsivegrid

In either the:

The following two examples illustrate the definition:

Include the Responsive CSS include-the-responsive-css

CSS for Breakpoints using LESS css-for-breakpoints-using-less

AEM uses LESS to generate parts of the necessary CSS, these need to be included for your projects.

You must create a client library to provide additional configuration and function calls. The following LESS extract is an example of the minimum that you must add to your project:

@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);
  }
}

The base grid definition can be found under:

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

Styling Considerations styling-considerations

Components held within a responsive container are resized (together with their respective HTML DOM elements) according to the responsive grid size. Therefore, in these circumstances, it is recommended to avoid (or update) definitions of fixed width (contained) DOM elements.

For example:

Resizing and Adaptive Image Compliance resizing-and-adaptive-image-compliance

Any resizing of a component within the grid will trigger the following listeners as appropriate:

To properly resize and update the content of an adaptive image included in a responsive grid, you need to add an afterEdit set to REFRESH_PAGE listener into the EditConfig file of every contained component.

For example:

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

The adaptive image mechanism is made available via a script that controls selection of the correct image for the current size of the window. It activates after the DOM is ready or when receiving a dedicated event. Currently the page must be refreshed to properly reflect the result of the user’s action.

Enable the Layout Container Component for Page enable-the-layout-container-component-for-page

For effective responsive layout, the content author must be able to drag instances of the Layout Container component onto the page. This is already enabled for the WKND sample site. Follow these steps to enable your own site.

Enable the Layout Container Component for Page Editing enable-the-layout-container-component-for-page-editing

To allow authors to add further responsive grids to the content pages you need to enable the Layout Container component for your page. You can do this using either:

Configure the Grid of the Layout Container configure-the-grid-of-the-layout-container

You can configure the number of columns available for each specific instance of layout container by editing your page templates.