Style system

Question

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 Answer

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 · Answer

@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!

Use Client Libraries (Clientlibs) to implement Global styles:

Use Client Libraries (Clientlibs) to implement Global styles:

Sign up

Login with SSO

Login to the community

Login with SSO