Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.

ResponsiveGrid:How to controll default grid size ?

Avatar

Level 3

Hello Community!

I have another question relative with AEM in responsive design.

I use to use bootstrap to make responsive site so I try to understand how I can use in AEM grid system while making component.

I made some wrapper components that can gives you options of 6 by 6, 4 by 3 and 3 by 4 for example.

1293780_pastedImage_0.png

I realized that the responsivegrid gives a page, aemGrid -default-12 classes like following.
It works like I want to do but I think I can clean up a little bit.

1293781_pastedImage_1.png

Here are my questions,

1) Is there any way I can tell this line (<sly data-sly-resource="${'LGrid' @resourceType='wcm/foundation/components/responsivegrid'}"></sly>), how many column it needs for default ?

2) Is it possible to define column like "col-12 col-sm-6" in AEM grid, so it can expand 12 col when the screen size is smaller.

3) What is the differentce between aem-Grid--xx and aem-Gri--default-xx

So that ideally, I can redundant the nested code.

following sudo code is my ideal way to show the content if possible.

<div class="row">

     <div class="aem-Grid aem-Grid--6 aem-Grid--default--12"></div>

     <div class="aem-Grid aem-Grid--6 aem-Grid--default--12"></div>

</div>

Let me know  if you know answer to it !

Thanks !

5 Replies

Avatar

Level 10

"I use bootstrap to make responsive site" - we have an ATCE web session on this subject - it may help --- ATACE April 25 2017

Avatar

Level 10

We are going to release a column component article very soon that may help here.

Avatar

Community Advisor

I think this is the exact problem we wer trying to solve out smacdonald2008​. My approach to such a problem would be

     - create a component which will control the column. In which the author should have the ability to select the column he want.

- It is perfectly possible. Sample coming your way soon. You can modify according to your needs

Avatar

Level 3

Thank you @veena_07 and @smacdonald2008

For @veena_07, Do you know how to make it happen the 2) ?

I was googling around the responsive Grid and all the page I ended up was this page - Responsive Layout - docs.adobe.com

There are a lot of what I can do but it missing How I can make it happen

If you know how then please let me know !

thanks !

Ryu