- This variety is NOT the focus of this tutorial.
- This variety IS the focus of this lab.
- Use the BLOCK--MODIFIER CSS class to identify component DOM sub-trees to process.
- Target component HTML elements via their BEM CSS classes .
- When inserting new DOM elements, provide corresponding BEM CSS classes to they can be clearly styled via CSS.
- Invoke the following logic when:
- The page is loaded.
- An authoring event occurs that requires a re-application of the style.
- All components that match the style are located in the DOM.
- For each of these components, check if the component has already been processed.
- If the component has not yet been processed:
- Mark the component as processed.
- Derive any new data that might be required, o ften via AJAX calls to AEM Content Services end points.
- Modify the DOM as the styles needs.
The Teaser's Post style involves deriving the last modified data from the linked AEM Page, and injecting this new content into the Teaser below the Teaser's title.
After completing the above steps, the Teaser with the lightning bolt should have a shadow effect on the left and right side of it, and the 6 Teasers under My Portfolio should have the portfolio card style applied, and your page should look like:
- Tutorial Overview
- Part 0 - Setup
- Part 1 - AEM Core Components
- Part 2 - Preparing the Page Template
- Part 3 - Content-first Authoring
- Part 5 - Applying the Basic Dopetrope Style
- Part 6 - Applying the Teaser Component CSS-based Styles
- Part 8 - Exploration of How Other Components Were Styled