Those were the days of two regional conferences with a lot of information and cool people coming together: the EngageUG (fka BLUG) in Breda (NL) and the BCCON in Hamburg (D). Unfortunately I could not attend to any of these but - as always - I followed them on Twitter. Thanks to those who shared pictures and quotes from both events!
In between all the stuff Mark Leusink twittered about a new version of the Bootstrap4XPages extension - as he did before during IBM Connect. There must be some kind of "spirit" that drives those guys to put just even more effort in projects during those conferences - or is it a "cosmic constellation"? I don't know. As an early adopter I installed the new one instantly. You can get your own copy here: OpenNTF / GitHub
But there are some caveats in the new version in comparison with the version before: they created a new configuration for the Application Layout control especially for the Bootstrap usage so your "old" layout may look strange. But even if you adapt some parts of the new configuration there are still issues. As I'm writing those line I haven't adapted my site yet to the new version - so stay tuned, I am sure it will look as clean as if you would code manually all the markup for Bootstrap 3.1.x.
You are doing a great job out there, guys! Thank you for your efforts!
It happened yesterday that Sven Hasselbach also posted a neat article about a project that gives the "ugly" CKEditor in XPages a new look adapted for Bootstrap'ped applications: the Bootstrap CKEditor Skin. Here is the full article on how to implement and use that cool thing: http://hasselba.ch/blog/?p=1426
I encountered just one problem: the described way doesn't work with XPiNC - the editor won't show up after "tuning" it that way. So you just have to compute two properties at runtime that check if the page is loaded in the browser or in the client. Here is an expample of my approach:
<xp:inputRichText id="inputRichText1"
value="#{document1.fileMessage}" disableTheme="true"
styleClass="ckeditor">
<xp:this.dojoAttributes>
<xp:dojoAttribute name="height"
value="200">
</xp:dojoAttribute>
<xp:dojoAttribute name="skin">
<xp:this.value><![CDATA[#{javascript:return @ClientType().equals("Web") ? "BootstrapCK-Skin,/"+database.getFilePath()+"/bscke/" : ""}]]></xp:this.value>
</xp:dojoAttribute>
</xp:this.dojoAttributes>
<xp:this.dojoType><![CDATA[#{javascript:return @ClientType().equals("Web") ? "org.openntf.filesilo.CKEDITOR" : ""}]]></xp:this.dojoType>
</xp:inputRichText>
There is nothing special about it. This code assumes that the resources of the skin are stored in WebContent/bscke/... Also check the namespace for the Dojo type as it differs from the one Sven used in his post.
When using the old fashioned CKEditor you may want to fix some CSS issues when using it with Bootstrap then. You can find them here: http://openntf.org/XSnippets.nsf/snippet.xsp?id=css-tweak-for-ckeditor-used-with-bootstrap
I love Bootstrap, it looks so clean and structured but gives yet a modern look and feel. I use it in my FileSilo project and even in my new one called "Cockpit".