Finished CICD SASS compiler, Added broken example page

Update sass-compile.yml, maki-03.jpg, and 5 more files...

.github/workflows/sass-compile.yml

@@ -0,0 +1,59 @@
+name: Compile SASS
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
+    concurrency:
+      group: cicd-docs
+
+    steps:
+      - name: Checkout Git submodules
+        uses: actions/checkout@v4
+        with:
+          submodules: true
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'latest'
+
+      - name: Install SASS Compiler
+        run: |
+          npm install -g html-minifier sass
+
+      - name: Compile SASS
+        run: |
+          cd htdocs/css/
+          sass "../../scss/nibblepoker.scss" -q --no-source-map > "nibblepoker.css"
+          sass "../../scss/nibblepoker.scss" -q --no-source-map --style compressed > "nibblepoker.min.css"
+          sass "../../scss/debugger.scss" -q --no-source-map > "debugger.css"
+          sass "../../scss/debugger.scss" -q --no-source-map --style compressed > "debugger.min.css"
+
+      - name: Upload `.css` build artifact
+        uses: actions/upload-artifact@v4
+        if: ${{ github.actor == 'aziascreations' }}
+        with:
+          name: nibblepoker.css
+          path: "./htdocs/css/nibblepoker.css"
+          if-no-files-found: error
+          retention-days: 90
+          compression-level: 9
+
+      - name: Upload `.min.css` build artifact
+        uses: actions/upload-artifact@v4
+        if: ${{ github.actor == 'aziascreations' }}
+        with:
+          name: nibblepoker.min.css
+          path: "./htdocs/css/nibblepoker.min.css"
+          if-no-files-found: error
+          retention-days: 90
+          compression-level: 9

.gitignore

@@ -7,3 +7,8 @@ node_modules/
 # Build Artifacts
 *.css
 *.min.html
+*.7z
+*.zip
+*.tar
+*.gz
+*.rar

.run/Compile.run.xml

@@ -0,0 +1,17 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Compile" type="ShConfigurationType">
+    <option name="SCRIPT_TEXT" value="" />
+    <option name="INDEPENDENT_SCRIPT_PATH" value="false" />
+    <option name="SCRIPT_PATH" value="$PROJECT_DIR$/compile.cmd" />
+    <option name="SCRIPT_OPTIONS" value="" />
+    <option name="INDEPENDENT_SCRIPT_WORKING_DIRECTORY" value="true" />
+    <option name="SCRIPT_WORKING_DIRECTORY" value="$PROJECT_DIR$" />
+    <option name="INDEPENDENT_INTERPRETER_PATH" value="true" />
+    <option name="INTERPRETER_PATH" value="" />
+    <option name="INTERPRETER_OPTIONS" value="" />
+    <option name="EXECUTE_IN_TERMINAL" value="true" />
+    <option name="EXECUTE_SCRIPT_FILE" value="true" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

.run/Setup.run.xml

@@ -0,0 +1,17 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Setup" type="ShConfigurationType">
+    <option name="SCRIPT_TEXT" value="" />
+    <option name="INDEPENDENT_SCRIPT_PATH" value="false" />
+    <option name="SCRIPT_PATH" value="$PROJECT_DIR$/setup.cmd" />
+    <option name="SCRIPT_OPTIONS" value="" />
+    <option name="INDEPENDENT_SCRIPT_WORKING_DIRECTORY" value="true" />
+    <option name="SCRIPT_WORKING_DIRECTORY" value="$PROJECT_DIR$" />
+    <option name="INDEPENDENT_INTERPRETER_PATH" value="true" />
+    <option name="INTERPRETER_PATH" value="" />
+    <option name="INTERPRETER_OPTIONS" value="" />
+    <option name="EXECUTE_IN_TERMINAL" value="true" />
+    <option name="EXECUTE_SCRIPT_FILE" value="true" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

compile.cmd

@@ -35,6 +35,21 @@ cd /d %~dp0
 copy ".\bkgds\*.png" ".\htdocs\css\"
 popd
 
+:sass-assets
+echo Copying assets...
+pushd %CD%
+cd /d %~dp0
+copy ".\bkgds\*.png" ".\htdocs\css\"
+popd
+
+:sass-compress
+echo Compressing assets...
+pushd %CD%
+cd /d %~dp0\htdocs\css
+7z a -t7z -mx=9 nibblepoker.css.7z nibblepoker.min.css *.png
+7z a -tzip -mx=9 nibblepoker.css.zip nibblepoker.min.css *.png
+popd
+
 :sass-end
 
 

htdocs/index.php

@@ -31,27 +31,9 @@
 
 <header class="w-full p-m pl-s">
     <h1 class="t-size-17 t-w-500">
-        <i class="fa-solid fa-house mr-s"></i><span np-l10n-key="header.title">Homepage</span>
+        <i class="fa-brands fa-css3-alt mr-s"></i>NibbleCSS Documentation v0.0.1
+        <a href="https://github.com/aziascreations/CSS-NibblePoker" class="f-right a-bland"><i class="fa-brands fa-github"></i></a>
     </h1>
-    <details id="lang-selector" class="b p-mxs px-s bkgd-blank-dark r-m">
-        <summary>
-            <i class="fad fa-language"></i>
-            <span class="mobile-hide t-w-500">&nbsp;Language</span>
-            &nbsp;<i class="fa fa-angle-down"></i>
-        </summary>
-        <div class="p-xs border bkgd-surround r-m t-w-500">
-            <a href="/en/" class="bland-link">
-                <p class="mb-s px-xxs">English</p>
-            </a>
-            <a href="/fr/" class="bland-link">
-                <p class="my-s px-xxs">French</p>
-            </a>
-            <hr class="subtle m-0">
-            <a href="/" class="bland-link">
-                <p class="mt-xs px-xxs">Automatic</p>
-            </a>
-        </div>
-    </details>
 </header>
 
 <main id="main" class="b br-0 p-m rl-m">
@@ -100,20 +82,32 @@
     <!-- Rounding -->
     <?php include("./parts/rounding.php"); ?>
 
-    <!-- Lists -->
+    <!-- Lists > Base -->
-    <?php include("./parts/lists.php"); ?>
+    <?php include("./parts/lists_base.php"); ?>
+
+    <!-- Lists > Composed
+    <?php include("./parts/lists_composed.php"); ?>-->
 
     <!-- Grids -->
     <?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"); ?>
 
+    <!-- Backgrounds -->
+    <?php include("./parts/backgrounds.php"); ?>
+
     <!-- Buttons -->
     <?php include("./parts/buttons.php"); ?>
+
+    <!-- Tables -->
+    <?php include("./parts/tables_site.php"); ?>
+
+    <!-- Tables -->
+    <?php include("./parts/examples/cards.php"); ?>
 </main>
 
 <footer class="d-flex flex-align-center w-full p-s py-xs">
@@ -131,5 +125,7 @@
 </footer>
 
 <script src="/js/sidebar.js"></script>
+<script src="/js/text-direction-switch.js"></script>
+<script src="/js/anchor-fix.js"></script>
 </body>
 </html>

htdocs/js/anchor-fix.js

@@ -0,0 +1,10 @@
+// This script is required due to Chromium's dogshit and random ability to jump to anchors when reloading pages.
+
+document.addEventListener("DOMContentLoaded", function () {
+    if (window.location.hash) {
+        const eAnchor = document.querySelector(window.location.hash);
+        if (eAnchor) {
+            eAnchor.scrollIntoView();
+        }
+    }
+});

htdocs/js/text-direction-switch.js

@@ -0,0 +1,16 @@
+const eTextDirectionSwitches = document.querySelectorAll(".text-direction-switch");
+const eTextDirectionTargets = document.querySelectorAll(".text-direction-target");
+
+document.addEventListener("DOMContentLoaded", () => {
+    eTextDirectionSwitches.forEach(eSwitch => {
+        eSwitch.onclick = function() {
+            eTextDirectionTargets.forEach(eTarget => {
+                if(eTarget.style.direction === "rtl") {
+                    eTarget.style.direction = 'ltr';
+                } else {
+                    eTarget.style.direction = 'rtl';
+                }
+            });
+        };
+    });
+});

htdocs/parts/backgrounds.php

