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.
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.
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 !
-- what are yout thoughts here?
Views
Replies
Total Likes
"I use bootstrap to make responsive site" - we have an ATCE web session on this subject - it may help --- ATACE April 25 2017
Views
Replies
Total Likes
We are going to release a column component article very soon that may help here.
Views
Replies
Total Likes
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
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
Views
Replies
Total Likes