j1-template 2020.0.6 → 2020.0.11

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

@@ -74,17 +74,17 @@ 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="2a,4a,6a", options="header", width="100%", role="table-responsive-stacked-lg-stacked-lg mt-3"]
 |===============================================================================
 |Type |Style |Description
 
 |Bootstrap
-|`table-responsive`
-|The adding the class `table-responsive`, it creates a responsive table based
+|`table-responsive-stacked-lg`
+|The adding the class `table-responsive-stacked-lg`, 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 
+`table-responsive-stacked-lg` is to applied. For specific (Bootstrap) breakpoints, the 
+classes `table-responsive-stacked-lg{-sm\|-md\|-lg\|-xl}` are available to have better 
 control on what viewport sizes tables are being transformed.
 
 |R Tables
@@ -99,17 +99,17 @@ J1 is `r-text-300`.
 |`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), 
+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`
-|The style `table-responsive-stacked` *rebuilds* a table. The header is set 
+|`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{-sm\|-md\|-lg\|-xl}` 
+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` is using the breakpoint
-at *768px* what is the same as `table-responsive-stacked-md`
+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`
 
 |===============================================================================
 
@@ -120,7 +120,7 @@ The styles for responsive tables takes effect for *default* if the viewport
 devices like tablets or mobiles.
 
 The styles for F *and* S Tables can be combined with the *Bootstrap* responsive 
-table approach (`table-responsive`).
+table approach (`table-responsive-stacked-lg`).
 ====
 
 To see the transformation o table in action, resize for desktop devices the 
@@ -141,7 +141,7 @@ 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"]
+[cols="6a,6a", options="header", width="100%", role="table-responsive-stacked-lg-lg no-r-text mt-3"]
 |===============================================================================
 |Variable |Description
 
@@ -163,7 +163,7 @@ Post's front matter by specifying a new date/time in the format
 
 
 .Bootstrap R Table (responsive text size)
-[cols="6a,6a", options="header", width="100%", role="table-responsive-lg mt-3"]
+[cols="6a,6a", options="header", width="100%", role="table-responsive-stacked-lg-lg mt-3"]
 |===============================================================================
 |Variable |Description
 
@@ -184,7 +184,7 @@ 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"]
+[cols="6a,6a", options="header", width="100%", role="table-responsive-stacked-lg-stacked-lg mt-3"]
 |===============================================================================
 |Variable |Description
 
@@ -209,8 +209,8 @@ Post's front matter by specifying a new date/time in the format
 
 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
+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. 
 From a specified breakpoint and up, the table will behave normally and do 
 not scroll horizontally.
@@ -220,7 +220,7 @@ 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"]
+[cols="2,2,2,3,3", options="header", width="100%", role="no-r-text table-responsive-stacked-lg-lg mt-3"]
 |===============================================================================
 |Parameter |Type |Default |Description |Example
 
@@ -246,7 +246,7 @@ 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"]
+[cols="2,2,2,3,3", options="header", width="100%", role="table-responsive-stacked-lg-stacked-lg mt-3"]
 |===============================================================================
 |Parameter |Type |Default |Description |Example
 

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

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

data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc

@@ -1,7 +1,15 @@
 ---
 title:                                  J1 Template
 tagline:                                creating responsive websites
-description:                            Responsive Webs using J1 Template
+description: >
+                                        A good user experience browsing a Web is one of
+                                        the most important features a site has to offer as
+                                        a must. Beside excellent content. Presenting content
+                                        at it’s best on all devices, for all window sizes makes
+                                        an excellent Web brilliant. J1 Template support your Web
+                                        for full responsiveness, for the best user experience on
+                                        all modern devices.
+
 author:                                 J1 Team
 
 tags:                                   [ Jekyll, Template ]
@@ -16,7 +24,7 @@ resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5 
+      opacity:                          0.5
       slides:
         - url:                          /assets/images/modules/attics/the-place-1920x1280-bw.jpg
           alt:                          the-place-1920x1280-bw
@@ -35,13 +43,13 @@ best user experience on all modern devices.
 === Bootstrap 4 Integration
 
 To not sidetrack your audience by irritating user interface (UI) components,
-J1 Template is based on Bootstrap. Bootstrap is one of the most popular 
-frameworks for web development used today. J1 is based on Bootstrap V4, the 
-last current version to support your visitors by common elements for 
+J1 Template is based on Bootstrap. Bootstrap is one of the most popular
+frameworks for web development used today. J1 is based on Bootstrap V4, the
+last current version to support your visitors by common elements for
 navigation, data input, tables and many other components more.
 
 For your development projects, Bootstrap simplifies HTML programming a lot,
