Style System style-system
The Style System allows a template author to define style classes in the content policy of a component so that a content author is able to select them when editing the component on a page. These styles can be alternative visual variations of a component, making the component more flexible.
This eliminates the need to develop a custom component for each style or to customize the component dialog to enable such style functionality. It leads to more reusable components that can be quickly and easily adapted to the needs of content authors without any AEM back-end development.
Use Case use-case
Template authors not only need the ability to configure how components function for the content authors, but also to configure a number of alternative visual variations of a component.
Likewise, content authors not only need the ability to structure and arrange their content, but also to select how it is presented visually.
The Style System provides a unified solution to both the template author’s and content author’s requirements:
- Template authors can define style classes in the content policy of components.
- Content authors can then select these classes from a drop-down when editing the component on a page in order to apply the corresponding styles.
The style class is then inserted on the decoration wrapper element of the component so that the component developer doesn’t need to be concerned with handling the styles beyond providing their CSS rules.
Overview overview
Using the Style System generally takes the following form.
-
The web designer creates different visual variations of a component.
-
The HTML developer is provided with the HTML output of the components and the desired visual variations to implement.
-
The HTML developer defines the CSS classes that correspond to each visual variation and are to be inserted on the element wrapping the components.
-
The HTML developer implements the corresponding CSS code (and optionally JS code) for each of the visual variations so that they look as defined.
-
The AEM developer places the provided CSS (and optional JS) in a Client Library and deploys it.
-
The AEM developer or template author configures the page templates and edits the policy of each styled component, adding the defined CSS classes, giving user-friendly names to each style, and indicating which styles can be combined.
-
The AEM page author can then choose the designed styles in the page editor via the style menu of the component’s toolbar.
Note that only the last three steps are actually carried out in AEM. This means all development of the necessary CSS and Javascript can be done without AEM.
Actually implementing the styles only requires deployment on AEM and selection within the components of the desired templates.
The following diagram illustrates the architecture of the Style System.
Use use
To demonstrate the feature, we will use WKND’s implementation of the core component’s title component as an example.
The following sections As a Content Author and As a Template Author describe how to test the functionality of the Style System using the Style System of WKND.
If you wish to use the Style System for your own components do the following:
- Install the CSS as client libraries as discussed in the section Overview.
- Configure the CSS classes that you wish to make available to your content authors as described in the section As a Template Author.
- Content authors can then use the styles as described in the section As a Content Author.
As a Content Author as-a-content-author
-
After installing the WKND project, navigate to WKND’s English language master home page at
http://<host>:<port>/sites.html/content/wknd/language-masters/enand edit the page. -
Select a Title component further down the page
-
Tap or click the Styles button on the toolbar of the List component to open the style menu and change the appearance of the component.
note note NOTE In this example, the Colors styles (Black, White, and Gray) are mutually exclusive, while the Style options (Underline, Align Right, and Mini Spacing) can be combined. This can be configured in the template as the template author.
As a Template Author as-a-template-author
-
While editing WKND’s English language master home page at
http://<host>:<port>/sites.html/content/wknd/language-masters/en, edit the template of the page via Page Information -> Edit Template.
-
Edit the policy of the Title component by tapping or clicking the Policy button of the component.
-
On the Styles tab of the properties, you can see how the styles have been configured.
- Group Name: Styles can be grouped together within the style menu that the content author will see when configuring the style of the component.
- Styles can be combined: Allows for multiple styles within that group to be selected at one time.
- Style Name: The description of the style that will display to the content author when configuring the style of the component.
- CSS Classes: The actual name of the CSS class associated with the style.
Use the drag handles to arrange the order of the groups and the styles within the groups. Use the add or delete icons to add or remove groups or styles within the groups.
Setup setup
Core Components version 2 and later are fully enabled to take advantage of the Style System and require no additional configuration.
The following steps are only necessary to enable the Style System for your own custom components or to enable the optional Styles tab in the Edit dialog.
Enable Style Tab in Design Dialog enable-styles-tab-design
In order for a component to work with AEM’s Style System and show the style tab in its design dialog, the component developer must include the style tab with the following settings on the component:
path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"sling:resourceType = "granite/ui/components/coral/foundation/include"
With the component configured, the styles configured by the page authors will be automatically inserted by AEM on the decoration element that AEM automatically wraps around every editable component. The component itself need not do anything else to make this happen.
Enable Styles Tab in Edit Dialog enable-styles-tab-edit
As of AEM version 6.4.7.0 an optional Styles tab in the Edit Dialog is now available. Unlike the Design Dialog tab, the tab in the Edit Dialog isn’t essential for the Style System to function, but is an optional alternative interface for a content author to set styles.
The edit dialog tab can be included in a similar way to the design dialog tab:
path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_edit/styletab"sling:resourceType = "granite/ui/components/coral/foundation/include"
Styles with Element Names styles-with-element-names
A developer can also configure a list of allowed element names for styles on the component with the cq:styleElements string array property. Then in the Styles tab of the policy within the design dialog, the template author can also choose an element name to be set for each style. This will set the element name of the wrapper element.
This property is set on the cq:Component node. For example:
/apps/<yoursite>/components/content/list@cq:styleElements=[div,section,span]
- HTL takes precedence over everything:
data-sly-resource="${'path/to/resource' @ decorationTagName='span'} - Then among multiple active styles, the first style in the list of styles configured in the component’s policy is taken.
- Finally, the component’s
cq:htmlTag/cq:tagNamewill be considered as a fallback value.
This ability to define style names is useful for very generic components, like the Layout Container, or the Content Fragment component, in order to provide them with additional meaning.
For instance it allows a Layout Container to be given semantics like <main>, <aside>, <nav>, etc.