j1-template 2020.0.9 → 2020.0.14

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

@@ -10,14 +10,14 @@ categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/asciidoc_extensions/
 regenerate:                             false
 
-resources:                              [ lightbox ]
+resources:                              [ lightbox, iconify, twemoji ]
 resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/puzzle-1920x1280-bw.jpg
+        - url:                          /assets/images/pages/roundtrip/puzzle-1920x1280-bw.webp
           alt:                          puzzle-1920x1280-bw
 #         badge:
 #           type:                       unsplash
@@ -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/410_bs_modals_extentions.adoc

@@ -19,7 +19,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.jpg
+        - url:                          /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.webp
           alt:                          bootstrap
 ---
 
@@ -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

@@ -20,7 +20,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.7
       slides:
-        - url:                          /assets/images/pages/roundtrip/tables-1920x1280-bw.jpg
+        - url:                          /assets/images/pages/roundtrip/tables-1920x1280-bw.webp
           alt:                          Photo by Markus Spiske on Unsplash
           badge:
             type:                       unsplash
@@ -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 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 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!

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

@@ -17,7 +17,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
+        - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.webp
           alt:                          Photo by Clem Onojeghuo on Unsplash
           badge:
             type:                       unsplash
@@ -72,26 +72,26 @@ 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 
+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 
+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. 
+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 
+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 
+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 
+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 
+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.
@@ -99,22 +99,22 @@ 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 
+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. 
+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, 
+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. 
+*not* all of them for now.
 
-Simply select a theme from this menu and a new BS-based stylesheet is 
+Simply select a theme from this menu and a new BS-based stylesheet is
 automatically applied to your pages.
 
 Have fun!
@@ -130,9 +130,7 @@ 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* 
+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].
-
-

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

@@ -0,0 +1,69 @@
+// ~/document_base_folder/000_includes
+//  Asciidoc attribute includes:                 attributes.asciidoc
+// -----------------------------------------------------------------------------
+
+
+// URLs - Internal references and/or sources on the Internet
+// -----------------------------------------------------------------------------
+tag::urls[]
+
+:bootstrap-home:                                  https://getbootstrap.com/
+:bs_doc_components_modal:                         https://getbootstrap.com/docs/4.3/components/modal/
+
+:bootswatch-home:                                 https://bootswatch.com/
+:bootswatch-api:                                  https://bootswatch.com/help/#api
+
+:mdb-home:                                        https://mdbootstrap.com/
+:mdb-bs-modals:                                   https://mdbootstrap.com/docs/jquery/modals/basic/
+:mdb-bs-modals-legacy:                            https://mdbootstrap.com/legacy/4.3.2/?page=javascript/modals
+
+end::urls[]
+
+// Tags - Asciidoc attributes used internally
+// -----------------------------------------------------------------------------
+tag::tags[]
+
+:window:                                          window="blank"
+:no-clipboard:                                    noclip
+:figure-caption:                                  Figure
+:images-dir:                                      pages/roundtrip
+:y:                                               icon:check[role="green"]
+:n:                                               icon:times[role="red"]
+:c:                                               icon:file-alt[role="blue"]
+:beginner:                                        icon:battery-quarter[role="md-blue"]
+:inter:                                           icon:battery-half[role="md-blue"]
+:advanced:                                        icon:battery-full[role="md-blue"]
+:emdash:                                          —
+:bullet:                                          •
+:bigbullet:                                       ●
+:bigbigbullet:                                    ⬤
+:dot:                                             .
+:dotdot:                                          ..
+:middot:                                          ·
+
+end::tags[]
+
+// Data - Data elements for Asciidoctor extensions
+// -----------------------------------------------------------------------------
+tag::data[]
+
+:data-images-standalone:                          "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+:data-images-group:                               "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+
+end::data[]
+
+
+// Product - Document (e.g release) information
+// -----------------------------------------------------------------------------
+tag::product_info[]
+:license:                                         MIT License
+:revdate:                                         2020
+:revnumber:                                       2020.1.0
+end::product_info[]
+
+
+// Author - Author information
+// -----------------------------------------------------------------------------
+tag::authors[]
+:uri-author-juergen-adams:                        https://jekyll.one
+end::authors[]