@@ -0,0 +1,113 @@
+<?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="backgrounds"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Backgrounds
+        <i class="fa-solid fa-paint-roller f-right"></i>
+        </h2>
+</div>
+<section class="p-s">
+
+    <h3 class="t-w-500 t-size-12 mb-xs mt-xxs">Simple colors</h3>
+    <div class="grid grid-col-3 grid-gap-l px-s">
+        <div>
+            <div class="p-l border r-xl bkgd-dark my-xs"></div>
+            <span class="code mb-s">.bkgd-dark</span>
+        </div>
+        <div>
+            <div class="p-l border r-xl bkgd-grey my-xs"></div>
+            <span class="code mb-s">.bkgd-grey</span>
+            <span class="code mb-s">.bkgd-gray</span>
+        </div>
+        <div>
+            <div class="p-l border r-xl bkgd-light my-xs"></div>
+            <span class="code mb-s">.bkgd-light</span>
+        </div>
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-l">Grid backgrounds</h3>
+    <div class="grid grid-col-2 grid-gap-l px-s">
+        <div>
+            <p class="t-w-500">40% opacity (Title bars)</p>
+            <div class="p-l border r-xl bkgd-grid40 my-xs"></div>
+            <span class="code">.bkgd-grid40</span>
+            <span class="code">.bkgd-grid</span>
+        </div>
+        <div>
+            <p class="t-w-500">30% opacity</p>
+            <div class="p-l border r-xl bkgd-grid30 my-xs"></div>
+            <span class="code">.bkgd-grid30</span>
+        </div>
+        <div>
+            <p class="t-w-500">20% opacity</p>
+            <div class="p-l border r-xl bkgd-grid20 my-xs"></div>
+            <span class="code">.bkgd-grid20</span>
+        </div>
+        <div>
+            <p class="t-w-500">10% opacity (Surroundings)</p>
+            <div class="p-l border r-xl bkgd-grid10 my-xs"></div>
+            <span class="code">.bkgd-grid10</span>
+            <span class="code">.bkgd-surround</span>
+        </div>
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-l">Special backgrounds</h3>
+    <div class="grid grid-col-3 grid-gap-l px-s">
+        <div>
+            <p class="t-w-500">Transparent</p>
+            <div class="p-l border r-xl bkgd-transparent my-xs"></div>
+            <span class="code">.bkgd-transparent</span>
+        </div>
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-l">Colored backgrounds</h3>
+    <div class="grid grid-col-4 grid-col-medium-2 grid-gap-l px-s">
+        <div>
+            <p class="t-w-500">Blue</p>
+            <div class="p-l border r-xl bkgd-blue my-xs"></div>
+            <span class="code">.bkgd-blue</span>
+        </div>
+        <div>
+            <p class="t-w-500">Light blue</p>
+            <div class="p-l border r-xl bkgd-blue-light my-xs"></div>
+            <span class="code">.bkgd-blue-light</span>
+        </div>
+        <div>
+            <p class="t-w-500">Green</p>
+            <div class="p-l border r-xl bkgd-green my-xs"></div>
+            <span class="code">.bkgd-green</span>
+        </div>
+        <div>
+            <p class="t-w-500">Light green</p>
+            <div class="p-l border r-xl bkgd-green-light my-xs"></div>
+            <span class="code">.bkgd-green-light</span>
+        </div>
+    </div>
+    <div class="grid grid-col-4 grid-col-medium-2 grid-gap-l px-s mt-m">
+        <div>
+            <p class="t-w-500">Red</p>
+            <div class="p-l border r-xl bkgd-red my-xs"></div>
+            <span class="code">.bkgd-red</span>
+        </div>
+        <div>
+            <p class="t-w-500">Light red</p>
+            <div class="p-l border r-xl bkgd-red-light my-xs"></div>
+            <span class="code">.bkgd-red-light</span>
+        </div>
+        <div>
+            <p class="t-w-500">Orange</p>
+            <div class="p-l border r-xl bkgd-orange my-xs"></div>
+            <span class="code">.bkgd-orange</span>
+        </div>
+        <div>
+            <p class="t-w-500">Light orange</p>
+            <div class="p-l border r-xl bkgd-orange-light my-xs"></div>
+            <span class="code">.bkgd-orange-light</span>
+        </div>
+    </div>
+</section>

htdocs/parts/buttons.php

@@ -17,7 +17,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         for colors only.
     </p>
 
-    <div class="grid col-2 grid-gap-xs">
+    <div class="grid grid-col-2 grid-col-medium-1 grid-gap-xs">
         <div>
             <h3 class="t-w-500 t-size-12 mt-s">Unstyled button</h3>
             <div class="m-s">
@@ -44,29 +44,29 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
             Buttons can also be colored in order to give direct visual feedback
             on their intended action by simply giving them another class.
         </p>
-        <div class="grid col-2 grid-gap-xs">
+        <div class="grid grid-col-2 grid-col-medium-1 grid-gap-xs">
             <div>
-                <button class="p-xs r-s border primary">Primary button</button>
+                <button class="p-xs r-s border btn-primary">Primary button</button>
                 <code class="d-block p-xxs border r-s mt-s">
-                    button.p-xs.r-s.border<b>.primary</b>
+                    button.p-xs.r-s.border<b>.btn-primary</b>
                 </code>
             </div>
             <div>
-                <button class="p-xs r-s border success">Success button</button>
+                <button class="p-xs r-s border btn-success">Success button</button>
                 <code class="d-block p-xxs border r-s mt-s">
-                    button.p-xs.r-s.border<b>.success</b>
+                    button.p-xs.r-s.border<b>.btn-success</b>
                 </code>
             </div>
             <div>
-                <button class="p-xs r-s border warning">Warning button</button>
+                <button class="p-xs r-s border btn-warning">Warning button</button>
                 <code class="d-block p-xxs border r-s mt-s">
-                    button.p-xs.r-s.border<b>.warning</b>
+                    button.p-xs.r-s.border<b>.btn-warning</b>
                 </code>
             </div>
             <div>
-                <button class="p-xs r-s border error">Danger/Error button</button>
+                <button class="p-xs r-s border btn-error">Danger/Error button</button>
                 <code class="d-block p-xxs border r-s mt-s">
-                    button.p-xs.r-s.border<b>.error</b>
+                    button.p-xs.r-s.border<b>.btn-error</b>
                 </code>
             </div>
         </div>

htdocs/parts/examples/cards.php

@@ -0,0 +1,47 @@
+<?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="examples-cards"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Cards
+        <i class="fa-solid fa-address-card f-right"></i>
+    </h2>
+</div>
+<section class="p-s">
+
+    <h3 class="t-w-500 t-size-12 my-s mt-xxs">Vertical Card</h3>
+    <div class="px-s">
+        <p class="mb-xxs">
+            Tables can quickly be styled by simply using the <span class="code">.table-stylish</span> class.
+        </p>
+
+        <div class="my-s border r-l bkgd-dark grid d-inline-block">
+            <div class="bb">
+                <img src="/img/maki-03.jpg" alt="Hungry Kitty Cat" class="r-r p-s px-l" height="128px">
+            </div>
+            <div class="bkgd-gray t-center">
+                <p>Hungry Cat</p>
+                <p>
+                    This kitty needs kibbles to stay healthy and
+                </p>
+            </div>
+            <div class="grid grid-col-3">
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+        </div>
+
+        <code class="d-block p-xxs border r-s mt-s">
+            table<b>.table-stylish.table-p-s.border.r-l</b><br>
+            &nbsp;&nbsp;thead>th>td*2<br>
+            &nbsp;&nbsp;tbody>tr*2>td*2
+        </code>
+    </div>
+
+</section>

htdocs/parts/grids.php

@@ -11,32 +11,26 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <i class="fa-solid fa-table-cells-large f-right"></i></h2>
 </div>
 <section class="p-s">
-    <p>
-        Grids are defined by using the <span class="code">grid</span> and <span class="code">col-X</span> class where
-        <span class="code">X</span> represents the number of columns and can be
-        <span class="code">1</span>, <span class="code">2</span>,
-        <span class="code">3</span>, <span class="code">4</span>,
-        <span class="code">6</span> or <span class="code">8</span>.
-    </p>
 
-    <!--<p>You should preferably use <span class="code">&lt;div&gt;</span> elements for the grid container and each cell.</p>-->
+    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Basic grids</h3>
-    <!--<p>[Equal width for cells, maybe]</p>-->
+    <div class="px-s">
-
+        <p class="mb-m">
-    <p class="t-bold">Examples without inter-cell gaps:</p>
+            Grids are defined by combining the <span class="code">.grid</span> and <span class="code">.grid-col-X</span>
-    <div class="gap-xs">
+            classes where <span class="code">X</span> represents the number of columns and can be
-        <p><span class="code">div.grid.col-1&gt;div</span></p>
+            <span class="code">1</span>, <span class="code">2</span>,
-        <div class="grid col-1 debug p-xxs">
+            <span class="code">3</span>, <span class="code">4</span>,
+            <span class="code">6</span> or <span class="code">8</span>.
+        </p>
+        <div class="grid grid-col-1 debug p-xxs mb-xs">
             <div class="bkgd-blank-dark debug">Cell #1</div>
         </div>
-
+        <p><span class="code">div.grid.grid-col-1&gt;div</span></p>
-        <p><span class="code">div.grid.col-2&gt;div*2</span></p>
+        <div class="grid grid-col-2 debug p-xxs mb-xs mt-m">
-        <div class="grid col-2 debug p-xxs">
             <div class="bkgd-blank-dark debug">Cell #1</div>
             <div class="bkgd-blank-dark debug">Cell #2</div>
         </div>
-
+        <p><span class="code">div.grid.grid-col-2&gt;div*2</span></p>
-        <p><span class="code">div.grid.col-6&gt;div*6</span></p>
+        <div class="grid grid-col-6 debug p-xxs mb-xs mt-m">
-        <div class="grid col-6 debug p-xxs">
             <div class="bkgd-blank-dark debug">Cell #1</div>
             <div class="bkgd-blank-dark debug">Cell #2</div>
             <div class="bkgd-blank-dark debug">Cell #3</div>
