Improved tables, Separated tables into core and site segments, rules and pages

Update index.php, sidebar.php, and 7 more files...

htdocs/index.php

@@ -92,7 +92,7 @@
     <?php include("./parts/grids.php"); ?>
 
     <!-- Tables -->
-    <?php include("./parts/tables.php"); ?>
+    <?php include("./parts/tables_core.php"); ?>
 
     <!-- Horizontal Rulers -->
     <?php include("./parts/horizontal_rulers.php"); ?>
@@ -102,6 +102,9 @@
 
     <!-- Buttons -->
     <?php include("./parts/buttons.php"); ?>
+
+    <!-- Tables -->
+    <?php include("./parts/tables_site.php"); ?>
 </main>
 
 <footer class="d-flex flex-align-center w-full p-s py-xs">

htdocs/parts/sidebar.php

@@ -75,7 +75,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
                     <i class="fa-solid fa-table-cells-large pr-xs t-half-muted"></i>Grids
                 </p>
             </a>
-            <a class="a-hidden" href="#tables">
+            <a class="a-hidden" href="#tables-core">
                 <p class="t-w-500 py-xs sidebar-entry">
                     <i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
                 </p>
@@ -101,6 +101,11 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
                     <i class="fa-solid fa-stop pr-xs t-half-muted"></i>Buttons
                 </p>
             </a>
+            <a class="a-hidden" href="#tables-site">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
+                </p>
+            </a>
         </div>
     </details>
 

htdocs/parts/tables_core.php

