How to Implement a Responsive Layout in AEM part 4

Welcome to part 4 of our series titled “How to Implement a Responsive Layout in AEM”, if you haven’t read the previous articles please do so before reading this article.

This section will cover the creation of new *col.jsp and *col.html scripts. These can be used to create new and varying page templates, more readable versions of the /apps/aem-prototypes/components/page_responsive/content.jsp and /apps/aem-prototypes/components/page_responsive_sightly/content.html files, or to add additional options to the column controllers. For example, the design documentation for the page you (as a developer) are trying to create shows two main content columns. These columns are asymmetrical, therefore, you know that the 6x6col.jsp and the 6×6.html scripts won’t work. You quickly discover that the 8x4col.jsp and 8x4col.html scripts create columns that are too asymmetrical. You want something just a little off center. In an effort to achieve this, you could create a 7x5col.jsp script. Further adjustments to the relative placements of the columns can be made by adjusting the padding and margin values in the /etc/designs/aem-prototypes/clientlibs/grid.less file.

Keep the following in mind when writing these types of scripts: Configuring the row structure of your layout should NOT span more than twelve columns. Documentation concerning these types rows can be found here (fluid) and here (regular).

The following examples are concerned with defining the columns of the responsive layout design. Portions of these files have been omitted for brevity and readability. The components defined in these files should always span a total of twelve columns. All examples concerning the columns of the layout are variations of the following files:

• /apps/aem-prototypes/components/responsive_column_control/8x4col.jsp
• /apps/aem-prototypes/components/responsive_column_control_sightly/8x4col.html
• /apps/aem-prototypes/components/responsive_column_control/6x6col.jsp
• /apps/aem-prototypes/components/responsive_column_control_sightly/6x6col.html
• /apps/aem-prototypes/components/responsive_column_control/4x4x4col.jsp
• /apps/aem-prototypes/components/responsive_column_control_sightly/4x4x4col.html
• /apps/aem-prototypes/components/responsive_column_control/3x6x3col.jsp
• /apps/aem-prototypes/components/responsive_column_control_sightly/3x6x3col.html

The following is an example of asymmetric design.
Note: The file 8x4col.jsp is shown below.

Note: The file 8x4col.html is shown below.

These are the 8x4col.jsp and 8×4.html scripts and they each define two distinct responsive grid components. The first will span eight columns; the second will span four columns. These components will be displayed either left to right (default on tablet and desktop displays) or top to bottom (default on mobile phones) depending on the defined and configured breakpoints and the corresponding CSS files. More details about breakpoints and CSS files can be found later in this document.

The following example is of a reflectively symmetrical design, or in other words, a design consisting of two columns side by side of equal widths.
Note: The file 6x6col.jsp is shown below.

Note: The file 6x6col.html is shown below.

This version also creates two distinct responsive grid components. Unlike the previous example, both of these components span six columns.

The following example is of a translationally symmetrical design, or in other words, a design that has multiple columns that are side by side each having a width equal to the others.
Note: The file 4x4x4col.jsp is shown below.

Note: The file 4x4x4col.html is shown below.

This version creates three distinct responsive grid components. These components are evenly spaced with each spanning four columns.

The following example is of a bilaterally symmetrical design, or in other words, a design where the left and right halves of the page are symmetrical.
Note: The file 3x6x3col.jsp is shown below.

Note: The file 3x6x3col.html is shown below.

This version creates three distinct responsive grid components. These components are not evenly spaced. The left and right components each span three columns; while the middle component spans six columns.

Using these scripts in a page template has already been covered earlier in this series in the post titled “How to Implement a Responsive Layout in AEM part 3”. To add additional scripts to the column controller component, thus creating additional column options, follow these steps:

1. Ensure that the script has been added to the /apps/aem-prototypes/components/responsive_column_control component (.jsp scripts) or the /apps/aem-prototypes/components/responsive_column_control_sightly component (.html scripts) along with the other scripts of its type.
   1. The naming convention isn’t necessary to follow but will aid in readability and help sway confusion as to what the intended result of the script is.
