Update .gitattributes

Added input sections stubs, Added textarea basic rules
Update index.php, inputs.php, and 3 more files...
2024-11-26 23:02:30 +01:00 · 2024-11-26 22:54:02 +01:00 · 2024-11-26 22:11:12 +01:00 · 2024-11-26 22:08:33 +01:00 · 2024-11-26 21:12:39 +01:00 · 2024-11-26 21:06:28 +01:00
14 changed files with 329 additions and 62 deletions
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1,2 @@
+# Preventing this repo from turning into a PHP repository
+*.php linguist-vendored
--- a/.github/workflows/build-all.yml
+++ b/.github/workflows/build-all.yml
@ -0,0 +1,83 @@
+name: Build Everything
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  sass_compile:
+    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 PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.4'
+          extensions: none
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'latest'
+
+      - name: Install SASS Compiler
+        run: |
+          npm install -g 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
+
+      - name: Pre-render PHP File
+        run: |
+          cd htdocs
+          php ./index.php > ./index.html
+
+      - name: Remove trash
+        run: |
+          cd htdocs
+          rm -rf parts/
+          rm *.php
+
+      - name: Deploy demo page to gh-pages
+        uses: peaceiris/actions-gh-pages@v4
+        if: ${{ github.ref == 'refs/heads/master' }}
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./htdocs
--- a/dockerize.cmd
+++ b/dockerize.cmd
@ -1,21 +0,0 @@
-@echo off
-setlocal enabledelayedexpansion
-
-:: Going into the script's directory
-cd /D "%~dp0"
-
-
-:dockerize
-echo.
-echo Preparing the container
-echo -----------------------
-
-:dockerize-up
-pushd %CD%
-docker-compose -f docker-compose.dev.yml up -d --force-recreate
-popd
-
-:dockerize-end
-
-
-:end
--- a/htdocs/img/maki-03.jpg
+++ b/htdocs/img/maki-03.jpg
--- a/htdocs/index.php
+++ b/htdocs/index.php
@ -7,10 +7,10 @@
    <!--<meta name="viewport" content="width=device-width"/>-->
    <meta name="author" content="Herwin Bozet">
    <meta name="robots" content="index, follow">
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-    <link rel="alternate icon" href="/favicon.ico">
-    <link rel="stylesheet" href="/css/nibblepoker.min.css">
-    <link rel="stylesheet" href="/css/debugger.min.css">
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg">
+    <link rel="alternate icon" href="./favicon.ico">
+    <link rel="stylesheet" href="./css/nibblepoker.min.css">
+    <link rel="stylesheet" href="./css/debugger.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
          crossorigin="anonymous"
          referrerpolicy="no-referrer" />
@ -31,7 +31,7 @@

 <header class="w-full p-m pl-s">
    <h1 class="t-size-17 t-w-500">
-        <i class="fa-brands fa-css3-alt mr-s"></i>NibbleCSS Documentation
+        <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>
 </header>
@ -58,53 +58,65 @@
    <!-- Introduction -->
    <?php include("./parts/intro.php"); ?>

-    <!-- Text > Weights -->
+
+    <!-- Core > Text > Weights -->
    <?php include("./parts/text_weights.php"); ?>

-    <!-- Text > Styles -->
+    <!-- Core > Text > Styles -->
    <?php include("./parts/text_styles.php"); ?>

-    <!-- Text > Alignment -->
+    <!-- Core > Text > Alignment -->
    <?php include("./parts/text_alignment.php"); ?>

-    <!-- Text > Modifiers -->
+    <!-- Core > Text > Modifiers -->
    <?php include("./parts/text_modifiers.php"); ?>

-    <!-- Text > Links -->
+    <!-- Core > Text > Links -->
    <?php include("./parts/text_links.php"); ?>

-    <!-- Text > Misc -->
+    <!-- Core > Text > Misc -->
    <?php include("./parts/text_misc.php"); ?>

-    <!-- Spacing -->
+    <!-- Core > Spacing -->
    <?php include("./parts/spacing.php"); ?>

