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 -
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
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;
}
}