-offers excellent JS support for interactive components like navigation 
+offers excellent JS support for interactive components like navigation
 elements, cards, forms etc.
 
 [[current-technology]]
@@ -55,40 +63,40 @@ development, languages and tools.
 
 === HTML5 + CSS3
 
-J1 is using HTML5 for structuring content on the World Wide Web. The current 
-version of the HTML standard offer a lot of new features including detailed 
-processing models to support more interoperable implementations. It extends 
-and improves HTML markups available. HTML5 introduces application 
-programming interfaces (APIs) for more complex web applications. For same 
-reasons, the new HTMLstandard is also a good choice for modern cross-platform 
+J1 is using HTML5 for structuring content on the World Wide Web. The current
+version of the HTML standard offer a lot of new features including detailed
+processing models to support more interoperable implementations. It extends
+and improves HTML markups available. HTML5 introduces application
+programming interfaces (APIs) for more complex web applications. For same
+reasons, the new HTMLstandard is also a good choice for modern cross-platform
 mobile applications, because it includes features designed with mobile devices
 in mind.
 
-Many new features are included with HTML5. To natively support multimedia and 
-graphical content, the new `<video>`, `<audio>` and `<canvas>` elements were 
+Many new features are included with HTML5. To natively support multimedia and
+graphical content, the new `<video>`, `<audio>` and `<canvas>` elements were
 added. Beside this, support for scalable vector graphics (SVG) and an API
 called MathML for mathematical formulas are now available.
 
 The new standard allows to use so-called *semantic* markup elements for your
-documents. New structure elements such as `<main>`, `<section>`, `<article>`, 
-`<header>` or `<footer>` (and many more) were added. Better structured HTML 
+documents. New structure elements such as `<main>`, `<section>`, `<article>`,
+`<header>` or `<footer>` (and many more) were added. Better structured HTML
 code can help people having disabilities to read the pages presented better.
 
-CSS is designed to enable the separation of presentation and content. 
-Including layout, colors and fonts for example. This separation improves 
-content accessibility, provide more flexibility and control in the 
+CSS is designed to enable the separation of presentation and content.
+Including layout, colors and fonts for example. This separation improves
+content accessibility, provide more flexibility and control in the
 presentation.
 
 Separation of formatting and content also makes it feasible to present the
-same page in different styles. For example, the themes feature of J1 Template 
+same page in different styles. For example, the themes feature of J1 Template
 make use of this.
 
 CSS3 is divided into several separate components called *modules*. Each module
-adds new capabilities or extends features defined in the former CSS2 standard. 
+adds new capabilities or extends features defined in the former CSS2 standard.
 HTML5 in combination with CSS3 allows to create modern and modular code for web
 pages that can be viewed on all current devices like Mobiles, Tablets or the
 classic Desktop PC. The new HTML5 elements plus CSS3 modules can be used as a
-replacement for *proprietary solutions* like Adobe Flash to build modern 
+replacement for *proprietary solutions* like Adobe Flash to build modern
 webpages based on *open standards*.
 
 === Javascript
@@ -97,8 +105,8 @@ HTML5 and CSS3 can do a lot. Content placement and basic methods for the
 dynamic of elements can be done using pure HTML5 and CSS3. For more
 complex solutions like modules the support of Javascript is needed.
 
-J1 Template has build-in a wide range of JS powered modules to support a 
-website for e.g. the navigation, for presenting image data in galeries, 
+J1 Template has build-in a wide range of JS powered modules to support a
+website for e.g. the navigation, for presenting image data in galeries,
 lightboxes and so on.
 
 
@@ -106,53 +114,51 @@ lightboxes and so on.
 == Start in No Time
 
 The base idea of J1 Template is to give all people a tool set at their hands
-to create a website with no need to start by web development or web design 
-from the beginning. A website based on J1 is using build-in templates and 
-engines. As a result, the process to generate HTML code from your content 
-is done automatically and allows you to concentrate on what truly matters: 
+to create a website with no need to start by web development or web design
+from the beginning. A website based on J1 is using build-in templates and
+engines. As a result, the process to generate HTML code from your content
+is done automatically and allows you to concentrate on what truly matters:
 your content.
 
-Using J1, you can instantly start a web project by creating your content 
+Using J1, you can instantly start a web project by creating your content
 and not by start learning the the deep of web development technologies.
 
 === Create your Web
 
-J1 is highly customizeable. Based on a pure configuration, a website can be 
+J1 is highly customizeable. Based on a pure configuration, a website can be
 created. The template system creates static web pages using Jekyll as
