j1-template 2020.0.10 → 2020.0.15

data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc

@@ -17,7 +17,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
+        - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.webp
           alt:                          Photo by Clem Onojeghuo on Unsplash
           badge:
             type:                       unsplash
@@ -72,26 +72,26 @@ versions of Bootstrap's CSS styles for a website.
 == Themes
 
 It is expected that many people will change the template for their needs. To
-really create *unique* websites. Fundamental to do this is are CSS styles 
+really create *unique* websites. Fundamental to do this is are CSS styles
 defined by Bootstrap.
 
 Modifying the CSS styles of link:{bootstrap-home}[Bootstrap, {window}] is not
-rocket science. But, to be honest, some knowledge is needed of 
+rocket science. But, to be honest, some knowledge is needed of
 link:{w3org-css-spec}[the CSS technology] to do so. We encourage you to spend
-some time first on learning CSS. To learn what is the 
-link:{w3schools-css-tutorial}[design base, {window}] of each and every website. 
+some time first on learning CSS. To learn what is the
+link:{w3schools-css-tutorial}[design base, {window}] of each and every website.
 Independendly from using Bootstrap or any other CSS framwork.
 
-Thanks to the people at link:{bootswatch-home}[Bootswatch, {window}], a great 
-set of already prepared Bootstrap stylesheets in various designs are available 
-at their website. No need to start from the scratch, to re-define all the 
-Bootstrap variables and rebuilt the framework files to create a new theme. Many
-different styles are available. What is already available is at least a good 
+Thanks to the people at link:{bootswatch-home}[Bootswatch, {window}], a great
+set of already prepared Bootstrap stylesheets in various designs are available
+at their website. No need to start from the scratch, to 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 is at least a good
 base for your modifications: your unique design.
 
-Beside the bunch of different stylesheets at Bootswatch, an 
+Beside the bunch of different stylesheets at Bootswatch, an
 link:{bootswatch-api}[integration API, {window}] is available that helps a lot
-to integrate available designs into a existing site. This API is the base to 
+to integrate available designs into a existing site. This API is the base to
 integrate Bootswatch stylesheets into J1 Template for easy use.
 
 Thanks again the people at Bootswatch for this great work.
@@ -99,22 +99,22 @@ Thanks again the people at Bootswatch for this great work.
 
 == Apply a theme
 
-The base for designing pages using J1 Template is the theme *Uno*, a modern 
+The base for designing pages using J1 Template is the theme *Uno*, a modern
 light theme that can be used for many types of websites. And what we mentioned
 already, web design is not: one size fits all. The theme *Uno* can be seen as
 good base, a starting point. Combining Uno and a different theme may a fast
 solution for your site!?
 
-You can find all available themes, all stylesheets to be applied to your pages 
-from the menu *Themes*. You're invited to check how a page is changing for 
-their design if other stylesheets, other ideas of web design is used. 
+You can find all available themes, all stylesheets to be applied to your pages
+from the menu *Themes*. You're invited to check how a page is changing for
+their design if other stylesheets, other ideas of web design is used.
 
-NOTE: Changing BS-based styles is one thing, changing from one theme to the 
-next at runtime a bit more challanging. For the alpha version of J1 Template, 
+NOTE: Changing BS-based styles is one thing, changing from one theme to the
+next at runtime a bit more challanging. For the alpha version of J1 Template,
 many styles are automatically changed for J1 specific components as well, but
-*not* all of them for now. 
+*not* all of them for now.
 
-Simply select a theme from this menu and a new BS-based stylesheet is 
+Simply select a theme from this menu and a new BS-based stylesheet is
 automatically applied to your pages.
 
 Have fun!
@@ -130,9 +130,7 @@ a look at the link:{previewer-theme}[Theme previewer].
 
 To make things real for your new site, go for *Web in a day*. This tutorial
 guides you through all the steps how to build a website - your site using
-Jekyll  nd the template system J1. It's really a nice journey to *explore* 
+Jekyll  nd the template system J1. It's really a nice journey to *explore*
 and  *learn* creating a static web.
 
 Start your journey from here: link:{kickstarter-web-in-a-day}[Web in a day].
-
-

data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/000_includes/attributes.asciidoc

