j1-template 2020.0.20 → 2021.0.0

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
@@ -28,45 +30,85 @@ resource_options:
             href:                       https://unsplash.com/@markusspiske/portfolio
 ---
 
+// Page Initializer
+// =============================================================================
 // Enable the Liquid Preprocessor
-// -----------------------------------------------------------------------------
 :page-liquid:
 
-// Set other global page attributes here
+// Set page (local) attributes here
 // -----------------------------------------------------------------------------
-//:my-asciidoc-attribute:
+// :page--attr:                         <attr-value>
+:debug:
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
-{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
-
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Initialize entry document environmental attributes
+// Load page 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
+{% include {{load_attributes}} scope="all" %}
 
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-// Include sub-documents
-// -----------------------------------------------------------------------------
-
-
-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
@@ -74,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
 
@@ -161,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
@@ -183,8 +232,24 @@ 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
 
@@ -204,23 +269,67 @@ Post's front matter by specifying a new date/time in the format
 
 |===============================================================================
 
+.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
+
+|`page.content`
+|The content of the Page, rendered or un-rendered
+depending upon what Liquid is being processed and what `page` is.
 
-== Multi-column Table
+|`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
-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.
 
-.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"]
+.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
 
@@ -244,9 +353,90 @@ 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
+...
+|====================================================================
+----
+
+.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, 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
 
@@ -273,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.