j1-template 2020.0.21 → 2021.0.1

data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc

@@ -1,16 +1,23 @@
 ---
 title:                                  Roundtrip
 tagline:                                asciidoc extensions
-description:                            Asciidoc Extensions (asciidoctor)
-
-tags:                                   [ Page, Roundtrip ]
-index:                                  [ Template, Roundtrip, Asciidoc, Asciidoctor, Extensions ]
-categories:                             [ pages ]
+date:                                   2020-11-07 12:00:00
+description: >
+                                        J1 Template implements some incubating Ruby-based extensions
+                                        for Asciidoctor. Most extensions are based on the examples
+                                        given with the Asciidoctor Extensions Lab.
+                                        All implemented Asciidoctor Extensions can be found in this article.
+                                        A set of useful extensions to the Markup language Asciidoc are made
+                                        especially for documents of the Jekyll content type pages, but can
+                                        be used for post or collections as well.
+
+tags:                                   [ Roundtrip, Introduction ]
+categories:                             [ Asciidoc, Extension ]
 
 permalink:                              /pages/public/learn/roundtrip/asciidoc_extensions/
 regenerate:                             false
 
-resources:                              [ lightbox, iconify, twemoji ]
+resources:                              [ lightbox, iconify, twemoji, rouge ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -30,20 +37,22 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
+// Set page (local) 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 (all)
+// Load page attributes
 // -----------------------------------------------------------------------------
 {% include {{load_attributes}} scope="all" %}
 
-// Set local page attributes
-// -----------------------------------------------------------------------------
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 // Page content
-// =============================================================================
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 J1 Template implements some incubating Ruby-based extensions for Asciidoctor.
 Most extensions are based on the examples given with the
@@ -55,7 +64,6 @@ To create extensions on your own, it is highly recommended to read first the
 {asciidoctor-user-manual-extensions}[extensions section, {browser-window--new}] in
 the Asciidoctor user manual.
 
-
 == Asciidoc Extensions
 
 All already implemented Asciidoctor Extensions can be found below. A set of
@@ -75,36 +83,17 @@ clicking the toggle button `VIEW` displays (or hide) the content given by the
 The `View Result Extension` is quite useful for example sections discussing
 Asciidoc code and how the resulting (HTML) code would look alike.
 
-[source, adoc]
-----
-  .This will have a button `VIEW` placed to the right top of the example box
-  ----
-  * displayed always
-  * displayed always 2
-  ----
-
-  [.result]
-  ====
-  * displayed till clicked
-  * displayed till clicked 2
-  ====
-----
-
-.This example will have a button `VIEW` placed to the top right of the example box
+.This example place a button `VIEW` top right of the example box
+[source, prometheus, role="noclip"]
 ----
 * displayed always
 ----
 
 [.result]
 ====
- displayed till clicked, but closed automatically after 5 seconds
+ displayed till clicked, but closed on second click
 ====
 
-NOTE: The result block closes automatically after the result was shown
-for 5 seconds. If the button `VIEW` is clicked, the result box toggles
-between open and close (the result gets hidden). That way, you can open and
-close the result box at any time.
-
 == Asciidoc Admonitions
 
 All colors for all default admonition blocks set to the standard MD color
@@ -131,15 +120,15 @@ CAUTION: Icon background-color: red
 Q&A sections are used quite often to answer popular questions. To make
 such a Q&A section more eye-minded, the additional Admonition Blocks
 `[QUESTION]` and `[ANSWER]` are available for J1 Template as Asciidoctor
-extentions.
+extensions.
 
 === Question block
 
-The admonition Question block is an extention to the Asciidoc admonition
+The admonition Question block is an extension to the Asciidoc admonition
 block types that introduce an admonition of type question.
 
 .Example of a question block
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 [QUESTION]
 What's the main tool for selecting colors?
@@ -154,12 +143,12 @@ What's the main tool for selecting colors used for J1 Template?
 
 ===  Answer block
 
-The Admonition Answer block is an extention to the Asciidoc admonition
+The Admonition Answer block is an extension to the Asciidoc admonition
 block types that introduce an admonition type of answer in conjunction
 to the admonition of type question.
 
 .Example of a answer block
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 [ANSWER]
 For J1 Template, go for for the Core documentation section. You'll
@@ -178,12 +167,12 @@ You'll find the full color scheme for Material Design.
 
 To make the use of the built-in Lightbox easier, J1 Template offers an Asciidoc
 extension: the LightBox block macro. The `lightbox::` block macro embeds one or
-more images into the output document and puts automatically the default
-Lightbox (lightbox) for J1 on. For all images, the `size` (width) and individual
+more images into the output document and puts the default Lightbox (lightbox)
+for J1 automatically on. For all images, the `size` (width) and individual
 `caption text` can be configured.
 
 .Lightbox Block
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 .block_title
 lightbox::block_id[ images_width, images_data [, group_name] ]
@@ -191,9 +180,9 @@ lightbox::block_id[ images_width, images_data [, group_name] ]
 
 NOTE: For a `lightbox::` block, images are placed in the output document
 without any other scaling than in width - they are placed using simple
-HTML `img` tags. This is fine for images even in size. For images in
-different sizes, a gallery should be used as gallery (apps) rearrange
-images to make them fit at its best for the available space.
+HTML `img` tags. This is fine for images that are even in size. For images in
+different sizes, a gallery should be used as a J1 Gallery Apps to rearrange
+images and make them fit at its best for the available space.
 
 === Standalone Images
 
@@ -202,19 +191,21 @@ defined as Asciidoc attributes. The image data is given as a string
 of data pairs:
 
 .Paired attributes
+[source, prometheus, role="noclip"]
 ----
-  "path/to/image-1, image-caption-1, ..."
+"path/to/image-1, image-caption-1, ..."
 ----
 
 .Example of an data attribute for a lightbox block
+[source, prometheus, role="noclip"]
 ----
 :data-images: "pages/image-1.jpg, Description 1, "pages/image-2.jpg, Description 2"
 ----
 
-The base path for all image related data is a side-wide (Asciidoc)
+The base path for all image-related data is a side-wide (Asciidoc)
 configuration (see `_config.yml`) and points per default to `/assets/images`.
 The base path is automatically added to each image. If you want to use the
-default asset path for images, a relativ path needs to be given for
+default asset path for images, a relative path needs to be given for
 `path/to/image`.
 
 WARNING: If an absolute path is configured, like `/path/to/image`, the base
@@ -227,7 +218,7 @@ The parameter `group` for the `lightbox::` block is an option. If no
 standalone.
 
 .Lightbox block for standalone images
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 lightbox::images-standalone[ 400, {data-images-standalone} ]
 ----
@@ -243,7 +234,7 @@ of related images. To enable grouping, the option `group` needs to be
 configured for the block.
 
 .Lightbox block for grouped images
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 lightbox::images-group[ 400, {data-images-group}, group_name ]
 ----
@@ -262,13 +253,12 @@ All icon fonts are supported:
 * Iconify
 * Twitter Emoji
 
-
 == Material Designs Icons
 
 Material Designs Icons can be used as inline icons by using
 the `mdi:` inline macro:
 
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 mdi:icon_name[icon_size, modifier] <1> <2> <3>
 ----
@@ -278,6 +268,7 @@ mdi:icon_name[icon_size, modifier] <1> <2> <3>
     animation (fa-pulsed) or the orientation (fa-rotate-45)
 
 .Click on _view result_ to see how it's looks alike
+[source, prometheus, role="noclip"]
 ----
 mdi:home[2x, mdi-pulsed ml-3 mr-2 mb-2] Symbol icon (pulsed) +
 mdi:font-awesome[2x, ml-3 mr-2 mb-2] Brand icon +
@@ -303,7 +294,7 @@ settings for the `modifier` are applied.
 Font Awesome Icons can be used as inline icons by using
 the `fas:` (solid icons) or `fab` (brand icons) inline macro:
 
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 fas:icon_name[icon_size, modifier] <1> <2> <3>
 ----
@@ -313,6 +304,7 @@ fas:icon_name[icon_size, modifier] <1> <2> <3>
     animation (fa-pulsed) or the orientation (fa-rotate-45) of an icon
 
 .Click on _view result_ to see how it's looks alike
+[source, prometheus, role="noclip"]
 ----
 fas:home[2x, fa-pulsed ml-2 mr-2 mb-2] Solid icon (pulsed) +
 fab:font-awesome[2x, ml-3 mr-2 mb-2] Brand icon +
@@ -327,7 +319,7 @@ fab:apple[2x, md-indigo ml-3 mr-2] Brand icon (colored)
 ====
 
 NOTE: Parameters `icon_size` and `modifier` are optional. If not given,
-the icons `size` is set to default  (`1x`), the color to `black` and no
+the icons `size` is set to default (`1x`), the color to `black` and no
 settings for the `modifier` are applied.
 
 
@@ -336,7 +328,7 @@ settings for the `modifier` are applied.
 Iconify Icons can be used as inline icons by using the `iconify:`
 inline macro:
 
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 iconify:icon_name[icon_size, modifier] <1> <2> <3>
 ----
@@ -346,6 +338,7 @@ iconify:icon_name[icon_size, modifier] <1> <2> <3>
 positioning classes for margings and padding
 
 .Click on _view result_ to see how it's looks alike
+[source, prometheus, role="noclip"]
 ----
 iconify:logos:opensource[2x, ml-4 mr-2 mb-2] Brand icon OpenSource  +
 iconify:logos:netlify[2x, ml-4 mr-2 mb-2] Brand icon Netlify +
@@ -378,7 +371,7 @@ applied, the color settings will have no effect.
 Twitter Emoji's can be used as inline icons by using the `emoji:`
 inline macro:
 
-[source, adoc]
+[source, prometheus]
 ----
 emoji:icon_name[icon_size] <1> <2>
 ----
@@ -386,6 +379,7 @@ emoji:icon_name[icon_size] <1> <2>
 <2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `5x`
 
 .Click on _view result_ to see how it's look alike
+[source, prometheus, role="noclip"]
 ----
 This is an example of how you can emoji:heart[2x, pulsed mt-1] Asciidoctor
 and Twitter Emoji emoji:smile[].
@@ -403,26 +397,27 @@ link:{previewer-emoji}[Emoji Icon Previewer, {browser-window--new}].
 
 == Blind Text (Lorem)
 
-The Ruby gem Middleman, a Ruby-gem based static site generator, provides a
+The Ruby Gem Middleman, a Ruby-gem based static site generator, provides a
 set of powerful helpers for generating random text content. The Lorem
 inline macro `lorem:` adapted this functionality from Middleman for the use
 of Asciidoc-based documents processed by Jekyll.
 
 If you start writing larger documents having several chapters, not all of the
 content is available at the beginning. It is quite useful to place blind text
-first to get an better impression how a a page will look alike that is not
+first to get a better impression how a page will look-alike that is not
 finished yet.
 
 Placeholders for blind text comes in several flavours given by `macro`. The
 syntax for the `lorem:` inline macro is simple like this:
 
-[source, adoc]
+[source, prometheus]
 ----
 lorem:macro[]
 lorem:macro[size]
 ----
 
 .Example of a lorem sentences macro
+[source, prometheus, role="noclip"]
 ----
 lorem:sentences[5]
 ----
@@ -438,7 +433,7 @@ All macro types available for `lorem:` to be used for blind text can be
 found with the following table below.
 
 //.Tabelle
-[cols="5,2,5a", options="header", role="table-responsive-stacked-lg mb-2"]
+[cols="5,2,5a", options="header", role="rtable mb-2"]
 |===============================================================================
 |Macro | Type |Example
 
@@ -512,7 +507,7 @@ generated by Jekyll. For sure!
 
 The next preview is focussing advanced Bootstrap Modals. The modals feature
 is currently in beta status, but it is a great option to customize your
-user dialogs using them!
+user dialogues using them!
 
 Have a look for the link:{roundtrip-extended-modals}[BS modal extensions]
 feature of J1 Template.

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

@@ -1,11 +1,15 @@
 ---
 title:                                  Roundtrip
 tagline:                                advanced bootstrap modals
-description:                            Advanced Bootstrap Modals for J1 Template
+date:                                   2020-11-08 12:00:00
+description: >
+                                        Bootstrap modals are used to add dialogues to your web pages for user
+                                        notifications. To highlight important information to your visitor's. Modals
+                                        are positioned over everything else in the document so that messages
+                                        get the users attention.
 
-tags:                                   [ Page, Roundtrip ]
-index:                                  [ Template, Roundtrip, Bootstrap, advanced, Modal]
-categories:                             [ pages ]
+tags:                                   [ Roundtrip, Introduction ]
+categories:                             [ Bootstrap, Modal, Extension ]
 
 flowtext:                               false
 
@@ -28,20 +32,22 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
+// Set page (local) 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 (all)
+// Load page attributes
 // -----------------------------------------------------------------------------
 {% include {{load_attributes}} scope="all" %}
 
-// Set local page attributes
-// -----------------------------------------------------------------------------
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 // Page content
-// =============================================================================
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 Advanced Bootstrap Modals are based on the free package of
 link:{mdb-home}[Material Design for Bootstrap, {browser-window--new}] on version
@@ -49,17 +55,17 @@ link:{mdb-home}[Material Design for Bootstrap, {browser-window--new}] on version
 link:{mdb-bs-modals-legacy}[Enhanced Bootstrap Modals, {browser-window--new}]. A more
 current version is available from here: link:{mdb-bs-modals}[Modal examples & templates, {browser-window--new}].
 
-Bootstrap modals are used to add dialogs to your web pages for user
-notifications. To highlight important information to your vistors. Modals
-are positioned over everything else in the document so that the notification
-gets the users attention.
+Bootstrap modals are used to add dialogues to your web pages for user
+notifications. To highlight important information to your visitor's. Modals
+are positioned over everything else in the document so that messages
+get the users attention.
 
 == BS advanced Modals
 
-To improve your visitors experience on important information that shouldn't
-missed, modals are a good choice to bring the users attention on. Using J1
+To improve your visitor's experience on important information that shouldn't
+missed, modals are a great choice to bring the users attention on. Using J1
 Template BS enhanced predefined modal styles, some emotional weight is added
-to the information displayed - ranging from an info level, simple warning to
+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
@@ -71,13 +77,13 @@ include::{documentdir}/410_table_3_column.asciidoc[]
 
 == Whats next
 
-Bootstrap is really a great CSS framework that offers in the current V4
+Bootstrap is really a helpful framework that offers in the current V4
 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
+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.
 
-A first version for improved responsive tables that scale better is available
+The first version for improved responsive tables that scale better is available
 for J1 Template on top of the classic BS CSS styles. Check out what from here
 what the link:{roundtrip-responsive-tables}[BS tables extensions] can do!
 

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

@@ -1,19 +1,21 @@
 ---
 title:                                  Roundtrip
 tagline:                                responsive tables
-description:                            Enhanced table styles for J1 Template
+date:                                   2020-11-09 12: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.
 
-
-tags:                                   [ Page, Roundtrip ]
-index:                                  [ Template, Bootstrap, Roundtrip, Extended, Tables]
-categories:                             [ pages ]
+tags:                                   [ Roundtrip, Introduction ]
+categories:                             [ Bootstrap, Table, Extension ]
 
 flowtext:                               false
 
 permalink:                              /pages/public/learn/roundtrip/responsive_tables/
 regenerate:                             false
 
-resources:                              []
+resources:                              [ rtable, rouge ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -33,25 +35,80 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
+// Set page (local) attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:debug:
+: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 (all)
+// Load page attributes
 // -----------------------------------------------------------------------------
 {% include {{load_attributes}} scope="all" %}
 
-// Set local page attributes
-// -----------------------------------------------------------------------------
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 // Page content
-// =============================================================================
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-Creating a design for responsive tables is challenging. The approch used by
+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.
 
+ifdef::debug[]
+
+.Source, options NOT set
+[source, md, role="noclip"]
+----
+[cols=",", options="header", ]
+|===============================================================================
+|Bratze |Bru
+
+|Fick
+|dich
+
+|===============================================================================
+----
+
+
+.Options NOT set
+[cols=",", options="header", ]
+|===============================================================================
+|Bratze |Bru
+
+|Fick
+|dich
+
+|===============================================================================
+
+.Source, options SET
+[source, adoc, role="noclip"]
+----
+[cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
+|===============================================================================
+|Bratze |Bru
+
+|Fick
+|dich
+
+|===============================================================================
+----
+
+.options set
+[cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
+|===============================================================================
+|Bratze |Bru
+
+|Fick
+|dich
+
+|===============================================================================
+endif::[]
+
+
+
 == Table types
 
 But, for sure, the solution provided is a compromise. To fit the common needs
@@ -59,74 +116,72 @@ for tables viewed on desktop and mobile devices, three types of responsive
 tables are implemented:
 
 .Types of responsive tables
-[cols="2a,4a,6a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+[cols="3a,3a,6a", options="header", width="100%", role="table-responsive mt-3"]
 |===============================================================================
 |Type |Style |Description
 
-|Bootstrap
-|`table-responsive`
-|The adding the class `table-responsive`, it creates a responsive table based
-on BS CSS styles. The table will then scroll horizontally on small devices.
-Making any table responsive across all viewports, the additonal 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.
-
-|R Tables
+|J Table (default)
 |`r-text-xxx`
-|R tables are used by J1 Template for default. Those tables are using the
-responsive text feature (presented in section link:{roundtrip-typography}[Typography])
-with no additonal CSS classes to be applied. For smaller viewports, the text
+|J Tables are used by J1 Template for default. Those tables are using the
+*responsive text* feature (see link:{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`.
 
-|F Tables
-|`no-r-text`
-|If the responsive text feature from J1 is not wanted, the CSS class
-`no-r-text` is to be applied. F (fixed) tables are not responsive per
-default, but in combination with the CSS class `table-responsive-stacked-lg` (Bootstrap),
-this type behaves like classic Bootstrap responsive table (see above).
-
-|S Tables
-|`table-responsive-stacked-lg-stacked`
-|The style `table-responsive-stacked-lg-stacked` rebuilds a table. The header is set
-to invisible and all columns gets vertically stacked as rows. For
-specific (Bootstrap) breakpoints, the classes `table-responsive-stacked-lg-stacked{-sm\|-md\|-lg\|-xl}`
-are available to have better control on what viewport sizes tables are
-being transformed. The class `table-responsive-stacked-lg-stacked` is using the breakpoint
-at 768px what is the same as `table-responsive-stacked-lg-stacked-md`
+|B Table (Bootstrap)
+|`table-responsive`
+|The 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 gets 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.
 
 |===============================================================================
 
-[TIP]
-====
-The styles for responsive tables takes effect for default if the viewport
-(window size) is smaller than 768px for the width (x-axis). Typical for small
-devices like tablets or mobiles.
-
-The styles for F and S Tables can be combined with the Bootstrap responsive
-table approach (`table-responsive-stacked-lg`).
-====
-
 To see the transformation o table in action, resize for desktop devices the
 browser window or use a device the viewport is smaller than 768px (mobiles or
 tablets).
 
-
-== 2-column Table
+== Tables 2-column
 
 Tables are widely used for documentation pages. Below, simple 2-column tables
 are used to explain some of the Jekyll variables that can be used for
 templating your content pages.
 
-=== Bootstrap
+=== Bootstrap tables
 
-Responsive 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.
+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, prometheus, role="r-text-200 noclip"]
+----
+[cols="6,6", options="header", width="100%", role="table-responsive no-rtext"]
+|=============================================================================
+|Variable |Description
+...
+|=============================================================================
+----
 
-.Bootstrap F Table (fixed font size)
-[cols="6a,6a", options="header", width="100%", role="table-responsive no-r-text mt-3"]
+.Bootstrap, fixed text size `no-rtext`
+[cols="6a,6a", options="header", width="100%", role="table-responsive no-rtext mt-3"]
 |===============================================================================
 |Variable |Description
 
@@ -146,8 +201,17 @@ Post's front matter by specifying a new date/time in the format
 
 |===============================================================================
 
+.Example, Bootstrap using responsive text size
+[source, prometheus, role="r-text-200 noclip"]
+----
+[cols="6,6", options="header", width="100%", role="table-responsive"]
+|====================================================================
+|Variable |Description
+...
+|====================================================================
+----
 
-.Bootstrap R Table (responsive text size)
+.Bootstrap, responsive text size
 [cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
 |===============================================================================
 |Variable |Description
@@ -168,8 +232,55 @@ Post's front matter by specifying a new date/time in the format
 
 |===============================================================================
 
-.S table (stacked, responsive text size)
-[cols="6a,6a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+
+=== Responsive tables
+
+Responsive tables *rebuilds* a table. The header is set to invisible and
+all columns gets vertically *stacked as rows*.
+
+.Example, R Table using responsive text size
+[source, prometheus, role="r-text-200 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, prometheus, role="r-text-200 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
 
@@ -190,22 +301,107 @@ Post's front matter by specifying a new date/time in the format
 |===============================================================================
 
 
-== Multi-column Table
+== Tables multi-column
 
 Responsive Bootstrap tables support tables to be scrolled horizontally
-on smaller viewports. Making any table responsive across all viewports, the
-additonal class `table-responsive-stacked-lg` is used. For specific (Bootstrap)
-breakpoints, the classes `table-responsive-stacked-lg{-sm|-md|-lg|-xl}` are available
-to have better control on what viewport sizes table are transformed.
+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 have 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.
 
-NOTE: 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.
+=== 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, prometheus, role="r-text-200 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, prometheus, role="r-text-200 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, prometheus, role="r-text-200 noclip"]
+----
+[cols=",,,,", options="header", width="100%", role="rtable no-rtext"]
+|====================================================================
+|Parameter |Type |Default |Description |Example
+...
+|====================================================================
+----
 
-.Bootstrap R Table (fixed text size)
-[cols="2,2,2,3,3", options="header", width="100%", role="no-r-text table-responsive-stacked-lg mt-3"]
+.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
 
@@ -229,9 +425,18 @@ the form `#RRGGBB`
 
 |===============================================================================
 
+.Example, R Table using fixed text size `no-rtext`
+[source, prometheus, role="r-text-200 noclip"]
+----
+[cols=",,,,", options="header", width="100%", role="rtable no-rtext"]
+|====================================================================
+|Parameter |Type |Default |Description |Example
+...
+|====================================================================
+----
 
-.S table (stacked, responsive text size))
-[cols="2,2,2,3,3", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+.R Table, responsive text size
+[cols="2,2,2,3,3", options="header", width="100%", role="rtable mt-3"]
 |===============================================================================
 |Parameter |Type |Default |Description |Example
 
@@ -258,7 +463,7 @@ the form `#RRGGBB`
 
 == Whats next
 
-Hopefully you've enjoyed exploring all the possibilities J1 offers sofar.
+Expectedly you've enjoyed exploring all the possibilities J1 offers sofar.
 An interesting feature may using themes. But much, much more can the J1 do
 for your Web Site.