RubyGems - j1-template - Versions diffs - 2020.0.11 → 2020.0.16 - Mend

j1-template 2020.0.11 → 2020.0.16

Files changed (412) hide show

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/attributes.asciidoc CHANGED

@@ -89,7 +89,7 @@ tag::tags[]
 :dotdot:                                          &#46;&#46;
 :middot:                                          &middot;
-end::tags[]
+end::tags[]
 // Data - Data elements for Asciidoctor extensions
 // -----------------------------------------------------------------------------

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/419_advanced_modals_html.asciidoc CHANGED

@@ -128,7 +128,7 @@
     <div class="modal-content">
       <!-- Body -->
       <div class="modal-body">
-        <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">
+        <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">
           <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
           <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
         </div>
@@ -184,7 +184,7 @@
       </div>
       <!-- Body -->
       <div class="modal-body">
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap" class="img-fluid">
         <div class="text-center">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
         </div>
@@ -409,7 +409,7 @@
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
           </p>
         </div>
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap" class="img-fluid">
       </div>
       <!-- Footer -->
       <div class="modal-footer">
@@ -724,7 +724,7 @@
       </div>
       <!-- Body -->
       <div class="modal-body">
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap" class="img-fluid">
         <div class="text-center">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
         </div>
@@ -925,4 +925,4 @@
   </div>
 </div>
 <!--END Modal Subscription -->
-++++
+++++

data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc CHANGED

@@ -11,10 +11,10 @@ toc:                                    true
 scrollbar:                              false
 permalink:                              /pages/public/learn/roundtrip/present_images/
-regenerate:                             false
+regenerate:                             true
 resources:                              [
-                                          bs_tour, carousel, lightbox,
+                                          carousel, lightbox,
                                           justified_gallery, light_gallery
                                         ]
 resource_options:

data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc CHANGED

@@ -26,7 +26,7 @@ resource_options:
         color_2:                        md_grey_400
       slides:
         # Broadway Underground - still image (animate default)
-        - url:                          /assets/videos/headers/still/underground-broadway.png
+        - url:                          /assets/videos/headers/still/underground-broadway.jpg
           alt:                          Broadway Underground
           alignY:                       top
           animateFirst:                 false
@@ -37,7 +37,7 @@ resource_options:
           loop:                         false
           duration:                     12000
         # Broadway Underground - still image (animate random)
-        - url:                          /assets/videos/headers/still/underground-broadway.png
+        - url:                          /assets/videos/headers/still/underground-broadway.jpg
           alt:                          Broadway Underground
           alignY:                       top
           transition:                   push_left|push_right|cover_up|cover_down|fade|fadeInOut

data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc CHANGED

@@ -8,9 +8,10 @@ index:                                  [ Template, Roundtrip, Typography ]
 categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/typography/
-regenerate:                             false
+regenerate:                             true
 toc:                                    true
+advertising:                            false
 resources:                              []
 resource_options:
@@ -23,6 +24,9 @@ resource_options:
       slides:
         - url:                          /assets/images/pages/roundtrip/typography-1920x1280-bw.jpg
           alt:                          Photo by Alice Donovan Rousel on Unsplash
+          preload:                      0
+          transitionDuration:           fast
+          resolutionRefreshRate:        500
           badge:
             type:                       unsplash
             author:                     Alice Donovan Rousel
@@ -86,7 +90,7 @@ will happen in terms of responsiveness.
 ++++
 <div>
-  <button type="button" name="toggle-r-text" class="btn btn-secondary btn-raised btn-flex mt-3 mb-3">
+  <button type="button" name="toggle-r-text" class="btn btn-info btn-raised btn-flex mt-3 mb-3">
     <i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
     Toggle rtext
   </button>
@@ -142,7 +146,7 @@ of the text in action.
 ++++
 <div>
