A XWiki skin is used to customize the interface of a XWiki Enterprise instance. Skins are composed of templates, CSS files, JavaScript files, images and fonts. Several skins have been bundled with XWiki over the years, including Dodo, Finch, Albatross, Toucan, Colibri and Flamingo. There is ongoing discussion around improving skin support and flexibility in XWiki, including whether to introduce new skins, make the current skin (Flamingo) more configurable, integrate themes, and define standards and an extensibility model to balance simplicity and customizability.

1. XWiki Skins
Progress and Future
Ecaterina Moraru — 22 July 2015 —

2. A XWiki skin is used to customize
the interface of a XWiki Enterprise
instance.
A skin is composed of:
Velocity templates
CSS files
LESS files
JavaScript files
Images
Fonts
What is a Skin?
·
·
·
·
·
·
·
·
2/16

3. Skin Support
Skin Used as
default
Replaced as default
in
Replaced
by
Support maintained
until
Unbundled
since
Dodo 1.2 1.3
Finch 1.2 1.3
Albatross 1.0 - 1.2 1.3 (Mar 08) Toucan 2.5 3.2
Toucan 1.3 - 1.9 2.0 (Sep 09) Colibri 4.3 4.4
Colibri 2.0 - 3.4 - 6.1 6.2 (Sep 14) Flamingo 7.0 8.0 (planned)
Flamingo 6.2 -
Lists of Skins that were bundled with XWiki Platform 3/16

4. Colibri vs. Colibri 3.4
Flamingo's Add button position
Flamingo's Menu Go to options
XCS Flavors (Documentation, etc.)
What do we do for Nested
changes?
Create a new skin? (Macaw)
Make Flamingo configurable?
Harder to test
Increases complexity
Choosing the defaults
Skin Variations
·
·
·
·
·
·
·
·
·
·
4/16

5. Credits
How different a new skin needs to be?

6. Credits
Can we support multiple skins at the same time?

7. Responsive
HTML5
Bootstrap
LESS
Also in SSX
Override LESS templates
Icon Themes
Silk Theme
Font Awesome Theme
Flamingo Themes
Bootswatch Themes
Flamingo Enhancements
·
·
·
·
·
·
·
·
·
·
·
< >
1 / 4
Bootswatch Themes Integration
extensions.xwiki.org Themes
7/16

8. PRO
Powerful
Ability to write LESS
Less complex
Excludes Velocity templates
Preserves structure
CON
Overrides the Skin mechanism
Possible source of bugs
Predisposed to duplication
Rely on a particular structure
Confusing differences with
Color Themes
Flamingo Themes vs. Skins
·
·
·
·
·
·
·
·
·
·
·
·
8/16

9. Credits
Flamingo Themes:
an evolution?
or something to avoid?

10. UI generated from multiple places:
Velocity, JavaScript, Macros, Sheets,
etc.
Hard to achieve global consistency:
Applications Isolation
Missing a Style Guide
Not so extensible skin structure
Slower UI novelties adoption:
Material Design Guidelines
New JavaScript frameworks
Proposal: UI Standards for
now and the future (Jul 7, 2014)
MarrytoBootstrap(+ourownadd-onsbuiltontopof
Bootstrap)
Createourownstandard(andbindittowhatever
frameworkyouwant)
MixStandard:XWikispecificclasses+aselectionof
Bootstrapclasses
Skin Issues
·
·
·
·
·
·
·
·
·
·
·
10/16

11. Credits
What will happen when Bootstrap goes
out-of-style?

12. Skin as a collection of
Extensions Points (UIXP):
Interface Extensions (UIX)
Skin as a collection of
Layout Templates:
At Skin level
At Page level
Example: Totem Application
Discussion: Stop using UI
Extension Points and
deprecate this concept
(Mar 4, 2014)
Define LayoutClass and
ContainerClass
Skin Extensibility
·
·
·
·
·
·
12/16

13. Credits
How extensible should a skin be?

14. Skin Balance
Simplicity vs. Customisable
Standard vs. Extensible
Modern vs. Stable
Accommodation of new features
·
·
·
·
14/16

15. Credits
Questions?

16. Thank you
Ecaterina Moraru — 22 July 2015 —