Plone Theming from scratch was never that easy! The talk should give an idea of how to create a Theme for Plone without dependency to Barceloneta Theme.

1. Plone 6 Theming from
Scratch
Plone Conference Online 2020

2. Good morning*
*or afternoon or evening or night or whatever

3. Good afternoon
• Stefan Antonelli
• Works for operun
• Twitter @stefanantonelli
• GitHub at santonelli

4. What is this talk about?

5. What is this talk about?
• Theming for Plone 6 Classic UI
• Built from scratch
• No dependencies to Barceloneta
• No Diazo needed

6. Bootstrap

7. Bootstrap
• One of the most popular
• Typography, Forms, Buttons, Tables
• everything we need for Plone

8. Create

9. Create
$ mrbob -O plonetheme.munich bobtemplates.plone:addon

10. Some questions
--> Author's name [Stefan Antonelli]:
--> Author's email [stefan.antonelli@operun.de]:
--> Author's GitHub username: santonelli
--> Package description [An add-on for Plone]: A Theme for Plone 6
--> Do you want me to initialze a GIT repository in your new package? (y/n) [y]:
--> Plone version [5.2.1]:
--> Python version for virtualenv [python3.7]:
--> Do you want me to activate VS Code support? (y/n) [y]:

11. https://github.com/collective/
plonetheme.munich

12. Bootstrap
$ python3 -m venv .
$ ./bin/pip install -r requirements.txt

13. Cleanup

14. Cleanup
• Remove what’s not necessary
• Remove tests / constraints for 4.x and 5.x

15. Extend
• https://raw.githubusercontent.com/plone/buildout.coredev/6.0/versions.cfg
• https://raw.githubusercontent.com/plone/buildout.coredev/6.0/sources.cfg
• https://raw.githubusercontent.com/plone/buildout.coredev/6.0/checkouts.cfg
• https://raw.githubusercontent.com/plone/buildout.coredev/6.0/plips/plip-2967-
barceloneta-lts-source-checkouts.cfg

16. ./bin/buildout

17. Start

18. Add theme structure

24. https://github.com/collective/
plonetheme.munich

25. Compile

26. Compile
• Compile SASS to CSS
• yarn install (dependencies from package.json)
• yarn dist to compile SASS to CSS

27. First startup

28. Is Plone broken now?

29. Yes! It’s Plone

31. Good News, Everyone!

32. Good News, Everyone!
• Not everything is broken
• Plone core components just work!
• Patternslib, Toolbar, Portlets, Forms

33. Tweak

34. Theming is fun again

35. Bootstrap Variables
• Basic behaviour like rounded corners
• Fonts, Colors, Shadows
• https://github.com/twbs/bootstrap/blob/main/scss/
_variables.scss

37. Templates

38. Templates
• Add z3c.jbot overrides
• Copy Templates to customize
• Add custom views for your story

39. Columns

40. Portlets must die!

41. Showcase

42. plonetheme.munich

48. plonetheme.tokyo

49. plonetheme.tokyo
• Everything is Bootstrap
• No Columns
• No Portlets
• Responsive (really)

55. Toolbar

56. What about Toolbar?
• Yes, we dropped Toolbar
• Bring editing features and navigation together
• Toolbar + Navigation is new feature called Sidebar

57. collective.sidebar

61. collective.sidebar
• Bring toolbar and navigation together
• Drop-in replacement for Plone’s toolbar
• One template to customize
• https://github.com/collective/collective.sidebar

63. Questions?

64. Thank you!
• Twitter @stefanantonelli
• GitHub at santonelli
• https://github.com/collective/plonetheme.munich
• https://github.com/collective/plonetheme.tokyo
• https://github.com/collective/collective.sidebar