data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/000_includes/documents/100_buttons.asciidoc

@@ -0,0 +1,170 @@
+## Buttons
+
+See: https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/material-design/buttons/[MD Buttons, window="_blank"]
+
+Buttons communicate the action that will occur when the user touches them.
+
+### Flat buttons
+
+Flat buttons are text-only buttons. They may be used in dialogs, toolbars,
+or inline. They do not lift, but fill with color on press.
+
+Outline buttons, i.e. `.btn-outline-*`, are the equivalent of Material flat
+buttons. For more details, please refer to Components/Buttons documentation.
+
+++++
+<div class="doc-example">
+  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-success">Success</button>
+  <button type="button" class="btn btn-info">Info</button>
+  <button type="button" class="btn btn-warning">Warning</button>
+  <button type="button" class="btn btn-danger">Danger</button>
+  <button type="button" class="btn btn-link">Link</button>
+</div>
+++++
+
+[source, html]
+----
+  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-success">Success</button>
+  <button type="button" class="btn btn-info">Info</button>
+  <button type="button" class="btn btn-warning">Warning</button>
+  <button type="button" class="btn btn-danger">Danger</button>
+  <button type="button" class="btn btn-link">Link</button>
+----
+
+### Raised buttons
+
+Raised buttons are rectangular-shaped buttons. They may be used inline. They
+lift and display ink reactions on press.
+
+Default buttons, i.e. `.btn`, are the equivalent of Material raised buttons.
+For more details, please refer to Components/Buttons documentation.
+
+++++
+<div class="doc-example">
+  <button type="button" class="btn btn-raised btn-primary">Primary</button>
+  <button type="button" class="btn btn-raised btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-raised btn-success">Success</button>
+  <button type="button" class="btn btn-raised btn-info">Info</button>
+  <button type="button" class="btn btn-raised btn-warning">Warning</button>
+  <button type="button" class="btn btn-raised btn-danger">Danger</button>
+  <button type="button" class="btn btn-raised btn-link">Link</button>
+</div>
+++++
+
+[source, html]
+----
+  <button type="button" class="btn btn-raised btn-primary">Primary</button>
+  <button type="button" class="btn btn-raised btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-raised btn-success">Success</button>
+  <button type="button" class="btn btn-raised btn-info">Info</button>
+  <button type="button" class="btn btn-raised btn-warning">Warning</button>
+  <button type="button" class="btn btn-raised btn-danger">Danger</button>
+  <button type="button" class="btn btn-raised btn-link">Link</button>
+----
+
+### Floating action buttons
+
+A floating action button represents the primary action in an application,
+it is used for a promoted action.
+
+++++
+<div class="doc-example">
+  <button type="button" class="btn bmd-btn-fab">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+</div>
+++++
+
+[source, html]
+----
+  <button type="button" class="btn bmd-btn-fab">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+----
+
+#### Colors
+
+++++
+<div class="doc-example">
+  <button type="button" class="btn bmd-btn-fab btn-primary my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-secondary my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-danger my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-info my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-success my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-warning my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-dark my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-light my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+</div>
+++++
+
+[source, html]
+----
+  <button type="button" class="btn bmd-btn-fab btn-primary my-1">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-secondary my-2">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  ...
+  <button type="button" class="btn bmd-btn-fab btn-dark my-7">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-light my-8">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+----
+
+#### Sizes
+
+A smaller sized, i.e. mini floating action button, is also available.
+
+++++
+<div class="doc-example">
+  <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm">
+    <i class="mdi mdi-plus mdi-sm"></i>
+  </button>
+</div>
+++++
+
+[source, html]
+----
+  <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm">
+    <i class="mdi mdi-plus mdi-sm"></i>
+  </button>
+----
+
+## Recommended button placement
+
+Cards::
+  Buttons are best placed on the left side of a card to increase their
+  visibility. However, as cards have flexible layouts, buttons may be
+  placed in a location suited to the content and context, while
+  maintaining consistency within the product.
+
+Forms::
+  Button alignment on screen: Left. Place the affirmative button on the
+  left, the dismissive button on the right.
+
+Standard dialogs::
+  Button alignment on screen: right. Place the affirmative button on the
+  right, the dismissive button on the left.