CQ 5.6.1 - Use of bootstrapper, font-awesome libaries | Community
Skip to main content
Level 3
August 30, 2017
Solved

CQ 5.6.1 - Use of bootstrapper, font-awesome libaries

  • August 30, 2017
  • 9 replies
  • 4816 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Lokesh_Shivalingaiah

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

9 replies

viveksachdeva
Community Advisor
Community Advisor
August 31, 2017

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

Lokesh_Shivalingaiah
Lokesh_ShivalingaiahAccepted solution
Level 10
August 31, 2017

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
Community Advisor
Community Advisor
August 31, 2017

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

Level 3
August 31, 2017

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
Community Advisor
Community Advisor
August 31, 2017

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

Level 3
August 31, 2017

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
Community Advisor
Community Advisor
August 31, 2017

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
Level 4
August 31, 2017

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.

Level 3
September 1, 2017

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