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