-    <!-- Rounding -->
+    <!-- Core > Rounding -->
    <?php include("./parts/rounding.php"); ?>

-    <!-- Lists > Base -->
+    <!-- Core > Lists > Base -->
    <?php include("./parts/lists_base.php"); ?>

-    <!-- Lists > Composed
+    <!-- Core > Lists > Composed
    <?php include("./parts/lists_composed.php"); ?>-->

-    <!-- Grids -->
+    <!-- Core > Grids -->
    <?php include("./parts/grids.php"); ?>

-    <!-- Tables -->
+    <!-- Core > Tables -->
    <?php include("./parts/tables_core.php"); ?>

-    <!-- Horizontal Rulers -->
+    <!-- Core > Inputs -->
+    <?php include("./parts/core/inputs.php"); ?>
+
+
+    <!-- Site > Horizontal Rulers -->
    <?php include("./parts/horizontal_rulers.php"); ?>

-    <!-- Backgrounds -->
+    <!-- Site > Backgrounds -->
    <?php include("./parts/backgrounds.php"); ?>

-    <!-- Buttons -->
+    <!-- Site > Buttons -->
    <?php include("./parts/buttons.php"); ?>

-    <!-- Tables -->
+    <!-- Site > Tables -->
    <?php include("./parts/tables_site.php"); ?>
+
+
+    <!-- Examples > Inputs -->
+    <?php include("./parts/examples/inputs.php"); ?>
+
+    <!-- Examples > Tables -->
+    <?php include("./parts/examples/cards.php"); ?>
 </main>

 <footer class="d-flex flex-align-center w-full p-s py-xs">
@ -121,8 +133,8 @@
    </a>
 </footer>

-<script src="/js/sidebar.js"></script>
-<script src="/js/text-direction-switch.js"></script>
-<script src="/js/anchor-fix.js"></script>
+<script src="./js/sidebar.js"></script>
+<script src="./js/text-direction-switch.js"></script>
+<script src="./js/anchor-fix.js"></script>
 </body>
 </html>
--- a/htdocs/parts/core/inputs.php
+++ b/htdocs/parts/core/inputs.php
@ -0,0 +1,77 @@
+<?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="core-inputs"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Inputs
+        <i class="fa-solid fa-pen-to-square f-right"></i>
+    </h2>
+</div>
+<section class="p-s">
+
+    <div class="bkgd-blue t-w-400 t-center w-full r-l border p-xs mt-xxs mb-m">
+        ℹ️ Check the <a href="#examples-inputs">Examples &gt; Inputs</a> section for styled examples.
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-text">Text Input: </label>
+        <input id="demo-core-text" type="text" value="Lorem ipsum">
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            label+input[type=text]
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-password">Password Input: </label>
+        <input id="demo-core-password" type="password" value="12345678">
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            label+input[type=password]
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-number">Number Input: </label>
+        <input id="demo-core-number" type="number" value="42">
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            label+input[type=number]
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <input type="radio" id="demo-core-radio-1">
+        <label for="demo-core-radio-1">Radio 1</label><br>
+        <input type="radio" id="demo-core-radio-2">
+        <label for="demo-core-radio-2">Radio 2</label><br>
+        <input type="radio" id="demo-core-radio-3">
+        <label for="demo-core-radio-3">Radio 3</label>
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            (input[type=radio]+label+br)*3
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <input type="checkbox" id="demo-core-combo-1">
+        <label for="demo-core-combo-1">Checkbox 1</label><br>
+        <input type="checkbox" id="demo-core-combo-2">
+        <label for="demo-core-combo-2">Checkbox 2</label><br>
+        <input type="checkbox" id="demo-core-combo-3">
+        <label for="demo-core-combo-3">Checkbox 3</label>
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            (input[type=checkbox]+label+br)*3
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-textarea"></label>
+        <textarea id="demo-core-textarea" rows="8">Lorem Ipsum</textarea>
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            label+textarea
+        </code>
+    </div>
+
+</section>
--- a/htdocs/parts/examples/cards.php
+++ b/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>
--- a/htdocs/parts/examples/inputs.php
+++ b/htdocs/parts/examples/inputs.php
@ -0,0 +1,37 @@
+<?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-inputs"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Inputs
+        <i class="fa-solid fa-pen-to-square f-right"></i>
+    </h2>
+</div>
+<section class="p-s">
+
+    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Basic inputs</h3>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-text">Text Input: </label>
+        <input id="demo-core-text" type="text" value="Lorem ipsum" class="p-xxs border r-m">
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            label+input[type=text]<b>.p-xxs.border.r-m</b>
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <label for="demo-core-textarea"></label>
+        <textarea id="demo-core-textarea" rows="8" class="p-xxs border r-m w-full ta-resize-v">Lorem Ipsum</textarea>
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            label+textarea<b>.p-xxs.border.r-m.w-full.ta-resize-v</b>
+        </code>
+
+    </div>
+
+    <p class="mt-m t-bold">TODO: Add other types</p>
+</section>
--- a/htdocs/parts/intro.php
+++ b/htdocs/parts/intro.php
@ -7,6 +7,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 global $root_path;
 ?>

