Modernize Plone default theme aka Barceloneta LTS

[agitator]

PLIP (Plone Improvement Proposal)

Responsible Persons

Proposer

Proposer: Stefan Antonelli, Peter Holzer

Abstract

Modernize Plone default theme

• Classic Plone Theme with Long Term Support
• Templates based on Bootstrap 5 (see Plip Change Templates to Bootstrap Markup #2967)
• HTML5 Markup with new/updated Elements
• Templates respect all Features of Plone
  • Three-Column-Stuff
  • Portlets
  • Viewlet Manager
• Look is based on Barceloneta
• Shipped with Plone 6 (Plone 5.2 with Python 3 and Volto as Add-On)

Motivation

Everybody who wants to build a theme based on Plone defaults, has to deal with more or less useful HTML markup injected by packages, widgets, plugins, patterns, etc.

Barceloneta is using parts of Bootstrap with it's own flavor. Goal is to make use of Bootstrap and it's components as much as possible and therefore reduce the amount of custom markup and styling.

It should make it easier for developers to create views/viewlets based on the best practives of Bootstrap (less custom styling).

Bootstrap 5 uses CSS variables which allows to override basic styles without recompilation. SCSS doesn't have support for browser compilation. TTW-editing was overly complex. We propose re-adding of a custom.css file which could be edited through the browser.

The goal in the end would be to have a bobtemplate.plone template for theming, that would make it easy for integrators to alter styles using existing properties/mixins/... from Bootstrap.

Assumptions

• Classic (server side rendered) Plone Themes will stay for a while
• Writing Plone Themes (based on a framework) is easier than custom stuff
• Other Themes and Add-Ons can rely on Bootstrap (default) markup
• Bootstrap is widely used and known
• Make use of existing and documented components (Bootstrap components) for Add-Ons is a win

Proposal & Implementation

• Plone Classic Theme based on Bootstrap 5
• Long Term Support for Plone 6 and beyond
• Allow theme customization via css variables
• Reduce lines of custom CSS (Core, Addons and custom packages)
• Standard Bootstrap with Barceloneta flavor
  • New Barceloneta will be recognizable as Barceloneta
  • Will support all existing features of Plone (Three column layout, Portlets, Viewlets,...)
• Markup as close as possible to Bootstrap
• Styling as close as possible to Bootstrap

Deliverables

• Done & Working
  • Converted all existing less files to scss mostly automatically
  • cleanup and manual fixes in scss files
  • removed Plone specific mixins where possible
  • all Bootstrap style are available now
  • Update main template markup
  • Bootstrap/Flex Grid is working
  • Update compile style compile mechanism (npm watch)

Ongoing work https://github.com/plone/buildout.coredev/blob/5.2/plips/plip-2967-barceloneta-lts.cfg

• Todo
  • Styling
    • Update Variables/Properties to get closer to Bootstrap
    • Allow Usage of theme properties from Bootstrap, for example shadows, rounded, gradients, transitions, …
    • Update/remove even more Barceloneta specific stylesheets
  • Markup
    • Further update main template markup, header, footer,...
    • Update html snippets in Plone - plone.app.layout
    • Update html templates for contenttypes - plone.app.contenttypes
    • Update html template in Plone - Products.CMFPlone
    • Update form templates - z3c.form
  • Icons
    • Use a single Icon Library all over Plone
    • Application of icons as it’s done in Bootstrap
    • Concept to project specific override of icons
  • TTW customization
    • reintroduce “custom.css”
    • ability to change basic colors/fonts without recompile based on bootstrap (CSS custom properties)
    • get rid of themeeditor ttw less compilation
• Related
  • Updated Bobtemplates for Theming
  • Javascript
    • Update jQuery in Mockup

Risks

Existing Themes/Addons may require an update, since markup of templates will change.

A lot of templates in Products.CMFPlone an other Packages (see list of affected templates) are touched. Branches and packages with overrides are affected.

Less has been converted to Sass. Compiled CSS in Addons is not affected. Less can be easily converted to Sass.

Browser Support

We're going for Bootstrap 5. Version 5 drops support for IE 10/11.
https://v5.getbootstrap.com/docs/5.0/migration/#browser-support
https://en.wikipedia.org/wiki/Internet_Explorer_11

Participants

• Stefan Antonelli
• Peter Holzer
• Maik Derstappen
• Robert Kuzma

[agitator]

@plone/framework-team

[mauritsvanrees]

Several massive changes for this PLIP were merged on plonetheme.barceloneta master, which is used by Plone 5.1 and 5.2.

This change is meant only for Plone 6, right?
Plus maybe on 5.2, but only for a few brave souls who know what they are doing, and who can fix any errors that their custom diazo theme now throws at them because of this change?
Have I understood this correctly?

If so, then we should create a 2.x branch from the code before this PR was merged, and change coredev 5.1 and 5.2 to use this.
Same for any other PRs for other packages that make changes for bootstrap4, right?

I don't mind creating those branches and updating coredev for barceloneta. But I need to know if that is expected.

And for other packages that get the bootstrap4 treatment, it may be better to create such a branch and update coredev beforehand.

[agitator]

Yeah that wasn't meant to be merged ... my branchoverloadconfusedbrain 🙈
Created and pushed a 2.x branch.

[ale-rt]

This was approved the 2020-03-03

[agitator]

Updated PLIP for Bootstrap 5

[agitator]

Todos

Cleanup (unused stuff in SCSS)
Remove unused SCSS variables
Update preview image
Update docs

Questions

Why is SCSS in package root?
-> preparation for distribution as npm package

[ale-rt]

I will close this PLIP because Plone 6 already runs on barceloneta LTS