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

Compare commits

base: aziascreations:a2a229c720efe1febcf518e410f4a38016ccc2d7
Branches Tags
aziascreations:master
..
compare: aziascreations:8fa4b6cd2eb3a3fcb0185f905da403eb4e786498
Branches Tags
aziascreations:master

3 Commits
a2a229c720 ... 8fa4b6cd2e

Author SHA1 Message Date
Herwin
8fa4b6cd2e Removed dev docker-compose file 
Update docker-compose.dev.yml and docker-compose.yml
 2024-11-16 17:12:36 +01:00
Herwin
69b3cf29c9 Improved lists and their documentation, core is done 
Update intro.php, lists.php, and lists.scss
 2024-11-16 17:12:18 +01:00
Herwin
efd18af9b7 Implemented text direction switch 
Update index.php, text-direction-switch.js, and text_alignment.php
 2024-11-16 17:11:47 +01:00
7 changed files with 207 additions and 40 deletions
Show Stats Expand all files Collapse all files

0
docker-compose.dev.yml → docker-compose.yml
View File

1
htdocs/index.php
View File

@ -131,5 +131,6 @@
</footer>
<script src="/js/sidebar.js"></script>
<script src="/js/text-direction-switch.js"></script>
</body>
</html>

16
htdocs/js/text-direction-switch.js Normal file
View File

@ -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';
}
});
};
});
});

28
htdocs/parts/intro.php
View File

@ -3,6 +3,8 @@
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">
@ -26,25 +28,29 @@ 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>
<p>These rules apply to the "core" part of the stylesheet:</p>
<ul>
<h4 class="t-size-11 mt-s mb-xxs">Core stylesheet rules:</h4>
<ul class="l-bullets l-bullet-manual">
<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>
<ul>
<h4 class="t-size-11 mt-s mb-xxs">Site stylesheet rules:</h4>
<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>
<li>???</li>
</ul>
<li>No forced smooth transition</li>
<li><b>MUST</b> be snappy on low-end hardware, no snagging allowed</li>
</ul>
<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>

127
htdocs/parts/lists.php
View File

@ -11,15 +11,132 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<i class="fa-solid fa-list f-right"></i></h2>
</div>
<section class="p-s">
<p>???.</p>
<h3 class="t-w-500 t-size-12 my-s">Blank lists</h3>
<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 class="debug">
<ul>
<h3 class="t-w-500 t-size-12 my-s mt-l">Normal lists</h3>
<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</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>
<h3 class="t-w-500 t-size-12 my-s mt-l">Bullet position</h3>
<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 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>
<h3 class="t-w-500 t-size-12 my-s mt-l">Bullet styles</h3>
<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>
<b>TODO: All a detail of all classes</b>
</section>

13
htdocs/parts/text_alignment.php
View File

@ -20,27 +20,27 @@ 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>
</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>
</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>
</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>
</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>
</tr>
<tr>
@ -50,5 +50,6 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</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>

56
scss/core/lists.scss
View File

@ -2,28 +2,54 @@
/* Core > Lists */
ul:not(.no-bullet) {
padding-left: 1.5rem;
&> li {
ul {
&.l-bullets, &.list-bullets {
list-style-type: disc;
}
}
ol:not(.no-bullet) {
ol {
&.l-bullets, &.list-bullets {
list-style-type: decimal;
}
}
ul, ol {
&.l-bullet-inside, &.list-bullet-inside {
list-style-position: inside;
}
&.l-bullet-outside, &.list-bullet-outside {
list-style-position: outside;
}
&.l-bullet-manual, &.list-bullet-manual {
list-style-position: outside;
padding-left: 1.5rem;
}
li {
//list-style-type: disc;
/*&> li {
list-style-type: circle;
}*/
}
/*ul.no-bullet, ol.no-bullet {
ul, ol, li {
&.list-bullet-none, &.l-bullet-none {
list-style-type: none;
padding-left: 0;
}*/
}
&.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;
}
}