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

Learn how to configure Layout Container and Layout Mode.

Overview overview

Responsive Layout is a mechanism for realizing responsive web design. This allows the user 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:

Configuring the Responsive Emulator configuring-the-responsive-emulator

This task lets you see the responsive Emulator on your site.

Register your Page Components for Emulation register-your-page-components-for-emulation

To enable the emulator to support your pages, you must register your page components. See Registering Page Components for Simulation.

Specify the Device Groups specify-the-device-groups

To specify the device groups that appear in the Devices list of the emulator see Specifying the Device Groups.

Link your Site to the Specified Device Groups link-your-site-to-the-specified-device-groups

To include the emulator, link your site to the device groups. See Adding the Devices List (for both the classic and touch-optimized UI).

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

These procedures are used to enable the Layout mode on your site.

Configure the Breakpoints configure-the-breakpoints

Breakpoints:

They can be defined using CRXDE Lite or XML.

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>

Add a Responsive Information Provider add-a-responsive-information-provider

Copy the following cq:infoProviders node structure into your parent page component:

/libs/foundation/components/page/cq:infoProviders/responsive

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

These procedures are required so you can resize components in the Layout mode.

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

These tasks allow authors to drag instances of the Layout Container component onto the page.

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:

Nested Responsive Grids nested-responsive-grids

There may be occasions when you find it necessary to nest responsive grids to support your project’s needs. However, keep in mind that Adobe’s recommended best practice is to keep the structure as flat as possible.

When you can not avoid using nested responsive grids, make sure:

This includes all the structural containers from the page template.

The column number of the inner container should never be greater than that of the outer container. The following example satisfies this condition. While the column number of the outer container is 8 for the default (desktop) screen, the column number of the inner container is 4.

container
  @layout = responsiveGrid
  cq:responsive
    default
      @offset = 0
      @width = 8
  container
  @layout = responsiveGrid
    cq:responsive
      default
        @offset = 0
        @width = 4
    text
      @text =" Text Column 1"

<div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--8 aem-GridColumn--offset--default--0">
  <div id="container-c9955c233c" class="cmp-container">
    <div class="aem-Grid aem-Grid--8 aem-Grid--default--8 ">
      <div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4">
        <div id="container-8414e95866" class="cmp-container">
          <div class="aem-Grid aem-Grid--4 aem-Grid--default--4 ">
            <div class="text aem-GridColumn aem-GridColumn--default--4">
              <div data-cmp-data-layer="..." id="text-1234567890" class="cmp-text">
                <p>Text Column 1</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>