+<a id="intro"></a>
 <div class="p-xs b r-s bkgd-grid">
    <h2 class="t-w-500 t-size-14">Introduction</h2>
 </div>
@ -66,7 +67,7 @@ global $root_path;
            <tr>
                <td>NibbleCSS</td>
                <td>
-                    <a href="/css/nibblepoker.min.css"
+                    <a href="./css/nibblepoker.min.css"
                       title="Download the minified full stylesheet"
                       class="a-hidden"
                       download>
@ -78,7 +79,7 @@ global $root_path;
                    </a>
                </td>
                <td>
-                    <a href="/css/nibblepoker.css"
+                    <a href="./css/nibblepoker.css"
                       title="Download the full stylesheet"
                       class="a-hidden"
                       download>
@ -93,7 +94,7 @@ global $root_path;
            <tr>
                <td>Debugger</td>
                <td>
-                    <a href="/css/debugger.min.css"
+                    <a href="./css/debugger.min.css"
                       title="Download the minified debugging stylesheet"
                       class="a-hidden"
                       download>
@ -105,7 +106,7 @@ global $root_path;
                    </a>
                </td>
                <td>
-                    <a href="/css/debugger.css"
+                    <a href="./css/debugger.css"
                       title="Download the debugging stylesheet"
                       class="a-hidden"
                       download>
--- a/htdocs/parts/sidebar.php
+++ b/htdocs/parts/sidebar.php
@ -8,9 +8,9 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 <nav id="sidebar" class="sidebar">

    <div class="p-m pt-l">
-        <a href="/" class="no-select">
+        <a href="#intro" class="no-select">
            <img class="logo-sidebar-v2"
-                 src="/img/logo-large-fluent-unshaded.svg"
+                 src="./img/logo-large-fluent-unshaded.svg"
                 alt="Website's logo"
                 draggable="false">
        </a>
@ -80,6 +80,11 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
                    <i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
                </p>
            </a>
+            <a class="a-hidden" href="#core-inputs">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-pen-to-square pr-xs t-half-muted"></i>Inputs
+                </p>
+            </a>
        </div>
    </details>

@ -112,11 +117,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
    <details class="by t-noselect" open>
        <summary class="p-xs bkgd-grid20 t-w-bold t-size-13">Examples</summary>
        <div class="p-xs px-m bt bkgd-grey t-size-11">
-            <a class="a-hidden" href="#lists-composed">
+            <a class="a-hidden" href="#examples-inputs">
                <p class="t-w-500 py-xs sidebar-entry">
-                    <i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Composed
+                    <i class="fa-solid fa-pen-to-square pr-xs t-half-muted"></i>Inputs
+                </p>
+            </a>
+            <a class="a-hidden" href="#examples-cards">
+                <p class="t-w-500 py-xs sidebar-entry">
+                    <i class="fa-solid fa-address-card pr-xs t-half-muted"></i>Cards
                </p>
            </a>
        </div>
    </details>
