Initial commit
Update .gitignore, LICENSE-CC0, and 70 more files...
This commit is contained in:
137
htdocs/parts/grids.php
Normal file
137
htdocs/parts/grids.php
Normal file
@@ -0,0 +1,137 @@
|
||||
<?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="grids"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Grids
|
||||
<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"><div></span> elements for the grid container and each cell.</p>-->
|
||||
<!--<p>[Equal width for cells, maybe]</p>-->
|
||||
|
||||
<p class="t-bold">Examples without inter-cell gaps:</p>
|
||||
<div class="gap-xs">
|
||||
<p><span class="code">div.grid.col-1>div</span></p>
|
||||
<div class="grid col-1 debug p-xxs">
|
||||
<div class="bkgd-blank-dark debug">Cell #1</div>
|
||||
</div>
|
||||
|
||||
<p><span class="code">div.grid.col-2>div*2</span></p>
|
||||
<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.col-6>div*6</span></p>
|
||||
<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>
|
||||
<div class="bkgd-blank-dark debug">Cell #4</div>
|
||||
<div class="bkgd-blank-dark debug">Cell #5</div>
|
||||
<div class="bkgd-blank-dark debug">Cell #6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Inter-cell gaps can also be setup by using the <span class="code">grid-gap-X</span> or
|
||||
<span class="code">col-gap-X</span> classes and 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">
|
||||
<?php
|
||||
foreach(["xs", "m", "l"] as &$gapSize) {
|
||||
echo('<p><span class="code">div.grid.col-3.grid-gap-' . $gapSize . '>div*6</span></p>');
|
||||
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>');
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<b>TODO: All mobile rules, Add non-identical sizing</b>
|
||||
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<tr>
|
||||
<td>
|
||||
<p><span class="code mr-xs">grid-col-1</span></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><span class="code mr-xs">col-1</span></p>
|
||||
</td>
|
||||
<td rowspan="6">
|
||||
<span class="t-super-muted">Specifies the column count</span></p>
|
||||
</td>
|
||||
</tr>
|
||||
<?php
|
||||
$gridColCounts = [/*"1",*/ "2", "3", "4", "6", "8"];
|
||||
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('</tr>');
|
||||
}
|
||||
?>
|
||||
</table>
|
||||
|
||||
<hr class="subtle my-s">
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<p><span class="code mr-xs">grid-gap-xs</span></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><span class="code mr-xs">gap-xs</span></p>
|
||||
</td>
|
||||
<td rowspan="6">
|
||||
<span class="t-super-muted">Specifies the inter-cell gap size</span></p>
|
||||
</td>
|
||||
</tr>
|
||||
<?php
|
||||
$gridGapSizes = [/*"xs",*/ "s", "m", "l", "xl"];
|
||||
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('</tr>');
|
||||
}
|
||||
?>
|
||||
</table>
|
||||
|
||||
<?php
|
||||
echo('<hr class="subtle my-s">');
|
||||
?>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</section>
|
||||
40
htdocs/parts/horizontal_rulers.php
Normal file
40
htdocs/parts/horizontal_rulers.php
Normal file
@@ -0,0 +1,40 @@
|
||||
<?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="horizontal-rulers"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Horizontal Rulers
|
||||
<i class="fa-solid fa-ruler f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<p>Generic: <span class="code">hr</span></p>
|
||||
<hr>
|
||||
|
||||
<p class="mt-s">Subtle: <span class="code">hr.subtle</span>, <span class="code">hr.hr-subtle</span></p>
|
||||
<hr class="subtle">
|
||||
|
||||
<p class="mt-s">Dashed: <span class="code">hr.dashed</span>, <span class="code">hr.hr-dashed</span></p>
|
||||
<hr class="dashed">
|
||||
|
||||
<p class="mt-s">Dotted: <span class="code">hr.dotted</span>, <span class="code">hr.hr-dotted</span></p>
|
||||
<hr class="dotted">
|
||||
|
||||
<p class="mt-s">Double:
|
||||
<span class="code">hr.double</span>, <span class="code">hr.hr-double</span>,
|
||||
<span class="code">hr.thick</span>, <span class="code">hr.hr-thick</span>
|
||||
</p>
|
||||
<hr class="double">
|
||||
|
||||
<p class="mt-s">Outset: <span class="code">hr.outset</span>, <span class="code">hr.hr-outset</span></p>
|
||||
<hr class="outset">
|
||||
<hr class="subtle outset">
|
||||
|
||||
<p class="mt-s">Cutting indicator: <span class="code">hr.cut-here</span>, <span class="code">hr.hr-cut-here</span></p>
|
||||
<hr class="dotted cut-here">
|
||||
<hr class="dashed cut-here">
|
||||
|
||||
</section>
|
||||
116
htdocs/parts/intro.php
Normal file
116
htdocs/parts/intro.php
Normal file
@@ -0,0 +1,116 @@
|
||||
<?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();
|
||||
}
|
||||
?>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<h3 class="t-size-12 mb-xxs">About the stylesheet</h3>
|
||||
<p class="ml-xs">
|
||||
<i>NibbleCSS</i> was originally conceived for internal use following a bout of performance issues with
|
||||
off-the-shelf stylesheets on low-end and mobile devices.<br>
|
||||
However, it rapidly got used outside its intended environment and was spun-off into a separate a
|
||||
publicly accessible and truly free project.
|
||||
</p>
|
||||
<p class="ml-xs mt-s">
|
||||
<i>NibbleCSS</i> is also released into the public domain as I do not believe forcing people to include licenses
|
||||
or disclaimers is truly free, especially when said licenses propagate themselves like tumorous growths.<br>
|
||||
Following that philosophy, <i>NibbleCSS</i> also makes use of
|
||||
<a href="https://meyerweb.com/eric/tools/css/reset/">Eric A. Meyer's Reset.css</a>
|
||||
which was also released into the public domain in 2011.
|
||||
</p>
|
||||
|
||||
<h3 class="t-size-12 mb-xxs mt-m">Design philosophy</h3>
|
||||
<div class="ml-xs">
|
||||
<h4 class="t-size-11">Core Stylesheet</h4>
|
||||
<p>These rules apply to the "core" part of the stylesheet:</p>
|
||||
<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>
|
||||
</ul>
|
||||
<!-- Avoid nested divs, keep the logical DOM layout, -->
|
||||
<h4 class="t-size-11 mt-s">Site Stylesheet</h4>
|
||||
<ul>
|
||||
<li>Prefabs for common elements</li>
|
||||
<ul>
|
||||
<li>Bound to specific elements</li>
|
||||
<li>???</li>
|
||||
<li>???</li>
|
||||
<li>No forced smooth transition</li>
|
||||
<li><b>MUST</b> be snappy on low-end hardware, no snagging allowed</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">
|
||||
<thead>
|
||||
<th>Stylesheet</th>
|
||||
<th>Minified CSS</th>
|
||||
<th>Regular CSS</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>NibbleCSS</td>
|
||||
<td>
|
||||
<a href="/css/nibblepoker.min.css"
|
||||
title="Download the minified full stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
<button class="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"))) ?>)
|
||||
</button>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/css/nibblepoker.css"
|
||||
title="Download the full stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
<button class="p-xs b r-m">
|
||||
<i class="fa fa-download"></i>
|
||||
nibblepoker.css
|
||||
(<?php echo(formatBytes(filesize($root_path . "/css/nibblepoker.css"))) ?>)
|
||||
</button>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Debugger</td>
|
||||
<td>
|
||||
<a href="/css/debugger.min.css"
|
||||
title="Download the minified debugging stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
<button class="p-xs b r-m">
|
||||
<i class="fa fa-download"></i>
|
||||
debugger.min.css
|
||||
(<?php echo(formatBytes(filesize($root_path . "/css/debugger.min.css"))) ?>)
|
||||
</button>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/css/debugger.css"
|
||||
title="Download the debugging stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
<button class="p-xs b r-m">
|
||||
<i class="fa fa-download"></i>
|
||||
debugger.css
|
||||
(<?php echo(formatBytes(filesize($root_path . "/css/debugger.css"))) ?>)
|
||||
</button>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
25
htdocs/parts/lists.php
Normal file
25
htdocs/parts/lists.php
Normal file
@@ -0,0 +1,25 @@
|
||||
<?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>
|
||||
33
htdocs/parts/rounding.php
Normal file
33
htdocs/parts/rounding.php
Normal file
@@ -0,0 +1,33 @@
|
||||
<?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="rounding"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Rounding
|
||||
<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>These examples will have ???.</p>
|
||||
|
||||
<p class="t-bold">Sizes:</p>
|
||||
<div class="grid col-4 col-medium-3 col-mobile-2 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-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-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-xl p-xs b bkgd-blank-dark debug"><span class="code">r-xl</span></div>
|
||||
</div>
|
||||
|
||||
<p class="t-bold">Special classes:</p>
|
||||
<div class="grid col-4 col-medium-3 col-mobile-2 gap-xs t-center">
|
||||
<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>
|
||||
</section>
|
||||
99
htdocs/parts/sidebar.php
Normal file
99
htdocs/parts/sidebar.php
Normal file
@@ -0,0 +1,99 @@
|
||||
<?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();
|
||||
}
|
||||
?>
|
||||
|
||||
<nav id="sidebar" class="sidebar p-m pt-l">
|
||||
<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>
|
||||
<a class="a-hidden" href="#text-weights">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-text-height pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Weights</span>
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-styles">
|
||||
<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">
|
||||
|
||||
<a class="a-hidden" href="#spacing">
|
||||
<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="#lists">
|
||||
<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="#grids">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-table-cells-large pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Grids</span>
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<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>
|
||||
</nav>
|
||||
92
htdocs/parts/spacing.php
Normal file
92
htdocs/parts/spacing.php
Normal file
@@ -0,0 +1,92 @@
|
||||
<?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="spacing"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Spacing
|
||||
<i class="fa-solid fa-ellipsis f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<p>
|
||||
Paddings and margins can be applied on a side/axis/global basis using the standard size suffixes.<br>
|
||||
Additionally, the <span class="code">xxs</span> size is also available for those rare tiny spacing needs.
|
||||
</p>
|
||||
|
||||
<p class="mt-s">
|
||||
The examples below have a bordered & padded container, and a regular bordered sub-container.<br>
|
||||
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><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-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-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>
|
||||
|
||||
<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">
|
||||
<?php
|
||||
$spacingSizes = ["0", "xxs", "xs", "s", "m", "l", "xl"];
|
||||
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">p-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">General padding</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">m-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">General margin</span></p>');
|
||||
|
||||
echo('<hr class="subtle my-s">');
|
||||
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">px-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Horizontal padding</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">py-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Vertical padding</span></p>');
|
||||
|
||||
echo('<p class="mt-xs">');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">mx-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Horizontal margin</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">my-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Vertical margin</span></p>');
|
||||
|
||||
echo('<hr class="subtle my-s">');
|
||||
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">pt-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Top padding</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">pb-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Bottom padding</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">pl-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Left padding</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">pr-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Right padding</span></p>');
|
||||
|
||||
echo('<p class="mt-xs">');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">mt-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Top margin</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">mb-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Bottom margin</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">ml-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Left margin</span></p>');
|
||||
echo('<p>');
|
||||
foreach($spacingSizes as &$spacingSize){echo('<span class="code mr-xs">mr-'.$spacingSize.'</span>');}
|
||||
echo('<span class="t-super-muted">Right margin</span></p>');
|
||||
?>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
54
htdocs/parts/text_alignment.php
Normal file
54
htdocs/parts/text_alignment.php
Normal file
@@ -0,0 +1,54 @@
|
||||
<?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="text-alignment"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Text<i class="fa-solid fa-chevron-right mx-xs"></i>Alignment
|
||||
<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">
|
||||
<thead>
|
||||
<th>Style</th>
|
||||
<th>Example</th>
|
||||
<th>Classes</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><p class="t-bold">Left</p></td>
|
||||
<td><p class="t-left">Left</p></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><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><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><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><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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button>Switch text direction</button>
|
||||
</section>
|
||||
67
htdocs/parts/text_links.php
Normal file
67
htdocs/parts/text_links.php
Normal file
@@ -0,0 +1,67 @@
|
||||
<?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="text-links"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Text<i class="fa-solid fa-chevron-right mx-xs"></i>Links
|
||||
<i class="fa-solid fa-link f-right"></i></h2>
|
||||
</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">
|
||||
<thead>
|
||||
<th>Example</th>
|
||||
<th>Source</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#">Real anchor</a></td>
|
||||
<td><span class="code">a</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="a">Fake anchor</p></td>
|
||||
<td><span class="code">*.a</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</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">
|
||||
<thead>
|
||||
<th>Example</th>
|
||||
<th>Source</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#" class="a-bland">Bland anchor</a></td>
|
||||
<td><span class="code">a.a-bland</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="a a-bland">Bland 'anchor'</p></td>
|
||||
<td><span class="code">*.a.a-bland</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</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">
|
||||
<thead>
|
||||
<th>Example</th>
|
||||
<th>Source</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#" class="a-hidden">Hidden anchor</a></td>
|
||||
<td><span class="code">a.a-hidden</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="a a-hidden">Hidden 'anchor'</p></td>
|
||||
<td><span class="code">*.a.a-hidden</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
43
htdocs/parts/text_misc.php
Normal file
43
htdocs/parts/text_misc.php
Normal file
@@ -0,0 +1,43 @@
|
||||
<?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="text-misc"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Text<i class="fa-solid fa-chevron-right mx-xs"></i>Miscellaneous
|
||||
<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">
|
||||
<thead>
|
||||
<th>Style</th>
|
||||
<th>Example</th>
|
||||
<th>Classes</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><p class="t-bold">No wrap</p></td>
|
||||
<td><p class="t-nowrap">Cannot really be shown</p></td>
|
||||
<td><span class="code">t-nowrap</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>
|
||||
</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>
|
||||
</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
42
htdocs/parts/text_modifiers.php
Normal file
42
htdocs/parts/text_modifiers.php
Normal file
@@ -0,0 +1,42 @@
|
||||
<?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="text-modifiers"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Text<i class="fa-solid fa-chevron-right mx-xs"></i>Modifiers
|
||||
<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">
|
||||
<thead>
|
||||
<th>Style</th>
|
||||
<th>Original</th>
|
||||
<th>Transformed</th>
|
||||
<th>Classes</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
54
htdocs/parts/text_styles.php
Normal file
54
htdocs/parts/text_styles.php
Normal file
@@ -0,0 +1,54 @@
|
||||
<?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="text-styles"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Text<i class="fa-solid fa-chevron-right mx-xs"></i>Styles
|
||||
<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">
|
||||
<thead>
|
||||
<th>Style</th>
|
||||
<th>Example</th>
|
||||
<th>Classes</th>
|
||||
<th>Elements</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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">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="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">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">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="t-muted">N/A</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
64
htdocs/parts/text_weights.php
Normal file
64
htdocs/parts/text_weights.php
Normal file
@@ -0,0 +1,64 @@
|
||||
<?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="text-weights"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Text<i class="fa-solid fa-chevron-right mx-xs"></i>Weights
|
||||
<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="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
|
||||
<thead>
|
||||
<th>Style</th>
|
||||
<th>Example</th>
|
||||
<th>Classes</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
for($i = 1; $i<=9; $i++) {
|
||||
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('</tr>');
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 class="t-size-12 mb-xs mt-m">Aliased Weights</h3>
|
||||
<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>
|
||||
<th>Classes</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
Reference in New Issue
Block a user