Change Templates to Bootstrap Markup

[santonelli]

PLIP (Plone Improvement Proposal)

Responsible Persons

Proposer: Stefan Antonelli

Seconder: Alessandro Pisa

Abstract

Use Bootstrap HTML markup in all templates used in Plone core and Plone's ecosystem (packages, widgets, etc.)

There will be another PLIP to add a all new theme for Plone 6 based on this work.

Motivation

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

Assumptions

• We keep Barceloneta for the moment
• Changes should not break Barceloneta
• Barceloneta can override incompatible markup

Proposal & Implementation

Affected Templates

• Issue Update markup of controlpanel templates to Bootstrap 5 #3079 Control panel templates in Products.CMFPlone
• Issue Update markup of login templates to Bootstrap 4 #3080 Login templates in Products.CMFPlone
• Issue Update markup of templates in Products.CMFPlone to Bootstrap 5 #3081 Other templates in Products.CMFPlone
• Update markup of templates to Bootstrap 5 plone.app.content#196
• Update markup of templates to Bootstrap 5 plone.app.contentrules#53
• Update markup of templates to Bootstrap 5 plone.app.contenttypes#548
• Update markup of templates to Bootstrap 5 plone.app.dexterity#318
• Update markup of templates to Bootstrap 5 plone.app.caching#63
• Update markup of templates to Bootstrap 5 plone.app.discussion#169
• Update markup of templates to Bootstrap 4 plone.app.event#315
• Update markup of templates to Bootstrap 4 plone.app.layout#235
• Update markup of templates to Bootstrap 5 plone.app.mosaic#473
• Update markup of templates to Bootstrap plone.app.multilingual#379
• Update markup of templates to Bootstrap 4 plone.app.portlets#137
• Update markup of templates to Bootstrap 5 plone.app.registry#43
• Update markup of templates to Bootstrap 5 plone.app.users#96
• Update markup of templates to Bootstrap 5 plone.app.workflow#24
• Update markup of templates to Bootstrap 4 plone.app.z3cform#113
• Update markup of templates to Bootstrap 4 plone.batching#25
• https://github.com/plone/plone.portlet.collection/issues/24
• Update markup of templates to Bootstrap 5 plone.portlet.static#20
• Update markup of templates to Bootstrap 5 plone.schemaeditor#82
• Update markup of templates to Bootstrap 5 plone.staticresources#114
• Update markup of templates to Bootstrap 5 plone.z3cform#15
• Update markup of templates to Bootstrap 5 plonetheme.barceloneta#225

Views with unknown template

• plone_upgrade (Products.CMFPlone)
• folder_contents (very complex structure pattern in plone.app.content)
• edit (edit views via z3cform)
• prefs_install_products_form (Add-ons controlpanel)
• redirection-controlpanel
• manage-viewlets
• manage-portlets
• sharing
• personal-information (plone.app.users)
• maintenance-controlpanel (done in controlpanel subissue Update markup of controlpanel templates to Bootstrap 5 #3079)

Development

Coredev buildout

git clone git@github.com:plone/buildout.coredev.git plone-6-coredev
cd plone-6-coredev
git checkout 6.0
python3.7 -m venv py
./py/bin/pip install -r requirements.txt
./py/bin/buildout -c plips/plip-2967-barceloneta-lts.cfg
./bin/instance fg

Identify an element that needs to be updated

• Create a branch in the package where the template comes from
• Update/Change markup to Bootstrap
• Push your branch
• Create a Pull Request

Compile CSS for local tests

Requirements

• You need Node on your system
• Best practice is to use NVM for that
• Installation & Instructions
• OSX https://www.wdiaz.org/how-to-install-nvm-with-homebrew/
• Linux https://nodesource.com/blog/installing-node-js-tutorial-using-nvm-on-mac-os-x-and-ubuntu/
• General information about build tools in Bootstrap https://v5.getbootstrap.com/docs/5.0/getting-started/build-tools/

Compile

• cd src/plonetheme.barceloneta
• yarn install (instal dependencies)
• yarn watch (watch for changes in sass files, type rs to restart compilation)

Hint

• Do not add compiled CSS to your merge request (we do this on the main branch after merge)

Markup Update/Change hints

• Wherever possible use Bootstrap components (https://v5.getbootstrap.com/docs/5.0/components/alerts/)
• It's not important to copy Plone 5 design
• Try to re-think how a piece of Plone could be done with plain Bootstrap (see already existing breadcrumbs as example)
• Check plonetheme.tokyo for already existing templates (https://github.com/collective/plonetheme.tokyo)
• Before we use Utilities/Spacing (e.g. https://v5.getbootstrap.com/docs/5.0/utilities/spacing/) for specific components check if this should go to a global css

Deliverables

TBD

Risks

Plone's default theme Barceloneta may break at some point. Default classes should not hurt if there is no styling for it.

Participants

• Stefan Antonelli
• Peter Holzer

[ebrehault]

This PLIP has been approved by the FWT

[pbauer]

Radiobuttons are not yet styled correctly.

I used https://github.com/collective/example.contenttype to render all field types.

[agitator]

@pbauer radios should be fixed now

[jensens]

Sharing template needs love as well.

[agitator]

Updated PLIP for Bootstrap 5

[MrTango]

We should update the breadcrumbs a bit to be more compatible with W3C ideas: #3262
In general we should go over the recommendation here: https://css-tricks.com/how-to-section-your-html/

[agitator]

The plip config is no longer needed, all package branches were merged in to buildout.coredev 6 https://github.com/plone/buildout.coredev/tree/6.0/plips.
Continuation of improvements should happen in the actual package.