Using the Style System

Let’s take a look at Experience Manager’s Style System. The Style System is a powerful capability of AEM that allows components to have various visual appearances that can be specified during authoring. The styles we will be reviewing are provided by the WKND project for components. The styles are defined as CSS, and do not require changes to the components’ back end logic or the HTL script or Sling Model. This vision of using the component HTML as an API of sorts that front end developers can code against is incredibly empowering, and reduces the need for front end developers to be experts in both front end technology and AEM. Now, they can just focus on the front end. I have a simple content page set up that leverages styles in a few places. Let’s see how we can use the Style System to change the appearance of our title component. Selecting our title component that’s been enabled with the Style Systems exposes a style button, denoted by the paintbrush icon. This displays a list of all available styles that can be toggled on or off for this component. Let’s turn off the underline style for this title, and we see the underline disappear. We can also make it right-justified.

Okay, so that wasn’t a substantial change. Let’s move onto our second example, and try something a bit more interesting. For this, we’ll select our teaser image, and as you can see, we have some options to change a teaser image into more of a list-style layout. All right, let’s look at one more component on this page, the hero image. Changing the style of the hero image allows it to better stand out on this page.

Just to reemphasize, all of these visual variations were achieved by toggling on and off CSS that wraps each of our components. Now that we have a sense of how this works, let’s take a look at how this is configured in Experience Manager. Styles are defined in the component policy level, so let’s head over to the page’s template so we can inspect the title component’s policy. Clicking the policy icon opens the component policy, and we have a Styles tab that holds all of the available style options. As you can see, this list mimics the menu we used earlier to select our styles. Styles can be broken into groups, and each group can have any number of styles. A style option is comprised of a label that appears in the style selector along with one or more CSS classes. Here, we have the label block, and to the right, we have a list of the CSS classes that will wrap the components’ HTML when the style is applied. In this case, we’ll wrap the components with the CSS classes cmp-title–underline, and cmp-title–right. Styles between groups can be combined. For instance, underline can always be combined with align right or mini-spacing. Style combinations within a style group can be controlled via the Styles Can Be Combined checkbox. In this configuration, the Style System prevents both the black and gray styles from being selected at the same time. However, it does allow underline and mini-spacing to be selected for the same component. -