Showcasing XWiki's skin history, technology advancements and layout ideas for new versions.

1. XWiki Skin
10.x+ Ideas
Technology and dependencies
evolution
#xwiki@evalica

2. ● Color Themes Status
○ Variables evolution
● Icon Themes Status
○ Format evolution
● IE11 Support
Agenda
● Skins Status
○ BS3 vs. BS4
○ Less vs. Sass
○ Grid vs. Flex
○ Layouts variations

3. Skins Status
Skin Launched Used as
default
Replaced as
default in
Dodo < 2006
Finch < 2006
Albatross < 2006 1.0 - 1.2 1.3
Toucan Feb 2008 1.3 - 1.9 2
Colibri Sep 2009 2.0 - 3.4 - 6.1 6.2
Flamingo Sep 2014 6.2 -

4. Color Themes Status
Color Theme Launched Used as
default
Replaced as
default in
Skin Other Themes
Default Color Theme Aug 2009 2.0M4 - 3.3 3.3 Colibri BlueSky, Bordo,
InnerDark, Nature,
Nightfall, Peach
Azure Jan 2012 3.4 - 6.2M2 6.2M2 Colibri Dusk, Mint, Ruby
Charcoal Aug 2014 6.2M2 - 10.2 10.2 Flamingo Bootswatch, Marina,
Garden, Kitty
Iceberg Mar 2018 10.2 - Flamingo (contrib) Dawn, Pantera,
Mandarin, Snowdrop

5. Icon Themes Status
Icon Theme Launched as
theme
Used since Used as default Replaced as default
in
Replaced by
Silk Aug 2014 Jan 2009 6.2M1 6.2M2 Font Awesome
Font Awesome Aug 2014 Jul 2014 6.2M2 -

6. Format Evolution
Silk
Glyphicons
Halflings
Font Awesome
4.x
Material
Design
Font Awesome
5.x
Launched 2005 2010 2012 2014 2017
Version 1.3 1.9 4.7.0 3.0.1 5.0.1
Number of Icons 1000 265 786 884 899 (464 for Solid)
Contributed Platform Contrib Platform Contrib Contrib
Format PNG PNG, Font Font PNG, Font, SVG Font, SVG

7. Icon Themes Contrib

8. Technology
Evolution

9. BS3 vs. BS4 Released
Pre-
Processor
Layout
Technique
Bootstrap 3 Aug 2013 Less Float
Bootstrap 4 Jan 2018 Sass Flexbox

10. LESS vs. Sass

11. Variables Evolution
CSS Saas LESS CSS Variables
Launched 1996 2006 2009 2012
Author W3C Hampton Catlin Alexis Sellier W3C
Type Native CSS Preprocessor CSS Preprocessor Native
Filename .css .css, .scss, .sass .css, .less .css
Syntax $* @* --*
Runtime static static dynamic

12. Layout Evolution

13. Layout Specifications
Float Display Position Flex Grid Multi-columns Regions Exclusions Shapes
Launched 1996- 1996-2011- 2008-2011- 2009-2017- 2012-2017- 1999-2017 2014 2013-2015 2014
Level CSS1
CSS1,
CSS2.1
CSS2.1 CSS3 CSS3 CSS3 CSS3 CSS3 CSS3
Maturity REC REC REC CR CR WD WD WD CR
Syntax float:
none|left|r
ight|initia
l|inherit;
display:
none|inline
|block|list
-item|inlin
e-block|tab
le| ...;
position:
static|abso
lute|fixed|
relative|st
icky|initia
l|inherit;
display:
flex; flex:
flex-grow
flex-shrink
flex-basis|
auto|initia
l|inherit;
display:
grid; grid:
none|grid-t
emplate-row
s /
grid-templa
te-columns|
grid-templa
te-areas|gr
id-template
-rows /
[grid-auto-
flow]
grid-auto-c
olumns|[gri
column-count:
auto |
<integer>;
break-bef
ore: auto
| always
| avoid |
left |
right |
page |
column |
region |
avoid-pag
e |
avoid-col
umn |
avoid-reg
ion;
wrap-flow:
auto | both
| start |
end |
minimum |
maximum |
clear;
shape-outsi
de:
none|margin
-box|conten
t-box|...;

14. Grid vs. Flex

15. Layout Alternatives
Float GridFlex
<div class="container">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
.container {
}
.box {
float: left;
margin: 5px;
width: 60px;
}
.container {
display: grid;
grid-gap: 10px;
grid-template-columns:
repeat(auto-fit, 100px);
}
.box {
}
.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex-basis: 60px;
margin: 5px;
}

16. Bootstrap 4 - FlexBootstrap 3 - Float
<div class="container">
<div class="row">
<div class="col-xs-4">A</div>
<div class="col-xs-4">B</div>
<div class="col-xs-4">C</div>
</div>
</div>
Grid
<div class="container">
<div class="row">
<div class="col">A</div>
<div class="col">B</div>
<div class="col">C</div>
</div>
</div>
<div class="container">
<div class="col">A</div>
<div class="col">B</div>
<div class="col">C</div>
</div>
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
}
.col {
grid-column: span 4;
}

17. Current Layout

18. Columns Layout 2-2
2-10 2-11
2-7

19. Advanced Layouts

20. Layout Examples 1
4-13
4-12

21. Layout Examples 2
4-7
4-8

22. Layout Examples 3
4-104-9

23. ● Separation of concerns
● Less divitis and classitis + Semantic
● Cleaner HTML + Smaller CSS
● 1D and 2D layouts
● Vertical alignment
● Flex width to occupy the available space
● Any direction + Changing order
● Overlapping
Grid + Flex Advantages

24. IE11 Support

25. IE Support

26. Can I use?
SVG
Method of displaying basic Vector Graphics
features using the embed or object elements
96.8% JUL 2018
<object class="fa-svg" type="image/svg+xml"
data=$xwiki.getSkinFile("icons/fontawesome/solid/${
icon}.svg")></object>

27. Can I use?
CSS Variables
(Custom Properties)
Permits the declaration and usage of
cascading variables in stylesheets
87.5% JUL 2018
body {
--bg-color: #150C55;
background-color: pink;
}
@supports (background-color: var(--bg-color)) {
body {
background-color: var(--bg-color);
}
}

28. Can I use?
Flexible Box
Method of positioning elements in horizontal
or vertical stacks
96.6% JUL 2018
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {
div {
display: -webkit-flex;
display: -moz-flex;
display: flex;
}
}

29. Can I use?
CSS Grid
Grid concept to lay out content, providing a
mechanism to divide available space into
columns and rows
87.7% JUL 2018
@supports (display: grid) {
.wrapper ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
}

30. Can I use?
@supports
Allows to condition rules based on whether
particular property declarations are
supported in CSS
92.7% JUL 2018
@supports not ((display: flex) and (display: grid))
{
div {
float: left;
}
}

31. Thank you
@evalica #xwiki