We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Volto-light-theme: Volto Theming, Reimagined

Formal Metadata

Title
Volto-light-theme: Volto Theming, Reimagined
Title of Series
Number of Parts
36
Author
License
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date2023
LanguageEnglish

Content Metadata

Subject Area
Genre
Abstract
kitconcept has been developing ""volto-light-theme"" during the last year. This theme is the placeholder of all the knowledge, feedback and the good practices that we've been learning the last years. The theme has some Volto add-ons peer dependencies: these are the add-ons that we consider ""essential"" to complement Volto. They provide additional blocks and functionality as well. The Volto light theme is auto contained in an add-on, and can be used as theme in any Volto site using the ""theme"" directive in Volto. There is no need to create your own theme using volto-light-theme as skeleton, rather than that, you can extend the theme to match your styling requirements both in components and styles. It achieves both heavily using the build by enabling entry points that you can tap in other add-ons so you can add more styles to the original ""volto-light-theme"" build, rather and add (as in add the styles to the cascade) to the build. It also uses SCSS as preprocessor of choice, using the custom Volto theme scape hatch. So the theme styles are entirely controled from the SCSS side. You can still use the normal Volto theming approach if needed (or more handy, like use some variables here and there). The ""volto-light-theme"" does not make use of SemanticUI in any of their components, so you are not tied to SemanticUI in any way. It takes very seriously the vertical spacing between blocks and their relationships. Because of this, there is in place an special styleClassNameExtenders to extend the existing class names and enhance the DOM information and adjust styling accordingly. It also supports advanced block grouping via a custom group wrapper that also plays well with the vertical spacing needs. It uses a new layout model leveraging container queries. This allows a far more simpler styling of blocks both in render and edit mode and the removal of some hacks that were needed until now. The Volto light theme makes heavy use of a docker development approach. It's used already in production sites and the overall feedback has been very positive.