@@ -0,0 +1,69 @@
+// ~/document_base_folder/000_includes
+//  Asciidoc attribute includes:                 attributes.asciidoc
+// -----------------------------------------------------------------------------
+
+
+// URLs - Internal references and/or sources on the Internet
+// -----------------------------------------------------------------------------
+tag::urls[]
+
+:bootstrap-home:                                  https://getbootstrap.com/
+:bs_doc_components_modal:                         https://getbootstrap.com/docs/4.3/components/modal/
+
+:bootswatch-home:                                 https://bootswatch.com/
+:bootswatch-api:                                  https://bootswatch.com/help/#api
+
+:mdb-home:                                        https://mdbootstrap.com/
+:mdb-bs-modals:                                   https://mdbootstrap.com/docs/jquery/modals/basic/
+:mdb-bs-modals-legacy:                            https://mdbootstrap.com/legacy/4.3.2/?page=javascript/modals
+
+end::urls[]
+
+// Tags - Asciidoc attributes used internally
+// -----------------------------------------------------------------------------
+tag::tags[]
+
+:window:                                          window="blank"
+:no-clipboard:                                    noclip
+:figure-caption:                                  Figure
+:images-dir:                                      pages/roundtrip
+:y:                                               icon:check[role="green"]
+:n:                                               icon:times[role="red"]
+:c:                                               icon:file-alt[role="blue"]
+:beginner:                                        icon:battery-quarter[role="md-blue"]
+:inter:                                           icon:battery-half[role="md-blue"]
+:advanced:                                        icon:battery-full[role="md-blue"]
+:emdash:                                          —
+:bullet:                                          •
+:bigbullet:                                       ●
+:bigbigbullet:                                    ⬤
+:dot:                                             .
+:dotdot:                                          ..
+:middot:                                          ·
+
+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"
+
+end::data[]
+
+
+// Product - Document (e.g release) information
+// -----------------------------------------------------------------------------
+tag::product_info[]
+:license:                                         MIT License
+:revdate:                                         2020
+:revnumber:                                       2020.1.0
+end::product_info[]
+
+
+// Author - Author information
+// -----------------------------------------------------------------------------
+tag::authors[]
+:uri-author-juergen-adams:                        https://jekyll.one
+end::authors[]

data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/000_includes/documents/100_buttons.asciidoc

@@ -0,0 +1,170 @@
+## Buttons
+
+See: https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/material-design/buttons/[MD Buttons, window="_blank"]
+
+Buttons communicate the action that will occur when the user touches them.
+
+### Flat buttons
+
+Flat buttons are text-only buttons. They may be used in dialogs, toolbars,
+or inline. They do not lift, but fill with color on press.
+
+Outline buttons, i.e. `.btn-outline-*`, are the equivalent of Material flat
+buttons. For more details, please refer to Components/Buttons documentation.
+
+++++
+<div class="doc-example">
+  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-success">Success</button>
+  <button type="button" class="btn btn-info">Info</button>
+  <button type="button" class="btn btn-warning">Warning</button>
+  <button type="button" class="btn btn-danger">Danger</button>
+  <button type="button" class="btn btn-link">Link</button>
+</div>
+++++
+
+[source, html]
+----
+  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-success">Success</button>
+  <button type="button" class="btn btn-info">Info</button>
+  <button type="button" class="btn btn-warning">Warning</button>
+  <button type="button" class="btn btn-danger">Danger</button>
+  <button type="button" class="btn btn-link">Link</button>
+----
+
+### Raised buttons
+
+Raised buttons are rectangular-shaped buttons. They may be used inline. They
+lift and display ink reactions on press.
+
+Default buttons, i.e. `.btn`, are the equivalent of Material raised buttons.
+For more details, please refer to Components/Buttons documentation.
+
+++++
+<div class="doc-example">
+  <button type="button" class="btn btn-raised btn-primary">Primary</button>
+  <button type="button" class="btn btn-raised btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-raised btn-success">Success</button>
+  <button type="button" class="btn btn-raised btn-info">Info</button>
+  <button type="button" class="btn btn-raised btn-warning">Warning</button>
+  <button type="button" class="btn btn-raised btn-danger">Danger</button>
+  <button type="button" class="btn btn-raised btn-link">Link</button>
+</div>
+++++
+
+[source, html]
+----
+  <button type="button" class="btn btn-raised btn-primary">Primary</button>
+  <button type="button" class="btn btn-raised btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-raised btn-success">Success</button>
+  <button type="button" class="btn btn-raised btn-info">Info</button>
+  <button type="button" class="btn btn-raised btn-warning">Warning</button>
+  <button type="button" class="btn btn-raised btn-danger">Danger</button>
+  <button type="button" class="btn btn-raised btn-link">Link</button>
+----
+
+### Floating action buttons
+
+A floating action button represents the primary action in an application,
+it is used for a promoted action.
+
+++++
+<div class="doc-example">
+  <button type="button" class="btn bmd-btn-fab">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+</div>
+++++
+
+[source, html]
+----
+  <button type="button" class="btn bmd-btn-fab">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+----
+
+#### Colors
+
+++++
+<div class="doc-example">
+  <button type="button" class="btn bmd-btn-fab btn-primary my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-secondary my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-danger my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-info my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-success my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-warning my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-dark my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-light my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+</div>
+++++
+
+[source, html]
+----
+  <button type="button" class="btn bmd-btn-fab btn-primary my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-secondary my-2">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  ...
+  <button type="button" class="btn bmd-btn-fab btn-dark my-7">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-light my-8">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+----
+
+#### Sizes
+
+A smaller sized, i.e. mini floating action button, is also available.
+
+++++
+<div class="doc-example">
+  <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm">
+    <i class="mdi mdi-plus mdi-sm"></i>
+  </button>
+</div>
+++++
+
+[source, html]
+----
+  <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm">
+    <i class="mdi mdi-plus mdi-sm"></i>
+  </button>
+----
+
+## Recommended button placement
+
+Cards::
+  Buttons are best placed on the left side of a card to increase their
+  visibility. However, as cards have flexible layouts, buttons may be
+  placed in a location suited to the content and context, while
+  maintaining consistency within the product.
+
+Forms::
+  Button alignment on screen: Left. Place the affirmative button on the
+  left, the dismissive button on the right.
+
+Standard dialogs::
+  Button alignment on screen: right. Place the affirmative button on the
+  right, the dismissive button on the left.