@@ -44,40 +38,38 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
             <div class="bkgd-blank-dark debug">Cell #5</div>
             <div class="bkgd-blank-dark debug">Cell #6</div>
         </div>
+        <p><span class="code">div.grid.grid-col-6&gt;div*6</span></p>
     </div>
 
-    <p>
+    <h3 class="t-w-500 t-size-12 my-xs mt-l">Grid gaps</h3>
-        Inter-cell gaps can also be setup by using the <span class="code">grid-gap-X</span> or
+    <div class="px-s">
-        <span class="code">col-gap-X</span> classes and replacing the <span class="code">X</span>
+        <p class="mb-m">
-        with the standard size suffixes.
+            Inter-cell gaps can also be setup by using the <span class="code">grid-gap-X</span> classes and
-    </p>
+            replacing the <span class="code">X</span> with the standard size suffixes.
-
+        </p>
-    <p class="t-bold">Examples with inter-cell gaps:</p>
+        <div class="gap-xs">
-    <div class="gap-xs">
+            <?php
-        <?php
             foreach(["xs", "m", "l"] as &$gapSize) {
-                echo('<p><span class="code">div.grid.col-3.grid-gap-' . $gapSize . '&gt;div*6</span></p>');
+                echo('<div class="grid grid-col-3 grid-gap-' . $gapSize . ' debug p-xxs mt-m">');
-                echo('<div class="grid col-3 grid-gap-' . $gapSize . ' debug p-xxs">');
                 for($iGap = 1; $iGap <= 6; $iGap++) {
                     echo('<div class="bkgd-blank-dark debug">Cell #' . $iGap . '</div>');
                 }
                 echo('</div>');
+                echo('<p class="mt-xs"><span class="code">div.grid.grid-col-3.grid-gap-' . $gapSize . '&gt;div*6</span></p>');
             }
-        ?>
+            ?>
+        </div>
     </div>
 
-    <b>TODO: All mobile rules, Add non-identical sizing</b>
 
-
+    <details class="border bkgd-dark r-m mt-l">
-    <details class="border bkgd-blank r-m mt-s">
         <summary class="p-xs">Click to show/hide all classes</summary>
-        <div class="p-xs bt bkgd-blank-dark">
+        <div class="p-xs bt bkgd-grey">
             <p>
                 <span class="code mr-xs">grid</span>
                 <span class="t-super-muted">Defined a grid container</span>
             </p>
 
-
             <hr class="subtle my-s">
 
             <table>
@@ -85,9 +77,9 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
                     <td>
                         <p><span class="code mr-xs">grid-col-1</span></p>
                     </td>
-                    <td>
+                    <!--<td>
                         <p><span class="code mr-xs">col-1</span></p>
-                    </td>
+                    </td>-->
                     <td rowspan="6">
                         <span class="t-super-muted">Specifies the column count</span></p>
                     </td>
@@ -97,7 +89,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
                 foreach($gridColCounts as &$gridColCount){
                     echo('<tr>');
                     echo('<td><p><span class="code mr-xs">grid-col-'.$gridColCount.'</span></p></td>');
-                    echo('<td><p><span class="code mr-xs">col-'.$gridColCount.'</span></p></td>');
+                    //echo('<td><p><span class="code mr-xs">col-'.$gridColCount.'</span></p></td>');
                     echo('</tr>');
                 }
                 ?>
@@ -110,9 +102,9 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
                     <td>
                         <p><span class="code mr-xs">grid-gap-xs</span></p>
                     </td>
-                    <td>
+                    <!--<td>
                         <p><span class="code mr-xs">gap-xs</span></p>
-                    </td>
+                    </td>-->
                     <td rowspan="6">
                         <span class="t-super-muted">Specifies the inter-cell gap size</span></p>
                     </td>
@@ -122,16 +114,13 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
                 foreach($gridGapSizes as &$gridGapSize){
                     echo('<tr>');
                     echo('<td><p><span class="code mr-xs">grid-gap-'.$gridGapSize.'</span></p></td>');
-                    echo('<td><p><span class="code mr-xs">gap-'.$gridGapSize.'</span></p></td>');
+                    //echo('<td><p><span class="code mr-xs">gap-'.$gridGapSize.'</span></p></td>');
                     echo('</tr>');
                 }
                 ?>
             </table>
-
-            <?php
-            echo('<hr class="subtle my-s">');
-            ?>
         </div>
     </details>
 
+    <p class="mt-m t-bold">TODO: All mobile rules, Add non-identical sizing</p>
 </section>

htdocs/parts/intro.php

@@ -3,10 +3,12 @@
 if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 	header('HTTP/1.1 403 Forbidden'); die();
 }
+
+global $root_path;
 ?>
 
 <div class="p-xs b r-s bkgd-grid">
-    <h2 class="t-w-500 t-size-14">Welcome to <i class="ml-xxs">NibblePoker.com</i></h2>
+    <h2 class="t-w-500 t-size-14">Introduction</h2>
 </div>
 <section class="p-s">
     <h3 class="t-size-12 mb-xxs">About the stylesheet</h3>
@@ -26,31 +28,35 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 
     <h3 class="t-size-12 mb-xxs mt-m">Design philosophy</h3>
     <div class="ml-xs">
-        <h4 class="t-size-11">Core Stylesheet</h4>
+        <h4 class="t-size-11 mt-s mb-xxs">Core stylesheet rules:</h4>
-        <p>These rules apply to the "core" part of the stylesheet:</p>
+        <ul class="l-bullets l-bullet-manual">
-        <ul>
             <li>No implicit sizes, margins or paddings</li>
             <li>No styles from class-less DOM, except for styling elements</li>
             <li>Self-sufficient and embeddable as a single file or text blob</li>
             <li>Competitive minified size</li>
-            <li>Standardized naming scheme</li>
+            <li>Standardized &amp; consistent naming scheme</li>
         </ul>
-        <!-- Avoid nested divs, keep the logical DOM layout, -->
+
-        <h4 class="t-size-11 mt-s">Site Stylesheet</h4>
+        <h4 class="t-size-11 mt-s mb-xxs">Site stylesheet rules:</h4>
-        <ul>
+        <ul class="l-bullets l-bullet-manual">
             <li>Prefabs for common elements</li>
-            <ul>
+            <ul class="l-bullets l-bullet-manual">
                 <li>Bound to specific elements</li>
-                <li>???</li>
+            </ul>
-                <li>???</li>
+            <li>No forced smooth transition</li>
-                <li>No forced smooth transition</li>
+        </ul>
-                <li><b>MUST</b> be snappy on low-end hardware, no snagging allowed</li>
+
+        <h4 class="t-size-11 mt-s mb-xxs">General rules</h4>
+        <ul class="l-bullets l-bullet-manual">
+            <li><b>Must</b> be snappy on low-end hardware, no snagging or slowdowns allowed</li>
+            <ul class="l-bullets l-bullet-manual">
+                <li>Tested on an old Chuwi Ubook X internally</li>
             </ul>
         </ul>
     </div>
 
     <h3 class="t-size-12 mb-xxs mt-m">Downloads</h3>
-    <table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center ml-xs">
+    <table class="table-stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center ml-xs">
         <thead>
         <th>Stylesheet</th>
         <th>Minified CSS</th>
@@ -64,7 +70,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
                        title="Download the minified full stylesheet"
                        class="a-hidden"
                        download>
-                        <button class="success p-xs b r-m">
+                        <button class="btn-success p-xs b r-m">
                             <i class="fa fa-download"></i>
                             nibblepoker.min.css
                             (<?php echo(formatBytes(filesize($root_path . "/css/nibblepoker.min.css"))) ?>)

htdocs/parts/lists.php

@@ -1,25 +0,0 @@
-<?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="lists"></a>
-<div class="p-xs b r-s bkgd-grid mt-m">
-    <h2 class="t-w-500 t-size-14">Lists
-        <i class="fa-solid fa-list f-right"></i></h2>
-</div>
-<section class="p-s">
-    <p>???.</p>
-
-    <div class="debug">
-        <ul>
-            <li>Line 1</li>
-            <li>Line 2<br>Line 2 continued</li>
-            <li>Line 3</li>
-        </ul>
-    </div>
-
-    <b>TODO: All a detail of all classes</b>
-</section>

htdocs/parts/lists_base.php

