Custom Responsive grid/Layout container

A custom responsive layout container can be created by extending the OOTB Responsive Grid (Layout Container).

Please follow the following steps:

Step 1: Copy OOTB Responsive Grid component

OOTB responsive grid’s path: /libs/wcm/foundation/components/responsivegrid

• Copy the component to the target project
• Update name for the component.
  • Since, component name would be added by default in the decoration tags, it might help add specific CSS for the container.
• Update jcr:title & componentGroup to uniquely identify the component.

 

Step 2: Extend OOTB responsive grid

Update sling:resourceSuperType of the custom container as:

sling:resourceSuperType=”wcm/foundation/components/responsivegrid”

Step 3: Make it responsive 

At this point, the component can added to the pages, but will not be responsive in the Layouting Mode (i.e. resizing the container / containing elements would have no visual effect).

Responsiveness can be achieved by overriding ns.responsive.isResponsiveGrid() of  /libs/cq/gui/components/authoring/clientlibs/editor/js/responsive/responsive.js. Please find the steps below:

• Create clientlibs (cq:ClientLibraryFolder) below your component.
• Add a javascript file. It can be added to source sub-folder (type=nt:folder)  below the clientlibs. Add following snippet to the file:

 //Fix to declare custom container as responsive
(function ($, ns, channel, window, undefined) {
    ns.responsive.isResponsiveGrid = function (editable) { 
        return editable.type === 'wcm/foundation/components/responsivegrid' || '/apps/<app_name>/<path_to_custom_container>'; 
    } 
}
(jQuery, Granite.author, jQuery(document), this)); 

• Add js.txt below clientlibs. Update js.txt with the path to the javascript file.
• Add ‘cq.authoring.editor’ category to component’s clientlibs

 

Step 4: Update the component with the desired behavior

The component is both available for use & responsive. You can update the component script as per the business requirement. Also, delete the scripts that are not being overwritten. The deleted scripts would be inherited via Sling resource merger

 

Adding responsive CSS for the Custom Responsive Grid

A custom CSS file for various devices can be created similar to OOTB responsive Grid.

 

Configuring breakpoints

To configure breakpoints for the site, follow the steps detailed at Adobe Site