AEM designer and clientlibs

[jakej40603950]

Hello, Had a question regarding AEM designer.

From what I have read of it (mainly from here : https://docs.adobe.com/docs/en/aem/6-2/develop/the-basics/designer.html) it's used to give different look and feel to the same set of components / pages depending on the design path that is set on the page. 

But in the examples shown, the css file is not added as a clientlib or under a clientLibFolder. Is it possible to bring the benefits of designer to components where clientlibs are used? In other words, if there were 2 different clientlibs under 2 different designs but with the same category, would the appropriate clientlib be chosen depending on the designPath which is set?

I tried this out myself but it seems both the clientlib css files are requested on page load (since they both have same category)... but wanted to be sure just in case I'm doing something wrong.

Also, if this is not possible, that means all styles which are to be design based, should not be added as clientlibs under the designs?

[smacdonald2008]

Using Designer is the same thing as using Clientlibs - but via a GUI. 

Most developers are adding style to sites via Clientlibs under /etc. Then in AEM 6.2 or upcoming 6.3 - you pull it into your site via: 

<sly data-sly-call="${clientLib.all @ categories='summit.style'}" />

I would personally use Clientlibs under /etc created in CRXDE lite. 

This is the way we are using in this upcoming 6.3 article: 

http://scottsdigitalcommunity.blogspot.ca/2017/03/creating-your-first-adobe-experience.html

Hope this helps. 

[jakej40603950]

Thanks Scott for the answer.

I do know clientlibs are used to add styles. 

My question was mainly around applying styles through the use of cq:designPath as given here: 

http://blogs.adobe.com/sunil/2015/04/29/aem-developers-apply-a-design-to-the-aem-sightly-template/

In case of cq:designPath, all styles added under that path would get applied. If you want to change the style, it's just a matter of pointing cq:designPath to a different design path.

What I was asking was, does cq:designPath bear any influence on styles added using clientlibs (i.e. <sly data-sly-call="${clientLib.all @ categories='summit.style'}" />)?

[vjetty · Accepted solution]

Hi, Jake

What I was asking was, does cq:designPath bear any influence on styles added using clientlibs (i.e. <sly data-sly-call="${clientLib.all @ categories='summit.style'}" />)?

- Yes they have influence on the styles. Basically, if you use clientlibs apart from design the order of loading the styles will have the influence. If your styles has the same specificity the rules that appear later in the code override earlier rules.

- If you want to load styles based on design you may refer here. 

    /libs/wcm/foundation/components/page/head.html

Inside head.html - you will find the following tag

<sly data-sly-call="${headlibRenderer.headlibs @ designPath=head.designPath}" />

Here you need to declare headlibRenderer and head and understand how it is structured. 

Hope this helps.

Thanks, 

Vamsi