Migrating from Colibri to Flamingo
- Bootstrap's Documentation (v3.2.0)
- XWiki's Front-end Resources:
- Standard: Special CSS Classes
- Standard: Forms Vertical Layout Usage
- Standard: Icon Classes
Description
There are some changes between Colibri Skin and Flamingo Skin.
Technology
| Entity | Colibri | Flamingo | Issue |
|---|---|---|---|
| Framework | Custom made, no external framework | Uses Bootstrap (v3.2.0) responsive framework | Change in standard used can cause issues with backwards compatibility. Some components might need adapting to be responsive. |
| Stylesheet | CSS | CSS+LESS | All Flamingo styling lies in .less files. Each time you make a modification, you need to recompile the files (currently easily done by re-saving a ColorTheme page). |
| Templates | Inherited from Toucan + modifications | Inherited from Colibri + modifications | Flamingo overwrites macros.vm (and other templates) and also combines the menu templates in menu/ folder |
| ColorThemes | Color Theme Application | Flamingo Theme Application | Flamingo Themes are completely different but are compatible with the Colibri Themes (but do not expect fancy results). |
| IconThemes | - | Icon Theme Application | Adapt applications to use the IconThemes |
Styling
Differences
| Entity | Colibri | Flamingo | Problem | Solution | Examples | |
|---|---|---|---|---|---|---|
| Lists (ul, ol) | Done with margin | Inherits browser's padding | Differences in spacing, alignment | Check the padding and margin values | ||
| Tables | Full borders | Vertical borders | Missing some borders | If you want the old behavior back you can use table:extend(.table-bordered) {} | ||
| ... |
Replacements
| Entity | Colibri | Flamingo | Issue |
|---|---|---|---|
| Browser's defaults | Colibri uses a reset.css included in colibri.css | BS uses a normalize.css | Careful on the differences. Some elements that were reseted by Colibri might need additional properties in order to have the same behaviour in Flamingo |
| Clearing floats | .clearfloats | .clearfix | Colibri needed a dedicated container to hold the class, while now you just need to add the class to the parent element |
| Buttons | .buttonwrapper .button, .secondary | .btn .btn-primary, .btn-default | Colibri classes will be displayed in the same manner because of the LESS mapping. Use the new standard when creating new buttons |
| Grid | .column + .full, .half, .third | .col-xs-*, .col-sm-*, etc. | Careful on BS responsiveness |
| ... |
Conflicts
CSS classes used inside XWiki apps with a meaning inside Bootstrap:
| Class | Colibri | Flamingo | Same? | Problem | Examples |
|---|---|---|---|---|---|
| .row | Used in tables (History) | Used in grids, as container for columns |  No | ||
| .label | Used in forms in different places (Profile, Extension, etc.) | Used as markers, like 'New' | No | Has nowrap and white color | |
| .pagination | Used in livetable pagination, parent for <a> tags | BS pagination done with <ul li> tags | |||
| .panel | Used in Panels App | BS has a more complex concept of panels | |||
| .disabled | Used in forms to mark disabled elements | Used in multiple components (forms, dropdowns, nav, pagination) to mark disabled elements |  Yes | ||
| .hidden | Force an element to be hidden, using | Uses | Yes | Careful on the additional property | |
| .invisible | Affects the visibility of an element | Used for hiding content | Yes | ||
| .checkbox | |||||
| CSS property box-sizing | Browser's default | Globally set to border-box | No | Problematic if you have code written for old IE browsers, see http://getbootstrap.com/getting-started/#third-box-sizing | |
| ... |
AlmostBehavior
...