@@ -0,0 +1,182 @@
+<?php
+// Making sure the file is included and not accessed directly.
+if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
+    header('HTTP/1.1 403 Forbidden'); die();
+}
+?>
+
+<a id="tables-core"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Tables
+        <i class="fa-solid fa-table f-right"></i>
+    </h2>
+</div>
+<section class="p-s">
+
+    <div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
+        ⚠️ These styles may slightly change again before the 1.0.0 release ⚠️
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Default table</h3>
+    <div class="px-s">
+        <p class="mb-s">
+            Tables have no border, cell gap and other form of styling by default.<br>
+            The cell's content are just aligned in the top of the cell.
+        </p>
+        <table>
+            <tr>
+                <td class="debug">Cell 1.1</td>
+                <td class="debug">Cell 1.2</td>
+                <td class="debug">Cell 1.3</td>
+            </tr>
+            <tr>
+                <td class="debug">Cell 2.1</td>
+                <td class="debug">Cell 2.2</td>
+                <td class="debug" rowspan="2">Cell 2.3</td>
+            </tr>
+            <tr>
+                <td class="debug" colspan="2">Cell 3.1</td>
+            </tr>
+        </table>
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-xs mt-l">Cell content alignment</h3>
+    <div class="p-xs">
+        <p class="mb-s">
+            The content of a table's cells can be uniformly changed via the
+            <span class="code">.table-v-center</span> and <span class="code">.table-v-bottom</span> classes.
+        </p>
+        <div class="grid grid-col-3 grid-gap-s">
+            <div>
+                <p>Top (Default)</p>
+                <table class="table-p-xs">
+                    <tr>
+                        <td class="debug">1.1</td>
+                        <td class="debug" rowspan="2">1.2</td>
+                    </tr>
+                    <tr>
+                        <td class="debug">2.1</td>
+                    </tr>
+                </table>
+            </div>
+            <div>
+                <p>Middle</p>
+                <table class="table-p-xs table-v-center">
+                    <tr>
+                        <td class="debug">1.1</td>
+                        <td class="debug" rowspan="2">1.2</td>
+                    </tr>
+                    <tr>
+                        <td class="debug">2.1</td>
+                    </tr>
+                </table>
+            </div>
+            <div>
+                <p>End</p>
+                <table class="table-p-xs table-v-bottom">
+                    <tr>
+                        <td class="debug">1.1</td>
+                        <td class="debug" rowspan="2">1.2</td>
+                    </tr>
+                    <tr>
+                        <td class="debug">2.1</td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-xs mt-l">Cell padding</h3>
+    <p class="mb-s">
+        All of a given table's cells can be padded uniformly by using the
+        <span class="code">.table-p-X</span> class where <span class="code">X</span>
+        can be replaced by any of the standard sizes.<br>
+        Usable sizes:
+        <span class="code">xxs</span>, <span class="code">xs</span>,
+        <span class="code">s</span>, <span class="code">m</span>,
+        <span class="code">l</span>, <span class="code">xl</span>
+    </p>
+    <div class="p-xs">
+        <div class="grid grid-col-3 grid-col-medium-2 grid-gap-s">
+            <div>
+                <table class="table-p-xxs mb-s">
+                    <tr>
+                        <td class="debug"><div class="debug">Cell 1.1</div></td>
+                        <td class="debug"><div class="debug">Cell 1.2</div></td>
+                    </tr>
+                    <tr>
+                        <td class="debug"><div class="debug">Cell 2.1</div></td>
+                        <td class="debug"><div class="debug">Cell 2.2</div></td>
+                    </tr>
+                </table>
+                <span class="code">.table-p-xxs</span>
+            </div>
+            <div>
+                <table class="table-p-xs mb-s">
+                    <tr>
+                        <td class="debug"><div class="debug">Cell 1.1</div></td>
+                        <td class="debug"><div class="debug">Cell 1.2</div></td>
+                    </tr>
+                    <tr>
+                        <td class="debug"><div class="debug">Cell 2.1</div></td>
+                        <td class="debug"><div class="debug">Cell 2.2</div></td>
+                    </tr>
+                </table>
+                <span class="code">.table-p-xs</span>
+            </div>
+            <div>
+                <table class="table-p-s mb-s">
+                    <tr>
+                        <td class="debug"><div class="debug">Cell 1.1</div></td>
+                        <td class="debug"><div class="debug">Cell 1.2</div></td>
+                    </tr>
+                    <tr>
+                        <td class="debug"><div class="debug">Cell 2.1</div></td>
+                        <td class="debug"><div class="debug">Cell 2.2</div></td>
+                    </tr>
+                </table>
+                <span class="code">.table-p-s</span>
+            </div>
+            <div>
+                <table class="table-p-m mb-s">
+                    <tr>
+                        <td class="debug"><div class="debug">Cell 1.1</div></td>
+                        <td class="debug"><div class="debug">Cell 1.2</div></td>
+                    </tr>
+                    <tr>
+                        <td class="debug"><div class="debug">Cell 2.1</div></td>
+                        <td class="debug"><div class="debug">Cell 2.2</div></td>
+                    </tr>
+                </table>
+                <span class="code">.table-p-m</span>
+            </div>
+            <div>
+                <table class="table-p-l mb-s">
+                    <tr>
+                        <td class="debug"><div class="debug">Cell 1.1</div></td>
+                        <td class="debug"><div class="debug">Cell 1.2</div></td>
+                    </tr>
+                    <tr>
+                        <td class="debug"><div class="debug">Cell 2.1</div></td>
+                        <td class="debug"><div class="debug">Cell 2.2</div></td>
+                    </tr>
+                </table>
+                <span class="code">.table-p-l</span>
+            </div>
+            <div>
+                <table class="table-p-xl mb-s">
+                    <tr>
+                        <td class="debug"><div class="debug">Cell 1.1</div></td>
+                        <td class="debug"><div class="debug">Cell 1.2</div></td>
+                    </tr>
+                    <tr>
+                        <td class="debug"><div class="debug">Cell 2.1</div></td>
+                        <td class="debug"><div class="debug">Cell 2.2</div></td>
+                    </tr>
+                </table>
+                <span class="code">.table-p-xl</span>
+            </div>
+        </div>
+    </div>
+
+</section>

htdocs/parts/tables_site.php

@@ -5,7 +5,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 }
 ?>
 
-<a id="tables"></a>
+<a id="tables-site"></a>
 <div class="p-xs b r-s bkgd-grid mt-m">
     <h2 class="t-w-500 t-size-14">Tables
         <i class="fa-solid fa-table f-right"></i>