@@ -0,0 +1,154 @@
+<?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="lists-basic"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Basic Lists
+        <i class="fa-solid fa-list 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 change before the 1.0.0 release ⚠️
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s">Blank lists</h3>
+    <div class="px-s">
+        <p class="mb-s">
+            By default, ordered and unordered lists have no bullet.<br>
+            This behavior can be used to create custom styled lists that still remain helpful for SEO and accessibility.
+        </p>
+        <ul class="debug">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li class="l-bullet-disc">
+                Item 3 with explicit disc bullet (See below)
+            </li>
+        </ul>
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-l">Normal lists</h3>
+    <div class="px-s">
+        <p class="mb-s">
+            Regular-looking lists can be created by simply adding the <span class="code">.l-bullets</span>
+            or <span class="code">.list-bullets</span> class to list's root element.<br>
+            These classes must also be used for any nested children lists !
+        </p>
+        <div class="debug mb-s">
+            <ul class="l-bullets debug l-bullet-manual">
+                <li>Line 1</li>
+                <li>Line 2<br>Line 2 continued after a <i>br</i></li>
+                <li>Line 3</li>
+                <ul class="l-bullets l-bullet-manual">
+                    <li>Line 3.1</li>
+                    <li>Line 3.2</li>
+                </ul>
+                <li>Line 4</li>
+            </ul>
+        </div>
+        <div class="debug">
+            <ol class="l-bullets l-bullet-manual">
+                <li>Salt</li>
+                <li>Packs of crisps</li>
+                <ol class="l-bullets l-bullet-manual">
+                    <li>Salt and pepper</li>
+                    <li>Paprika</li>
+                </ol>
+                <li>Olive oil</li>
+            </ol>
+        </div>
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-l">Bullet position</h3>
+    <div class="px-s">
+        <p class="mb-s">
+            By default, the lists do not include their bullet in the parent element.<br>
+            This is due to the fact that the imposed spacings when using
+            <span class="code">list-style-position: inside;</span> looks like absolute trash.
+        </p>
+        <p class="mb-s">
+            This behavior can be changed by using the <span class="code">.l-bullet-inside</span>
+            or <span class="code">list-bullet-inside</span> classes.<br>
+            Alternatively, a nicer manual spacing can be applied by using the <span class="code">.l-bullet-manual</span>
+            or <span class="code">list-bullet-manual</span> classes.
+        </p>
+        <p class="mb-s">
+            Please note that the following classes must be applied to the root element and any nested
+            list's root element too.
+        </p>
+        <div class="grid grid-col-3">
+            <div>
+                <p><b>Outside (Default)</b></p>
+                <ul class="debug l-bullets l-bullet-outside my-xs">
+                    <li>Item 1</li>
+                    <li>Item 2</li>
+                    <li>Item 3</li>
+                </ul>
+                <span class="code">ul.l-bullets<b>.l-bullet-outside</b>&gt;li*3</span>
+            </div>
+            <div>
+                <p><b>Inside</b></p>
+                <ul class="debug l-bullets l-bullet-inside my-xs">
+                    <li>Item 1</li>
+                    <li>Item 2</li>
+                    <li>Item 3</li>
+                </ul>
+                <span class="code">ul.l-bullets<b>.l-bullet-inside</b>&gt;li*3</span>
+            </div>
+            <div>
+                <p><b>Manual (Recommended)</b></p>
+                <ul class="debug l-bullets l-bullet-manual my-xs">
+                    <li>Item 1</li>
+                    <li>Item 2</li>
+                    <li>Item 3</li>
+                </ul>
+                <span class="code">ul.l-bullets<b>.l-bullet-manual</b>&gt;li*3</span>
+            </div>
+        </div>
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-l">Bullet styles</h3>
+    <div class="px-s">
+        <p class="mb-s">
+            Each list and its entry can have its bullets' style changed by using the following classes in the
+            <span class="code">ul</span>, <span class="code">ol</span> or <span class="code">li</span> elements.<br>
+            <s>The <span class="code">type</span> property also works as expected in these cases.</s>
+        </p>
+        <p class="mb-s">
+            Please note that some of the more exotic bullet styles may not fit properly when using
+            the manual position as shown below.<br>
+            This is a known issue and won't be fixed as it is an edge-case.
+        </p>
+        <ul class="debug l-bullet-manual">
+            <li class="l-bullet-disc">
+                Disc: <span class="code">.l-bullet-disc</span>, <span class="code">.list-bullet-disc</span>
+            </li>
+            <li class="l-bullet-square">
+                Square: <span class="code">.l-bullet-square</span>, <span class="code">.list-bullet-square</span>
+            </li>
+            <li class="l-bullet-decimal">
+                Decimal: <span class="code">.l-bullet-decimal</span>, <span class="code">.list-bullet-decimal</span>
+            </li>
+            <li class="l-bullet-decimal-leading">
+                Decimal: <span class="code">.l-bullet-decimal-leading</span>, <span class="code">.list-bullet-decimal-leading</span>
+            </li>
+            <li class="l-bullet-georgian">
+                Gregorian: <span class="code">.l-bullet-georgian</span>, <span class="code">.list-bullet-georgian</span>
+            </li>
+            <li class="l-bullet-chinese">
+                Chinese: <span class="code">.l-bullet-chinese</span>, <span class="code">.list-bullet-chinese</span>
+            </li>
+            <li class="l-bullet-kannada">
+                Kannada: <span class="code">.l-bullet-kannada</span>, <span class="code">.list-bullet-kannada</span>
+            </li>
+            <li class="l-bullet-none">
+                None: <span class="code">.l-bullet-none</span>, <span class="code">.list-bullet-none</span>
+            </li>
+        </ul>
+    </div>
+
+</section>

htdocs/parts/lists_composed.php

@@ -0,0 +1,16 @@
+<?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="lists-composed"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Composed Lists
+        <i class="fa-solid fa-ellipsis f-right"></i></h2>
+</div>
+<section class="p-s">
+    <h3 class="t-w-500 t-size-12 my-s">Blank lists</h3>
+
+</section>

htdocs/parts/rounding.php

@@ -11,23 +11,67 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <i class="fa-solid fa-bezier-curve f-right"></i></h2>
 </div>
 <section class="p-s">
-    <p>Rounding can be done on a corner/side/global basis using the standard size suffixes and some special ones.</p>
+    <p>
-    <p>These examples will have ???.</p>
+        Rounding can be applied on a global/sided/corner basis using the standard size suffixes and some
+        special ones shown below.
+    </p>
 
-    <p class="t-bold">Sizes:</p>
+    <h3 class="t-w-500 t-size-12 my-s">Regular sizes</h3>
-    <div class="grid col-4 col-medium-3 col-mobile-2 gap-xs t-center">
+    <div class="grid grid-col-4 grid-col-medium-3 grid-col-mobile-2 grid-gap-xs t-center">
-        <div class="r-0 p-xs b bkgd-blank-dark debug"><span class="code">r-0</span></div>
+        <div class="r-0 p-xs b bkgd-blank-dark debug"><span class="code">.r-0</span></div>
-        <div class="r-xs p-xs b bkgd-blank-dark debug"><span class="code">r-xs</span></div>
+        <div class="r-xs p-xs b bkgd-blank-dark debug"><span class="code">.r-xs</span></div>
-        <div class="r-s p-xs b bkgd-blank-dark debug"><span class="code">r-s</span></div>
+        <div class="r-s p-xs b bkgd-blank-dark debug"><span class="code">.r-s</span></div>
-        <div class="r-m p-xs b bkgd-blank-dark debug"><span class="code">r-m</span></div>
+        <div class="r-m p-xs b bkgd-blank-dark debug"><span class="code">.r-m</span></div>
-        <div class="r-l p-xs b bkgd-blank-dark debug"><span class="code">r-l</span></div>
+        <div class="r-l p-xs b bkgd-blank-dark debug"><span class="code">.r-l</span></div>
-        <div class="r-xl p-xs b bkgd-blank-dark debug"><span class="code">r-xl</span></div>
+        <div class="r-xl p-xs b bkgd-blank-dark debug"><span class="code">.r-xl</span></div>
     </div>
 
-    <p class="t-bold">Special classes:</p>
+    <h3 class="t-w-500 t-size-12 my-s mt-l">Special size</h3>
-    <div class="grid col-4 col-medium-3 col-mobile-2 gap-xs t-center">
+    <div class="grid grid-col-4 grid-col-medium-3 grid-col-mobile-2 grid-gap-xs t-center">
-        <div class="r-r p-xs b bkgd-blank-dark debug"><span class="code">r-r</span></div>
+        <div class="r-r p-xs b bkgd-blank-dark debug"><span class="code">.r-r</span></div>
     </div>
 
-    <b>TODO: All a detail of all classes</b>
+    <details class="border bkgd-dark r-m mt-l">
+        <summary class="p-xs">Click to show/hide all classes</summary>
+        <div class="p-xs bt bkgd-grey">
+            <?php
+            $roundingSizes = ["0", "xs", "s", "m", "l", "xl", "r"];
+
+            echo('<p>');
+            foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">r-'.$spacingSize.'</span>');}
+            echo('<span class="t-super-muted">General rounding</span></p>');
+
+            echo('<hr class="subtle my-s">');
+
+            echo('<p>');
+            foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rt-'.$spacingSize.'</span>');}
+            echo('<span class="t-super-muted">Top rounding</span></p>');
+            echo('<p>');
+            foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rb-'.$spacingSize.'</span>');}
+            echo('<span class="t-super-muted">Bottom rounding</span></p>');
+            echo('<p>');
+            foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rl-'.$spacingSize.'</span>');}
+            echo('<span class="t-super-muted">Left rounding</span></p>');
+            echo('<p>');
+            foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rr-'.$spacingSize.'</span>');}
+            echo('<span class="t-super-muted">Right rounding</span></p>');
+
+            echo('<hr class="subtle my-s">');
+
+            echo('<p>');
+            foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rtl-'.$spacingSize.'</span>');}
+            echo('<span class="t-super-muted">Top left rounding</span></p>');
+            echo('<p>');
+            foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rtr-'.$spacingSize.'</span>');}
+            echo('<span class="t-super-muted">Top right rounding</span></p>');
+            echo('<p>');
+            foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rbl-'.$spacingSize.'</span>');}
+            echo('<span class="t-super-muted">Bottom left rounding</span></p>');
+            echo('<p>');
+            foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rbr-'.$spacingSize.'</span>');}
+            echo('<span class="t-super-muted">Bottom right rounding</span></p>');
+
+            ?>
+        </div>
+    </details>
 </section>

