Styles system - bartoszWesolowski/aem-tips GitHub Wiki

Styles system

  • allows developers and template editors to create multiple visual variations of a component
  • authors can choose various styles of how a component should look
  • with styles added to a component, component markup will be wrapped with additional div element with classes associated with selected styles - this allows to change the component look and feel without changing the underlying markup (no BE code changes needed), FE developer needs to implement the styling for the particular style
  • styles available for a component can be defined in component policy on a template level (template authors)

Creating a component with style system

  • to enable style system for a component it has to have a design dialog cq:design_dialog with a style tab included
  • style tab definition can be copied from any of the existing components (for example Core components)
<styletab
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/include"
   path="/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"/>
  • on a template open policy dialog for this component and configure available styles
  • Author can also define default styles which will be applied when no style is selected

Documentation