@@ -17,27 +17,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         ⚠️ These styles will change before the 1.0.0 release ⚠️
     </div>
 
-    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Unstyled table</h3>
+    <h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3>
-    <div class="px-s">
-        <p class="mb-s">
-            Unstyled tables have no cell gap, no border and no other form of styling.
-        </p>
-        <table>
-            <tr>
-                <td>Cell 1.1</td>
-                <td>Cell 1.2</td>
-            </tr>
-            <tr>
-                <td>Cell 2.1</td>
-                <td>Cell 2.2</td>
-            </tr>
-        </table>
-        <code class="d-block p-xxs border r-s mt-s">
-            <b>table&gt;tr*2&gt;td*2</b>
-        </code>
-    </div>
-
-    <h3 class="t-w-500 t-size-12 my-s mt-l">Stylish table</h3>
     <div class="px-s">
         <p class="mb-xxs">
             Tables can quickly be styled by simply using the following classes:
@@ -68,7 +48,5 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
             &nbsp;&nbsp;tr*2>td*2
         </code>
     </div>
-
+    
-
-
 </section>

scss/config.scss

@@ -13,3 +13,11 @@ $nibblepoker-background-root: "./";
 $include-grid-backgrounds: true;
 
 $use-b64-backgrounds: true;
+
+// Toggles the generation of any table cell padding rules.
+// See: core/table.scss
+$generate-table-padding-rules: true;
+
+// Toggles the generation of the header and cell specific padding rules for tables. (Disabled by default)
+// See: core/table.scss
+$generate-table-header-cell-padding-rules: true;

scss/core/table.scss

@@ -0,0 +1,40 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Tables */
+
+tr, td {
+  vertical-align: top;
+}
+
+.table-v-center {
+  tr, td {
+    vertical-align: middle;
+  }
+}
+
+.table-v-bottom {
+  tr, td {
+    vertical-align: bottom;
+  }
+}
+
+
+/* Core > Tables > Cell Padding */
+
+@mixin table-padding-maker($size-key, $size-value) {
+  .table-p-#{$size-key} {
+    td, th {
+      padding: #{$size-value};
+    }
+  }
+  // TODO: Add header and cell padding rules
+}
+
+@if($generate-table-padding-rules) {
+  @include table-padding-maker("xxs", calc(#{$margin-base-size} * 0.25));
+  @include table-padding-maker("xs", calc(#{$margin-base-size} * 0.5));
+  @include table-padding-maker("s", calc(#{$margin-base-size} * 0.75));
+  @include table-padding-maker("m", #{$margin-base-size});
+  @include table-padding-maker("l", calc(#{$margin-base-size} * 1.5));
+  @include table-padding-maker("xl", calc(#{$margin-base-size} * 2.0));
+}

scss/nibblepoker.scss

@@ -60,6 +60,7 @@
 @import 'core/position';   // /!\ Needs improvement !!!
 @import 'core/overflow';   // Defines generic overflow rules (.o-hidden, .ox-scroll, ...)
 @import 'core/lists';
+@import 'core/table';
 
 /* Core > Rounding */
 @import 'core/rounding/global';

scss/site/table.scss

@@ -1,8 +1,6 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-tr, td {
+/* Site > Tables */
-	vertical-align: top;
-}
 
 table.stylish {
 	th {
@@ -27,31 +25,3 @@ table.stylish {
 	
 	// See 'site/border.scss' for border fix.
 }
-
-// Applying .p-xs and .p-s to all cells if needed
-// See 'core/spacing' for more info.
-.table-p-xs {
-	td, th {
-		padding: calc(#{$margin-base-size} * 0.5);
-	}
-}
-
-.table-h-p-s {
-	th {
-		padding: calc(#{$margin-base-size} * 0.75);
-	}
-}
-
-.table-p-s {
-	td, th {
-		padding: calc(#{$margin-base-size} * 0.75);
-	}
-}
-
-// FIXME: Move this out in its own alignment section...
-// Centers the cells' content vertically
-.table-v-center {
-	tr, td {
-		vertical-align: middle;
-	}
-}