htdocs/parts/sidebar.php

@@ -5,111 +5,119 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 }
 ?>
 
-<nav id="sidebar" class="sidebar p-m pt-l">
+<nav id="sidebar" class="sidebar">
-    <a href="/" class="no-select">
-        <img class="logo-sidebar-v2"
-             src="/img/logo-large-fluent-unshaded.svg"
-             alt="Website's logo"
-             draggable="false">
-    </a>
-    <p class="quantum t-logo-text mb-s mt-xs t-muted ucase">
-        N<span class="t-super-muted">ibble</span>P<span class="t-super-muted">oker</span>
-    </p>
-    <hr class="subtle">
 
-    <p class="t-bold t-size-14 py-xxs t-half-muted _t-underline t-center">Text</p>
+    <div class="p-m pt-l">
-    <a class="a-hidden" href="#text-weights">
+        <a href="/" class="no-select">
-        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
+            <img class="logo-sidebar-v2"
-            <i class="fa-solid fa-text-height pr-xs t-size-12 t-half-muted"></i>
+                 src="/img/logo-large-fluent-unshaded.svg"
-            <span class="t-size-12">Weights</span>
+                 alt="Website's logo"
-        </p>
+                 draggable="false">
-    </a>
+        </a>
-    <a class="a-hidden" href="#text-styles">
+    </div>
-        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-            <i class="fa-solid fa-italic pr-xs t-size-12 t-half-muted"></i>
-            <span class="t-size-12">Styles</span>
-        </p>
-    </a>
-    <a class="a-hidden" href="#text-alignment">
-        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-            <i class="fa-solid fa-text-width pr-xs t-size-12 t-half-muted"></i>
-            <span class="t-size-12">Alignment</span>
-        </p>
-    </a>
-    <a class="a-hidden" href="#text-modifiers">
-        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-            <i class="fa-solid fa-subscript pr-xs t-size-12 t-half-muted"></i>
-            <span class="t-size-12">Modifiers</span>
-        </p>
-    </a>
-    <a class="a-hidden" href="#text-links">
-        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-            <i class="fa-solid fa-link pr-xs t-size-12 t-half-muted"></i>
-            <span class="t-size-12">Links</span>
-        </p>
-    </a>
-    <a class="a-hidden" href="#text-misc">
-        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-            <i class="fa-solid fa-ellipsis pr-xs t-size-12 t-half-muted"></i>
-            <span class="t-size-12">Miscellaneous</span>
-        </p>
-    </a>
 
-    <hr class="subtle">
+    <details class="by t-noselect" open>
+        <summary class="p-xs bkgd-grid20 t-w-bold t-size-13">Core</summary>
+        <div class="p-xs px-m bt bkgd-grey t-size-11">
+            <a class="a-hidden" href="#text-weights">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-text-height pr-xs t-half-muted"></i>Weights
+                </p>
+            </a>
+            <a class="a-hidden" href="#text-styles">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-italic pr-xs t-half-muted"></i>Styles
+                </p>
+            </a>
+            <a class="a-hidden" href="#text-alignment">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-text-width pr-xs t-half-muted"></i>Alignment
+                </p>
+            </a>
+            <a class="a-hidden" href="#text-modifiers">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-subscript pr-xs t-half-muted"></i>Modifiers
+                </p>
+            </a>
+            <a class="a-hidden" href="#text-links">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-link pr-xs t-half-muted"></i>Links
+                </p>
+            </a>
+            <a class="a-hidden" href="#text-misc">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Miscellaneous
+                </p>
+            </a>
 
-    <a class="a-hidden" href="#spacing">
+            <hr class="subtle">
-        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-            <i class="fa-solid fa-ellipsis pr-xs t-size-12 t-half-muted"></i>
-            <span class="t-size-12">Spacing</span>
-        </p>
-    </a>
-    <a class="a-hidden" href="#rounding">
-        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-            <i class="fa-solid fa-bezier-curve pr-xs t-size-12 t-half-muted"></i>
-            <span class="t-size-12">Rounding</span>
-        </p>
-    </a>
 
-    <hr class="subtle">
+            <a class="a-hidden" href="#spacing">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Spacing
+                </p>
+            </a>
+            <a class="a-hidden" href="#rounding">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-bezier-curve pr-xs t-half-muted"></i>Rounding
+                </p>
+            </a>
 
-    <a class="a-hidden" href="#lists">
+            <hr class="subtle">
-        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-            <i class="fa-solid fa-list pr-xs t-size-12 t-half-muted"></i>
-            <span class="t-size-12">Lists</span>
-        </p>
-    </a>
 
-    <hr class="subtle">
+            <a class="a-hidden" href="#lists-basic">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-list pr-xs t-half-muted"></i>Lists
+                </p>
+            </a>
+            <a class="a-hidden" href="#grids">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-table-cells-large pr-xs t-half-muted"></i>Grids
+                </p>
+            </a>
+            <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>
+            </a>
+        </div>
+    </details>
 
-    <a class="a-hidden" href="#grids">
+    <details class="by t-noselect" open>
-        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
+        <summary class="p-xs bkgd-grid20 t-w-bold t-size-13">Site</summary>
-            <i class="fa-solid fa-table-cells-large pr-xs t-size-12 t-half-muted"></i>
+        <div class="p-xs px-m bt bkgd-grey t-size-11">
-            <span class="t-size-12">Grids</span>
+            <a class="a-hidden" href="#horizontal-rulers">
-        </p>
+                <p class="t-w-500 py-xs sidebar-entry">
-    </a>
+                    <i class="fa-solid fa-ruler pr-xs t-half-muted"></i>Horizontal Rulers
+                </p>
+            </a>
+            <a class="a-hidden" href="#backgrounds">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-paint-roller pr-xs t-half-muted"></i>Backgrounds
+                </p>
+            </a>
+            <a class="a-hidden" href="#buttons">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <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>
 
-    <a class="a-hidden" href="#tables">
+    <details class="by t-noselect" open>
-        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
+        <summary class="p-xs bkgd-grid20 t-w-bold t-size-13">Examples</summary>
-            <i class="fa-solid fa-table pr-xs t-size-12 t-half-muted"></i>
+        <div class="p-xs px-m bt bkgd-grey t-size-11">
-            <span class="t-size-12">Tables</span>
+            <a class="a-hidden" href="#examples-cards">
-        </p>
+                <p class="t-w-500 py-xs sidebar-entry">
-    </a>
+                    <i class="fa-solid fa-address-card pr-xs t-half-muted"></i>Cards
+                </p>
+            </a>
+        </div>
+    </details>
 
-    <hr class="subtle">
-
-    <a class="a-hidden" href="#horizontal-rulers">
-        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-            <i class="fa-solid fa-ruler pr-xs t-size-12 t-half-muted"></i>
-            <span class="t-size-12">Horizontal Rulers</span>
-        </p>
-    </a>
-
-    <hr class="subtle">
-
-    <a class="a-hidden" href="#buttons">
-        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
-            <i class="fa-solid fa-stop pr-xs t-size-12 t-half-muted"></i>
-            <span class="t-size-12">Buttons</span>
-        </p>
-    </a>
 </nav>

htdocs/parts/spacing.php

@@ -21,18 +21,18 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         Using margins would have the same effect, if you ignore margin folding.
     </p>
 
-    <div class="grid col-3 col-medium-2 col-mobile-1 gap-xs mt-s t-center">
+    <div class="grid grid-col-3 grid-col-medium-2 grid-col-mobile-1 grid-gap-xs mt-s t-center">
-        <div><div class="debug p-xxs"><div class="debug"><p><span class="code">p-xxs</span></p></div></div></div>
+        <div><div class="debug p-xxs"><div class="debug"><p><span class="code">.p-xxs</span></p></div></div></div>
-        <div><div class="debug p-xs"><div class="debug"><p><span class="code">p-xs</span></p></div></div></div>
+        <div><div class="debug p-xs"><div class="debug"><p><span class="code">.p-xs</span></p></div></div></div>
-        <div><div class="debug p-s"><div class="debug"><p><span class="code">p-s</span></p></div></div></div>
+        <div><div class="debug p-s"><div class="debug"><p><span class="code">.p-s</span></p></div></div></div>
-        <div><div class="debug p-m"><div class="debug"><p><span class="code">p-m</span></p></div></div></div>
+        <div><div class="debug p-m"><div class="debug"><p><span class="code">.p-m</span></p></div></div></div>
-        <div><div class="debug p-l"><div class="debug"><p><span class="code">p-l</span> </p></div></div></div>
+        <div><div class="debug p-l"><div class="debug"><p><span class="code">.p-l</span> </p></div></div></div>
-        <div><div class="debug p-xl"><div class="debug"><p><span class="code">p-xl</span></p></div></div></div>
+        <div><div class="debug p-xl"><div class="debug"><p><span class="code">.p-xl</span></p></div></div></div>
     </div>
 
