j1-template 2021.3.1 → 2022.0.2

data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/419_advanced_modals_demo.asciidoc

@@ -16,8 +16,8 @@
           <p class="pt-1 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p>
         </div>
         <div class="row px-4">
-          <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-          <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+          <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+          <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
         </div>
       </div>
     </div>
@@ -40,22 +40,22 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Success</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
       <!-- Body -->
       <div class="modal-body">
         <div class="text-center">
-          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <i class="mdi mdi-4x mdi-check md-green mb-1"></i>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
           </p>
         </div>
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -77,7 +77,7 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Info</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
@@ -90,8 +90,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -113,8 +113,8 @@
       <!-- Body -->
       <div class="modal-body">
         <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">
-          <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-          <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
+          <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+          <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
         </div>
       </div>
     </div>
@@ -137,7 +137,7 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Danger</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
@@ -146,7 +146,7 @@
         <div class="row">
           <div class="col-3">
             <p></p>
-            <p class="text-center"><i class="mdi mdi-cart fa-4x"></i></p>
+            <p class="text-center"><i class="mdi mdi-cart md-gray-600 fa-4x"></i></p>
           </div>
           <div class="col-9">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
@@ -156,8 +156,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -179,7 +179,7 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Warning</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
@@ -200,8 +200,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -223,48 +223,48 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Success</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
       <!-- Body -->
       <div class="modal-body">
         <div class="text-center">
-          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <i class="mdi mdi-4x mdi-check md-green mb-1"></i>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
           </p>
         </div>
-        <ul class="list-group z-depth-0">
-          <li class="list-group-item justify-content-between">
+        <ul class="list-group">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Cras justo odio
-            <span class="badge badge-primary badge-pill">14</span>
+            <span class="badge badge-primary rounded-pill">1</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Dapibus ac facilisis in
-            <span class="badge badge-primary badge-pill">2</span>
+            <span class="badge badge-primary rounded-pill">2</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Morbi leo risus
-            <span class="badge badge-primary badge-pill">1</span>
+            <span class="badge badge-primary rounded-pill">3</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Cras justo odio
-            <span class="badge badge-primary badge-pill">14</span>
+            <span class="badge badge-primary rounded-pill">4</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Dapibus ac facilisis in
-            <span class="badge badge-primary badge-pill">2</span>
+            <span class="badge badge-primary rounded-pill">5</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Morbi leo risus
-            <span class="badge badge-primary badge-pill">1</span>
+            <span class="badge badge-primary rounded-pill">6</span>
           </li>
         </ul>
       </div>
       <!-- Footer -->
       <div class="modal-footer">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -286,48 +286,48 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Success</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
       <!-- Body -->
       <div class="modal-body">
         <div class="text-center">
-          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <i class="mdi mdi-4x mdi-check md-green mb-1"></i>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
           </p>
         </div>
-        <ul class="list-group z-depth-0">
-          <li class="list-group-item justify-content-between">
+        <ul class="list-group">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Cras justo odio
-            <span class="badge badge-primary badge-pill">14</span>
+            <span class="badge badge-primary badge-pill">1</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Dapibus ac facilisis in
             <span class="badge badge-primary badge-pill">2</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Morbi leo risus
-            <span class="badge badge-primary badge-pill">1</span>
+            <span class="badge badge-primary badge-pill">3</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Cras justo odio
-            <span class="badge badge-primary badge-pill">14</span>
+            <span class="badge badge-primary badge-pill">4</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Dapibus ac facilisis in
-            <span class="badge badge-primary badge-pill">2</span>
+            <span class="badge badge-primary badge-pill">5</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Morbi leo risus
-            <span class="badge badge-primary badge-pill">1</span>
+            <span class="badge badge-primary badge-pill">6</span>
           </li>
         </ul>
       </div>
       <!-- Footer -->
       <div class="modal-footer">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->

data/lib/starter_web/pages/public/learn/where_to_go.adoc

