I recently joined an AEM project that uses Bootstrap Grid for the site layout. Custom components have been developed to control/author nearly every aspect of the bootstrap grid elements. Authors can place a container on the page, rows in that container, and columns in those rows. It is a mess of nested parsys’s. Authors can then configure various dialog options such as a column grid size for each viewport. I personally feel this is giving authors too much control over the design and is likely not a good practice.
This project began years ago so it is not using any modern AEM features such as the AEM Grid and layout system. They are still using static page templates and I am trying to introduce the authors to editable templates, style system, and layout mode. My biggest challenge is understanding how the bootstrap grid system fits into all of this. I’m coming to the conclusion that it simply doesn’t work and that you have to use AEM’s grid system if you want to make use of layout mode.
Should I scrap their bootstrap grid “super” components and push for implementing designs with AEM grid? Their design team creates page prototypes using BS grid, so currently it is easy for us to take their CSS and dump it into AEM since the BS markup is already in the components. Moving to AEM grid would create extra work for the developers to take the design team’s bootstrap prototypes and convert it to AEM grid. Has anyone dealt with a similar scenario and how did you handle it?
