This portion of the tutorial focuses on how the Web Producer configures the Teaser Component to allow the Shadow and Portfolio styles, which are implemented using only CSS (or in our case LESS), and how an Experience Author applies these styles to different teasers on the page.

Remember, all styling is possible w raw CSS, however we use LESS as it results in cleaner code and AEM natively compiles LESS to CSS.

A few LESS idiosyncrasies used in this file,

  • Rules that start with an @ are LESS variables !
  • Rules that start with . end with () for example, .border-color(), are LESS mixins, and are used to define re-usable sets of CSS rules in variables.less.
  • LESS supports nesting of CSS selectors. This is handy for ensuring proper namespacing. For example, the following LESS ...

Core Components should never be used directly, but rather proxied in by the custom application. The proxy components are simply cq:Component resource definitions with a sling:resourceSuperType that points to the appropriate version of the corresponding Core Component components. 

less_1

... compiles to the following CSS

css_1

The Teaser's Portfolio Styles LESS (or CSS)

Each Component Style LESS fi le is responsible for that style's visual representation. AEM's Core Components and AEM Component development best practices outline that CSS rules should target BEM (Block Element Modifier) CSS class names, and these BEM CSS classes are considered the stable HTML API of the component.

  • BLOCK  represents the Component.
  • BLOCK__ELEMENT  represents some logical "part" of the component (hyperlink, text, image, etc.)
  • BLOCK--MODIFIER  represents a Component Style.

 

Teaser Component's HTML

The Core Component's Teaser component generates the following HTML.  The BEM CSS classes de fine the stable, style-able API that can be safely targeted by our styles.

 

teaser_component1

The Teaser component is an interesting case as it includes the Core Image Component, and thus has a BLOCK ( .cmp-image ) within a BLOCK ( .cmp-teaser ).

Pulling the BEM CSS classes from the above HTML, the following API is exposed and safe to target for styling.

 

teaser_component_2

Teaser Component's "Portfolio Style" LESS (or CSS)

watch-and-learn--portfolio-style
  • BLOCK represents the Component.
    • Structural styles (padding, min-height, background, etc.) are applied here, as this wraps the component and has little or no direct content of its own.
  • BLOCK__ELEMENT represents some logical "part" of the component (hyperlink, text, image, etc.).
    • The bulk of the styles are applied at this level as this directly target the specific parts of the component.
  • BLOCK--MODIFIER represents a Component Style.
    • Typically, no styles are applied directly to this class, as this class is attached to responsive grid elements, thus styles applied here may conflict with AEM's Grid styles.
    • The exception is when adjusting the AEM Grid styles is explicitly desired for this style, for example, collapsing the margin between AEM Grid cells.

 

Note:

Avoid styling bare elements (p, li, a, span), and prefer the BEM Classes, no matter how tempting.

 

We can review the CSS (or LESS) for the Teaser's Portfolio style by navigating the CRXDE Lite  (htt p://localhost:4502/crx/de) in a new tab, and opening /apps/l725/clientlibs/clientlib-dopetrope/components/teaser/styles/portfolio.less.

 

teaser_portfolio_style_1

The resulting CSS will be consistently name spaced, and always scoped by the .cmp-teaser--portfolio selector, ensuring these rules do not leak and accidently effect other Teaser styles.

 

Note:

Always try to keep consistent selector weight, via consistent nesting depth as described a above as it helps avoid CSS rule collisions in more advanced use cases.

 

Step by Step

  1. From the Dopetrope page tap the Page Properties icon in the top left , and select Edit Template.

     

  2. In the Template Editor, locate the 1st Layout Container and tap its Teaser's Policy icon.

     

    step-2
  3. Create a new Policy by entering Dopetrope Teaser into the Policy Title text field.

     

    • Tap the Styles tab on the right.
    • Add the Default CSS Classes : cmp-teaser--default
    • Tap Add under Allowed Styles
    • Enter the Group Name Styles.
    • For each new style, tap Add under the Style sub-heading, and enter the following Style Name  and CSS Classes pairs:

        Shadowcmp-teaser--default cmp-teaser--shadow

        Portfoliocmp-teaser--portfolio

    • Tap the Check icon in the top right to save the Teaser Component Policy changes.

     

    step-4
  4. Back in the Template Editor, locate the 2nd Layout Container and tap its Teaser's Policy icon.

     

    1. Select Dopetrope Teaser from the Select policy drop down.
    2. Tap the Check icon in the top right to save the Teaser Component Policy changes.

     

    step-5
  5. Close the Template Editor browser tab to return to the Dopetrope page.

  6. Refresh the Dopetrope page.

     

  7. Select the middle Teaser with the lightning bolt icon, tap the Styles icon, and select Shadow .

     

    step-7
  8. Select each of the Teasers in the My Portfolio section, tap the Styles icon, and select Portfolio .

     

Final

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:

 

final

Tutorial Table of Contents

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