@@ -10,7 +10,7 @@ description: >
 categories:                             [ Info ]
 tags:                                   [ Roundtrip, Introduction ]
 
-fam_menu_id:                            default
+fab_menu_id:                            default
 
 permalink:                              /pages/public/learn/where_to_go/
 regenerate:                             false
@@ -50,7 +50,7 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 Welcome to the pages of the J1 Template. If you are here the first time, a
 good decision you get on that page first. For sure, there is no better place

data/lib/starter_web/pages/public/legal/de/100_copyright.adoc

@@ -15,7 +15,7 @@ robots:
 sitemap:                                false
 exclude_from_search:                    true
 
-fam_menu_id:                            page_ctrl_simple
+fab_menu_id:                            page_ctrl_simple
 scrollbar:                              false
 comments:                               false
 toc:                                    true
@@ -65,7 +65,7 @@ WARNING: This document *does not* constitute any *legal advice*. It is
 highly recommended to verify legal aspects and implications.
 endif::[]
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 == Urheberrecht
 

data/lib/starter_web/pages/public/legal/de/100_impress.adoc

@@ -15,7 +15,7 @@ robots:
 sitemap:                                false
 exclude_from_search:                    true
 
-fam_menu_id:                            page_ctrl_simple
+fab_menu_id:                            page_ctrl_simple
 scrollbar:                              false
 comments:                               false
 toc:                                    false
@@ -66,7 +66,7 @@ WARNING: This document *does not* constitute any *legal advice*. It is
 highly recommended to verify legal aspects and implications.
 endif::[]
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 ifeval::[{eu-region} == true]
 .Postanschrift

data/lib/starter_web/pages/public/legal/de/300_privacy.adoc

@@ -15,7 +15,7 @@ robots:
 sitemap:                                false
 exclude_from_search:                    true
 
-fam_menu_id:                            page_ctrl_simple
+fab_menu_id:                            page_ctrl_simple
 scrollbar:                              false
 comments:                               false
 toc:                                    true
@@ -78,7 +78,7 @@ WARNING: This document *does not* constitute any *legal advice*. It is
 highly recommended to verify legal aspects and implications.
 endif::[]
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 Die Betreiber dieser Website nehmen den Schutz Ihrer persönlichen Daten ernst.
 Wir behandeln Ihre Daten vertraulich und halten uns zum Schutz Ihrer
@@ -145,16 +145,16 @@ System befinden. In diesem Fall sind möglicherweise bereits vorhandene Cookies
 *manuell* über Funktionen Ihres Browsers zu löschen.
 
 ++++
-<div class="mt-4 mb-3">
+<div class="mt-4 mb-4 d-grid gap-2">
   <a  href="javascript:j1.cookieConsent.showDialog()"
-      class="btn btn-primary btn-lg btn-block btn-raised btn-flex mb-3"
-      aria-label="Cookie Consent"
-      style="min-width: 25rem">
+      class="btn btn-primary btn-flex btn-lg"
+      aria-label="Cookie Consent">
       <i class="mdi mdi-cookie mdi-2x mr-2"></i>
       Ihre Einstellungen
   </a>
 </div>
 ++++
+
 endif::[]
 
 ifeval::[{logs-files} == true]

data/lib/starter_web/pages/public/legal/de/400_comment_policy.adoc

@@ -15,7 +15,7 @@ robots:
   index:                                false
   follow:                               false
 
-fam_menu_id:                            page_ctrl_simple
+fab_menu_id:                            page_ctrl_simple
 scrollbar:                              false
 comments:                               false
 toc:                                    true
@@ -59,7 +59,7 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 Wir schätzen Kommentare und bedanke uns für die Zeit der Besucher die Ihre
 Ideen auszutauschen und Feedback geben. Vielen Dank an Alle die einen

data/lib/starter_web/pages/public/legal/en/100_copyright.adoc

@@ -16,7 +16,7 @@ robots:
 sitemap:                                false
 exclude_from_search:                    true
 
