Hi All,
Has anyone got any tips on the best practice using a bootstrap 3 front end with FC7? I see the Chelsea skeleton has a <skin:loadJS id=“chelsea” /> at the top of the header. This has a bootstrap.js in it, not to sure of the version. Does the FC work with BS3? I’ve been having some conflicts with the FC tray and containers when BS3 is loaded. ie blank container modal window.
Cheers
Phil
You should be fine as long as you are not using formtools or attempting to use the FarCry jQuery/Bootstrap libraries that ship with core.
We spent some considerable time isolating FarCry Bootstrap/jQuery from project based libraries. The webtop, containers and FarCry tray are all Bootstrap 2.3.2 and they have their own jQuery namespace at fc-.
If you are simply using skin:loadJS to load jquery you will end up loading FarCry’s own jQuery fc-jquery, including functions for the FarCry tray. Bootstrap 3 will need it’s own copy of jQuery. Use registerJS to register your own jquery library for use in the front end.
<!-- /yourproject/config/_serverSpecificVarsAfterInit.cfm -->
<skin:registerJS id="jquery" baseHREF="/js" lFiles="jquery.min.js" />
Also check the docs for skin:registerJS and skin:loadjs
FarCry will detect that you have loaded a separate library and load its own fc-jquery as needed.
Chelsea is Bootstrap 2.3.2 – you can review the original HTML/CSS design at its GitHub repo.
Using formtools in the front end with Bootstrap 3.0 is a little bit trickier.
The form elements generated by the outputted formtool are wrapped in specific HTML markup. While relatively unobtrusive, this markup was originally based on Uni-Form. Loading Uni-Form wrappers into a Bootstrap formatted form can have the odd unexpected result.
In 7.0 we introduced a great new feature called Formtool Theming. This allows us to skin the markup elements that wrap the form inputs. Out of the box we support Uni-Form and Bootstrap 2.3.2. You can select the relevant theme under Admin > General Admin > Config Files:
Unfortuantely… Bootstrap 3 requires more than just wrapping markup. It also requires additional classes on input elements, and we can’t do that yet unless you manually use ftClass="" to put them on each and every property 
We need a way for the form themes to modify the property metadata, but can’t do that cleanly yet. It’s probably a 7.1 release feature.
Conclusion? Auto generated formtools for Bootstrap 3 difficult. But it is still entirely possible if you just do the markup yourself by returning the metadata associated with the content type property.
I am using Bootstrap 3 and FC7 on my (still VERY under construction) website: http://trond.ulseth.no
It was plug and play. As long as you are building your webskins properly the front end coding really doesn’t mater to FarCry (and vice versa). Except in a few odd cases like the form tools issue Geoff is mentioning above.
Thanks for the feedback. Especially the parts about using FC forms on the front end. That could have got me a world of pain.
The real issues appear when you have calls to bootstrap 3 when you’re logged in to the site. All sorted now thanks after a bit of function sniffing.
Just out of interest does the top right X on an edit box work on the front end? It doesn’t for me, just wondering if that’s just a quirk of some of my front end code of a bug.
Cheers
Phil
Works for me on Bootstrap 2.3.2 and Bootstrap 3.0.
