Restore VLT Training

docs/customizing-volto-light-theme/concepts.md

@@ -0,0 +1,109 @@
+---
+myst:
+  html_meta:
+    "description": "Concepts"
+    "property=og:description": "Concepts"
+    "property=og:title": "Concepts"
+    "keywords": "Plone, Volto, Training, Volto Light Theme"
+---
+
+# Volto Light Theme Concepts
+
+Volto Light Theme (VLT) is a customizable theme built for the Volto frontend of the Plone CMS. It provides a foundation that aims to solve many common design challenges, while remaining flexible enough for customization. It's particularly valuable because it is based on real-world experience, while simultaneously embodying the Volto vision for the future. This module will help you understand the core concepts in VLT and create a mental map of its parts.
+
+## Base Styling
+
+VLT is designed with simplicity and a minimal aesthetic in mind. Consistency, accessibility, and intuitiveness are what drive the development and improvements for VLT.
+
+## Customizable Variables
+
+VLT offers a set of CSS custom properties (variables) that allow developers to customize various design elements, such as:
+
+- Colors
+- Spatial relationships
+- Layouts
+
+These variables can be easily overridden in your project to match the desired visual identity.
+
+## Colors
+
+The color system is designed so that colors work in couples: a "background color" and a "foreground color". The "foreground color" is often called "text color" in other systems, but since we want to use this value for more than text—like icons or borders, this works better as a generic term. Colors that do not specify "foreground" in the name are meant to be background colors.
+
+The main color properties for a project using VLT are the following:
+
+```scss
+--primary-color: #fff;
+--primary-foreground-color: #000;
+
+--secondary-color: #ecebeb;
+--secondary-foreground-color: #000;
+
+--accent-color: #ecebeb;
+--accent-foreground-color: #000;
+```
+
+### Semantic color properties
+
+As an additional layer on top of the main color properties, we have set in place some semantic custom properties for the basic layout sections. As a default they use the values from the main color variables, but they can be detached if desired by setting new color values. However, we feel that leaving these color relationships as they are helps create a cohesive final design. The semantic layer of properties includes the following:
+
+```scss
+// Header
+--header-background: var(--primary-color);
+--header-foreground: var(--primary-foreground-color);
+
+//Footer
+--footer-background: var(--secondary-color);
+--footer-foreground: var(--secondary-foreground-color);
+
+// Fat Menu
+--fatmenu-background: var(--accent-color);
+--fatmenu-foreground: var(--accent-foreground-color);
+
+// Breadcrumbs
+--breadcrumbs-background: var(--accent-color);
+--breadcrumbs-foreground: var(--accent-foreground-color);
+
+// Search bar
+--search-background: var(--accent-color);
+--search-foreground: var(--accent-foreground-color);
+
+// Link color
+--link-foreground-color: var(--link-color);
+```
+
+## Block width
+
+VLT now uses a standard block width definition as well. Currently, this is done via a `widget` component, `BlockWidthWidget`, that will be ported to Volto core in the near future. This component stores the value of the custom property `--block-width` so that it can be used by the StyleWrapper when injecting styles into the markup.
+
+The three-width layout system considers the following variables:
+
+```scss
+--layout-container-width: #{$layout-container-width}; // for major elements like headers, & large Blocks like the `volto-slider-block`. 
+--default-container-width: #{$default-container-width}; // a balanced content presentation for most Blocks.
+--narrow-container-width: #{$narrow-container-width}; // optimal readability.
+```
+
+The default values map the container width SCSS variables, which have existed in the VLT ecosystem since versions < 6.0.0-alpha.0:
+
+```scss
+// Container widths
+$layout-container-width: 1440px !default;
+$default-container-width: 940px !default;
+$narrow-container-width: 620px !default;
+```
+
+## Block alignment
+
+As part of the effort to generalize behaviors, another VLT `widget` is the `BlockAlignmentWidget`, which also takes advantage of the StyleWrapper by setting the `--block-alignment` property.
+
+The three default options are:
+
+```scss
+--align-left: start;
+--align-center: center;
+--align-right: end;
+```
+
+## Conclusion
+
+VLT provides a robust foundation for Plone CMS frontend development through this framework of customizable variables and standardized block controls. Through these core concepts, VLT strikes a balance between maintaining consistency and flexibility, allowing developers to create cohesive designs while still having the freedom to customize elements to match their specific project needs.

docs/customizing-volto-light-theme/creating-new-project.md

