j1-template 2020.0.0

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

@@ -0,0 +1,128 @@
+---
+title:                                  Roundtrip
+tagline:                                advanced bootstrap modals
+description:                            Advanced Bootstrap Modals for J1 Template
+
+tags:                                   [ Page, Roundtrip ]
+index:                                  [ Template, Roundtrip, Bootstrap, advanced, Modal]
+categories:                             [ pages ]
+
+flowtext:                               false
+
+permalink:                              /pages/public/learn/roundtrip/modals/
+regenerate:                             true
+
+resources:                              []
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.jpg
+          alt:                          bootstrap
+---
+
+// 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
+// -----------------------------------------------------------------------------
+
+Advanced Bootstrap Modals are based on the free package of 
+link:{mdb-home}[Material Design for Bootstrap, {window}] on version 
+*4.3.2*. This version can be found following this link:
+link:{mdb-bs-modals-legacy}[Enhanced Bootstrap Modals, {window}]. A more 
+current version is available from here: link:{mdb-bs-modals}[Modal examples & templates, {window}].
+
+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.
+
+
+== 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 
+Template BS enhanced predefined modal styles, some emotional weight is added
+to the information displayed - ranging from an info level, simple warning to 
+critical messages.
+
+NOTE: For more information on how to use Bootstrap’s JavaScript modal 
+plugin, refer to: link:{bs_doc_components_modal}[Bootstrap Docs, {window}].
+
+
+// Include sub-documents
+// -----------------------------------------------------------------------------
+include::{documentsdir}/410_table_3_column.asciidoc[]
+
+//////////
+include::{documentsdir}/410_top_info.asciidoc[]
+include::{documentsdir}/410_top_right_success.asciidoc[]
+include::{documentsdir}/410_top_left_info.asciidoc[]
+include::{documentsdir}/410_bottom_info.asciidoc[]
+include::{documentsdir}/410_bottom_right_danger.asciidoc[]
+include::{documentsdir}/410_bottom_left_warning.asciidoc[]
+include::{documentsdir}/410_full_height_right_success.asciidoc[]
+include::{documentsdir}/410_full_height_left_info.asciidoc[]
+//////////
+
+//////////
+include::{documentsdir}/410_position_and_sizes.asciidoc[]
+include::{documentsdir}/410_contact_form.asciidoc[]
+include::{documentsdir}/410_form_login_with_avatar.asciidoc[]
+include::{documentsdir}/410_omni_login.asciidoc[]
+include::{documentsdir}/410_central_large_info.asciidoc[]
+include::{documentsdir}/410_central_fluid_success.asciidoc[]
+include::{documentsdir}/410_full_height_top_warning.asciidoc[]
+include::{documentsdir}/410_full_height_bottom_danger.asciidoc[]
+include::{documentsdir}/410_full_height_right_success.asciidoc[]
+//////////
+
+== Whats next
+
+Bootstrap is really a great CSS 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
+(browser-) window sizes.
+
+A 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!
+
+
+// Include the modals HTML portion
+// -------------------------------------------------------------------
+
+include::{documentsdir}/419_advanced_modals_html.asciidoc[]
+

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

@@ -0,0 +1,281 @@
+---
+title:                                  Roundtrip
+tagline:                                responsive tables
+description:                            Enhanced table styles for J1 Template
+
+
+tags:                                   [ Page, Roundtrip ]
+index:                                  [ Template, Bootstrap, Roundtrip, Extended, Tables]
+categories:                             [ pages ]
+
+flowtext:                               false
+
+permalink:                              /pages/public/learn/roundtrip/responsive_tables/
+regenerate:                             false
+
+resources:                              []
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      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
+---
+
+// 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
+// -----------------------------------------------------------------------------
+
+
+Creating a design for responsive tables is challenging. The approch 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 common needs
+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"]
+|===============================================================================
+|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{-sm\|-md\|-lg\|-xl}` are available to have better 
+control on what viewport sizes tables are being transformed.
+
+|R Tables
+|`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
+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` (Bootstrap), 
+this type behaves like classic Bootstrap responsive table (see above).
+
+|S Tables
+|`table-responsive-stacked`
+|The style `table-responsive-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{-sm\|-md\|-lg\|-xl}` 
+are available to have better control on what viewport sizes tables are 
+being transformed. The class `table-responsive-stacked` is using the breakpoint
+at *768px* what is the same as `table-responsive-stacked-md`
+
+|===============================================================================
+
+[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`).
+====
+
+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 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
+
+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 F Table (fixed font size)
+[cols="6a,6a", options="header", width="100%", role="table-responsive-lg no-r-text 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`).
+
+|===============================================================================
+
+
+.Bootstrap R Table (responsive text size)
+[cols="6a,6a", options="header", width="100%", role="table-responsive-lg 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`).
+
+|===============================================================================
+
+.S table (stacked, responsive text size)
+[cols="6a,6a", options="header", width="100%", role="table-responsive-stacked-lg 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`).
+
+|===============================================================================
+
+
+== Multi-column Table
+
+Responsive Bootstrap tables support tables to be *scrolled horizontally* 
+on smaller viewports. Making any table responsive across all viewports, the 
+additonal class `table-responsive` is used. For specific (Bootstrap) 
+breakpoints, the classes `table-responsive{-sm|-md|-lg|-xl}` are available
+to have better control on 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 R Table (fixed text size)
+[cols="2,2,2,3,3", options="header", width="100%", role="no-r-text table-responsive-lg 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`
+
+|===============================================================================
+
+
+.S table (stacked, responsive text size))
+[cols="2,2,2,3,3", options="header", width="100%", role="table-responsive-stacked-lg 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`
+
+|===============================================================================
+
+
+== Whats next
+
+Hopefully 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.
+
+Check out what themes can do. Have a look at link:{roundtrip-themes}[BS themes] 
+feature!

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

@@ -0,0 +1,138 @@
+---
+title:                                  Roundtrip
+tagline:                                themes
+description:                            J1 Template Roundtrip - Template Themes
+
+tags:                                   [ Page, Roundtrip ]
+index:                                  [ Template, Roundtrip, Bootstrap, Themes ]
+categories:                             [ pages ]
+
+permalink:                              /pages/public/learn/roundtrip/themes/
+regenerate:                             false
+
+resources:                              []
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
+          alt:                          Photo by Clem Onojeghuo on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Clem Onojeghuo
+            href:                       https://unsplash.com/@clemono
+---
+
+// 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
+// -----------------------------------------------------------------------------
+
+++++
+<!-- page_path:            {{page_path | debug}} -->
+<!-- site.source:          {{site.source | debug}} -->
+<!-- site.source.size:     {{site.source.size | debug}} -->
+++++
+
+The themes feature for J1 Template is in a *alpha status* of the template
+system. Anyway, it makes sense to present what is possible using *different*
+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 
+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 
+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. 
+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 
+base for your modifications: your unique design.
+
+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 
+integrate Bootswatch stylesheets into J1 Template for easy use.
+
+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 
+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. 
+
+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. 
+
+Simply select a theme from this menu and a new BS-based stylesheet is 
+automatically applied to your pages.
+
+Have fun!
+
+== Whats next
+
+Hopefully you've enjoyed exploring some of the possibilities J1 offers for
+managing themes. But much, much more can the J1 do for your website.
+
+This was the last place to go for the roundtrip. More details of the most
+common elements of Bootstrap can be found on the previewer for a theme. Have
+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* 
+and  *learn* creating a static web.
+
+Start your journey from here: link:{kickstarter-web-in-a-day}[Web in a day].
+
+