-  <button type="button" name="scale-r-text" class="btn btn-secondary btn-raised btn-flex mt-3 mb-3">
+  <button type="button" name="scale-r-text" class="btn btn-info btn-raised btn-flex mt-3 mb-3">
     <i class="scale-button mdi mdi-arrow-up mdi-lg mdi-md-bg-primary-50 mr-1"></i>
     Scale rtext
   </button>

data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc CHANGED

@@ -10,7 +10,7 @@ categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/mdi_icon_font/
 regenerate:                             false
-resources:                              []
+resources:                              [ iconify ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -50,7 +50,7 @@ include::{includedir}/attributes.asciidoc[tag=data]
 // Set local page attributes
 // -----------------------------------------------------------------------------
-// :images-dir:                         {imagesdir}/path/to/page/images
+// :images-dir:                         {imagesdir}/path/to/page/images
 // Page content
@@ -89,7 +89,7 @@ project to create an increased icon-set based on _Google_'s official repository
 and MD style specification.
 .Material Design Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
@@ -100,7 +100,7 @@ and MD style specification.
 ----
 mdi:account[1x]
 ----
-^|mdi:account[1x]
+|mdi:account[1x]
 |3x
 |no modifier set
@@ -109,7 +109,7 @@ mdi:account[1x]
 ----
 mdi:account[3x]
 ----
-^|mdi:account[3x]
+|mdi:account[3x]
 |5x
 |no modifier set
@@ -118,7 +118,7 @@ mdi:account[3x]
 ----
 mdi:account[5x]
 ----
-^|mdi:account[5x]
+|mdi:account[5x]
 |5x
 |`mdi-rotate-45`
@@ -127,7 +127,7 @@ mdi:account[5x]
 ----
 mdi:account[5x mdi-rotate-45]
 ----
-^|mdi:account[5x mdi-rotate-45]
+|mdi:account[5x mdi-rotate-45]
 |5x
 |`mdi-rotate-315`
@@ -136,7 +136,7 @@ mdi:account[5x mdi-rotate-45]
 ----
 mdi:account[5x mdi-rotate-315]
 ----
-^|mdi:account[5x mdi-rotate-315]
+|mdi:account[5x mdi-rotate-315]
 |5x
 |`mdi-light` +
@@ -146,7 +146,7 @@ mdi:account[5x mdi-rotate-315]
 ----
 mdi:alert[5x mdi-light mdi-flip-v]
 ----
-^|mdi:alert[5x mdi-light mdi-flip-v]
+|mdi:alert[5x mdi-light mdi-flip-v]
 |5x
 |`md-indigo`
@@ -155,7 +155,7 @@ mdi:alert[5x mdi-light mdi-flip-v]
 ----
 mdi:alert[5x md-indigo]
 ----
-^|mdi:account[5x md-indigo]
+|mdi:account[5x md-indigo]
 |5x
 |`md-pink`
@@ -164,7 +164,7 @@ mdi:alert[5x md-indigo]
 ----
 mdi:alert[5x md-pink]
 ----
-^|mdi:account[5x md-pink]
+|mdi:account[5x md-pink]
 |5x
 |`mdi-spin`
@@ -173,7 +173,7 @@ mdi:alert[5x md-pink]
 ----
 mdi:loading[5x mdi-spin]
 ----
-^|mdi:loading[5x mdi-spin]
+|mdi:loading[5x mdi-spin]
 |5x
 |`md-red-900` +
@@ -183,7 +183,7 @@ mdi:loading[5x mdi-spin]
 ----
 mdi:heart[5x md-red-900 mdi-pulsed]
 ----
-^|mdi:heart[5x md-red-900 mdi-pulsed]
+|mdi:heart[5x md-red-900 mdi-pulsed]
 |===============================================================================
@@ -223,7 +223,7 @@ and the MIT License.
 ====
 .FontAwesome Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
@@ -234,7 +234,7 @@ and the MIT License.
 ----
 fas:user[1x]
 ----
-^|fas:user[1x mt-4]
+^|fas:user[1x]
 |3x
 |no modifier set
@@ -243,7 +243,7 @@ fas:user[1x]
 ----
 fas:user[3x]
 ----
-^|fas:user[3x mt-4]
+^|fas:user[3x]
 |5x
 |no modifier set
@@ -252,25 +252,16 @@ fas:user[3x]
 ----
 fas:user[5x]
 ----
-^|fas:user[5x mt-4]
+^|fas:user[5x]
 |5x
-|`fa-rotate-45`
-|Rotate 45 degrees
-[source, adoc, role="noclip"]
-----
-fas:user[5x fa-rotate-45]
-----
-^|fas:user[5x fa-rotate-45 mt-4]
-|5x
-|`fa-rotate-315`
-|Rotate 315 degrees
+|`fa-rotate-90`
+|Rotate 90 degrees
 [source, adoc, role="noclip"]
 ----
-fas:user[5x fa-rotate-315]
+fas:user[5x fa-rotate-90]
 ----
-^|fas:user[5x fa-rotate-315 mt-4]
+^|fas:user[5x fa-rotate-90]
 |5x
 |`mdi-light` +
@@ -280,7 +271,7 @@ fas:user[5x fa-rotate-315]
 ----
 fas:exclamation-triangle[5x mdi-light fa-flip-v]
 ----
-^|fas:exclamation-triangle[5x mdi-light fa-flip-v mt-4]
+^|fas:exclamation-triangle[5x mdi-light fa-flip-v]
 |5x
 |`md-indigo`
@@ -289,7 +280,7 @@ fas:exclamation-triangle[5x mdi-light fa-flip-v]
 ----
 fas:alert[5x md-indigo]
 ----
-^|fas:user[5x md-indigo mt-4]
+^|fas:user[5x md-indigo]
 |5x
 |`md-pink`
@@ -298,7 +289,7 @@ fas:alert[5x md-indigo]
 ----
 fas:alert[5x md-pink]
 ----
-^|fas:user[5x md-pink mt-4]
+^|fas:user[5x md-pink]
 |5x
 |`fa-spin`
@@ -307,17 +298,17 @@ fas:alert[5x md-pink]
 ----
 fas:circle-notch[5x fa-spin]
 ----
-^|fas:circle-notch[5x fa-spin mt-4]
+^|fas:circle-notch[5x fa-spin]
 |5x
 |`md-red-900` +
-`fa-pulsed`
+`md-red-900` `fa-pulsed`
 |Color set to MDI Dark Red and added animation of type Pulsed
 [source, adoc, role="noclip"]
 ----
 fas:heart[5x md-red-900 fa-pulsed]
 ----
-^|fas:heart[5x md-red-900 fa-pulsed mt-4]
+^|fas:heart[5x md-red-900 fa-pulsed]
 |===============================================================================
@@ -366,20 +357,20 @@ Currently, over 40,000 vector icons are available for many different use cases.
 Find some examples below.
 .Brand Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
-|5x
+|3x
 |no modifier set
 |All `icons` can be found on the preview page at link:{iconify-brand-icons}[SVG Logos, {window}]
 [source, adoc, role="noclip"]
 ----
-iconify:logos:opensource[5x]
+iconify:logos:opensource[3x]
 ----
-^|iconify:logos:opensource[5x]
+^|iconify:logos:opensource[3x]
-|3x
+|5x
 |no modifier set
 |All `icons` can be found on the preview page at link:{iconify-brand-icons}[SVG Logos, {window}]
 [source, adoc, role="noclip"]
@@ -391,7 +382,7 @@ iconify:logos:atom[5x]
 |===============================================================================
 .Medical Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
@@ -405,13 +396,13 @@ iconify:medical-icon:i-ear-nose-throat[3x]
 ^|iconify:medical-icon:i-ear-nose-throat[3x]
 |5x
-|no modifier set
+|`md-red-900`
 |All `icons` can be found on the preview page at link:{iconify-medical-icons}[Medical Icons, {window}]
 [source, adoc, role="noclip"]
 ----
-iconify:medical-icon:i-ear-nose-throat[5x]
+iconify:medical-icon:i-ear-nose-throat[5x md-red-900]
 ----
-^|iconify:medical-icon:i-ear-nose-throat[5x]
+^|iconify:medical-icon:i-ear-nose-throat[5x md-red-900]
 |===============================================================================

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

@@ -10,7 +10,7 @@ categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/asciidoc_extensions/
 regenerate:                             false
-resources:                              [ lightbox ]
+resources:                              [ lightbox, iconify, twemoji ]
 resource_options:
   - attic:
       padding_top:                      400

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

@@ -57,27 +57,27 @@ include::{includedir}/attributes.asciidoc[tag=data]
 // Include sub-documents
 // -----------------------------------------------------------------------------
-Advanced Bootstrap Modals are based on the free package of
-link:{mdb-home}[Material Design for Bootstrap, {window}] on version
+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
+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
+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
+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
+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
+NOTE: For more information on how to use Bootstrap’s JavaScript modal
 plugin, refer to: link:{bs_doc_components_modal}[Bootstrap Docs, {window}].
@@ -125,4 +125,3 @@ what the link:{roundtrip-responsive-tables}[BS tables extensions] can do!
 // -------------------------------------------------------------------
 include::{documentsdir}/419_advanced_modals_html.asciidoc[]

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

@@ -64,7 +64,7 @@ include::{includedir}/attributes.asciidoc[tag=data]
 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
+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
@@ -74,40 +74,40 @@ 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-stacked-lg mt-3"]
+[cols="2a,4a,6a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Type |Style |Description
 |Bootstrap
-|`table-responsive-stacked-lg`
-|The adding the class `table-responsive-stacked-lg`, it creates a responsive table based
+|`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-stacked-lg` is to applied. For specific (Bootstrap) breakpoints, the
-classes `table-responsive-stacked-lg{-sm\|-md\|-lg\|-xl}` are available to have better
+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
 |`r-text-xxx`
-|R tables are used by J1 Template for *default*. Those tables are using the
+|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`.
+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),
+|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
+|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`
@@ -115,37 +115,37 @@ at *768px* what is the same as `table-responsive-stacked-lg-stacked-md`
 [TIP]
 ====
-The styles for responsive tables takes effect for *default* if the viewport
+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
+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
+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
+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
+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-stacked-lg-lg no-r-text mt-3"]
+[cols="6a,6a", options="header", width="100%", role="table-responsive no-r-text mt-3"]
 |===============================================================================
 |Variable |Description
-|`page.content`
+|`page.content`
 |The content of the Page, rendered or un-rendered
 depending upon what Liquid is being processed and what `page` is.
@@ -163,11 +163,11 @@ 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-stacked-lg-lg mt-3"]
+[cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
 |===============================================================================
 |Variable |Description
-|`page.content`
+|`page.content`
 |The content of the Page, rendered or un-rendered
 depending upon what Liquid is being processed and what `page` is.
@@ -184,11 +184,11 @@ 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-stacked-lg mt-3"]
+[cols="6a,6a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Variable |Description
-|`page.content`
+|`page.content`
 |The content of the Page, rendered or un-rendered
 depending upon what Liquid is being processed and what `page` is.
@@ -207,20 +207,20 @@ Post's front matter by specifying a new date/time in the format
 == 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-stacked-lg` is used. For specific (Bootstrap)
+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.
-From a specified breakpoint and up, the table will behave normally and do
+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
+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-stacked-lg-lg mt-3"]
+[cols="2,2,2,3,3", options="header", width="100%", role="no-r-text table-responsive-stacked-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-stacked-lg mt-3"]
+[cols="2,2,2,3,3", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Parameter |Type |Default |Description |Example
@@ -274,8 +274,8 @@ 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
+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]
+Check out what themes can do. Have a look at link:{roundtrip-themes}[BS themes]
 feature!