j1-template 2022.5.0.rc0 → 2022.5.0.rc1

data/lib/starter_web/pages/public/learn/_roundtrip/410_bs_modals_extentions.adoc

@@ -1,91 +0,0 @@
----
-title:                                  Roundtrip
-tagline:                                advanced bootstrap modals
-date:                                   2020-11-08 00:00:00
-description: >
-                                        Advanced Bootstrap modals are used to add dialogs to your
-                                        web pages for user notifications. To highlight important
-                                        information to your visitors. Modals are positioned over
-                                        everything else in the document so that messages get the
-                                        user's attention.
-
-categories:                             [ Roundtrip ]
-tags:                                   [ Introduction, Bootstrap, Modal, Extension ]
-
-flowtext:                               false
-fab_menu_id:                            page_ctrl
-
-permalink:                              /pages/public/learn/roundtrip/modals/
-regenerate:                             false
-
-resources:                              [ animate ]
-resource_options:
-  - attic:
-      slides:
-        - url:                          /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.jpg
-          alt:                          bootstrap
----
-
-// 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 (if any)
-// -----------------------------------------------------------------------------
-[role="dropcap"]
-Advanced Bootstrap Modals are based on the free package of
-link:{url-mdb--home}[Material Design for Bootstrap, {browser-window--new}] on version
-*4.3.2*. This version can be found following this link:
-link:{url-mdb--bs-modals-legacy}[Enhanced Bootstrap Modals, {browser-window--new}]. A more
-current version is available from here:
-link:{url-mdb--bs-modals}[Modal examples & templates, {browser-window--new}].
-Bootstrap modals are used to add dialogues to your web pages for user
-notifications. To highlight important information to your visitors. Modals
-are positioned over everything else in the document so that messages
-get the user's attention.
-
-To improve your visitor's experience on important information that shouldn't
-be missed. Modals are a great choice to bring the user's attention. Using the
-J1 Template BS enhanced predefined modal styles, some emotional weight is
-added to the information displayed - ranging from an info level, a simple
-warning to critical messages.
-
-NOTE: For more information on how to use Bootstrap’s JavaScript modal
-plugin, refer to: link:{url-bs-doc--components-modal}[Bootstrap Docs, {browser-window--new}].
-
-// include::{documentdir}/tables/bs_modal_examples.asciidoc[]
-include::{documentdir}/410_table_bs_modal_examples.asciidoc[]
-
-== What next
-
-Bootstrap is a helpful framework that offers in the current V5
-version a complete set of styles to create excellent responsive designs.
-In the sense of all can be improved, the responsive tables support of BS
-needs some enhancement to display tables on low-resolution devices or smaller
-(browser-) window sizes.
-
-The first version for improved responsive tables that scale better is available
-for the J1 Template. Check out from here what the
-link:{url-roundtrip--responsive-tables}[BS Table Extensions] can do!
-
-// Include the modals HTML portion
-// -----------------------------------------------------------------------------
-include::{documentdir}/419_advanced_modals_demo.asciidoc[]

data/lib/starter_web/pages/public/learn/_roundtrip/420_responsive_tables_extensions.adoc

