CQ 5.6.1 - Use of bootstrapper, font-awesome libaries

[kishored6899358]

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

[viveksachdeva]

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

[Lokesh_Shivalingaiah · Accepted solution]

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

[Prince_Shivhare]

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

[kishored6899358]

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

[viveksachdeva]

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

[kishored6899358]

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?

[Prince_Shivhare]

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

[Diego_Fontan]

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.

[kishored6899358]

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