Back to Blog
For example:Ī component must have the options to be colored with the brand’s primary and secondary colors, however, the AEM authors know the colors as green and yellow, rather than the the design language of primary and secondary. This allows Style options to be labeled in a vocabulary clear and understood by the AEM authors, but lets CSS developers name the CSS classes in a future-proof, semantic manner. Style names, or the options presented to AEM authors, and the implementing CSS class names are decoupled in AEM. Too many options can also confuse authors as it may become unclear which option or combination is required to produce the desired effect. If ineffective combinations are exposed, ensure they at least do not have an ill effectĪs the number of possible style combinations available to AEM authors increases, the more permutations exist that must be QA’d and validated against brand standards.Only expose style combinations that have an effect.Only expose style options and combinations that are allowed by brand standards.Name styles using a vocabulary understood by the authors.When defining the style names available to AEM authors, it is best to: For example, a Hero layout style may have Display styles that change the color scheme from the primary brand color scheme to the secondary brand color scheme. For example, a Teaser component may be able to be presented in the traditional card-based layout, a horizontal Promotional style or as a Hero layout overlaying text on an image.ĭisplay styles are used to affect minor variations to Layout styles, however, they do not change the fundamental nature or intent of the Layout style. Layout styles affect many elements of a Component to create a well define and identifiable rendition (design and layout) of the component, often aligning to a specific re-useable Brand concept. There are two main flavors or styles that are implemented for the AEM Style System: Please review the content at Understanding how to code for the Style System, to ensure an understanding of the BEM-like conventions used by AEM Style System.
0 Comments
Read More
Leave a Reply. |