-fam_menu_id:                            page_ctrl_simple
+fab_menu_id:                            page_ctrl_simple
 scrollbar:                              false
 toc:                                    true
 
@@ -62,7 +62,7 @@ WARNING: This document *does not* constitute any *legal advice*. It is
 highly recommended to verify legal aspects and implications.
 endif::[]
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 == Copyright policy
 

data/lib/starter_web/pages/public/legal/en/200_impress.adoc

@@ -15,7 +15,7 @@ robots:
 sitemap:                                false
 exclude_from_search:                    true
 
-fam_menu_id:                            page_ctrl_simple
+fab_menu_id:                            page_ctrl_simple
 scrollbar:                              false
 toc:                                    false
 
@@ -61,7 +61,7 @@ WARNING: This document *does not* constitute any *legal advice*. It is
 highly recommended to verify legal aspects and implications.
 endif::[]
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 ifeval::[{eu-region} == true]
 .Postal address

data/lib/starter_web/pages/public/legal/en/300_privacy.adoc

@@ -15,7 +15,7 @@ robots:
 sitemap:                                false
 exclude_from_search:                    true
 
-fam_menu_id:                            page_ctrl_simple
+fab_menu_id:                            page_ctrl_simple
 scrollbar:                              false
 comments:                               false
 toc:                                    true
@@ -77,7 +77,7 @@ WARNING: This document *does not* constitute any *legal advice*. It is
 highly recommended to verify legal aspects and implications.
 endif::[]
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 The operators of this website take the protection of your personal data
 seriously. We treat your data confidentially and protect your data privacy to
@@ -138,11 +138,10 @@ cases, cookies already be present and needs to be *manually* deleted by
 functions of your browser.
 
 ++++
-<div class="mt-4 mb-3">
+<div class="mt-4 mb-4 d-grid gap-2">
   <a  href="javascript:j1.cookieConsent.showDialog()"
-      class="btn btn-primary btn-lg btn-block btn-raised btn-flex mb-3"
-      aria-label="Cookie Consent"
-      style="min-width: 25rem">
+      class="btn btn-primary btn-flex btn-lg"
+      aria-label="Cookie Consent">
       <i class="mdi mdi-cookie mdi-2x mr-2"></i>
       Your settings
   </a>

data/lib/starter_web/pages/public/legal/en/400_comment_policy.adoc

@@ -17,7 +17,7 @@ robots:
 sitemap:                                false
 exclude_from_search:                    true
 
-fam_menu_id:                            page_ctrl_simple
+fab_menu_id:                            page_ctrl_simple
 scrollbar:                              false
 toc:                                    true
 
@@ -64,7 +64,7 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 We love comments and appreciate our visitor's time to share ideas and give
 feedback. Thank you to everyone who places a comment on the {j1--site-name}

data/lib/starter_web/pages/public/manuals/dropdown-help.adoc

@@ -12,7 +12,7 @@ categories:                             [ Manuals ]
 tags:                                   [ MsDropdown ]
 
 comments:                               true
-fam_menu_id:                            page_ctrl_simple
+fab_menu_id:                            page_ctrl_simple
 
 permalink:                              /pages/public/manuals/msDropdown/
 regenerate:                             false

data/lib/starter_web/pages/public/panels/intro_panel/_includes/attributes.asciidoc

