I'm not sure if my google fu is weak but I can't seem to find and answer to my question.

We're about to embark on a new build of SDL Web (version 8.5) and would prefer to use a custom framework for the front end of the website rather than boostrap.

I know that we can require xpm.js and use the helper functions in the razor script to correctly identify the Components / HTML, however I'm unsure of what if any dependencies xpm.js has on the boostrap framework.

Has anyone done this or able to give me a few pointers?

Many thanks

  • Experience Manager does not depend on bootstrap at all. DXA - out of the box - does.
    – Nuno Linhares
    Feb 2 '17 at 14:14
  • 1
    if I understand correctly, you wish to do a DXA implementation, but replace the bootstrap framework with something else. I don't believe XPM has any dependency on bootstrap. The xpm.js script you are referring to is a dxa-specific javascript helper. i think the only dependency this helper has is jquery. Feb 2 '17 at 14:16
  • You may want to share what you decide on doing (once you get that far) as an answer to your question and accept it - for future reference.
    – Nuno Linhares
    Feb 2 '17 at 17:53

Let me start off with giving a few pointers about the DXA HTML design, I've written them down in the following blog https://community.sdl.com/solutions/content-management/tridion/tridion-developer/b/weblog/posts/dxa-html-design-decisions

With that out of the way, you have chosen to replace the DXA Bootstrap based HTML with your own, thats fine and certainly possible. The source of the xpm.js can be found on GitHub (together with all the HTML design sources actually) https://github.com/RWS/dxa-html-design/blob/master/src/system/assets/scripts/xpm.js

In there you will see that all the script does is define a jQuery function isInXpm which is used to determine if your are currently on the Staging Site and XPM is loaded. This to display (set the CSS class xpm-button to display) the XPM buttons we added in the design (to easily edit the header and footer as a separate page), and to pause the carousel, so you also have easy edibility of that in XPM.

Now the most important thing to understand is, that the xpm.js script is NOT part of XPM, it is part of the DXA HTML design. You don't need that script to enable XPM on your site, it is just there to add a few small extras, which make everything more usable. The idea of these little extras I have described in a earlier blog post here http://www.tridiondeveloper.com/having-fun-with-experience-manager

Since you are building your own HTML design, keep in mind you will first need to get everything working, change all the views, and then think about adding these sort of extras. Note this sounds like a lot of work, which is why we delivered you the bootstrap based HTML design, which you could simply use and style in your own way. That will accelerate your implementation ;o).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.