AEM allows you to have a responsive layout for your pages by using the Layout Container component.
This provides a paragraph system that allows you to position components within a responsive grid. This grid can rearrange the layout according to the device/window size and format. The component is used in conjunction with the Layout mode, which allows you to create and edit your responsive layout dependent on device.
The layout container:
The user can then see how the content will be rendered for specific devices using the emulator.
AEM realizes responsive layout for your pages using a combination of mechanisms:
Layout Container component
This component is available in the component browser and provides a grid-paragraph system to allow you to add and position components within a responsive grid. It can also be set as the default paragraph system on your page.
Once the layout container is positioned on your page you can use the Layout mode to position content within the responsive grid.
This allows you to create and edit responsive websites that rearrange the layout according to device/window size by resizing components interactively. The user can then see how the content will be rendered using the emulator.
With these responsive grid mechanisms you can:
Depending on your project, the Layout Container might be used as the default paragraph system for your pages or as a component available to be added to your page via the component browser (or both).
Adobe provides GitHub documentation of the responsive layout as a reference that can be given to front-end developers allowing them to use the AEM grid outside of AEM, for example when creating static HTML mock-ups for a future AEM site.
Use of the above mechanisms is enabled by configuration on the template. See Configuring Responsive Layout for further information.
When you are creating your website content you want to ensure that your content is displayed appropriate to the device being used to view it.
AEM allows you to define layouts dependent on the width of the device:
The device Desktop, which does not have a specific width, relates to the default breakpoint (i.e. everything above the last configured breakpoint).
It would be possible to define breakpoints for every individual device, but this would drastically increase the effort required for layout definition and maintenance.
When using the emulator, you select a specific device for emulation and layout definition and the related breakpoint will be highlighted too. Any layout changes that you make will be applicable for other devices to which the breakpoint applies, i.e. any devices positioned to the left of the active breakpoint marker, but before the next breakpoint marker.
For example, when you select the device iPhone 6 Plus (defined with a width of 540 pixels) for emulation and layout, the breakpoint Phone (defined as 768 pixels) will be activated too. Any layout changes you make for the iPhone 6 will be applicable to other devices under the Phones breakpoint, such as iPhone 5 (defined as 320 pixels).
Open the required page for editing. For example:
Select the Emulator icon from the top toolbar:
The emulator toolbar will open.
The emulator toolbar displays additional layout options:
To select a specific device to emulate you can either:
Once a specific device has been selected you can:
A Layout Container is a paragraph system that:
If not already available, the Layout Container must be explicitly activated for a paragraph system/page.
The Layout Container is available as a standard component in the Components Browser. From here you can drag it to the required location on the page after which you will see the Drag Components here placeholder.
You can then add components to the layout container. These components will hold the actual content:
As with other components, you can select and then take action on (cut, copy, delete) a Layout Container (when in Edit mode):
As a layout container is a paragraph system, deleting the component will delete both the layout grid and all the components (and their content) held within the container.
If you mouseover or tap the grid placeholder, the action menu is displayed.
You need to select the Parent option.
If the layout component is nested, selecting the Parent option presents a drop-down selection, allowing you to select the nested layout container or its parent(s).
When you mouse over the container names in the drop-down, their outlines will be displayed on the page.
This will highlight the entire grid with its content. The action toolbar will be shown, from where you can select an action such as Delete.
You can define a separate layout for each breakpoint (as determined by emulated device type and orientation).
To configure the layout of a responsive grid implemented with the Layout Container you need to use the Layout mode.
Layout mode can be started in two ways.
When in layout mode you can perform various actions on a grid:
Resize the content components using the blue dots. Resizing will always snap-to-grid. When resizing the background grid will be shown to aid alignment:
Proportions and ratios will be maintained when components such as Images are resized.
Click/tap on a content component, the toolbar allows you to:
In Layout mode you can tap/click on the Drag components here to select the entire component. This will show the toolbar for this mode.
The toolbar will have different options depending on the state of the layout component and the components belonging to it. For example:
Parent - Select the parent component.
Show hidden components - Reveal all or individual components. The number indicates how many hidden components there currently are. The counter shows how many components are hidden.
Revert breakpoint layout - Revert to the default layout. This means that no customized layout will be imposed.
Float to new line - Move the component up a position if spacing allows.
Hide component - Hide the current component.
In the above example the float and hide actions are available because this Layout Container is nested within a parent Layout Container.
Select the parent components to show the action toolbar with the Show hidden components option. In this example, two components are hidden.
Selecting the Show hidden components option will display in blue the components that are currently hidden in their original positions.
Selecting Restore all will unhide all hidden components.