The document discusses plans to modernize the classic user interface (UI) of Plone by updating its markup to be based on the popular front-end framework Bootstrap 5. This will make the UI easier for developers to work with and more consistent with expectations of modern web users. Key changes include reworking Plone's core templates to use Bootstrap markup and components, keeping the popular Barceloneta theme but making it fully customizable via variables, and transitioning to managing icons through Bootstrap's icon library and resolver rather than custom code.

1. Modernize Plone’s Classic UI
Plone Conference 2020

2. Servus and Grüezi
Welcome to our talk Modernize Plone’s Classic UI

3. Servus and Grüezi
Stefan Antonelli, operun GmbH, @stefanantonelli
Peter Holzer, agitator Weblösungen, @agittr

4. What was new in Plone 5
Changes between Plone 4 and Plone 5

6. What was new in Plone 5
Diazo Theming
plone.app.theming
Usage of CSS compiler with LESS
plonetheme.barceloneta (inspired by Bootstrap)

7. History
The story behind Barceloneta LTS

8. Tokyo Theme
Clean responsive theme for Plone 5
Tons of overrides to tackle Plone 5
collective.sidebar for navigation + editing
Proof of concept
Already used in production

10. Community Discussions
Discussions during several Plone events
Everyone tried to use Bootstrap (components)
First idea map Variables from Barceloneta to Bootstrap
Lots of stuff defined in Plone already exist in Bootstrap
Update markup

12. Community Discussions
Discussions during several Plone events
Everyone tried to use Bootstrap (components)
First idea map Variables from Barceloneta to Bootstrap
Lots of stuff defined in Plone already exist in Bootstrap
Update markup

13. Plone Improvement Proposals (PLIP)
Plone Conference 2019 in beautiful Ferrara
PLIP to modernize markup in templates
PLIP to modernize default theme (Barceloneta LTS)

15. Make things* easier
*UI, Development, Components, Responsiveness

16. Make things* easier
Creating a modern UI for web is complex
Support different devices
Components
User expect things to work

17. Developer perspective
Expect one way to do things
Developers shouldn’t have to worry design
Don’t think about markup
Find examples in documentation
Fully rely on a of CSS framework

18. What’s new in Plone 6
Everything… just kidding ;-)

19. What’s new in Plone 6
Default is Volto (Volto is Default, Legacy-Projects w. Classic UI)
Classic UI with markup based on Bootstrap
We keep the Barceloneta Look & Feel
No more TTW theming
Modernize JavaScript

21. What’s new in Plone 6
Default is Volto (Volto is Default, Legacy-Projects w. Classic UI)
Classic UI with markup based on Bootstrap
We keep the Barceloneta Look & Feel
No more TTW theming
Modernize JavaScript

24. What is Bootstrap 5?

26. Still the most popular front-end framework
Well documented
Tested and maintained
What is Bootstrap 5?

27. What is new in Bootstrap 5?
Improved overall look and feel
Updated and extended color system
Custom Properties aka CSS Variables
SVG Icon Library
Switch to Vanilla Javascript

28. What is new in Bootstrap 5?
Drop IE 10 and 11 support
Bootstrap 5 is currently Alpha 3
More info https://v5.getbootstrap.com

29. Features

30. Plone (core) templates use
Bootstrap 5 markup

31. Templates
We started with tons of overrides in plonetheme.barceloneta
Overrides has been moved to their corresponding packages
Check out coredev buildout / PLIP config for current state
All major templates have been touched already
General markup cleanup

33. Bootstrap’s components as documented
Works like a charm
Components used in Plone core
https://v5.getbootstrap.com/docs/5.0/getting-started/introduction/

35. Barceloneta appearance is fully customizable
Basically an opinionated set of bootstrap variables
Every aspect can be changed with variables, colors, fonts, sizes
Overall properties: shadowed, rounded, gradients,...
Uses SCSS

43. Barceloneta appearance is fully customizable
Basically an opinionated set of bootstrap variables
Every aspect can be changed with variables, colors, fonts, sizes
Overall properties: shadowed, rounded, gradients,...
Uses SCSS

44. Theming workflow

45. Theming workflow
plonetheme.barceloneta will also be published as npm package
bobtemplates.plone will have template
Quick and dirty customizations through overrides field in theme controlpanel

46. Diazo
Is still there and works as before

47. Icon Resolver
How to deal with icons?

48. Bootstrap Icons
Registration of Icons
Customization
Icon Resolver
Inline SVG
Icon Resolver

50. Bootstrap Icons
Registration of Icons
Customization
Icon Resolver
Inline SVG
Icon Resolver

52. Bootstrap Icons
Registration of Icons
Customization
Icon Resolver
Inline SVG
Icon Resolver

53. <tal:icon
replace="structure python:icons.tag(
'love',
tag_class='custom-class',
tag_alt='foobar'
)"
/>

54. Bootstrap Icons
Registration of Icons
Customization
Icon Resolver
Inline SVG
Icon Resolver

55. Showcase
Eyecandy now!

67. Follow up
What’s next?

68. Follow up
Plone 6 Theming based on Barceloneta LTS (Peter Holzer)
Plone 6 Theming from scratch (Stefan Antonelli)
Plone 6 Theming with Diazo (Maik Derstappen)

69. Credits
Big shoutout to...

70. Alessandro Pisa
André Gonçalves
Fred v. Dijk
Hosna Khoshkhoo
Jan (1letter)
Jens Klein
Johannes Raggam
Credits
Maik Derstappen
Maurits van Rees
Peter Mathis
Robert Kuzma
Steffen Linder
Thomas Schorr

71. Thank you!
Talk to us if you have ideas, questions, comments

72. Stefan Antonelli
● stefan.antonelli@operun.de
● @stefanantonelli (Twitter)
● santonelli (GitHub)
Contact
Peter Holzer
● peter.holzer@agitator.com
● @agittr (Twitter)
● agitator (GitHub)
Plone 6 Classic UI Sprint
Jan 13, 2021 10:00 (UTC+1)