The Simple Plus Bootstrap project provides a simple harness for exploring how Bootstrap 3 works in the context of AEM Sites.

Note:

All Simple Plus packages require the installation of the base Simple package.

Bootstrap is a popular front-end HTML, CSS, and JS framework for developing responsive, mobile first projects. The Simple Plus Bootstrap exposes Bootstrap v3.3.7 to AEM, and provides entry points for exploration:

How to use

  1. Download and install the latest Simple package via AEM Package Manager.

  2. Open AEM in your browser and navigate to AEM > Sites > Simple > Plus > Bootstrap.

  3. Open the sub-pages to explore various facets of Bootstrap 3 in the context of AEM Sites.

Implementation notes

This integration of Bootstrap v3.3.7 illustrates how the Bootstrap responsive grid works in the context of the AEM Reponsive Grid (aka Layout Container component), and using the Bootstrap carousel component, how the the Bootstrap component style guide can be integrated into AEM Components.

Bootstrap Client Library

Bootstrap is included via a client library. AEM has a built-in LESS compiler, so the project includes Bootstrap's source LESS files under src/less. This allows a developer to easily theme Bootstrap without having to pre-compile the source outside of AEM. Consult the Bootstrap documentation for more information about using Less.

Also included is a JavaScript-only client library. This is useful if you want flexibility of where the JavaScript vs. CSS gets loaded on a page. 

Resources vs. Fonts

One difference you will notice in the AEM client library setup is that Bootstrap's glyphicons are stored in a folder named resources instead of a folder named fonts. This is due to the way AEM's client library proxy works, as it only recognizes static assets (fonts, images...) in folders named resources. Consult the documentation for more details. 

Components

Two components are included to highlight the Bootstrap integration. The grid-example component is a static component that allows a user to see how Bootstrap's grid behaves inside the AEM editor. The carousel component implements Bootstrap's Carousel component, but allows an author to update the various slides of the carousel. The component uses Sling Models to encapsulate the business logic and keep the markup relatively clean. 

Supporting materials

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy