Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

XWiki Skin 10.x+ ideas

170 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

XWiki Skin 10.x+ ideas

  1. 1. XWiki Skin 10.x+ Ideas Technology and dependencies evolution #xwiki@evalica
  2. 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. 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. 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. 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. 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. 7. Icon Themes Contrib
  8. 8. Technology Evolution
  9. 9. BS3 vs. BS4 Released Pre- Processor Layout Technique Bootstrap 3 Aug 2013 Less Float Bootstrap 4 Jan 2018 Sass Flexbox
  10. 10. LESS vs. Sass
  11. 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. 12. Layout Evolution
  13. 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. 14. Grid vs. Flex
  15. 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. 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. 17. Current Layout
  18. 18. Columns Layout 2-2 2-10 2-11 2-7
  19. 19. Advanced Layouts
  20. 20. Layout Examples 1 4-13 4-12
  21. 21. Layout Examples 2 4-7 4-8
  22. 22. Layout Examples 3 4-104-9
  23. 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. 24. IE11 Support
  25. 25. IE Support
  26. 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. 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. 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. 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. 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. 31. Thank you @evalica #xwiki

×