Description

Related Proposals

• Color Theme Feature for Flamingo

Problems

XWiki is focused more and more on the concept of applications, but in the same time these applications need to adapt on the skin and version where they are installed.
A solution (A) would be to specify very clearly for an application for which version and what skin it was created, while another solution (B) would be to try to let the applications be used across versions and across skins.

In the 6.0 roadmap, one of the objectives was to provide new designs (based on a new skin Flamingo) for older/existing applications that were creating on a different skin (the old Colibri skin or even on custom users skins). 

While an approach (I) for this problem would be to provide a generic layout for the application across skins, another approach (II) would be to try to adapt the application depending on the skin's standards, providing a custom layout depending on the application's purpose.
Examples: 

Some layouts are easier to adapts than others. For example: 

This layout uses a combination of Var 3 (standard for headings, panels, etc.) and Var 4 (uses Bootstrap and Colibri specific classes).

But the above layout is not very complex and the differences between the skins are not noticeable. 

A more detailed example is: 

Some problems with the above layout: 

• Colibri doesn't have a complex grid system;
• Colibri doesn't have a font-icon and standard icon classes; 

For the above case, which version is the best? Var 1? Var 2? Var 3? Var 4? Var 5?

Solutions

One of the big criteria in defining a successful platform and applications suite is their presentation independence. This means that no matter of your personal preferences for the platform, if you install an application it should adapt to the environment.

This brainstorm is needed in order to determine how/if we can create "presentation independent" XWiki application.

Variants

It depends very much on the content and complexity of the application and regarding the context there could be multiple variants. Still we should have a common position on which variant is ideal and has priority when selecting a solution.

• Var 1: Creating different applications per skin
• Var 2: Creating custom presentation per skin
  • Var 2.1: Stylesheet / Skin
  • Var 2.2: Selectors / Skin
• Var 3: Create a standard that both skins will use
• Var 4:  Use both/all skin specific classes
• Var 5: Make the application stand-alone and not adaptable per skin

Var 1: Creating different applications per skin

If the application content is complex and the skins are very different we could provide different applications/skin. 

Cons: 

• This model is hard to manage since the functionality is branching and usually is hard to simultaneous maintain two different implementation of the same application. 

Might be considered: 

• If the new skin has totally different patterns from the old one (like different ways to add information ex. modals, different layout order, different icon sets, etc.) it might be a solution to create a totally new application instead of trying to adapt the old one. Example: Flamingo ColorThemes

Var 2: Creating custom presentation per skin

This solution was also discussed but in the context of uicomponents.

Var 2.1: Stylesheet / Skin

Make some checks for the current skin and provide a different stylesheet; 

Var 2.2: Selectors / Skin

Have custom styles for the skins, like '.skin-flamingo .xform'; 

Var 3: Create a standard that both skins will use

Cons: 

• Depending on the new skin's requirements, there might be some additions needed by the old skin. Modifying the old/existing skin means introducing backwards compatibility problems for the users of the old skin. Instead of branching the application, the old skin is branched. Example: ColorThemes version 3.4 changes
• The standard is somehow limited to a specific period of time when it was created. If we need to make additions, any skin implementing the standard needs to be updated too.

Might be considered: 

• If the standard is strong and generic, there is no problem for any new skin to use the standard/api classes and just change the presentation for them.
  For example, class 'xform' should be used by both skins since its purpose is to handle forms, while the skin decide how labels are displayed, etc.
  This means the application is using the 'xform' class inside its structure, while all the skins are providing a style for it .xform, ex. "class='xform'"

Var 4:  Use both/all skin specific classes

If we want an application to adapt to a certain skin, just make sure it uses the skin specific classes. Example: if we want a container to be displayed on grid, we would need to add the Flamingo specific grid classes (taken form Bootstrap) '.col-md-4' and Colibri specific classes '.third', ex. "class='col-md-4 third'"

Cons: 

• The developer needs to know what are the supported skins and their way or organising/displaying presentation. It is not scalable. 
• Some skins might not have the exact functionality as another, thus missing some classes. For example, Colibri doesn't has a grid system and provides just a limited number or columns (.full, .half, .third). In this case the developer needs to provides a backup / addition styling for the missing presentation.

Var 5: Make the application stand-alone and not adaptable per skin

The application will not adapt depending on the skin and all the presentation needed to display it will be incapsulated inside it. 

Cons: 

• Duplication of code: for example if an application is using Bootstrap classes and not fallbacks on the skin, this means it should provide it's own Bootstrap packing, posing problems when wanting to upgrade to a new dependency version.