Bluebird experimental Skin

Last modified by Denis Gervalle on 2014/03/05 20:00

Welcome to the bluebird experimental skin demonstration.

This skin is now published on extensions.xwiki.org

This skin as been quickly built over XWiki 4.4.1 default templates to illustrated the benefit of adapting the HTML generated by XWiki to an existing CSS like bootstrap. Some feature are not yet available, some has rought edge or have not been reshaped. Why ? Simply because we currently do not have centralized our HTML, and we produce similar HTML (like the one to produce a button) from many different places. It could happen in a .vm template, a XWikiDocument, some JavaScripts or a macros. It is therefore really difficult to quickly adapt the HTML to existing CSS. However, being able to do so is really great, just look at this page using the following links:

All those skin are simply created by using the appropriate derived skin of bootstrap taken for the purpose of this demo from Bootswatch. These CSS were downloaded and works AS IS. Here is the sample code used to override style.css:

@import "$xwiki.getSkinFile('css/amelia.min.css', true)";
@import "$xwiki.getSkinFile('css/bootstrap-responsive.min.css', true)";
@import "$xwiki.getSkinFile('css/font-awesome.min.css', true)";
@import "$xwiki.getSkinFile('bluebird.css', true)";

For this to be, the HTML generated by XWiki need to be adapted to the markup required by bootstrap. Doing so once could work, but will link us to  bootstrap. This is why I suggest we investigate a way to decouple the HTML generated from the purpose of this HTML (having a button). Doing so will give us the flexibility to adapt to any framework. It will allow extension developer to build unified UI for their extension, which will be in favor of a uniform design of the UI over a given wiki. I also suggest that the HTML generated by the rendered be as well adaptable, and moreover that we develop more macros to easily benefit of formatting style in XWIkiDocument without needing complex (% %) syntax.

I hope this demonstration will convince you of the great benefit of this proposal.
A discussion is open on the mailing list here.