-the base HTML code generator. Static website are fast and secure but simple 
+the base HTML code generator. Static website are fast and secure but simple
 to manage. No complex database systems and PHP interfaces are needed.
 
-To present a static website, only a web server environment is needed. To 
-publish a website on the Internet, many possible platforms can be used like 
+To present a static website, only a web server environment is needed. To
+publish a website on the Internet, many possible platforms can be used like
 Github, Netlify or Heroku for example - for free!
 
 The Internet is not a peaceful place. Every site accessible from the public is
-attacked from the first second if published. Static websites are robust, fast 
-and that's import: intrinsicly secure. That means: *not* changeable. No 
-offender attacking your website is able to break your site. Because it's 
+attacked from the first second if published. Static websites are robust, fast
+and that's import: intrinsicly secure. That means: *not* changeable. No
+offender attacking your website is able to break your site. Because it's
 static or in other words: unchangeable, unbreakable from it's natur.
 
 This makes a static website for the better.
 
 === Modules and Apps
 
-It's predictable what base components are needed for a modern website. For 
-Content Management Systems (CMS) like Wordpress, Joomla or Drupal a huge 
-number of modules are available to extend a site by e.g. Apps like image 
+It's predictable what base components are needed for a modern website. For
+Content Management Systems (CMS) like Wordpress, Joomla or Drupal a huge
+number of modules are available to extend a site by e.g. Apps like image
 galleries, video players, calendars etc.
 
 This is a bit different for static webs as they don't have a central
 Management System as CMS do to integrate external code. There no ecosystem,
-no marketplace to get apps and modules from. 
+no marketplace to get apps and modules from.
 
-Luckily, it is not that hard to integrate external components into the world 
-of Jekyll. But one of the objectives of J1 is to give people a ready-to-use 
-toolset without the need to install, to integrate components that expected 
+Luckily, it is not that hard to integrate external components into the world
+of Jekyll. But one of the objectives of J1 is to give people a ready-to-use
+toolset without the need to install, to integrate components that expected
 as a need.
 
-A rich set of modules are already included. The modules support common use 
-cases of a website like a flexible navigation system, a local search, 
-lightboxes to present pictures and videos, little helpers for scrolling or 
+A rich set of modules are already included. The modules support common use
+cases of a website like a flexible navigation system, a local search,
+lightboxes to present pictures and videos, little helpers for scrolling or
 to automatically create TOCs (table of contents) for a page.
-
-

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/100_absolute_sizes.asciidoc

@@ -1,6 +1,6 @@
 
 .Fixed (absolute) sizes
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/110_bs_grid_sizes.asciidoc

@@ -1,6 +1,6 @@
 
 .Bootstrap (BS) grid sizes
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/120_relative_sizes.asciidoc

@@ -1,6 +1,6 @@
 
 .Relative sizes
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,^2m,8a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 
@@ -44,44 +44,4 @@
 <i class="mdi mdi-5x mdi-account"></i>
 ----
 
-|`mdi-6x`
-^|pass:[<i class="mdi mdi-6x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-6x mdi-account"></i>
-----
-
-|`mdi-7x`
-^|pass:[<i class="mdi mdi-7x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-7x mdi-account"></i>
-----
-
-|`mdi-8x`
-^|pass:[<i class="mdi mdi-8x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-1x mdi-account"></i>
-----
-
-|`mdi-9x`
-^|pass:[<i class="mdi mdi-9x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-9x mdi-account"></i>
-----
-
-|`mdi-10x`
-^|pass:[<i class="mdi mdi-10x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-10x mdi-account"></i>
-----
-
 |===============================================================================

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/200_rotate.asciidoc

@@ -1,6 +1,6 @@
 
 .Rotate icons
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/300_flip.asciidoc

@@ -1,6 +1,6 @@
 
 .Flip icons
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/400_spin_pulsed.asciidoc

@@ -1,6 +1,6 @@
 
 .Animate icons
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/500_bw_color_palette.asciidoc

@@ -1,6 +1,6 @@
 
 .Black and White color palette
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/510_bs_color_palette.asciidoc

@@ -1,6 +1,6 @@
 
 .Bootstrap (BS) color palette
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/600_md_color_palette.asciidoc

@@ -1,6 +1,6 @@
 
 .Material Design (MD) color palette
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/601_md_color_palette_indigo.asciidoc

@@ -1,6 +1,6 @@
 
 .MD colors - Indigo
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/602_md_color_palette_pink.asciidoc

@@ -1,6 +1,6 @@
 
 .MD colors - Pink
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/100_bs_sizes.asciidoc

@@ -1,6 +1,6 @@
 
 .Bootstrap (BS) grid sizes
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code