RubyGems - j1-template - Versions diffs - 2020.0.7 → 2020.0.12 - Mend

j1-template 2020.0.7 → 2020.0.12

Files changed (341) hide show

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/000_includes/parts.asciidoc CHANGED

@@ -61,7 +61,7 @@ Find here is a list of the basic Chocolatey commands used this section.
 And some more related ones. If you'd like to explore the Chocolatey CLI a bit
 *more*, give it a try before moving on.
-[cols="8a,4", options="header", role="table-responsive, full-width"]
+[cols="8a,4", options="header", role="table-responsive-stacked-lg, full-width"]
 |===============================================================================
 |Command |Description

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/100_meet_and_greet_jekyll.adoc CHANGED

@@ -1,7 +1,12 @@
 ---
-title:                                  Web in a Day
+title:                                  Web in a Day
 tagline:                                meet & greet jekyll
-description:                            Modern static website in a day
+description: >
+                                        Web in a Day is the first in a series of tutorials to
+                                        learn how to create modern websites using Jekyll. This
+                                        Kickstarter focus on the basics of Jekyll and the
+                                        J1 Template which all people needs to know for a successful
+                                        way to a modern static website using Jekyll and J1 Template
 tags:                                   [ Kickstarter ]
 index:                                  [ Introduction, Web, Website, Jekyll ]
@@ -15,7 +20,7 @@ resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5
+      opacity:                          0.5
       slides:
         - url:                          /assets/images/pages/kickstarter/web_in_a_day/get-started-1920x1280-bw.jpg
           alt:                          Photo by JESHOOTS.COM on Unsplash
@@ -26,7 +31,7 @@ resource_options:
             href:                       https://unsplash.com/@jeshoots/portfolio
 ---
-// Enable the Liquid Preprocessor
+// Enable the Liquid Preprocessor
 // -----------------------------------------------------------------------------
 :page-liquid:

data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour_api.adoc CHANGED

@@ -116,7 +116,7 @@ var tour = Tour({
 });
 ----
-[cols="1,1,3a,7a", options="header", width="100%", role="table-responsive"]
+[cols="1,1,3a,7a", options="header", width="100%", role="table-responsive-stacked-lg"]
 |===============================================================================
 |Name |Type |Default |Description
@@ -381,7 +381,7 @@ tour.addStep({
 // |Name |Type |Description |Default
-[cols="1,1,3a,7a", options="header", width="100%", role="table-responsive"]
+[cols="1,1,3a,7a", options="header", width="100%", role="table-responsive-stacked-lg"]
 |===============================================================================
 |Name |Type |Default |Description

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

@@ -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/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/200_typography.adoc CHANGED

@@ -8,10 +8,15 @@ index:                                  [ Template, Roundtrip, Typography ]
 categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/typography/
-regenerate:                             false
+regenerate:                             true
+toc:                                    true
+advertising:                            false
 resources:                              []
 resource_options:
+# - ssm:
+#     mode:                             menu
   - attic:
       padding_top:                      400
       padding_bottom:                   50
@@ -190,7 +195,7 @@ base.
 That way, five series are available by the five scale factors. See the following
 table how `r-text` scales.
-[cols="3,2,7a", options="header", role="table-responsive mb-5"]
+[cols="3,2,7a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Property | Factor |Example text
@@ -283,7 +288,7 @@ The design for the Bootstrap *nav pills* were change into MD Design. As all
 elements available with J1 Template, the _Meterial Design_ color palette is
 used. All Bootstrap base classes can be used to colorize:
-[cols="5,7a", options="header", role="table-responsive mb-5"]
+[cols="5,7a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Property | Example

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_api ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -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="rtable_v table-responsive 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="rtable_v table-responsive 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="rtable_v table-responsive 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="rtable_v table-responsive 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

@@ -453,7 +453,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 mb-2"]
+[cols="5,2,5a", options="header", role="table-responsive-stacked-lg mb-2"]
 |===============================================================================
 |Macro | Type |Example

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
@@ -82,70 +82,70 @@ tables are implemented:
 |`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
+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` (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`
-|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`
+|`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`
 |===============================================================================
 [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
-table approach (`table-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-lg no-r-text mt-3"]
+[cols="6a,6a", options="header", width="100%", role="table-responsive-stacked-lg 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-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.
@@ -188,7 +188,7 @@ Post's front matter by specifying a new date/time in the format
 |===============================================================================
 |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` 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
+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
 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-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
@@ -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!