2. Create a new node within /apps/aem-prototypes/components/responsive_column_control
   /dialog/items/items/colctrl/items/coltype/options (for .jsp scripts) or within /apps/aem-prototypes/components/responsive_column_control_sightly/dialog/items/items/colctrl/items
   /coltype/options (for .html scripts) with the following properties:
   1. Name: col-[unique_identifier]
      1. The unique identifier (e.g., [unique_identifier]) follows the following convention:
         1. Each responsive grid component is represented by the number of columns (out of 12) it spans (i.e., its width).
         2. The order of these representations is the same as they appear in the script.
         3. Each numerical representation of a responsive grid component is separated by a “-”.
      2. Although any name will work, this convention helps with clarity and avoids confusion.
   2. Type: nt:unstructured
3. Add the following property to the new node:
   1. Name: text
   2. Type: String
   3. Value: [short_description]
      1. By convention this description generally follows this pattern:
         1. [number_of_responsivegrids] + “ Columns ” + “([percentage_of_overall_width_of_grid_1, percentage_of_overall_width_of_grid_2, etc])”
      2. This is the what will be seen in the dialog box, it should be descriptive and unique.
      3. Although any name will work, this convention helps with clarity and avoids confusion.
4. Add the following property to the new node:
   1. Name: value
   2. Type: String
   3. Value: [unique_description]
      1. By convention the [unique_description] is the same as the filename of the associated script with the file extension removed (“.jsp” or “.html” omitted).
      2. This is the what will be seen in the /apps/aem-prototypes/components
         /responsive_column_control/responsive_column_control.jsp or the /apps/aem-prototypes/components/responsive_column_control_sightly
         /responsive_column_control_sightly.html file, it should be descriptive and unique.
      3. Although any name will work, this convention helps with clarity and avoids confusion.

   Note: Steps 5 through 7 can also be accomplished by copy and pasting the new node from steps 2 through 4 into the /apps/aem-prototypes/components/responsive_column_control
   /cq:dialog/content/items/column/items/options/items/column/items node or the /apps/aem-prototypes/components/responsive_column_control_sightly/cq:dialog/content/items/column
   /items/options/items/column/items node.

5. Create a new node within /apps/aem-prototypes/components/responsive_column_control
   /cq:dialog/content/items/column/items/options/items/column/items (if adding a .jsp file) or within /apps/aem-prototypes/components/responsive_column_control_sightly
   /cq:dialog/content/items/column/items/options/items/column/items (if using HTL) with the following properties:
   1. Name: col-[unique_identifier]
      1. The unique identifier (e.g., [unique_identifier]) follows the following convention:
         1. Each responsive grid component is represented by the number of columns (out if 12) it spans (i.e., its width).
         2. The order of these representations is the same as they appear in the script.
         3. Each numerical representation of a responsive grid component is separated by a “-”.
      2. Although any name will work, this convention helps with clarity and avoids confusion.
   2. Type: nt:unstructured
6. Add the following property to the new node:
   1. Name: text
   2. Type: String
   3. Value: [short_description]
      1. By convention this description generally follows this pattern:
         1. [number_of_responsivegrids] + “ Columns ” + “([percentage_of_overall_width_of_grid_1, percentage_of_overall_width_of_grid_2, etc])”
      2. This is the what will be seen in the dialog box, it should be descriptive and unique.
      3. Although any name will work, this convention helps with clarity and avoids confusion.
7. Add the following property to the new node:
   1. Name: value
   2. Type: String
   3. Value: [unique_description]
      1. By convention the [unique_description] is the same as the filename of the associated script with the file extension removed (“.jsp” or “.html” omitted).
      2. This is the what will be seen in the /apps/aem-prototypes/components
         /responsive_column_control/responsive_column_control.jsp or the /apps/aem-prototypes/components/responsive_column_control_sightly
         /responsive_column_control_sightly.html file, it should be descriptive and unique.
      3. Although any name will work, this convention helps with clarity and avoids confusion.
8. If adding a .jsp file:
   1. Add the following case to the choose (<c:choose>) block in the /apps/aem-prototypes/components/responsive_column_control/responsive_column_control.jsp file:

9. If adding a .html file:
   1. Add the following test to the sightly set block (<sly data-sly-test=”${properties.coltype}” data-sly-unwrap>) in the /apps/aem-prototypes
      /components/responsive_column_control_sightly/responsive_column_control.html file:

Given the information contained within this article, you now have enough knowledge to create beautifully customized and responsive layouts. Look forward to our next article where we will discuss some helpful features and advanced customizations that will further enhance your experience using this responsive layouting system.

Part 1, Part 2, Part 3, Part 4, Part 5