-    <details class="border bkgd-blank r-m mt-s">
+    <details class="border bkgd-dark r-m mt-s">
         <summary class="p-xs">Click to show/hide all classes</summary>
-        <div class="p-xs bt bkgd-blank-dark">
+        <div class="p-xs bt bkgd-grey">
             <?php
             $spacingSizes = ["0", "xxs", "xs", "s", "m", "l", "xl"];
 

htdocs/parts/tables.php

@@ -1,66 +0,0 @@
-<?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"></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">
-    <h3 class="t-w-500 t-size-12 my-s">Unstyled table</h3>
-    <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>
-
-    <h3 class="t-w-500 t-size-12 my-s">Stylish table</h3>
-    <p class="mb-xxs">
-        Tables can quickly be styled by simply using the following classes:
-    </p>
-    <ul class="mb-s">
-        <li><span class="code">stylish</span> - Adds colors to cells and makes headers bold</li>
-        <li><span class="code">table-p-xs</span> - Adds a <i>xs</i> padding to all cells</li>
-        <li><span class="code">table-p-s</span> - Adds an <i>s</i> padding to all cells</li>
-        <li><span class="code">table-h-p-s</span> - Adds an <i>s</i> padding to the header cells</li>
-    </ul>
-    <table class="stylish table-p-s border">
-        <tr>
-            <th>Head 1</th>
-            <th>Head 2</th>
-        </tr>
-        <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">
-        table<b>.stylish.table-p-s.border</b><br>
-        &nbsp;&nbsp;th>td*2<br>
-        &nbsp;&nbsp;tr*2>td*2
-    </code>
-
-
-
-</section>

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

@@ -0,0 +1,53 @@
+<?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-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>
+    </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 require a special workaround to work properly ⚠️
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3>
+    <div class="px-s">
+        <p class="mb-xxs">
+            Tables can quickly be styled by simply using the <span class="code">.table-stylish</span> class.
+        </p>
+        <p class="mb-xs">
+            However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.<br>
+            Therefore, the <span class="code">.o-hidden</span> is automatically applied to the table itself.<br>
+            A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size.
+        </p>
+        <table class="table-stylish table-p-s border r-l">
+            <thead>
+                <th>Head 1</th>
+                <th>Head 2</th>
+            </thead>
+            <tbody>
+            <tr>
+                <td>Cell 1.1</td>
+                <td>Cell 1.2</td>
+            </tr>
+            <tr>
+                <td>Cell 2.1</td>
+                <td>Cell 2.2</td>
+            </tr>
+            </tbody>
+        </table>
+        <code class="d-block p-xxs border r-s mt-s">
+            table<b>.table-stylish.table-p-s.border.r-l</b><br>
+            &nbsp;&nbsp;thead>th>td*2<br>
+            &nbsp;&nbsp;tbody>tr*2>td*2
+        </code>
+    </div>
+
+</section>

htdocs/parts/text_alignment.php

@@ -11,7 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <i class="fa-solid fa-text-width f-right"></i></h2>
 </div>
 <section class="p-s">
-    <table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
+    <table class="table-stylish border o-hidden table-p-xs table-v-center r-l">
         <thead>
         <th>Style</th>
         <th>Example</th>
@@ -20,35 +20,36 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <tbody>
         <tr>
             <td><p class="t-bold">Left</p></td>
-            <td><p class="t-left">Left</p></td>
+            <td><p class="t-left text-direction-target">Left</p></td>
-            <td><span class="code">t-left</span></td>
+            <td><span class="code">.t-left</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Center</p></td>
-            <td><p class="t-center">Centered</p></td>
+            <td><p class="t-center text-direction-target">Centered</p></td>
-            <td><span class="code">t-center</span></td>
+            <td><span class="code">.t-center</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Right</p></td>
-            <td><p class="t-right">Right</p></td>
+            <td><p class="t-right text-direction-target">Right</p></td>
-            <td><span class="code">t-right</span></td>
+            <td><span class="code">.t-right</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Start</p></td>
-            <td><p class="t-start">Start</p></td>
+            <td><p class="t-start text-direction-target">Start</p></td>
-            <td><span class="code">t-start</span></td>
+            <td><span class="code">.t-start</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">End</p></td>
-            <td><p class="t-end">End</p></td>
+            <td><p class="t-end text-direction-target">End</p></td>
-            <td><span class="code">t-end</span></td>
+            <td><span class="code">.t-end</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Justify</p></td>
             <td><p class="t-justify">Lorem ipsum.<br>Donor si amet elit.</p></td>
-            <td><span class="code">t-justify</span></td>
+            <td><span class="code">.t-justify</span></td>
         </tr>
         </tbody>
     </table>
-    <button>Switch text direction</button>
+
+    <button class="p-xs r-s border primary mt-s text-direction-switch">Switch text direction</button>
 </section>

htdocs/parts/text_links.php

@@ -12,7 +12,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 </div>
 <section class="p-s">
     <h3 class="t-size-12 mb-xs">Regular anchors</h3>
-    <table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
+    <table class="table-stylish r-l border o-hidden table-p-xs table-v-center">
         <thead>
         <th>Example</th>
         <th>Source</th>
@@ -30,7 +30,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
     </table>
 
     <h3 class="t-size-12 mb-xs mt-m">Bland anchors</h3>
-    <table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
+    <table class="table-stylish r-l border o-hidden table-p-xs table-v-center">
         <thead>
         <th>Example</th>
         <th>Source</th>
@@ -48,7 +48,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
     </table>
 
     <h3 class="t-size-12 mb-xs mt-m">Hidden anchors</h3>
-    <table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
+    <table class="table-stylish r-l border o-hidden table-p-xs table-v-center">
         <thead>
         <th>Example</th>
         <th>Source</th>

htdocs/parts/text_misc.php

@@ -11,7 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <i class="fa-solid fa-ellipsis f-right"></i></h2>
 </div>
 <section class="p-s">
-    <table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
+    <table class="table-stylish r-l border o-hidden table-p-xs table-v-center">
         <thead>
         <th>Style</th>
         <th>Example</th>
@@ -20,23 +20,28 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <tbody>
         <tr>
             <td><p class="t-bold">No wrap</p></td>
-            <td><p class="t-nowrap">Cannot really be shown</p></td>
+            <td><p class="t-nowrap">Cannot really be demonstrated</p></td>
-            <td><span class="code">t-nowrap</span></td>
+            <td><span class="code">.t-nowrap</span></td>
+        </tr>
+        <tr>
+            <td><p class="t-bold">No Select</p></td>
+            <td><p class="t-noselect">Cannot be selected</p></td>
+            <td><span class="code">.t-noselect</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Half muted</p></td>
             <td><p class="t-half-muted">Half muted</p></td>
-            <td><span class="code">t-half-muted</span></td>
+            <td><span class="code">.t-half-muted</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Muted</p></td>
             <td><p class="t-muted">Muted text</p></td>
-            <td><span class="code">t-muted</span></td>
+            <td><span class="code">.t-muted</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Super muted</p></td>
             <td><p class="t-super-muted">Super Muted</p></td>
-            <td><span class="code">t-super-muted</span></td>
+            <td><span class="code">.t-super-muted</span></td>
         </tr>
         </tbody>
     </table>

htdocs/parts/text_modifiers.php

@@ -11,7 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <i class="fa-solid fa-subscript f-right"></i></h2>
 </div>
 <section class="p-s">
-    <table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
+    <table class="table-stylish r-l border o-hidden table-p-xs table-v-center">
         <thead>
         <th>Style</th>
         <th>Original</th>
@@ -23,19 +23,19 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
             <td><p class="t-bold">Uppercase</p></td>
             <td><p>Regular Case</p></td>
             <td><p class="t-ucase">Regular Case</p></td>
-            <td><span class="code">t-ucase</span></td>
+            <td><span class="code">.t-ucase</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Lowercase</p></td>
             <td><p>Regular Case</p></td>
             <td><p class="t-lcase">Regular Case</p></td>
-            <td><span class="code">t-lcase</span></td>
+            <td><span class="code">.t-lcase</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Capitalize</p></td>
             <td><p>no case</p></td>
             <td><span class="t-capitalize">no case</span></td>
-            <td><span class="code">t-capitalize</span></td>
+            <td><span class="code">.t-capitalize</span></td>
         </tr>
         </tbody>
     </table>

htdocs/parts/text_styles.php

@@ -11,7 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <i class="fa-solid fa-italic f-right"></i></h2>
 </div>
 <section class="p-s">
