Custom AEM Grid classes | Community
Skip to main content
pieter-janp4643
pieter-janp4643
November 14, 2017

Custom AEM Grid classes

  • November 14, 2017
  • 1 reply
  • 6807 views

Is it possible to modify or customize the aem grid classes that are printed on the component tag? We use a different grid system but would like to use the layout feature in the editor for the easy configuration of columns.

The current output would be:

component-name parbase aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--4 aem-GridColumn--phone--12

In my case I want to modify the output to be:

component-name parbase grid-4 grid-mobile-12

Is there any way to overlay or configure this functionality?

PS: We are using AEM 6.3

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

smacdonald2008
smacdonald2008
Level 10
November 14, 2017

You can override most AEM components. There should be no reason why this would be any different. We have an article on building a custom grid component. However - its for use on a page to hold other components - not for tags. I am not completely sure what you mean by holding tags.

I assume you want to change something in the AEM UI as opposed to a component for use in an AEM site.

smacdonald2008
smacdonald2008
Level 10
November 14, 2017

Here is the article on creating a custom grid component for use within an Page template.

Creating a custom Touch UI Grid Component for Adobe Experience Manager

pieter-janp4643
pieter-janp4643Author
November 20, 2017

We currently have an implementation of such a component where columns are defined and components dragged into them.

I wish to avoid that approach as it comes with a lot of overhead responsive-wise for the authors.

I am using the aem grid now but leveraging the layout section of the editor which works great. I wish to however change the output css classes without rewriting the aem code that reads the cq:responsive node under the component. For that I am wondering if these css class outputs can be configured somehow.

Right now I am using a work around in scss where I extend the css classes aem outputs from the css grid we are using in our project.

It would be cleaner if I can just make it output the correct css classes though.

As far as I can tell the css classes are generated in a java class and printed using the following file on line 10

/libs/wcm/foundation/components/responsivegrid/responsivegrid.html

<div data-sly-use.api="com.day.cq.wcm.foundation.model.responsivegrid.ResponsiveGrid"
    data-sly-use.allowed="com.day.cq.wcm.foundation.AllowedComponentList"
    class="${api.cssClass} ${allowed.cssClass}">
    <sly data-sly-test.isAllowedApplicable="${allowed.isApplicable}"
        data-sly-test="${isAllowedApplicable}"
        data-sly-use.allowedTemplate="/libs/wcm/foundation/components/parsys/allowedcomponents/allowedcomponents-tpl.html"
        data-sly-call="${allowedTemplate.allowedcomponents @ title=allowed.title, components=allowed.components}"></sly>
    <sly data-sly-test="${!isAllowedApplicable}"
        data-sly-repeat.child="${api.paragraphs}"
        data-sly-resource="${child.path @ resourceType=child.resourceType, decoration='true', cssClassName=child.cssClass}"></sly>
    <sly data-sly-test="${!isAllowedApplicable && wcmmode.edit}"
        data-sly-resource="${resource.path @ resourceType='wcm/foundation/components/responsivegrid/new', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}" />
</div>
Terms & ConditionsAccessibility statement

Loading footer...