@@ -0,0 +1,55 @@
+// ~/document_base_folder/000_includes
+//  Asciidoc attribute includes:                 attributes.asciidoc
+// -----------------------------------------------------------------------------
+
+// URLs - Internal references and/or sources on the Internet
+// -----------------------------------------------------------------------------
+tag::urls[]
+end::urls[]
+
+
+// FOOTNOTES, global asciidoc attributes (variables)
+// -----------------------------------------------------------------------------
+tag::footnotes[]
+:fn-bootstrap-v5--responsive-text:                footnote:[https://getbootstrap.com/docs/5.0/content/typography/#responsive-font-sizes[Supported with Bootstrap V5 · Responsive font sizes, window="_blank"]]
+end::footnotes[]
+
+
+
+// Tags - Asciidoc attributes used internally
+// -----------------------------------------------------------------------------
+tag::tags[]
+end::tags[]
+
+
+// Data - Data elements for Asciidoctor extensions
+// -----------------------------------------------------------------------------
+tag::data[]
+
+:data-images-standalone:                          "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+:data-images-group:                               "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+
+:data-images--themes-menu:                        "pages/roundtrip/500_themes/themes-menu-1280x800.jpg, Themes menu (Bootswatch)"
+
+:data-quicksearch-icon:                           "pages/roundtrip/600_quicksearch/quicksearch_icon-800x200.jpg, Search button (magnifier) in the quick access area"
+:data-quicksearch-input:                          "pages/roundtrip/600_quicksearch/quicksearch_input-800x200.jpg, Input bar for a QuickSearch"
+
+end::data[]
+
+
+// Images - Images from local include/images folder
+// -----------------------------------------------------------------------------
+tag::images[]
+end::images[]
+
+
+// PRODUCTS, local product information (e.g. release)
+// -----------------------------------------------------------------------------
+tag::products[]
+end::products[]
+
+
+// AUTHORS, local author information (e.g. article)
+// -----------------------------------------------------------------------------
+tag::authors[]
+end::authors[]

data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc

@@ -20,7 +20,7 @@ robots:
 exclude_from_search:                    true
 
 comments:                               false
-fam_menu_id:                            page_ctrl_simple
+fab_menu_id:                            page_ctrl_simple
 
 permalink:                              /pages/public/panels/intro_panel/
 regenerate:                             true
@@ -44,10 +44,28 @@ resource_options:
             href:                       https://unsplash.com/@alex_andrews
 ---
 
-// Page content
+// Page Initializer
 // =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 [[responsive-design]]
 == Full Responsive
@@ -61,17 +79,47 @@ content at its best on all devices for all window sizes makes a great Web
 brilliant. J1 Template supports your Web for full responsiveness, for the
 best user experience on all modern devices.
 
-=== Bootstrap 4 Integration
+// [role="skiptranslate"]
+=== Bootstrap Integration
 
 To not sidetrack your audience by irritating user interface (UI) components,
 the J1 Template is based on Bootstrap. Bootstrap is one of the most popular
-frameworks for web development used today. J1 is based on Bootstrap V4,
+frameworks for web development used today. J1 is based on Bootstrap V5,
 the last current version to support your visitors by common navigation
 elements, data input, tables, and many other components.
 
 Bootstrap simplifies HTML programming a lot, offers excellent JS support
 for interactive components like navigation elements, cards, forms, etc.
 
+==== Themes
+
+The themes feature for J1 is in an experimental state for the template
+system. Anyway, it makes sense to present what is possible using different
+versions of Bootstrap's CSS styles for a website.
+
+Themes step in the framework to further adjust the website's appearance
+based on the core CSS rules and definitions of Bootstrap. Themes do not
+change the framework's functionality but modify rule-based, e.g., the
+color scheme, fonts, sizes, or the appearance of more complex elements like
+forms or tables. Additionally, a theme may add additional components but in
+the *sense* of Bootstrap's framework rules and philosophy.
+
+It is expected that many people will change the template for their needs. To
+create unique websites. Fundamental to do this is are CSS styles
+defined by Bootstrap.
+
+.Themes menu (Bootswatch)
+lightbox::images--themes-menu[ 1024, {data-images--themes-menu} ]
+
+Thanks to the people at link:{url-bootswatch--home}[Bootswatch, {browser-window--new}],
+a great set of already prepared Bootstrap stylesheets (20+ for BS V5) in
+various designs are available on their website. There is no need to start from
+scratch, re-define all the Bootstrap variables, and rebuild the framework files
+to create a new theme. Many different styles are available. What is already
+available at Bootswatch is at least a good base for your modifications; your
+unique design.
+
+
 [[current-technology]]
 == HTML5 · CSS3 · JS