-    <table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
+    <table class="table-stylish r-l border o-hidden table-p-xs table-v-center">
         <thead>
         <th>Style</th>
         <th>Example</th>
@@ -22,31 +22,31 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <tr>
             <td><p class="t-bold">Italic</p></td>
             <td><p class="t-italic">Italic text</p></td>
-            <td><span class="code">t-italic</span></td>
+            <td><span class="code">.t-italic</span></td>
             <td><span class="code">i</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Oblique</p></td>
             <td><p class="t-oblique">Oblique text</p></td>
-            <td><span class="code">t-oblique</span></td>
+            <td><span class="code">.t-oblique</span></td>
             <td><span class="t-muted">N/A</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Underline</p></td>
             <td><p class="t-underline">Underlined text</p></td>
-            <td><span class="code">t-underline</span></td>
+            <td><span class="code">.t-underline</span></td>
             <td><span class="code">u</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Strikethrough</p></td>
             <td><p class="t-strikethrough">Struck text</p></td>
-            <td><span class="code">t-strikethrough</span></td>
+            <td><span class="code">.t-strikethrough</span></td>
             <td><span class="code">s</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Overline</p></td>
             <td><p class="t-overline">Overline text</p></td>
-            <td><span class="code">t-overline</span></td>
+            <td><span class="code">.t-overline</span></td>
             <td><span class="t-muted">N/A</span></td>
         </tr>
         </tbody>

htdocs/parts/text_weights.php

@@ -11,8 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <i class="fa-solid fa-text-height f-right"></i></h2>
 </div>
 <section class="p-s">
-    <h3 class="t-size-12 mb-xs">Numeric Weights</h3>
+    <table class="table-stylish r-l border o-hidden table-p-xs table-v-center">
-    <table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
         <thead>
         <th>Style</th>
         <th>Example</th>
@@ -24,15 +23,14 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
                 echo('<tr>');
                 echo('<td class="t-bold">' . ($i * 100) . '</td>');
                 echo('<td class="t-w-' . ($i * 100) . '">Lorem Ipsum donor.</td>');
-                echo('<td><span class="code">t-w-' . ($i * 100) . '</span></td>');
+                echo('<td><span class="code">.t-w-' . ($i * 100) . '</span></td>');
                 echo('</tr>');
             }
             ?>
         </tbody>
     </table>
 
-    <h3 class="t-size-12 mb-xs mt-m">Aliased Weights</h3>
+    <table class="table-stylish r-l border o-hidden table-p-xs table-v-center mt-l">
-    <table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
         <thead>
         <th>Style</th>
         <th>Example</th>
@@ -42,22 +40,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <tr>
             <td><p class="t-bold">Lighter</p></td>
             <td><p class="t-lighter">Lorem Ipsum 123 !</p></td>
-            <td><span class="code mr-xs">t-lighter</span><span class="code">t-w-lighter</span></td>
+            <td><span class="code mr-xs">.t-lighter</span><span class="code">.t-w-lighter</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Normal</p></td>
             <td><p class="t-normal">Lorem Ipsum 123 !</p></td>
-            <td><span class="code mr-xs">t-normal</span><span class="code">t-w-normal</span></td>
+            <td><span class="code mr-xs">.t-normal</span><span class="code">.t-w-normal</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Bold</p></td>
             <td><p class="t-bold">Lorem Ipsum 123 !</p></td>
-            <td><span class="code mr-xs">t-bold</span><span class="code">t-w-bold</span></td>
+            <td><span class="code mr-xs">.t-bold</span><span class="code">.t-w-bold</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Bolder</p></td>
             <td><p class="t-bolder">Lorem Ipsum 123 !</p></td>
-            <td><span class="code mr-xs">t-bolder</span><span class="code">t-w-bolder</span></td>
+            <td><span class="code mr-xs">.t-bolder</span><span class="code">.t-w-bolder</span></td>
         </tr>
         </tbody>
     </table>

readme.md

@@ -1,6 +1,29 @@
 # NibblePoker's CSS Theme (W.I.P.)
 A simple and minimalist CSS stylesheet used across all my websites and web-based applications.
 
+## Structure
+This stylesheet is composed of 4 major parts that all work together towards a common goal
+all the while staying independent and usable individually if you ever wished to.
+
+### External
+The *External* rules regroup every external CSS stylesheets that are included in this one.\
+Currently, [reset.css](https://meyerweb.com/eric/tools/css/reset/) is the only such stylesheet.
+
+**See:** [scss/external/](scss/external)
+
+### Core
+The *Core* rules define mostly universal and portable CSS rules and other utilities for text,
+spacing and whatnot. \
+Internally, they are defined after everything else in order to let them override rules
+applied to the custom elements and site-centric rules.
+
+**See:** [scss/core/](scss/core)
+
+### Site
+
+### Custom
+
+
 
 ## License
 The code in this repository is released under [CC0 1.0 Universal (CC0 1.0) (Public Domain)](LICENSE-CC0)

scss/config.scss

@@ -1,8 +1,23 @@
 // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-// Add the "w-000px"/"h-000px" classes.
+/* Config > NibbleCSS */
+
+// Toggles the inclusion of pixel-based sizing utility classes. ("w-000px", "h-000px", ...)
+// See: core/sizing.scss
 $add-px-sizing-rules: false;
 
 $nibblepoker-background-root: "./";
 
+// Toggles the inclusion of the ".bkgd-grid" background rules.
+// See: site/backgrounds.scss
+$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/grid.scss

@@ -7,13 +7,15 @@
 }
 
 @mixin grid-col-maker($col-count, $middle-part) {
-	.grid-col-#{$middle-part}#{$col-count}, .col-#{$middle-part}#{$col-count} {
+	// , .col-#{$middle-part}#{$col-count}
+	.grid-col-#{$middle-part}#{$col-count} {
 		grid-template-columns: repeat(#{$col-count}, 1fr);
 	}
 }
 
 @mixin grid-gap-maker($gap-size-key, $gap-size-value) {
-	.grid-gap-#{$gap-size-key}, .gap-#{$gap-size-key} {
+	// , .gap-#{$gap-size-key}
+	.grid-gap-#{$gap-size-key} {
 		grid-gap: #{$gap-size-value};
 	}
 }

scss/core/lists.scss

@@ -2,28 +2,54 @@
 
 /* Core > Lists */
 
-ul:not(.no-bullet) {
+ul {
-  padding-left: 1.5rem;
+  &.l-bullets, &.list-bullets {
-
-  &> li {
     list-style-type: disc;
   }
 }
 
-ol:not(.no-bullet) {
+ol {
-  list-style-type: decimal;
+  &.l-bullets, &.list-bullets {
-  padding-left: 1.5rem;
+    list-style-type: decimal;
+  }
 }
 
-li {
+ul, ol {
-  //list-style-type: disc;
+  &.l-bullet-inside, &.list-bullet-inside {
-
+    list-style-position: inside;
-  /*&>  li {
+  }
-    list-style-type: circle;
+  &.l-bullet-outside, &.list-bullet-outside {
-  }*/
+    list-style-position: outside;
+  }
+  &.l-bullet-manual, &.list-bullet-manual {
+    list-style-position: outside;
+    padding-left: 1.5rem;
+  }
 }
 
-/*ul.no-bullet, ol.no-bullet {
+ul, ol, li {
-  list-style-type: none;
+  &.list-bullet-none, &.l-bullet-none {
-  padding-left: 0;
+    list-style-type: none;
-}*/
+  }
+  &.list-bullet-disc, &.l-bullet-disc {
+    list-style-type: disc;
+  }
+  &.list-bullet-square, &.l-bullet-square {
+    list-style-type: square;
+  }
+  &.list-bullet-decimal, &.l-bullet-decimal {
+    list-style-type: decimal;
+  }
+  &.list-bullet-decimal-leading, &.l-bullet-decimal-leading {
+    list-style-type: decimal-leading-zero;
+  }
+  &.list-bullet-georgian, &.l-bullet-georgian {
+    list-style-type: georgian;
+  }
+  &.list-bullet-chinese, &.l-bullet-chinese {
+    list-style-type: trad-chinese-informal;
+  }
+  &.list-bullet-kannada, &.l-bullet-kannada {
+    list-style-type: kannada;
+  }
+}

scss/core/overflow.scss

@@ -4,13 +4,13 @@
 
 @mixin overflow-maker($overflow-type) {
 	.o-#{$overflow-type} {
-		overflow: #{$overflow-type};
+		overflow: #{$overflow-type} !important;
 	}
 	.ox-#{$overflow-type} {
-		overflow-x: #{$overflow-type};
+		overflow-x: #{$overflow-type} !important;
 	}
 	.oy-#{$overflow-type} {
-		overflow-y: #{$overflow-type};
+		overflow-y: #{$overflow-type} !important;
 	}
 }
 

scss/core/rounding/corner.scss

