Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Responsive Design - Bootstrap vs AEM Grid

Avatar

Level 3

We are migrating our website to AEM 62 from other CMS. We made our site responsive last year by using bootstrap framework.

Now, I would like to bring in the responsive feature of current site as is by using bootstrap A lot of effort was spent on this project and i don't want to waste it by changing to AEM Grid. Saying that I would like to know if anybody else has faced similar challenge. 

I would like NOT to use AEM responsive grid for following reasons:

1. We already have designed everything based on bootstrap responsive grid framework and multiple sites are already using it. Changing it to use AEM responsive grid would be one huge task.

2. AEM responsive grid allows content authors to configure grid sizes which seems overkill to me, IMO, Content Authors should get predefined list of breakpoints for the layouts and they should decide which one to use from that list instead of configuring the grids themselves.

3. Also this grid configuration feature seem to be available for individual component. IMO, how components behave at different break point is a design controlled feature, not content authors controlled feature.

Please let me know if I am thinking in wrong direction or I am missing something.

 

Also if I use bootstrap, what would be the best approach to integrate it with AEM? 

TIA

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

It's your choice Aemd. My suggestion would be to use what AEM provides,

As without using AEM systems and frameworks it provides, you won't get full power of AEM!

Alternatively, bootstrap you might find these resources useful,

[1] http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

[2] https://github.com/smithstone-oss/aem-bootstrap

Regards,

Peter

View solution in original post

6 Replies

Avatar

Correct answer by
Community Advisor

It's your choice Aemd. My suggestion would be to use what AEM provides,

As without using AEM systems and frameworks it provides, you won't get full power of AEM!

Alternatively, bootstrap you might find these resources useful,

[1] http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

[2] https://github.com/smithstone-oss/aem-bootstrap

Regards,

Peter

Avatar

Level 3

If I may ask, what specifically I would be missing if AEM Responsive Grid system is not used?

Will I miss out on some features or Will it increase the development effort? what is the real value of using AEM grid system as compared to using the bootstrap especially when I have UI already developed using bootstrap framework?

Another point is I will still have to use some framework for developing components. So why not use same framework for Grid and components?

Avatar

Level 2

Hi Aemd,

We are in the exact same situation as yours. Just wanted to know if you have found any solution for that.

Which approach have you taken finally?

Avatar

Level 3

I still haven't decided on the approach but we are moving fast towards making decision one way or another. Layout Container is not really author friendly as compared to having Column Control Component and it does not allow to enforce responsive standards but Layout container has become Adobe standard so it is tough decision to make.

Avatar

Level 1

Hey so what did you end up doing? Any tips or lessons learned worth sharing?

Avatar

Level 1

hi Aemd,

could you please share your learning as we are having a different interactive team and they don't want to change their framework for aem grid

Regards

Raja