Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

CQ 5.6.1 - Use of bootstrapper, font-awesome libaries

Avatar

Level 3

Hi,

I have a requirement to design an UI component. I am thinking to use the jQuery, BootStrapper and font-awesome libaries in this project.

May I know whether adobe CQ5.61 is compatible with these latest libraries? If yes, are there any tricks/techiniques/tips to use these javascript and css libarieis?

Appriciate if anyone provide some examples for the same.

Regards,

Kishore

1 Accepted Solution

Avatar

Correct answer by
Level 10

You can use any of these libraries in AEM. Include the respective script in your template and you should be good to use.

View solution in original post

9 Replies

Avatar

Community Advisor

You can use any JS/CSS library. No issues. Just include those in your template and code as you normally would...

Avatar

Correct answer by
Level 10

You can use any of these libraries in AEM. Include the respective script in your template and you should be good to use.

Avatar

Community Advisor

Working with bootStrap is good. we are also going to release the article for bootStrap recently.

stay touch: Scott's Digital Community: Creating an Experience Manager Responsive Banner Component

Regards,
Prince

Avatar

Level 3

Thanks all for the response.

Do we really need to keep these libaries at template level or we can make them at component level? Please confirm

Regards,

Kishore

Avatar

Community Advisor

These are generic libraries, so should be kept at template level...

Avatar

Level 3

I have downloaded the js and css files for bootstrapper/font-awesome and included in clientlibs folder. However none of these libarieis are being loaded but no such issue for my custom libraries. Am i missing a trick here?

Avatar

Community Advisor

why do you downloaded those files.

linked it to the page through CDN. so that any changes can be direct reflect on your page.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

keep it on page component so that you don't need to include in other components.

Regards,

Prince

Avatar

Level 4

Did you add the new clientlib  with other one(thru: data-sly-use.clientlib) and also declare in your template(data-sly-call="${clientlib.all....) ?

Otherwise, you won't be using the clientlib until included in your sightly.

Avatar

Level 3

Do you mean that we can directly refer the libariries URL from the component JSP? I heard from someone that, its a not a good practice to add the urls in JSP and we always refer the libraries via clientlibs.

Please correct me what I heard was wrong. Appriciate your help!

Just an FYI, I am using AEM version 5.6.1 sp2