Style system

[jeevar25487230]

Usually the Style system works on the granular level of each and every individual component in an editable template, so may i know how can we have a global style configured and making the global style accessible for all the components.

Is there any best practices or out of box features in aem 6.4  to achieve this.

Note: Global Style eg: bg-color='white', bg-color='grey'  and different viewports.

Thanks in Advance

[aanchal-sikka · Accepted solution]

Use Client Libraries (Clientlibs) to implement Global styles:

• Create a Global Client Library:

  • Create a client library folder (e.g., /apps/your-project/clientlibs/global) that contains your global styles, such as bg-color-white, bg-color-grey, and viewport-specific styles.
  • Ensure that this client library is configured as categories="global.styles", which can then be included in your pages.

• Include the Global Client Library in Templates:

  • Reference this global client library in your editable templates.

[kautuk_sahni]

@jeevar25487230 Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!