[xwiki-devs] About Bootstrap and Color Themes

Yesterday, I was talking to some of you on IRC, and I realized that we do not have the same expectations about our Bootstrap usage. So I would like to write a brief summary of my thoughts. Benefits of using Bootstrap ====== * Good-looking and practicals components to re-use. * A responsive CSS grid * Supported by a great community * Newcomers on XWiki will find a tool they might already know. That's already some good reasons to use it! What it cannot do for us ===== * Out-of-the box usage of a compiled Bootstrap CSS with different colors. Why? * The images URL needs to be rewritten (/xwiki/bin/resources/etc...) * A compiled Bootstrap CSS does not allow us to use the mix-ins (ie 'functions') that we can use with the Bootstrap sources. So it's less powerful. * There will always be a need to write some 'fixs' to not break the existing XWiki applications. Moreover, the kits that we can find on the internet, in my opinion, do not only change the parameters of Bootstrap. But they should also add their own CSS classes with an example of use in a HTML template. It will never auto-magically fit with XWiki. What I have in mind ===== Write a color theme editor, inspired by what there is for Bootstrap, that allows us to set values for bootstrap variables we decide to expose (there are more than 300, so I guess we should make a choice). We can take inspiration from http://stylebootstrap.info/ (but it should be less technical IMO). Plus add a textarea that lets the user enter some LESS code. So they could set other bootstrap variables and create their own CSS classes. So integrating a theme kit bought on the web would be possible without too much effort as soon as the LESS files are provided within the kit. Example: integrating a theme from Bootswatch ( http://bootswatch.com/ ) ==== Let say we want to integrate http://bootswatch.com/slate/ into XWiki, using the Flamingo skin. Steps: 1 - Create a new Color Theme for Flamingo 2 - In http://bootswatch.com/slate/ , download variables.less and bootswatch.less 3 - Paste the content of these 2 files in the textarea at the bottom of the Color Theme Editor. 4 - If some problem occurs, add some fixes in the textarea. Results: http://tof.canardpc.com/view/73dd64b9-2023-4839-8dcc-47880d823591.jpg Not perfect, so we need some fixes (about the glyphicons). After removing from the textarea the following line: @icon-font-path: "../fonts/"; We get: http://tof.canardpc.com/view/cd25fc9f-921f-4582-b2c7-05680dd6d284.jpg Looks quite simple, maybe not enough for a basic user, but still good for web integrators. WDYT? Thanks Guillaume