Skip to Content

Skin 10.x: Layout Variations

Version 20.1 by Ecaterina Moraru (Valica) on 2018/07/03 18:01
Warning
For security reasons, the document is displayed in restricted mode as it is not the current version. There may be differences and errors due to this.

 
 Design
 Idea
 

Description

Failed to execute the [velocity] macro. Cause: [The execution of the [velocity] script macro is not allowed in [design:Proposal.Skin10x.LayoutVariations]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

Current Layouts

Our current layout is a full width one, with a central area (.main) and 2 panels areas (#leftPanels, #rightPanels). 

<body id="body">
  <div id="xwikimaincontainer">
    <div id="xwikimaincontainerinner">
      <div id="menuview"></div>
      <div id="headerglobal"></div>
      <div class="content" id="contentcontainer">
        <div id="contentcontainerinner">
          <div class="leftsidecolumns">
            <div id="contentcolumn">
              <div class="main">
                <div id="mainContentArea">
                  <ol id="hierarchy"></ol>
                  <div class="xcontent"></div>
                </div>
                <div id="xdocFooter"></div>
                <div id="xwikidata"></div>
              </div>
            </div>
            <div id="leftPanels"></div>
          </div>
          <div id="rightPanels">
          </div>
        </div>
      </div>
      <div id="footerglobal"></div>
    </div>
  </div>
</body>

currentLayout.png

The issue with the current structure is that it's very limiting in terms of layout variations it offers. Also it contains a lot of legacy containers that limit the layout placement and also bloats the structure. 

When we integrated Bootstrap 3, one important thing we did is that we used LESS, its extend() function and the .make-*-column() mixins when we generated the layout, instead of using the .container, .row and .col-*-* classes (which some got deprecated in the Bootstrap 4 version).

Still, in order to fully benefit of the new Flexbox or Grid capabilities we would need to simplify the structure and the divitis nesting, plus changing our core Float layout technique.

Possible Layouts

If we were to replicate the default layout for 10.x it would be: 

Header
Content
Panels
Panels
Footer

Also the structure could be simplified to something like: 

<body>
  <div class="header">H</div>
  <div class="content">C</div>
  <div class="panels">A</div>
  <div class="panels">B</div>
  <div class="footer">F</div>
</body>

No side column
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

Left column
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

Right column
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

Both columns
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

The above are all the layout variations available on XWiki 10.x with the Flamingo Skin. On top of the layout variations, each panel area can have 3 size: Small, Medium, Large. 

Full Width vs. Centered Layouts

One of the major requests for public website is the ability to easily change (without the need of a custom skin) the layout from full width to centered. On xwiki.org for example we have some homepages centered, while the content pages are full width. 

Full Width
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

Centered
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

Column Layouts

Having a Grid system it allows multiple variation of column placement. Being in just 1 dimension, the following could be also implemented / fallbacked on Flexbox, which is the current layout technique used in Bootstrap 4.
Some of the following examples go beyond the current XWiki layout capabilities, so they would provide extra layout extensibility.

2-1
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

2-2
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

2-3
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

2-4
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

2-5
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

2-6
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

2-7
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

2-7-1
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

2-8
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

2-9
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

2-10
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

2-11
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

2-12
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

Header Footer Layouts

The classic layouts usually include a header and a footer, so these are some possible layout variations:

3-1
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

3-2
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

3-3
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

3-4
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

3-5
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

3-6
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

Advanced Grid Layouts

Grid allow us to create all sorts of layouts, from asymmetric to overlapping ones. The possibilities are endless. Here are some examples the future skin could transform into (or all) if the new Grid layout technique would be integrated: 

4-1
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

4-2
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

4-3
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

4-4
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

4-5
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

4-6
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

4-7
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

4-8
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

4-9
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

4-10
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

4-11
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

4-12
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

4-13
Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

This flexibility is also great for different view ports, allowing optimised layouts for mobile, tablet view that prioritise the content no matter where they are placed in the structure. Also we could allow customising the layout at the Page level, so the user could choose something different for Homepage, Dashboard, Blog pages, etc.

Also not depending on Bootstrap's 3 grid system means we are not limited to a 12 columns grid system.

The possibilities are endless. On top of the grid we could also add angled containers and having the ability to create overlapping layouts, any layout variation can be created.


 

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected