Stefan Antonelli and Peter Holzer: Theming Plone 6 Classic UI

We made a couple of talks for Plone Conference 2020. This talk is basically a summary of the story behind modernize Plone's classic UI + Theming based on this work. We're going to show how to create a theme for Plone 6 Classic UI based on Barceloneta and from scratch.

In discussions during several Plone events, we saw that everyone tried to use Bootstrap, including its components. We wanted to use bootstrap variables in Plone, instead of having our own definitions with slightly different names.

We and others made several PLIPs, Plone Improvement Proposals:

• Modernize markup in templates
• Modernize default theme, Barceloneta LTS
• Modernize javascript to ES6

We want to make things easier. Creating a modern UI for the web is complex. You need to support different devices. Users expect things to work in a certain way, because they have seen it on many other sites.

From a developer perspective:

• You expect one way to do things.
• Developers should not have to worry about design, markup. You just want to use a component.
• Find examples in (Bootstrap) documentation and just copy it.

In Plone 6, the default UI is Volto. But Classic UI will remain there for years, so it had to be updated. For starters: Bootstrap 5. It is the most used framework. If you don't use it, you miss out on a lot of fun.

• There is support for custom properties, also known as CSS variables.
• SVG icon library
• vanilla javascript, no jQuery
• dropped IE10 and IE11 support.

In Plone 6 Classic UI:

• Templates updated to Bootstrap 5.
• They use the Bootstrap components as documented.
• Barceloneta theme uses an opinionated set of bootstrap variables.

Demo site is on https://6-classic.demo.plone.org/

TTW theming:

• No more Through The Web compilation.
• You can sill upload a zip with a theme.
• Support for custom css via theming controlpanel, via a simple form which is already there in Plone 5.2.

Filesystem based theming:

• plonetheme-barceloneta-base as npm package
• We have updated bobtemplates.plone using that package. Use plonecli to create an add-on package and then let it add a theme to your package.
• Three options: you inherit from Barceloneta or create from scratch or use Diazo.
• Compile the scss with npm.
• Diazo is still there and works like before.

Javascript:

• The javascript no longer uses RequireJS.
• We updated jQuery, although you do not need it much anymore.
• No more TTW build.
• Mockup was udpated to ES6, based on patternslib.
• Resource Registries is there, but the TTW compilation is gone.
• There are basically only bundles, no resources.
• You no longer have to create manual timestamps. The webresource library creates automatic hashes instead.

How to deal with icons?

• We use bootstrap icons by default.
• Icons are loaded as inline SVG.
• We have icons for content types, Plone UI icons, toolbar, mimetypes with fallback.
• Registration is done in plone.staticresources, in XML.
• Use in a template:

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

Can you insert icons in content?

• You could copy SVG into HTML, though it is not so nice.
• Planned is a TinyMCE pluging to select and add an icon.
• But discussion is in progress.

Custom icons in Plone:

• Try out collective.fontawesome
• Register SVG icons as resource.
• Add XML to register icon names.
• Setup a profile for an icon font, but that is also part of discussion.

Further:

• Typography and overall look is modernized.
• Especially the Event, File and Image content type look nicer.
• Control panel has much bigger icons.
• We made sure it looks good on mobile devices.

How to theme:

• https://training.plone.org is updated, and we used it on Saturday
• https://docs.plone.org will be updated pretty soon.

Talk to us on Plone Discord in the #classic-ui room.