@@ -0,0 +1,11 @@
+---
+myst:
+  html_meta:
+    "description": "Create a new project with Plone and Volto"
+    "property=og:description": "Create a new project with Plone and Volto"
+    "property=og:title": "Create a new project with Plone and Volto"
+    "keywords": "Plone, Volto, Training, Theme, Footer"
+---
+
+# Create a new project with Plone and Volto
+We recommend creating your Plone project with **Cookieplone**. Our comprehensive documentation provides step-by-step guidance to help you get started. For detailed installation instructions, visit our [Cookieplone guide](https://6.docs.plone.org/install/create-project-cookieplone.html).

docs/customizing-volto-light-theme/index.md

@@ -0,0 +1,36 @@
+---
+myst:
+  html_meta:
+    "description": "Customizing Volto Light Theme"
+    "property=og:description": "Customizing Volto Light Theme"
+    "property=og:title": "Customizing Volto Light Theme"
+    "keywords": "Plone, Volto, Training, Customizing, Volto Light Theme"
+---
+
+(volto-light-theme-label)=
+
+# Customizing Volto Light Theme
+
+Level
+:   Intermediate
+
+Customizing Volto Light Theme aims to provide developers with comprehensive knowledge and practical skills for theming in Plone 6's Volto frontend by using and extending Volto Light Theme.
+
+The goal of this training is to guide developers in understanding and effectively working with Volto Light Theme to create visually compelling and consistent user interfaces. Due to the scope of the content, the training follows a structured "show and tell" approach, presenting concepts and explaining their usage, while also encouraging participants to put their learning into practice.
+
+Participants will explore essential aspects of Volto Light Theme such as setting up theme providers, customizing styles, and understanding how Volto's theming system functions. The training also covers advanced tips, best practices, and lesser-known features to extend Volto Light Theme and create more tailored solutions.
+
+This training is best suited for developers who have prior experience with Volto and want to deepen their theming knowledge.
+
+```{toctree}
+:caption: Volto Light Theme
+:maxdepth: 1
+:numbered:
+
+concepts
+creating-new-project
+installing-vlt
+integrate-new-block
+theming
+question-answer
+```

docs/customizing-volto-light-theme/installing-vlt.md

@@ -0,0 +1,77 @@
+---
+myst:
+  html_meta:
+    "description": "Installing Volto Light Theme"
+    "property=og:description": "Installing Volto Light Theme"
+    "property=og:title": "Installing Volto Light Theme"
+    "keywords": "Plone, Volto, Training, Volto Light Theme"
+---
+
+
+# Installing Volto Light Theme
+
+Follow the steps below to install and configure VLT in your project. VLT provides a clean and modern design with ready-to-use blocks and components.
+
+### Step 1: Install Volto Light Theme
+
+To install VLT, navigate to the {file}`frontend/packages/volto-my-project` folder and run the following command:
+
+```{note}
+For now we'll be using an `alpha` release, so we need to specify the correct version.
+```
+
+```shell
+pnpm install @kitconcept/[email protected]
+```
+
+While in your project package folder, add VLT to the `addons` list in your {file}`package.json`, as follows:
+
+```json
+"addons": ["@kitconcept/volto-light-theme"],
+```
+
+### Step 2: install block add-ons
+
+Volto Light Theme comes with several pre-configured add-ons that provide basic blocks for your website. If you'd like to include them, you can add them in the `addons` section in your {file}`package.json`, but this is not required.
+
+Here is the list of recommended addons to install, including VLT, which should be the last element:
+
+```json
+"addons": [
+  "@eeacms/volto-accordion-block",
+  "@kitconcept/volto-button-block",
+  "@kitconcept/volto-heading-block",
+  "@kitconcept/volto-highlight-block",
+  "@kitconcept/volto-introduction-block",
+  "@kitconcept/volto-separator-block",
+  "@kitconcept/volto-slider-block",
+  "@kitconcept/volto-light-theme"
+],
+```
+
+### Step 3: configure Volto Light Theme as the theme provider
+
+To leverage a cohesive set of styles, components, and design patterns that align with Volto's best practices, you need to set VLT as your theme provider.
+
+Open the {file}`volto.config.js` file in your {file}`frontend` folder, and modify it as shown below:
+
+```diff
+diff --git a/frontend/volto.config.js b/frontend/volto.config.js
+index 56feec6..41aa96b 100644
+--- a/frontend/volto.config.js
++++ b/frontend/volto.config.js
+@@ -1,7 +1,7 @@
+ const addons = ['volto-my-project'];
+-const theme = '';
++const theme = '@kitconcept/volto-light-theme';
+
+ module.exports = {
+   addons,
+-  theme
++  theme,
+ };
+ ```
+
+You'll need to restart your Plone frontend to see the changes.
+
+That's it! Your project should now be using Volto Light Theme with its additional blocks and components.

docs/customizing-volto-light-theme/integrate-new-block.md

@@ -0,0 +1,44 @@
+---
+myst:
+  html_meta:
+    "description": "Adding New Block"
+    "property=og:description": "Adding New Block"
+    "property=og:title": "Adding New Block"
+    "keywords": "Plone, Volto, Training, Volto Light Theme, Integrate, block"
+---
+
+# Integrate a new block
+
+In this training module, we'll learn how to integrate the `@plone-collective/volto-relateditems-block` into VLT. This block allows you to create links to related content in your Plone site.
+
+## Install `@plone-collective/volto-relateditems-block`
+
+To install the related items block, make sure you are in the {file}`frontend/packages/volto-my-project` folder, and use the following command:
+
+```{note}
+For now we'll be using an `alpha` release, so we need to specify the correct version.
+```
+
+```shell
+pnpm install @plone-collective/[email protected]
+```
+
+After installation, ensure that the add-on is included in the `addons` key of your project's {file}`package.json`:
+
+```json
+"addons": [
+  "@eeacms/volto-accordion-block",
+  "@kitconcept/volto-button-block",
+  "@kitconcept/volto-heading-block",
+  "@kitconcept/volto-highlight-block",
+  "@kitconcept/volto-introduction-block",
+  "@kitconcept/volto-separator-block",
+  "@kitconcept/volto-slider-block",
+  "@plone-collective/volto-relateditems-block",
+  "@kitconcept/volto-light-theme"
+],
+```
+
+You'll need to restart your Plone frontend to see the changes.
+
+That's it! Your project should now be using `@plone-collective/volto-relateditems-block`, which shows related items for the content as a list of links.

docs/customizing-volto-light-theme/question-answer.md

@@ -0,0 +1,10 @@
+---
+myst:
+  html_meta:
+    "description": "Questions and answers"
+    "property=og:description": "Questions and answers"
+    "property=og:title": "Questions and answers"
+    "keywords": "Plone, Volto, Training, Volto Light Theme"
+---
+
+# Questions and answers