Plone Classic UI Theming Based on Barceloneta#

Todo

This page is only an outline and needs a lot of work.

  • Use of SCSS

  • Colors, fonts and sizes via variable changeable

  • Properties for shadows, rounded corners, gradients.

  • plonetheme.barceloneta npm package for includes

  • bobtemplates.plone template

  • Theming is based on Twitter Bootstrap 5

  • We used Bootstrap markup in templates

  • We used Bootstrap components wherever possible

  • Most of the look and feel can be changed via Bootstrap's variables

  • Hint: order is important in SCSS

Theme Package#

  • Generated theme package can be uploaded as ZIP-file

Theme Structure#

base.scss#

  • Basices required for backend

barceloneta.scss#

  • Barceloneta Theme basis

npm Package#

  • npm package with files required for Plone

  • dependencies required by theme to compile

Bootstrap Components#

  • Default components are extended with some custom components, such as a select or dropdown menu.

  • We use Boostrap variables in these cases.

Add-Ons and Templates#

Make life easy with...

  • use Bootstrap markup

  • use Bootstrap components

  • use Bootstrap variables