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

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

20.
Compile

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

22.
First startup

23.
Is Plone broken now?

24.
Yes! It’s Plone

25.
Good News, Everyone!

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

27.
Tweak

28.
Theming is fun again

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

30.
Templates

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

32.
Columns

33.
Portlets must die!

34.
Showcase

35.
plonetheme.munich

36.
plonetheme.tokyo

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

38.
Toolbar

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

40.
collective.sidebar

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

42.
Questions?

43.
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