data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/mdb_previewer.adoc

@@ -0,0 +1,52 @@
+---
+title:                                  Themes
+tagline:                                Material Design for Bootstrap
+description:                            material
+
+tags:                                   [ Page, Bootstrap ]
+index:                                  [ Bootstrap, Addon, Clear, Button ]
+categories:                             [ pages ]
+
+permalink:                              /pages/public/mdb_preview/
+regenerate:                             true 
+
+resources:                              [ clipboard ]
+resource_options:
+---
+
+// Enable the Liquid Preprocessor
+// -----------------------------------------------------------------------------
+:page-liquid:
+
+
+// Set other global page attributes here
+// -----------------------------------------------------------------------------
+//:my-asciidoc-attribute:
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+
+
+// Initialize entry document environmental attributes
+// -----------------------------------------------------------------------------
+{% include {{set_env_entry_document}} %}
+
+// Load tag, url and data attributes
+// -----------------------------------------------------------------------------
+include::{includedir}/attributes.asciidoc[tag=tags]
+include::{includedir}/attributes.asciidoc[tag=urls]
+include::{includedir}/attributes.asciidoc[tag=data]
+
+// Set local page attributes
+// -----------------------------------------------------------------------------
+// :images-dir:                         {imagesdir}/path/to/page/images
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents
+// -----------------------------------------------------------------------------
+
+include::{documentsdir}/100_buttons.asciidoc[]

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/attributes.asciidoc

@@ -89,14 +89,14 @@ tag::tags[]
 :dotdot:                                          ..
 :middot:                                          ·
 
-end::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-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.webp, 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.webp, Forest with mountains behind"
 
 end::data[]
 

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_table_3_column.asciidoc

@@ -1,6 +1,6 @@
 
 .Selected extended BS modal examples
-[cols="6a,3a,3a", options="header", width="100%", role="table-responsive"]
+[cols="6a,3a,3a", options="header", width="100%", role="table-responsive-stacked-lg"]
 |===============================================================================
 |Postion |Class | Example
 

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/419_advanced_modals_html.asciidoc

@@ -128,7 +128,7 @@
     <div class="modal-content">
       <!-- 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">          
+        <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-primary-modal mr-2">Yes, please</a>
           <a type="button" class="btn btn-outline-secondary-modal" 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>
         </div>
@@ -184,7 +184,7 @@
       </div>
       <!-- Body -->
       <div class="modal-body">
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap-1280x600.jpg" class="img-fluid">
         <div class="text-center">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
         </div>
@@ -409,7 +409,7 @@
           <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>
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap-1280x600.jpg" class="img-fluid">
       </div>
       <!-- Footer -->
       <div class="modal-footer">
@@ -724,7 +724,7 @@
       </div>
       <!-- Body -->
       <div class="modal-body">
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="bootstrap-1280x600.jpg" class="img-fluid">
         <div class="text-center">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
         </div>
@@ -925,4 +925,4 @@
   </div>
 </div>
 <!--END Modal Subscription -->
-++++
+++++