@@ -22,6 +22,7 @@
 @include corner-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
 @include corner-rounding-maker("m", #{$border-base-radius});
 @include corner-rounding-maker("l", calc(#{$border-base-radius} * 1.5));
+@include corner-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
 
 
 /* Utilities > Rounding > Corner > Fixed Sizes */

scss/core/rounding/sided.scss

@@ -26,6 +26,7 @@
 @include sided-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
 @include sided-rounding-maker("m", #{$border-base-radius});
 @include sided-rounding-maker("l", calc(#{$border-base-radius} * 1.5));
+@include sided-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
 
 
 /* Utilities > Rounding > Sided > Fixed Sizes */

scss/core/sizing.scss

@@ -21,12 +21,20 @@
 .w-half {
 	width: 50%;
 }
+.wm-half {
+	max-width: 50%;
+}
 
 .h-half {
 	height: 50%;
 }
+.hm-half {
+	max-height: 50%;
+}
 
-// Pixels Sizing (Deprecated, disabled by default, use custom rules !)
+// Pixels Sizing
+// These rules are deprecated and disabled by default.
+// You should preferably use custom site-specific or app-specific rules instead !
 @if($add-px-sizing-rules) {
 	// 50, 100, ..., 250 px
 	@for $_ from 1 through 5 {

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/core/text.scss

@@ -166,3 +166,7 @@ s, .t-strikethrough {
 	// Should be 35% TBH
 	opacity: 45%;
 }
+
+.t-noselect {
+	user-select: none;
+}

scss/nibblepoker.scss

@@ -17,29 +17,6 @@
 /* Variables */
 @import 'variables';
 
-/* Core */
-@import 'core/border'; // Border rules (.border, .bt-0, ...)
-@import 'core/float';  // Floating rules (.f-right, ...)
-@import 'core/sizing'; // Rules for setting elements size (.w-full, ...)
-@import 'core/flex';   // /!\ Needs an overhaul !!!
-@import 'core/grid';   // /!\ Needs an overhaul !!!
-@import 'core/text';   // Text-related rules (.t-bold, t-ucase, t-size-14, ...)
-//@import 'core/containers';  // Cannot remember why it was used, if ever
-@import 'core/display';   // /!\ Needs improvement !!!
-@import 'core/position';   // /!\ Needs improvement !!!
-@import 'core/overflow';   // Defines generic overflow rules (.o-hidden, .ox-scroll, ...)
-@import 'core/lists';
-
-/* Core > Rounding */
-@import 'core/rounding/global';
-@import 'core/rounding/sided';
-@import 'core/rounding/corner';
-
-/* Core > Spacing */
-@import 'core/spacing/global';
-@import 'core/spacing/axis';
-@import 'core/spacing/sided';
-
 /* Site */
 
 /* Site > Layouts */
@@ -71,5 +48,29 @@
 @import 'site/content';  // Uses fixed sizes and floats
 @import 'site/modal';
 
+/* Core */
+@import 'core/border'; // Border rules (.border, .bt-0, ...)
+@import 'core/float';  // Floating rules (.f-right, ...)
+@import 'core/sizing'; // Rules for setting elements size (.w-full, ...)
+@import 'core/flex';   // /!\ Needs an overhaul !!!
+@import 'core/grid';   // /!\ Needs an overhaul !!!
+@import 'core/text';   // Text-related rules (.t-bold, t-ucase, t-size-14, ...)
+//@import 'core/containers';  // Cannot remember why it was used, if ever
+@import 'core/display';   // /!\ Needs improvement !!!
+@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';
+@import 'core/rounding/sided';
+@import 'core/rounding/corner';
+
+/* Core > Spacing */
+@import 'core/spacing/global';
+@import 'core/spacing/axis';
+@import 'core/spacing/sided';
+
 /* Extras */
 @import 'site/splide';

scss/site/backgrounds.scss

@@ -2,30 +2,80 @@
 
 /* Site > Misc > Backgrounds */
 
-.bkgd-blank {
+.bkgd-dark {
 	background: #{$color-background-main-headings};
 }
 
-// The element rules override rules in `base.scss ~94`
+.bkgd-grey, .bkgd-gray {
-.bkgd-surround, header, nav, footer {
-	//background: #{$color-background-surround};
-	background: #{$color-background-surround} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center;
-}
-
-.bkgd-blank-dark {
 	background: mix($color-background-main, $color-background-surround, 50%);
 }
 
-.bkgd-grid {
+.bkgd-light {
-	background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
+	background: $color-background-main;
 }
 
-.bkgd-squares {
+@if($include-grid-backgrounds) {
-	background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/bright-squares-p100-0.125.png") repeat scroll center center;
+	// The element rules override rules in `base.scss ~94`
+	.bkgd-grid10, .bkgd-surround, header, nav, footer {
+		//background: #{$color-background-surround};
+		background: #{$color-background-surround} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center;
+
+		//background:
+		//	#{$color-background-surround}
+		//	url("data:image/png;base64,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")
+		//	repeat scroll center center;
+	}
+
+	.bkgd-grid20 {
+		//background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/old-mathematics-v2-0.25.png") repeat scroll center center;
+		// FIXME: Fix the code using this class !!!
+		background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center;
+	}
+
+	.bkgd-grid30 {
+		background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.3.png") repeat scroll center center;
+	}
+
+	.bkgd-grid40, .bkgd-grid {
+		background: #{$color-background-surround}
+		url("data:image/png;base64,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") repeat scroll center center;
+
+		//background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
+	}
 }
 
-.bkgd-math {
+.bkgd-transparent {
-	//background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/old-mathematics-v2-0.25.png") repeat scroll center center;
+	background: rgba(0, 0, 0, 0);
-	// FIXME: Fix the code using this class !!!
+}
-	background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center;
+
+.bkgd-blue {
+	background-color: #{$color-background-button-primary};
+}
+
+.bkgd-blue-light {
+	background-color: #{$color-background-button-primary-hover};
+}
+
+.bkgd-green {
+	background-color: #{$color-background-button-success};
+}
+
+.bkgd-green-light {
+	background-color: #{$color-background-button-success-hover};
+}
+
+.bkgd-red {
+	background-color: #{$color-background-button-error};
+}
+
+.bkgd-red-light {
+	background-color: #{$color-background-button-error-hover};
+}
+
+.bkgd-orange {
+	background-color: #{$color-background-button-warning};
+}
+
+.bkgd-orange-light {
+	background-color: #{$color-background-button-warning-hover};
 }

scss/site/borders.scss

@@ -21,15 +21,6 @@ main {
 	}
 }
 
-table.stylish {
-	// Fixing border issues when using rounded corners by using a "fake" one using the background's color.
-	// It will look like utter shit when rounded on firefox because its rendering engine cannot clip rounded corners apparently.
-	// I guess that's what being at less than 3% of the market share does to you and your ability to care about basic shit.
-	&.border {
-		background-color: #{$color-border-main};
-	}
-}
-
 // Special fix for select inputs' dropdown menu
 //select.border option::before {
 //	border: 1px solid deeppink !important;

scss/site/input.scss

@@ -62,7 +62,7 @@ button {
 		background-color: #{$color-background-button-hover};
 	}
 	
-	&.primary {
+	&.btn-primary {
 		background-color: #{$color-background-button-primary};
 		
 		&:hover {
@@ -70,7 +70,7 @@ button {
 		}
 	}
 	
-	&.success {
+	&.btn-success {
 		background-color: #{$color-background-button-success};
 		
 		&:hover {
@@ -78,7 +78,7 @@ button {
 		}
 	}
 	
-	&.error {
+	&.btn-error {
 		background-color: #{$color-background-button-error};
 		
 		&:hover {
@@ -86,7 +86,7 @@ button {
 		}
 	}
 	
-	&.warning {
+	&.btn-warning {
 		background-color: #{$color-background-button-warning};
 		
 		&:hover {

scss/site/table.scss

@@ -1,10 +1,11 @@
-// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
 
-tr, td {
+/* Site > Tables */
-	vertical-align: top;
+
-}
+.table-stylish {
+	border-collapse: separate;
+	overflow: hidden;
 
-table.stylish {
 	th {
 		font-weight: bold;
 	}
@@ -13,10 +14,6 @@ table.stylish {
 		background-color: #{$color-background-table-dual};
 	}
 	
-	tr:not(:last-of-type), th {
-		border-bottom: 1.5px solid #{$color-table-border};
-	}
-	
 	tr:nth-child(2n), th {
 		background-color: #{$color-background-table-main};
 	}
@@ -25,33 +22,7 @@ table.stylish {
 		border-right: 1.5px solid #{$color-table-border};
 	}
 
-	// See 'site/border.scss' for border fix.
+	tr:not(:last-of-type) td, th {
-}
+		border-bottom: 1.5px solid #{$color-table-border};
-
-// 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;
 	}
 }

scss/site/wedge.scss

@@ -2,7 +2,7 @@
 
 /* Custom Elements > Wedge */
 
-.wedge {
+wedge, .wedge {
 	position: absolute;
 	//top: 0;
 	//right: 0;

todos.txt

@@ -0,0 +1,18 @@
+floats
+grids mobile sizes
+inputs
+composed element gallery
+body layout
+display utilities
+size utilities
+scrolling utilities
+media
+modal
+code
+borders
+
+custom elements
+* wedge
+* ???
+
+bkgd color if grid disabled