#4186 - Responsive page layouts

inc/js/classes/BxDolPage.js

@@ -25,7 +25,7 @@ function BxDolPage(oOptions) {
 BxDolPage.prototype.init = function() {
     var $this = this;
     if ($this._isStickyColumns && !$('html').hasClass('bx-media-phone')) {
-        $('.bx-layout-col').addClass('sticky top-4');
+        $('.bx-layout-cell').addClass('sticky top-4');
     }
     // process embeds
     $(".bx-embed-link").each(function() {

modules/boonex/artificer/data/template/system/css/default.less

@@ -8,6 +8,7 @@
 
 .bx-def-page-width {
     max-width: @bx-page-width;
+    width: 100%;
 }
 
 /*--- Fonts ---*/

plugins_public/tailwind/css/tailwind.css

@@ -504,8 +504,20 @@
     }
 
     /* Common elements: Pages. */
+    .bx-layout-wrapper{
+        @apply gap-4 lg:gap-6 xl:gap-8 flex flex-col;
+    }
+    .bx-layout-row{
+        @apply w-full flex relative flex-wrap md:flex-nowrap gap-4 lg:gap-6 xl:gap-8;
+    }
+    .bx-layout-col{
+        @apply max-w-full w-full;
+    }
+    .bx-layout-cell{
+        @apply flex flex-col gap-4 lg:gap-6 xl:gap-8;
+    }
     .bx-def-color-bg-page{
-	@apply bg-gray-100 dark:bg-gray-900;
+	    @apply bg-gray-100 dark:bg-gray-900;
     }
 
     /* Common elements: Blocks, Boxes, etc. */

template/_row_1_column.html

@@ -1,4 +1,4 @@
-    <div class="bx-layout-row bx-clearfix">
+    <div class="bx-layout-row">
         <div class="bx-layout-col bx-layout-1-column-column1 bx-layout-column-fullwidth">
             <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__

template/_row_1_column_half.html

@@ -1,4 +1,4 @@
-<div class="bx-layout-row bx-clearfix">
+<div class="bx-layout-row">
     <div class="bx-layout-col bx-layout-1-column-half-column1 bx-layout-column-half max-w-full md:w-1/2 mx-auto">
         <div class="bx-layout-cell" id="bx-layout-cell-1">
             __cell_1__

template/_row_1_column_thin.html

@@ -1,4 +1,4 @@
-<div class="bx-layout-row bx-clearfix">
+<div class="bx-layout-row">
     <div class="bx-layout-col bx-layout-1-column-thin-column1 bx-layout-column-thin max-w-full md:w-1/3 mx-auto">
         <div class="bx-layout-cell" id="bx-layout-cell-1">
             __cell_1__

template/css/default.less

@@ -2,6 +2,7 @@
 
 .bx-def-page-width {
     max-width:@bx-page-width;
+    width: 100%;
 }
 
 .bx-def-box-sizing {

template/designbox_container.html

@@ -1 +1 @@
-<div class="bx-page-block-container__class_add__ my-4 lg:my-6 first:mt-2 lg:first:mt-3 last:mb-2 lg:last:mb-3" <bx_if:show_html_id>id="__html_id__"</bx_if:show_html_id>>__content__</div>
+<div class="bx-page-block-container__class_add__ " <bx_if:show_html_id>id="__html_id__"</bx_if:show_html_id>>__content__</div>

template/layout_1_column_wiki.html

@@ -1,18 +1,18 @@
 <!-- layout 1 column with menu on left and contents on right [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-bcb">
-    <div class="bx-layout-row flex flex-col md:flex-row">
+    <div class="bx-layout-row">
         <div class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/4">
-            <div class="bx-layout-cell pr-2 lg:pr-3" id="bx-layout-cell-1">
+            <div class="bx-layout-cell" id="bx-layout-cell-1">
                 <bx_page:wiki-pages-list />
             </div>
         </div>
         <div class="bx-layout-col bx-layout-bcb-content bx-layout-column-half md:w-1/2 max-md:order-2 md:order-1">
-            <div class="bx-layout-cell px-2 lg:px-3" id="bx-layout-cell-2">
+            <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_1__
             </div>
         </div>
         <div class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin md:w-1/4 max-md:order-1 md:order-2">
-            <div class="bx-layout-cell pl-2 lg:pl-3" id="bx-layout-cell-3">
+            <div class="bx-layout-cell" id="bx-layout-cell-3">
                 <bx_page:wiki-page-contents />
             </div>
         </div>

template/layout_2_columns.html

@@ -1,16 +1,16 @@
 <!-- layout 2 columns [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-2-columns">
-    <div class="bx-layout-row flex">
-        <div class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half w-1/2">
-            <div class="bx-layout-cell pr-2 lg:pr-3" id="bx-layout-cell-1">
+    <div class="bx-layout-row">
+        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2" aria-label="Sidebar">
+            <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-2-columns-column2 bx-layout-column-half w-1/2">
-            <div class="bx-layout-cell pl-2 lg:pl-3" id="bx-layout-cell-2">
+        </aside>
+        <main class="bx-layout-col bx-layout-2-columns-column2 bx-layout-column-half md:w-1/2" aria-label="Main">
+            <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
-        </div>
+        </main>
     </div>
     <bx_include_auto:_row_1_column_dump.html />
 </div>

template/layout_3_columns.html

@@ -1,21 +1,23 @@
 <!-- layout 3 columns [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-3-columns">
-    <div class="bx-layout-row flex">
-        <div class="bx-layout-col bx-layout-3-columns-column1 bx-layout-column-thin w-1/3">
-            <div class="bx-layout-cell pr-2 lg:pr-3" id="bx-layout-cell-1">
+    <div class="bx-layout-row">
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/3 flex-auto md:flex-none" aria-label="Sidebar" >
+            <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-3-columns-column2 bx-layout-column-thin w-1/3">
-            <div class="bx-layout-cell px-2 lg:px-3" id="bx-layout-cell-2">
-                __cell_2__
-            </div>
-        </div>
-        <div class="bx-layout-col bx-layout-3-columns-column3 bx-layout-column-thin w-1/3">
-            <div class="bx-layout-cell pl-2 lg:pl-3" id="bx-layout-cell-3">
-                __cell_3__
-            </div>
-        </div>
+        </section>
+        <section aria-label="Content" class="max-w-full md:w-2/3 flex-1 flex flex-wrap lg:flex-nowrap gap-4 lg:gap-6 xl:gap-8">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-1/2" aria-label="Main">
+                <div class="bx-layout-cell" id="bx-layout-cell-2">
+                    __cell_2__
+                </div>
+            </main>
+            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin md:w-1/2" aria-label="Aside">
+                <div class="bx-layout-cell" id="bx-layout-cell-3">
+                    __cell_3__
+                </div>
+            </aside>
+        </section>
     </div>
     <bx_include_auto:_row_1_column_dump.html />
 </div>

template/layout_bar_content_bar.html

@@ -1,21 +1,23 @@
 <!-- layout bar content bar (bcb) [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-bcb">
-    <div class="bx-layout-row flex">
-        <div class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin w-1/4">
-            <div class="bx-layout-cell pr-2 lg:pr-3" id="bx-layout-cell-1">
+    <div class="bx-layout-row">
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/4 flex-auto md:flex-none" aria-label="Sidebar" >
+            <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-bcb-content bx-layout-column-half w-1/2">
-            <div class="bx-layout-cell px-2 lg:px-3" id="bx-layout-cell-2">
-                __cell_2__
-            </div>
-        </div>
-        <div class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin w-1/4">
-            <div class="bx-layout-cell pl-2 lg:pl-3" id="bx-layout-cell-3">
-                __cell_3__
-            </div>
-        </div>
+        </section>
+        <section aria-label="Content" class="max-w-full md:w-3/4 flex-1 flex flex-wrap lg:flex-nowrap gap-4 lg:gap-6 xl:gap-8">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-2/3" aria-label="Main">
+                <div class="bx-layout-cell" id="bx-layout-cell-2">
+                    __cell_2__
+                </div>
+            </main>
+            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin md:w-1/3" aria-label="Aside">
+                <div class="bx-layout-cell" id="bx-layout-cell-3">
+                    __cell_3__
+                </div>
+            </aside>
+        </section>
     </div>
     <bx_include_auto:_row_1_column_dump.html />
 </div>

template/layout_bar_left.html

@@ -1,16 +1,16 @@
 <!-- layout bar left [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-bar-left">
-    <div class="bx-layout-row flex flex-col md:flex-row">
-        <div class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin max-w-full md:w-1/3">
-            <div class="bx-layout-cell md:pr-2 lg:pr-3" id="bx-layout-cell-1">
+    <div class="bx-layout-row">
+        <aside class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3" aria-label="Sidebar">
+            <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-bar-left-content bx-layout-column-wide max-w-full md:w-2/3">
-            <div class="bx-layout-cell md:pl-2 lg:pl-3" id="bx-layout-cell-2">
+        </aside>
+        <main class="bx-layout-col bx-layout-bar-left-content bx-layout-column-wide md:w-2/3" aria-label="Main">
+            <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
-        </div>
+        </main>
     </div>
     <bx_include_auto:_row_1_column_dump.html />
 </div>

template/layout_bar_right.html

@@ -1,16 +1,16 @@
 <!-- layout bar right [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-bar-right">
-    <div class="bx-layout-row flex flex-col md:flex-row">
-        <div class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide max-w-full md:w-2/3">
-            <div class="bx-layout-cell md:pr-2 lg:pr-3" id="bx-layout-cell-1">
+    <div class="bx-layout-row">
+        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3" aria-label="Main">
+            <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-bar-right-bar bx-layout-column-thin max-w-full md:w-1/3">
-            <div class="bx-layout-cell md:pl-2 lg:pl-3" id="bx-layout-cell-2">
+        </main>
+        <aside class="bx-layout-col bx-layout-bar-right-bar bx-layout-column-thin md:w-1/3" aria-label="Aside">
+            <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
-        </div>
+        </aside>
     </div>
     <bx_include_auto:_row_1_column_dump.html />
 </div>

template/layout_bottom_area_2_columns.html

@@ -1,16 +1,16 @@
 <!-- layout top area 2 columns [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-bottom-area-2-columns">
-    <div class="bx-layout-row flex flex-col md:flex-row">
-        <div class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half max-w-full md:w-1/2">
-            <div class="bx-layout-cell md:pr-2 lg:pr-3" id="bx-layout-cell-2">
+    <div class="bx-layout-row">
+        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2" aria-label="Sidebar">
+            <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-2-columns-column2 bx-layout-column-half max-w-full md:w-1/2">
-            <div class="bx-layout-cell md:pl-2 lg:pl-3" id="bx-layout-cell-3">
+        </aside>
+        <main class="bx-layout-col bx-layout-2-columns-column2 bx-layout-column-half md:w-1/2" aria-label="Main">
+            <div class="bx-layout-cell" id="bx-layout-cell-3">
                 __cell_3__
             </div>
-        </div>
+        </main>
     </div>
     <bx_include_auto:_row_1_column.html />
     <bx_include_auto:_row_1_column_dump.html />

template/layout_top_area_2_columns.html

@@ -1,17 +1,17 @@
 <!-- layout top area 2 columns [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-2-columns">
     <bx_include_auto:_row_1_column.html />
-    <div class="bx-layout-row flex flex-col md:flex-row">
-        <div class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half max-w-full md:w-1/2">
-            <div class="bx-layout-cell md:pr-2 lg:pr-3" id="bx-layout-cell-2">
+    <div class="bx-layout-row">
+        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2" aria-label="Sidebar">
+            <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-2-columns-column2 bx-layout-column-half max-w-full md:w-1/2">
-            <div class="bx-layout-cell md:pl-2 lg:pl-3" id="bx-layout-cell-3">
+        </aside>
+        <main class="bx-layout-col bx-layout-2-columns-column2 bx-layout-column-half md:w-1/2" aria-label="Main">
+            <div class="bx-layout-cell" id="bx-layout-cell-3">
                 __cell_3__
             </div>
-        </div>
+        </main>
     </div>
     <bx_include_auto:_row_1_column_dump.html />
 </div>

template/layout_top_area_3_columns.html

@@ -1,22 +1,24 @@
 <!-- layout top area 3 columns [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-3-columns">
     <bx_include_auto:_row_1_column.html />
-    <div class="bx-layout-row flex flex-col md:flex-row">
-        <div class="bx-layout-col bx-layout-3-columns-column1 bx-layout-column-thin max-w-full md:w-1/3">
-            <div class="bx-layout-cell md:pr-2 lg:pr-3" id="bx-layout-cell-2">
+    <div class="bx-layout-row">
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/3 flex-auto md:flex-none" aria-label="Sidebar" >
+            <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-3-columns-column2 bx-layout-column-thin max-w-full md:w-1/3">
-            <div class="bx-layout-cell md:px-2 lg:px-3" id="bx-layout-cell-3">
-                __cell_3__
-            </div>
-        </div>
-        <div class="bx-layout-col bx-layout-3-columns-column3 bx-layout-column-thin max-w-full md:w-1/3">
-            <div class="bx-layout-cell md:pl-2 lg:pl-3" id="bx-layout-cell-4">
-                __cell_4__
-            </div>
-        </div>
+        </section>
+        <section aria-label="Content" class="max-w-full md:w-2/3 flex-1 flex flex-wrap lg:flex-nowrap gap-4 lg:gap-6 xl:gap-8">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-1/2" aria-label="Main">
+                <div class="bx-layout-cell" id="bx-layout-cell-3">
+                    __cell_3__
+                </div>
+            </main>
+            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin md:w-1/2" aria-label="Aside">
+                <div class="bx-layout-cell" id="bx-layout-cell-4">
+                    __cell_4__
+                </div>
+            </aside>
+        </section>
     </div>
     <bx_include_auto:_row_1_column_dump.html />
 </div>

template/layout_top_area_bar_content_bar.html

@@ -1,27 +1,21 @@
 <!-- layout top area bar content bar (bcb) [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-bcb">
     <bx_include_auto:_row_1_column.html />
-    <div class="bx-layout-row max-w-screen-2xl flex relative flex-wrap lg:flex-nowrap mx-auto gap-4 lg:gap-6 xl-gap-8">
-        <section aria-label="Sidebar" class="flex-auto lg:flex-none lg:w-64">
-        <div class="bx-layout-col">
+    <div class="bx-layout-row">
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/4 flex-auto md:flex-none" aria-label="Sidebar" >
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
-        </div>
         </section>
-        <section aria-label="Content" class="flex-1 flex flex-wrap xl:flex-nowrap gap-4 lg:gap-6 xl-gap-8">
-            <main aria-label="Main" class="max-w-5xl  flex-auto relative">
-            <div class="bx-layout-col">
+        <section aria-label="Content" class="max-w-full md:w-3/4 flex-1 flex flex-wrap lg:flex-nowrap gap-4 lg:gap-6 xl:gap-8">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-2/3" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-3">
                     __cell_3__
                 </div>
-            </div>
             </main>
-            <aside aria-label="Aside" class="flex-auto flex flex-col gap-4 lg:gap-6 xl-gap-8  xl:flex-none xl:w-96">
-                <div class="bx-layout-col">
-                    <div class="bx-layout-cell" id="bx-layout-cell-4">
-                        __cell_4__
-                    </div>
+            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin md:w-1/3" aria-label="Aside">
+                <div class="bx-layout-cell" id="bx-layout-cell-4">
+                    __cell_4__
                 </div>
             </aside>
         </section>

template/layout_top_area_bar_left.html

@@ -1,17 +1,17 @@
 <!-- layout top area bar left [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-bar-left">
     <bx_include_auto:_row_1_column.html />
-    <div class="bx-layout-row flex flex-col md:flex-row">
-        <div class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin max-w-full md:w-1/3">
-            <div class="bx-layout-cell md:pr-2 lg:pr-3" id="bx-layout-cell-2">
+    <div class="bx-layout-row">
+        <main class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3" aria-label="Main">
+            <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-bar-left-content bx-layout-column-wide max-w-full md:w-2/3">
-            <div class="bx-layout-cell md:pl-2 lg:pl-3" id="bx-layout-cell-3">
+        </main>
+        <aside class="bx-layout-col bx-layout-bar-left-content bx-layout-column-wide md:w-2/3" aria-label="Aside">
+            <div class="bx-layout-cell" id="bx-layout-cell-3">
                 __cell_3__
             </div>
-        </div>
+        </aside>
     </div>
     <bx_include_auto:_row_1_column_dump.html />
 </div>

template/layout_top_area_bar_right.html

@@ -1,17 +1,17 @@
 <!-- layout top area bar right [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-bar-right">
     <bx_include_auto:_row_1_column.html />
-    <div class="bx-layout-row flex flex-col md:flex-row">
-        <div class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide relative max-w-full md:w-2/3">
-            <div class="bx-layout-cell md:pr-2 lg:pr-3" id="bx-layout-cell-2">
+    <div class="bx-layout-row">
+        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3" aria-label="Main">
+            <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-bar-right-bar bx-layout-column-thin relative max-w-full md:w-1/3">
-            <div class="bx-layout-cell md:pl-2 lg:pl-3" id="bx-layout-cell-3">
+        </main>
+        <aside class="bx-layout-col bx-layout-bar-right-bar bx-layout-column-thin md:w-1/3" aria-label="Aside">
+            <div class="bx-layout-cell" id="bx-layout-cell-3">
                 __cell_3__
             </div>
-        </div>
+        </aside>
     </div>
     <bx_include_auto:_row_1_column_dump.html />
 </div>

template/layout_topbottom_area_2_columns.html

@@ -1,19 +1,19 @@
 <!-- layout top area 2 columns [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-2-columns">
     <bx_include_auto:_row_1_column.html />
-    <div class="bx-layout-row flex flex-col md:flex-row">
-        <div class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half max-w-full md:w-1/2">
-            <div class="bx-layout-cell md:pr-2 lg:pr-3" id="bx-layout-cell-2">
+    <div class="bx-layout-row">
+        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2" aria-label="Sidebar">
+            <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-2-columns-column2 bx-layout-column-half max-w-full md:w-1/2">
-            <div class="bx-layout-cell md:pl-2 lg:pl-3" id="bx-layout-cell-3">
+        </aside>
+        <main class="bx-layout-col bx-layout-2-columns-column2 bx-layout-column-half md:w-1/2" aria-label="Main">
+            <div class="bx-layout-cell" id="bx-layout-cell-3">
                 __cell_3__
             </div>
-        </div>
+        </main>
     </div>
-    <div class="bx-layout-row bx-clearfix">
+    <div class="bx-layout-row">
         <div class="bx-layout-col bx-layout-1-column-column1 bx-layout-column-fullwidth">
             <div class="bx-layout-cell" id="bx-layout-cell-4">
                 __cell_4__

template/layout_topbottom_area_bar_left.html

@@ -1,19 +1,19 @@
 <!-- layout top & bottom areas bar left [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-bar-left">
     <bx_include_auto:_row_1_column.html />
-    <div class="bx-layout-row flex flex-col md:flex-row">
-        <div class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin max-w-full md:w-1/3">
-            <div class="bx-layout-cell md:pr-2 lg:pr-3" id="bx-layout-cell-2">
+    <div class="bx-layout-row">
+        <aside class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3" aria-label="Sidebar">
+            <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-bar-left-content bx-layout-column-wide max-w-full md:w-2/3">
-            <div class="bx-layout-cell md:pl-2 lg:pl-3" id="bx-layout-cell-3">
+        </aside>
+        <main class="bx-layout-col bx-layout-bar-left-content bx-layout-column-wide md:w-2/3" aria-label="Main">
+            <div class="bx-layout-cell" id="bx-layout-cell-3">
                 __cell_3__
             </div>
-        </div>
+        </main>
     </div>
-    <div class="bx-layout-row bx-clearfix">
+    <div class="bx-layout-row">
         <div class="bx-layout-col bx-layout-1-column-column1 bx-layout-column-fullwidth">
             <div class="bx-layout-cell" id="bx-layout-cell-4">
                 __cell_4__

template/layout_topbottom_area_bar_right.html

@@ -1,19 +1,19 @@
 <!-- layout top & bottom areas bar right [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-bar-right">
     <bx_include_auto:_row_1_column.html />
-    <div class="bx-layout-row flex flex-col md:flex-row">
-        <div class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide max-w-full md:w-2/3">
-            <div class="bx-layout-cell md:pr-2 lg:pr-3" id="bx-layout-cell-2">
+    <div class="bx-layout-row">
+        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3" aria-label="Main">
+            <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-bar-right-bar bx-layout-column-thin max-w-full md:w-1/3">
-            <div class="bx-layout-cell md:pl-2 lg:pl-3" id="bx-layout-cell-3">
+        </main>
+        <aside class="bx-layout-col bx-layout-bar-right-bar bx-layout-column-thin md:w-1/3" aria-label="Aside">
+            <div class="bx-layout-cell" id="bx-layout-cell-3">
                 __cell_3__
             </div>
-        </div>
+        </aside>
     </div>
-    <div class="bx-layout-row bx-clearfix">
+    <div class="bx-layout-row">
         <div class="bx-layout-col bx-layout-1-column-column1 bx-layout-column-fullwidth">
             <div class="bx-layout-cell" id="bx-layout-cell-4">
                 __cell_4__

template/layout_topbottom_area_col1_col3_col2.html

@@ -2,23 +2,27 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-col1-col3-col2">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row flex flex-col md:flex-row">
-        <div class="bx-layout-col bx-layout-col1-col3-col2-column1 bx-layout-column-thin max-w-full md:w-1/6">
-            <div class="bx-layout-cell md:pr-2 lg:pr-3" id="bx-layout-cell-2">
-                __cell_2__
-            </div>
-        </div>
-        <div class="bx-layout-col bx-layout-col1-col3-col2-column2 bx-layout-column-half max-w-full md:w-3/6">
-            <div class="bx-layout-cell md:px-2 lg:px-3" id="bx-layout-cell-3">
-                __cell_3__
-            </div>
-        </div>
-        <div class="bx-layout-col bx-layout-col1-col3-col2-column3 bx-layout-column-thin max-w-full md:w-2/6">
-            <div class="bx-layout-cell md:pl-2 lg:pl-3" id="bx-layout-cell-4">
-                __cell_4__
-            </div>
+        <div class="bx-layout-row">
+            <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/6 flex-auto md:flex-none" aria-label="Sidebar" >
+                <div class="bx-layout-cell" id="bx-layout-cell-2">
+                    __cell_2__
+                </div>
+            </section>
+            <section aria-label="Content" class="max-w-full md:w-5/6 flex-1 flex flex-wrap lg:flex-nowrap gap-4 lg:gap-6 xl:gap-8">
+                <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-3/5" aria-label="Main">
+                    <div class="bx-layout-cell" id="bx-layout-cell-3">
+                        __cell_3__
+                    </div>
+                </main>
+                <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin md:w-2/5" aria-label="Aside">
+                    <div class="bx-layout-cell" id="bx-layout-cell-4">
+                        __cell_4__
+                    </div>
+                </aside>
+            </section>
         </div>
     </div>
-    <div class="bx-layout-row bx-clearfix">
+    <div class="bx-layout-row">
         <div class="bx-layout-col bx-layout-1-column-column1 bx-layout-column-fullwidth">
             <div class="bx-layout-cell" id="bx-layout-cell-5">
                 __cell_5__

template/layout_topbottom_area_col1_col5.html

@@ -1,19 +1,19 @@
 <!-- layout top & bottom areas with 2 columns (1:5) [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-col1-col5">
     <bx_include_auto:_row_1_column.html />
-    <div class="bx-layout-row flex flex-col md:flex-row">
-        <div class="bx-layout-col bx-layout-col1-col5-column1 bx-layout-column-thin max-w-full md:w-1/6">
-            <div class="bx-layout-cell md:pr-2 lg:pr-3" id="bx-layout-cell-2">
+    <div class="bx-layout-row">
+        <aside class="bx-layout-col bx-layout-col1-col5-column1 bx-layout-column-thin md:w-1/6" aria-label="Sidebar">
+            <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-col1-col5-column2 bx-layout-column-wide max-w-full md:w-5/6">
-            <div class="bx-layout-cell md:pl-2 lg:pl-3" id="bx-layout-cell-3">
+        </aside>
+        <main class="bx-layout-col bx-layout-col1-col5-column2 bx-layout-column-wide md:w-5/6" aria-label="Main">
+            <div class="bx-layout-cell" id="bx-layout-cell-3">
                 __cell_3__
             </div>
-        </div>
+        </main>
     </div>
-    <div class="bx-layout-row bx-clearfix">
+    <div class="bx-layout-row">
         <div class="bx-layout-col bx-layout-1-column-column1 bx-layout-column-fullwidth">
             <div class="bx-layout-cell" id="bx-layout-cell-4">
                 __cell_4__

template/layout_topbottom_area_col2_col5_col3.html

@@ -1,24 +1,26 @@
 <!-- layout top & bottom areas with 3 columns (2:5:3) [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-col2-col5-col3">
     <bx_include_auto:_row_1_column.html />
-    <div class="bx-layout-row flex flex-col md:flex-row">
-        <div class="bx-layout-col bx-layout-col2-col5-col3-column1 bx-layout-column-thin max-w-full md:w-2/10">
-            <div class="bx-layout-cell md:pr-2 lg:pr-3" id="bx-layout-cell-2">
+    <div class="bx-layout-row">
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-2/10 flex-auto md:flex-none" aria-label="Sidebar" >
+            <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
-        </div>
-        <div class="bx-layout-col bx-layout-col2-col5-col3-column2 bx-layout-column-half max-w-full md:w-5/10">
-            <div class="bx-layout-cell md:px-2 lg:px-3" id="bx-layout-cell-3">
-                __cell_3__
-            </div>
-        </div>
-        <div class="bx-layout-col bx-layout-col2-col5-col3-column3 bx-layout-column-thin max-w-full md:w-3/10">
-            <div class="bx-layout-cell md:pl-2 lg:pl-3" id="bx-layout-cell-4">
-                __cell_4__
-            </div>
-        </div>
+        </section>
+        <section aria-label="Content" class="max-w-full md:w-8/10 flex-1 flex flex-wrap lg:flex-nowrap gap-4 lg:gap-6 xl:gap-8">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-3/5" aria-label="Main">
+                <div class="bx-layout-cell" id="bx-layout-cell-3">
+                    __cell_3__
+                </div>
+            </main>
+            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin md:w-2/5" aria-label="Aside">
+                <div class="bx-layout-cell" id="bx-layout-cell-4">
+                    __cell_4__
+                </div>
+            </aside>
+        </section>
     </div>
-    <div class="bx-layout-row bx-clearfix">
+    <div class="bx-layout-row">
         <div class="bx-layout-col bx-layout-1-column-column1 bx-layout-column-fullwidth">
             <div class="bx-layout-cell" id="bx-layout-cell-5">
                 __cell_5__