Developing with the Style System developing-with-the-style-system

Learn how to implement individual styles and reuse Core Components using Experience Manager’s Style System. This tutorial covers developing for the Style System to extend Core Components with brand-specific CSS and advanced policy configurations of the Template Editor.

Prerequisites prerequisites

Review the required tooling and instructions for setting up a local development environment.

It is also recommended to review the Client-side Libraries and Front-end Workflow tutorial to understand the fundamentals of client-side libraries and the various front-end tools built into the AEM project.

Starter Project

Check out the base-line code that the tutorial builds on:

You can always view the finished code on GitHub or check out the code locally by switching to the branch tutorial/style-system-solution.

Objective

What you are going to build what-build

This chapter uses the Style System feature to create variations of the Title and Text components used on the Article page.

Underline style available to use for Title Component

Background background

The Style System allows developers and template editors to create multiple visual variations of a component. Authors can then in turn decide which style to use when composing a page. The Style System is used throughout the rest of the tutorial to achieve several unique styles while using Core Components in a low code approach.

The general idea with the Style System is that authors can choose various styles of how a component should look. The “styles” are backed by additional CSS classes that are injected into the outer div of a component. In the client libraries CSS rules are added based on these style classes so that the component changes appearance.

You can find detailed documentation for Style System here. There is also a great technical video for understanding the Style System.

Underline Style - Title underline-style

The Title Component has been proxied into the project under /apps/wknd/components/title as part of the ui.apps module. The default styles of Heading elements (H1, H2, H3…) have already been implemented in the ui.frontend module.

The WKND Article designs contain a unique style for the Title component with an underline. Instead of creating two components or modifying the component dialog, the Style System can be used to allow authors the option to add an underline style.

Add a Title Policy

Let’s add a policy for the Title components to allow content authors to choose the Underline style to apply to specific components. This is done using the Template Editor within AEM.

Apply the Underline Style

Being an author let’s apply the underline style to certain Title Components.

Implement the Underline Style - ui.frontend

Next, implement the Underline style using the ui.frontend module of the AEM project. The webpack development server that is bundled with the ui.frontend module to preview the styles before deploying to a local instance of AEM is used.

Quote block Style - Text text-component

Next, repeat similar steps to apply a unique style to the Text Component. The Text component has been proxied into the project under /apps/wknd/components/text as part of the ui.apps module. The default styles of paragraph elements have already been implemented in the ui.frontend.

The WKND Article designs contain a unique style for the Text component with a quote block:

Add a Text Policy

Next add a policy for the Text components.

Apply the Quote Block Style

Implement the Quote Block Style - ui.frontend

Next let’s implement the Quote Block style using the ui.frontend module of the AEM project.

Fixed Width - Container (Bonus) layout-container

Container components have been used to create the basic structure of the Article Page Template and provide the drop zones for content authors to add content on a page. Containers can also use the Style System, providing content authors with even more options for designing layouts.

The Main Container of the Article Page template contains the two author-able containers and has a fixed width.

Main Container in the Article Page Template.

The policy of the Main Container sets the default element as main:

The CSS that makes the Main Container fixed is set in the ui.frontend module at ui.frontend/src/main/webpack/site/styles/container_main.scss :

main.container {
    padding: .5em 1em;
    max-width: $max-content-width;
    float: unset!important;
    margin: 0 auto!important;
    clear: both!important;
}

Instead of targeting the main HTML element, the Style System could be used to create a Fixed width style as part of the Container policy. The Style System could give users the option of toggling between Fixed width and Fluid width containers.

Congratulations! congratulations

Congratulations, the Article Page is nearly styled and you gained hands-on experience using the AEM Style System.

Next Steps next-steps

Learn the end-to-end steps to create a custom AEM Component that displays content authored in a Dialog, and explores developing a Sling Model to encapsulate business logic that populates the component’s HTL.

View the finished code on GitHub or review and deploy the code locally at on the Git branch tutorial/style-system-solution.