Migrating from Colibri to Flamingo

Last modified by Ecaterina Moraru (Valica) on 2017/03/30 10:02



There are some changes between Colibri Skin and Flamingo Skin


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).
Overwriting Bootstrap specific .less file preserves their original name, while custom XWiki .less files can be also found.

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).
Only in style.less.vm we can write Velocity code, that's why old ColorThemes variables in .less files are replaced with LESS variables (like @xwiki-border-color for $theme.borderColor, etc.)

IconThemes Icon Theme Application Adapt applications to use the IconThemes



Entity Colibri Flamingo Problem Solution Examples
Lists (ul, olDone 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) {}  


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


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 bullet_red No  
.label Used in forms in different places (Profile, Extension, etc.) Used as markers, like 'New' bullet_red No Has nowrap and white color 
.pagination Used in livetable pagination, parent for <a> tags BS pagination done with <ul li> tags 

bullet_orange Almost

.panel Used in Panels App BS has a more complex concept of panels 

bullet_orange Almost

.disabled Used in forms to mark disabled elements Used in multiple components (forms, dropdowns, nav, pagination) to mark disabled elements bullet_green Yes  

Force an element to be hidden, using
display: none;

display: none !important;
visibility: hidden !important;

bullet_green Yes Careful on the additional property 

Affects the visibility of an element
visibility: hidden;

Used for hiding content
visibility: hidden;

bullet_green Yes  
CSS property box-sizing Browser's default Globally set to border-box bullet_red No Problematic if you have code written for old IE browsers, see http://getbootstrap.com/getting-started/#third-box-sizing 





Get Connected