aziascreations/CSS-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

Added monospace text and nowrap for tables

Browse Source 
Update index.php, tables.php, and 7 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2025-08-25 23:36:25 +02:00
parent 17cb37d5cf
commit 44678bd9f4
8 changed files with 153 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
htdocs/index.php vendored
View File

@@ -94,7 +94,7 @@
<?php include("./parts/grids.php"); ?> <?php include("./parts/grids.php"); ?>
<!-- Core > Tables --> <!-- Core > Tables -->
<?php include("./parts/tables_core.php"); ?> <?php include("./parts/core/tables.php"); ?>
<!-- Core > Inputs --> <!-- Core > Inputs -->
<?php include("./parts/core/inputs.php"); ?> <?php include("./parts/core/inputs.php"); ?>
@@ -110,7 +110,7 @@
<?php include("./parts/buttons.php"); ?> <?php include("./parts/buttons.php"); ?>
<!-- Site > Tables --> <!-- Site > Tables -->
<?php include("./parts/tables_site.php"); ?> <?php include("./parts/examples/tables.php"); ?>
<!-- Examples > Inputs --> <!-- Examples > Inputs -->

4
htdocs/parts/tables_core.php → htdocs/parts/core/tables.php vendored
View File

@@ -13,8 +13,8 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div> </div>
<section class="p-s"> <section class="p-s">
<div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m"> <div class="bkgd-blue t-w-400 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 ⚠️ ℹ️ Check the <a href="#tables-site">Examples &gt; Tables</a> section for styled examples.
</div> </div>
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Default table</h3> <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Default table</h3>

126
htdocs/parts/examples/tables.php vendored Normal file
View File

@@ -0,0 +1,126 @@
<?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 have specific limitations you should be aware of ⚠️
</div>
<h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3>
<div class="px-s mb-m">
<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>
<tr>
<th>Head 1</th>
<th>Head 2</th>
</tr>
</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>tr>th*2<br>
&nbsp;&nbsp;tbody>tr*2>td*2
</code>
</div>
<h3 class="t-w-500 t-size-12 my-s mt-xxs">Scrollable table</h3>
<div class="px-s">
<p class="mb-xxs mb-m">
Scrollable tables can be obtained by combining the overflow utility classes and the
<span class="code">.table-no-wrap</span> class to prevent cell from collapsing before scrolling.
</p>
<p class="mb-xxs mb-m">
This special class can be applied to the following elements: <br>
<span class="ml-s">
<span class="code">table</span>,
<span class="code">thead</span>,
<span class="code">tbody</span>,
<span class="code">tr</span>,
<span class="code">th</span>,
<span class="code">td</span>
</span>
</p>
<p class="mb-xxs mb-m">
In turn, every <span class="code">td</span> element under one of these elements will no longer wrap text.
</p>
<div class="w-full ox-scroll">
<table class="table-stylish table-p-s border r-l">
<thead>
<tr>
<th>Table without the <span class="code">.table-no-wrap</span> class</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec placerat neque.
In ornare hendrerit vestibulum. Nullam quis nisi sed est elementum pharetra non in ligula.
Curabitur malesuada varius congue. Donec ut facilisis nulla. Mauris vel turpis nisl.
In hac habitasse platea dictumst.
Integer non libero tempor, sollicitudin lorem vitae, auctor arcu.
</td>
</tr>
</tbody>
</table>
</div>
<div class="w-full ox-scroll">
<table class="table-stylish table-p-s border r-l table-no-wrap">
<thead>
<tr>
<th>Table with the <span class="code">.table-no-wrap</span> class</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec placerat neque.
In ornare hendrerit vestibulum. Nullam quis nisi sed est elementum pharetra non in ligula.
Curabitur malesuada varius congue. Donec ut facilisis nulla. Mauris vel turpis nisl.
In hac habitasse platea dictumst.
Integer non libero tempor, sollicitudin lorem vitae, auctor arcu.
</td>
</tr>
</tbody>
</table>
</div>
<code class="d-block p-xxs border r-s mt-s">
<b>div.w-full.ox-scroll</b><br>
&nbsp;&nbsp;table.table-stylish.table-p-s.border.r-l<b>.table-no-wrap</b><br>
&nbsp;&nbsp;&nbsp;&nbsp;thead>tr>th*2<br>
&nbsp;&nbsp;&nbsp;&nbsp;tbody>tr*2>td*2
</code>
</div>
</section>

53
htdocs/parts/tables_site.php vendored
View File

@@ -1,53 +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-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>

6
htdocs/parts/text_styles.php vendored
View File

@@ -49,6 +49,12 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<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> <td><span class="t-muted">N/A</span></td>
</tr> </tr>
<tr>
<td><p class="t-bold">Monospace</p></td>
<td><p class="t-monospace">monospace text</p></td>
<td><span class="code">.t-monospace</span></td>
<td><span class="t-muted">N/A</span></td>
</tr>
</tbody> </tbody>
</table> </table>
</section> </section>

9
scss/core/table.scss
View File

@@ -18,6 +18,15 @@ tr, td {
} }
} }
.table-no-wrap,
.table-no-wrap > td, .table-no-wrap > th,
.table-no-wrap > tr > td, .table-no-wrap > tr > th,
.table-no-wrap > thead > tr > td, .table-no-wrap > thead > tr > th,
.table-no-wrap > tbody > tr > td, .table-no-wrap > tbody > tr > th {
white-space: nowrap;
text-wrap: nowrap;
}
/* Core > Tables > Cell Padding */ /* Core > Tables > Cell Padding */

5
scss/core/text.scss
View File

@@ -95,6 +95,11 @@ s, .t-strikethrough {
text-decoration: overline; text-decoration: overline;
} }
// Defined in core/code.scss !
//.t-monospace {
// font-family: monospace, monospace;
//}
/* Core > Text > Alignment */ /* Core > Text > Alignment */

4
scss/site/code.scss
View File

@@ -1,6 +1,8 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain) // NibblePoker CSS Theme - CC0 1.0 (Public Domain)
code, .code, kbd { /* Core > Code */
code, .code, kbd, .t-monospace {
font-family: Consolas, "Courier New", monospace; font-family: Consolas, "Courier New", monospace;
} }