+
 </nav>
--- a/htdocs/parts/tables_site.php
+++ b/htdocs/parts/tables_site.php
@ -44,7 +44,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
            </tbody>
        </table>
        <code class="d-block p-xxs border r-s mt-s">
-            table<b>.table-stylish.table-p-s.border.o-hidden</b><br>
+            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>
--- a/htdocs/parts/text_misc.php
+++ b/htdocs/parts/text_misc.php
@ -20,9 +20,14 @@ 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>
        </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>
--- a/scss/nibblepoker.scss
+++ b/scss/nibblepoker.scss
@ -2,9 +2,11 @@
 * -----------------------------------------------------------------------------
 * NibblePoker CSS Theme
 * -----------------------------------------------------------------------------
- * Author: Herwin Bozet
+ * Author: Herwin Bozet (@NibblePoker)
 * License: CC0 1.0 (Public Domain)
- * Source: ???
+ * Sources:
+ *   - https://github.com/aziascreations/CSS-NibblePoker/
+ *   - https://git.nibblepoker.lu/aziascreations/CSS-NibblePoker
 * -----------------------------------------------------------------------------
 */

--- a/scss/site/input.scss
+++ b/scss/site/input.scss
@ -132,9 +132,20 @@ button + button, .button-link + .button-link > button {
 	//}
 }

-textarea {

-	&.no-resize {
-		resize: none;
-	}
-}
+// TODO: Move to core !
+.ta-resize {
+	resize: both;
+}
+
+.ta-resize-h {
+	resize: horizontal;
+}
+
+.ta-resize-v {
+	resize: vertical;
+}
+
+.ta-resize-none {
+	resize: none;
+}
Author	SHA1	Message	Date
Herwin Bozet	6338ff2a6e	Update .gitattributes Some checks failed Build Everything / sass_compile (push) Has been cancelled Details	2024-11-26 23:02:30 +01:00
Herwin Bozet	697e0f01f5	Added input sections stubs, Added textarea basic rules Update index.php, inputs.php, and 3 more files...	2024-11-26 22:54:02 +01:00
Herwin Bozet	c2f002eaee	Fixed faulty download paths Some checks are pending Build Everything / sass_compile (push) Waiting to run Details Update intro.php	2024-11-26 22:11:12 +01:00
Herwin Bozet	14165e2006	Added GitHub Pages steps, Automated demo page (#2 ) Some checks are pending Build Everything / sass_compile (push) Waiting to run Details * Testing PHP Rendering workflow Update php-render.yml, sass-compile.yml, and nibblepoker.scss * Fixed CWD in PHP workflow Update php-render.yml * Removed beautifier step Update php-render.yml * Added artifact retrieval Update php-render.yml and sass-compile.yml * Attempt 1 to fix broken triggers Update php-render.yml * Combined workflows, Screw this noise Update build-all.yml, php-render.yml, and sass-compile.yml * Fixed paths for GitHub Pages Update index.php, intro.php, and sidebar.php * Removed trash step, Fixed last faulty path Update build-all.yml and cards.php	2024-11-26 22:08:33 +01:00
Herwin Bozet	e051a183dc	Removing PHP from stats, Removed trash Some checks failed Compile SASS / deploy (push) Has been cancelled Details Update .gitattributes and dockerize.cmd	2024-11-26 21:12:39 +01:00
Herwin Bozet	ecabc11ff6	Added SASS Compiling workflow (#1 ) Some checks are pending Compile SASS / deploy (push) Waiting to run Details * Added first version of SASS CICD Update sass-compile.yml * Added artifact step Update sass-compile.yml * Fixed artifact name, testing author name condition Update sass-compile.yml * Finished CICD SASS compiler, Added broken example page Update sass-compile.yml, maki-03.jpg, and 5 more files...	2024-11-26 21:06:28 +01:00