Skin 10.x: Layout Variations

Last modified by Vincent Massol on 2024/02/26 17:51

 XWiki
 Design
 Idea

Description

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>

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

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

H
C
A
B

Left column

H
C
A
B

Right column

H
C
A
B

Both columns

H
C
A
B

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

H
C
A
B

Centered

H
C
A
B

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

C
A
B

2-2

C
A
B

2-3

C
A
B

2-4

C
A
B

2-5

C
A
B

2-6

C
A
B

2-7

C
A
B

2-7-1

C
A
B
D
E

2-8

C
A
B

2-9

C
A
B

2-10

C
A
B

2-11

C
A
B

2-12

C
A
B

Header Footer Layouts

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

3-1

H
C
A
B

3-2

H
C
A
B

3-3

H
C
A
B

3-4

H
C
A
B

3-5

H
C
A
B

3-6

H
C
A
B

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

H
C
A
B
D
E
G

4-2

H
C
A
B
D
E

4-3

H
C
A
B
D
E

4-4

H
C
A
B

4-5

H
C
A
B
D
E

4-6

H
C
A
B
D

4-7

H
C
A
B
D
E
G

4-8

H
C
A
B
D
E

4-9

H
C
A
B

4-10

H
C
A
B
D
E
G
I

4-11

H
C
A
B
D
E

4-12

H
C
A
B

4-13

H
C
A

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.

Preview examples


 

Tags:
    

Get Connected