@@ -1,420 +0,0 @@
----
-title:                                  Roundtrip
-tagline:                                responsive tables
-date:                                   2020-11-09 00:00:00
-description: >
-                                        Creating a design for responsive tables is challenging. The approach used by
-                                        J1 Template is based on pure CSS on top of the classic Bootstrap styles for
-                                        simplicity and portability to be viewed best on all devices and browsers.
-
-categories:                             [ Roundtrip ]
-tags:                                   [ Introduction, Bootstrap, Table, Extension ]
-
-flowtext:                               false
-fab_menu_id:                            page_ctrl
-
-permalink:                              /pages/public/learn/roundtrip/responsive_tables/
-regenerate:                             false
-
-resources:                              [ animate, rouge ]
-resource_options:
-  - attic:
-      opacity:                          0.7
-      slides:
-        - url:                          /assets/images/pages/roundtrip/tables-1920x1280-bw.jpg
-          alt:                          Photo by Markus Spiske on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Markus Spiske
-            href:                       https://unsplash.com/@markusspiske/portfolio
----
-
-// 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 (if any)
-// -----------------------------------------------------------------------------
-[role="dropcap"]
-Creating a design for responsive tables is challenging. The approach used by
-J1 Template is based on pure CSS on top of the classic Bootstrap styles for
-simplicity and portability to be viewed best on all devices and browsers.
-
-== Table types
-
-But, for sure, the solution provided is a compromise. To fit the everyday needs
-for tables viewed on desktop and mobile devices, three types of responsive
-tables are implemented:
-
-.Types of responsive tables
-[cols="3a,3a,6a", options="header", width="100%", role="table-responsive mt-3"]
-|===
-|Type |Style |Description
-
-|J Table (default)
-|`r-text-xxx`
-|J Tables are used by J1 Template for default. Those tables are using the
-*responsive text* feature (see link:{url-roundtrip--typography}[Typography])
-with no additional CSS classes to be applied. For smaller viewports, the text
-scales down and should fit the cells automatically. The default text size for
-J1 is `r-text-300`.
-
-|B Table (Bootstrap)
-|`table-responsive`
-|If adding the class `table-responsive`, it creates a responsive table based
-on Bootstrap CSS styles. The table will then scroll horizontally on small
-devices. Making any table responsive across *all* viewports, the additional
-class `table-responsive` is to applied. For specific (Bootstrap) breakpoints,
-the classes `table-responsive-lg{-sm\|-md\|-lg\|-xl}` are available to have
-better control on what viewport sizes tables are being transformed.
-
-|F Table (fixed)
-|`no-rtext`
-|If the responsive text feature from J1 is *not* wanted, the CSS class
-`no-rtext` is to be applied. J tables are *not* responsive per default,
-but in combination with the CSS class `table-responsive{-sm|-md|-lg|-xl`
-from Bootstrap, this type behaves like classic Bootstrap responsive tables
-(see above) but *no* responsive text is used.
-
-|R Tables (stacked)
-|`rtable`
-|The style `rtable` *rebuilds* a table. The header is set to invisible, and
-all columns get vertically *stacked as rows*. The rebuild of responsive
-tables takes effect if the viewport (window size) is smaller than 992px for
-the width (x-axis); typical for small devices like tablets or mobiles.
-
-|===
-
-To see the transformation on a table in action, resize for desktop devices the
-browser window or use a device the viewport is smaller than 768px (mobiles or
-tablets).
-
-== Tables 2-column
-
-Tables are widely used for documentation pages. Below, simple 2-column tables
-are used to explain some of the Jekyll variables for templating your content
-pages.
-
-=== Bootstrap tables
-
-Bootstrap tables support tables to be scrolled horizontally on smaller
-viewports. From a specified breakpoint and up, the table will behave normally
-and do not scroll horizontally.
-
-.Example, Bootstrap using fixed text size `no-rtext`
-[source, no_theme, role="noclip"]
-----
-[cols="6,6", options="header", width="100%", role="table-responsive no-rtext"]
-|===
-|Variable |Description
-...
-|===
-----
-
-.Bootstrap, fixed text size `no-rtext`
-[cols="6a,6a", options="header", width="100%", role="table-responsive no-rtext mt-3"]
-|===
-|Variable |Description
-
-|`page.content`
-|The content of the Page, rendered or un-rendered
-depending upon what Liquid is being processed and what `page` is.
-
-|`page.title`
-|The title of the Page.
-
-|`page.date`
-|The Date assigned to the Post. This can be overridden in a
-Post's front matter by specifying a new date/time in the format
-`YYYY-MM-DD HH:MM:SS` (assuming UTC), or `YYYY-MM-DD HH:MM:SS +/-TTTT`
-(to specify a time zone using an offset from UTC. e.g.
-`2008-12-14 10:30:00 +0900`).
-
-|===
-
-.Example, Bootstrap using responsive text size
-[source, no_theme, role="noclip"]
-----
-[cols="6,6", options="header", width="100%", role="table-responsive"]
-|===
-|Variable |Description
-...
-|===
-----
-
-.Bootstrap, responsive text size
-[cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
-|===
-|Variable |Description
-
-|`page.content`
-|The content of the Page, rendered or un-rendered
-depending upon what Liquid is being processed and what `page` is.
-
-|`page.title`
-|The title of the Page.
-
-|`page.date`
-|The Date assigned to the Post. This can be overridden in a
-Post's front matter by specifying a new date/time in the format
-`YYYY-MM-DD HH:MM:SS` (assuming UTC), or `YYYY-MM-DD HH:MM:SS +/-TTTT`
-(to specify a time zone using an offset from UTC. e.g.
-`2008-12-14 10:30:00 +0900`).
-
-|===
-
-
-=== Responsive tables
-
-Responsive tables *rebuild* a table. The header is set to invisible, and
-all columns get vertically *stacked as rows*.
-
-.Example, R Table using responsive text size
-[source, no_theme, role="noclip"]
-----
-[cols="6,6", options="header", width="100%", role="rtable"]
-|===
-|Variable |Description
-...
-|===
-----
-
-.R Table, responsive text size
-[cols="6a,6a", options="header", width="100%", role="rtable mt-3"]
-|===
-|Variable |Description
-
-|`page.content`
-|The content of the Page, rendered or un-rendered
-depending upon what Liquid is being processed and what `page` is.
-
-|`page.title`
-|The title of the Page.
-
-|`page.date`
-|The Date assigned to the Post. This can be overridden in a
-Post's front matter by specifying a new date/time in the format
-`YYYY-MM-DD HH:MM:SS` (assuming UTC), or `YYYY-MM-DD HH:MM:SS +/-TTTT`
-(to specify a time zone using an offset from UTC. e.g.
-`2008-12-14 10:30:00 +0900`).
-
-|===
-
-.Example, R Table using fixed font size
-[source, no_theme, role="noclip"]
-----
-[cols="6,6", options="header", width="100%", role="rtable no-rtext"]
-|===
-|Variable |Description
-...
-|===
-----
-
-.R Table, stacked, fixed text size `no-rtext`
-[cols="6a,6a", options="header", width="100%", role="rtable no-rtext mt-3"]
-|===
-|Variable |Description
-
-|`page.content`
-|The content of the Page, rendered or un-rendered
-depending upon what Liquid is being processed and what `page` is.
-
-|`page.title`
-|The title of the Page.
-
-|`page.date`
-|The Date assigned to the Post. This can be overridden in a
-Post's front matter by specifying a new date/time in the format
-`YYYY-MM-DD HH:MM:SS` (assuming UTC), or `YYYY-MM-DD HH:MM:SS +/-TTTT`
-(to specify a time zone using an offset from UTC. e.g.
-`2008-12-14 10:30:00 +0900`).
-
-|===
-
-
-== Tables multi-column
-
-Responsive Bootstrap tables support tables to be scrolled horizontally
-on smaller viewports. Making any table responsive across all viewports,
-the additional class `rtable` is used. For specific (Bootstrap)
-breakpoints, the classes `rtable{-sm|-md|-lg|-xl}` are available
-to better control over what viewport sizes table are transformed.
-From a specified breakpoint and up, the table will behave normally and do
-not scroll horizontally.
-
-=== Bootstrap tables
-
-Bootstrap responsive tables make use of overflow-y: hidden, which clips off
-any content that goes beyond the bottom or top edges of the table.
-In particular, this can clip off dropdown menus and other third-party
-widgets.
-
-.Example, Bootstrap using fixed text size `no-rtext`
-[source, no_theme, role="noclip"]
-----
-[cols=",,,,", options="header", width="100%", role="table-responsive no-rtext"]
-|===
-|Parameter |Type |Default |Description |Example
-...
-|===
-----
-
-.Bootstrap, fixed text size `no-rtext`
-[cols="2,2,2,3,3", options="header", width="100%", role="table-responsive no-rtext mt-3"]
-|===
-|Parameter |Type |Default |Description |Example
-
-|`color`
-|Hash
-|`md_white`
-|The background_color hash contains a pair of colors to control the header
-background as a gradient.
-|The background_color hash contains a pair of colors to control the header
-background as a gradient.
-
-|`background_color_1`
-|Symbolic color \| RGB valuess
-|`md_indigo`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-
-|===
-
-.Example, Bootstrap using responsive text size
-[source, no_theme, role="noclip"]
-----
-[cols=",,,,", options="header", width="100%", role="table-responsive"]
-|===
-|Parameter |Type |Default |Description |Example
-...
-|===
-----
-
-.Bootstrap, responsive text size
-[cols="2,2,2,3,3", options="header", width="100%", role="table-responsive mt-3"]
-|===
-|Parameter |Type |Default |Description |Example
-
-|`color`
-|Hash
-|`md_white`
-|The background_color hash contains a pair of colors to control the header
-background as a gradient.
-|The background_color hash contains a pair of colors to control the header
-background as a gradient.
-
-|`background_color_1`
-|Symbolic color \| RGB valuess
-|`md_indigo`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-
-|===
-
-=== Responsive tables
-
-.Example, R Table using fixed text size `no-rtext`
-[source, no_theme, role="noclip"]
-----
-[cols=",,,,", options="header", width="100%", role="rtable no-rtext"]
-|===
-|Parameter |Type |Default |Description |Example
-...
-|===
-----
-
-.R Table, fixed text size `no-rtext`
-[cols="2,2,2,3,3", options="header", width="100%", role="rtable no-rtext mt-3"]
-|===
-|Parameter |Type |Default |Description |Example
-
-|`color`
-|Hash
-|`md_white`
-|The background_color hash contains a pair of colors to control the header
-background as a gradient.
-|The background_color hash contains a pair of colors to control the header
-background as a gradient.
-
-|`background_color_1`
-|Symbolic color \| RGB valuess
-|`md_indigo`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-
-|===
-
-.Example, R Table using fixed text size `no-rtext`
-[source, no_theme, role="noclip"]
-----
-[cols=",,,,", options="header", width="100%", role="rtable no-rtext"]
-|===
-|Parameter |Type |Default |Description |Example
-...
-|===
-----
-
-.R Table, responsive text size
-[cols="2,2,2,3,3", options="header", width="100%", role="rtable mt-3"]
-|===
-|Parameter |Type |Default |Description |Example
-
-|`color`
-|Hash
-|`md_white`
-|The background_color hash contains a pair of colors to control the header
-background as a gradient.
-|The background_color hash contains a pair of colors to control the header
-background as a gradient.
-
-|`background_color_1`
-|Symbolic color \| RGB valuess
-|`md_indigo`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-
-|===
-
-
-== What next
-
-Expectedly you've enjoyed exploring all the possibilities J1 offers so far.
-An exciting feature may be the use of themes. But much, much more can the J1
-do for your Web Site.
-
-Check out what themes can do. Have a look at the
-link:{url-roundtrip--themes}[BS Themes] feature!