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

Removed non-prefixed grid rules, Updated pages, Swapped core/site rules order

Browse Source 
Update backgrounds.php, buttons.php, and 6 more files...
This commit is contained in:
Herwin Bozet (NibblePoker) 2024-11-21 17:41:45 +01:00
parent 7c14a9f9fa
commit b4dce500fe
8 changed files with 55 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
htdocs/parts/backgrounds.php
View File

@ -14,7 +14,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<section class="p-s"> <section class="p-s">
<h3 class="t-w-500 t-size-12 mb-xs mt-xxs">Simple colors</h3> <h3 class="t-w-500 t-size-12 mb-xs mt-xxs">Simple colors</h3>
<div class="grid col-3 grid-gap-l px-s"> <div class="grid grid-col-3 grid-gap-l px-s">
<div> <div>
<div class="p-l border r-xl bkgd-dark my-xs"></div> <div class="p-l border r-xl bkgd-dark my-xs"></div>
<span class="code mb-s">.bkgd-dark</span> <span class="code mb-s">.bkgd-dark</span>
@ -31,7 +31,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div> </div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Grid backgrounds</h3> <h3 class="t-w-500 t-size-12 my-s mt-l">Grid backgrounds</h3>
<div class="grid col-2 grid-gap-l px-s"> <div class="grid grid-col-2 grid-gap-l px-s">
<div> <div>
<p class="t-w-500">40% opacity (Title bars)</p> <p class="t-w-500">40% opacity (Title bars)</p>
<div class="p-l border r-xl bkgd-grid40 my-xs"></div> <div class="p-l border r-xl bkgd-grid40 my-xs"></div>
@ -57,7 +57,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div> </div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Special backgrounds</h3> <h3 class="t-w-500 t-size-12 my-s mt-l">Special backgrounds</h3>
<div class="grid col-3 grid-gap-l px-s"> <div class="grid grid-col-3 grid-gap-l px-s">
<div> <div>
<p class="t-w-500">Transparent</p> <p class="t-w-500">Transparent</p>
<div class="p-l border r-xl bkgd-transparent my-xs"></div> <div class="p-l border r-xl bkgd-transparent my-xs"></div>
@ -66,7 +66,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div> </div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Colored backgrounds</h3> <h3 class="t-w-500 t-size-12 my-s mt-l">Colored backgrounds</h3>
<div class="grid col-4 col-medium-2 grid-gap-l px-s"> <div class="grid grid-col-4 grid-col-medium-2 grid-gap-l px-s">
<div> <div>
<p class="t-w-500">Blue</p> <p class="t-w-500">Blue</p>
<div class="p-l border r-xl bkgd-blue my-xs"></div> <div class="p-l border r-xl bkgd-blue my-xs"></div>
@ -88,7 +88,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<span class="code">.bkgd-green-light</span> <span class="code">.bkgd-green-light</span>
</div> </div>
</div> </div>
<div class="grid col-4 col-medium-2 grid-gap-l px-s mt-m"> <div class="grid grid-col-4 grid-col-medium-2 grid-gap-l px-s mt-m">
<div> <div>
<p class="t-w-500">Red</p> <p class="t-w-500">Red</p>
<div class="p-l border r-xl bkgd-red my-xs"></div> <div class="p-l border r-xl bkgd-red my-xs"></div>

4
htdocs/parts/buttons.php
View File

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

39
htdocs/parts/grids.php
View File

@ -15,22 +15,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Basic grids</h3> <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Basic grids</h3>
<div class="px-s"> <div class="px-s">
<p class="mb-m"> <p class="mb-m">
Grids are defined by combining the <span class="code">.grid</span> and <span class="code">.col-X</span> Grids are defined by combining the <span class="code">.grid</span> and <span class="code">.grid-col-X</span>
classes where <span class="code">X</span> represents the number of columns and can be classes 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">1</span>, <span class="code">2</span>,
<span class="code">3</span>, <span class="code">4</span>, <span class="code">3</span>, <span class="code">4</span>,
<span class="code">6</span> or <span class="code">8</span>. <span class="code">6</span> or <span class="code">8</span>.
</p> </p>
<div class="grid col-1 debug p-xxs mb-xs"> <div class="grid grid-col-1 debug p-xxs mb-xs">
<div class="bkgd-blank-dark debug">Cell #1</div> <div class="bkgd-blank-dark debug">Cell #1</div>
</div> </div>
<p><span class="code">div.grid.col-1&gt;div</span></p> <p><span class="code">div.grid.grid-col-1&gt;div</span></p>
<div class="grid col-2 debug p-xxs mb-xs mt-m"> <div class="grid grid-col-2 debug p-xxs mb-xs mt-m">
<div class="bkgd-blank-dark debug">Cell #1</div> <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 #2</div>
</div> </div>
<p><span class="code">div.grid.col-2&gt;div*2</span></p> <p><span class="code">div.grid.grid-col-2&gt;div*2</span></p>
<div class="grid col-6 debug p-xxs mb-xs mt-m"> <div class="grid grid-col-6 debug p-xxs mb-xs mt-m">
<div class="bkgd-blank-dark debug">Cell #1</div> <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 #2</div>
<div class="bkgd-blank-dark debug">Cell #3</div> <div class="bkgd-blank-dark debug">Cell #3</div>
@ -38,25 +38,24 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<div class="bkgd-blank-dark debug">Cell #5</div> <div class="bkgd-blank-dark debug">Cell #5</div>
<div class="bkgd-blank-dark debug">Cell #6</div> <div class="bkgd-blank-dark debug">Cell #6</div>
</div> </div>
<p><span class="code">div.grid.col-6&gt;div*6</span></p> <p><span class="code">div.grid.grid-col-6&gt;div*6</span></p>
</div> </div>
<h3 class="t-w-500 t-size-12 my-xs mt-l">Grid gaps</h3> <h3 class="t-w-500 t-size-12 my-xs mt-l">Grid gaps</h3>
<div class="px-s"> <div class="px-s">
<p class="mb-m"> <p class="mb-m">
Inter-cell gaps can also be setup by using the <span class="code">grid-gap-X</span> or Inter-cell gaps can also be setup by using the <span class="code">grid-gap-X</span> classes and
<span class="code">col-gap-X</span> classes and replacing the <span class="code">X</span> replacing the <span class="code">X</span> with the standard size suffixes.
with the standard size suffixes.
</p> </p>
<div class="gap-xs"> <div class="gap-xs">
<?php <?php
foreach(["xs", "m", "l"] as &$gapSize) { foreach(["xs", "m", "l"] as &$gapSize) {
echo('<div class="grid col-3 grid-gap-' . $gapSize . ' debug p-xxs mt-m">'); echo('<div class="grid grid-col-3 grid-gap-' . $gapSize . ' debug p-xxs mt-m">');
for($iGap = 1; $iGap <= 6; $iGap++) { for($iGap = 1; $iGap <= 6; $iGap++) {
echo('<div class="bkgd-blank-dark debug">Cell #' . $iGap . '</div>'); echo('<div class="bkgd-blank-dark debug">Cell #' . $iGap . '</div>');
} }
echo('</div>'); echo('</div>');
echo('<p class="mt-xs"><span class="code">div.grid.col-3.grid-gap-' . $gapSize . '&gt;div*6</span></p>'); echo('<p class="mt-xs"><span class="code">div.grid.grid-col-3.grid-gap-' . $gapSize . '&gt;div*6</span></p>');
} }
?> ?>
</div> </div>
@ -78,9 +77,9 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<td> <td>
<p><span class="code mr-xs">grid-col-1</span></p> <p><span class="code mr-xs">grid-col-1</span></p>
</td> </td>
<td> <!--<td>
<p><span class="code mr-xs">col-1</span></p> <p><span class="code mr-xs">col-1</span></p>
</td> </td>-->
<td rowspan="6"> <td rowspan="6">
<span class="t-super-muted">Specifies the column count</span></p> <span class="t-super-muted">Specifies the column count</span></p>
</td> </td>
@ -90,7 +89,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
foreach($gridColCounts as &$gridColCount){ foreach($gridColCounts as &$gridColCount){
echo('<tr>'); echo('<tr>');
echo('<td><p><span class="code mr-xs">grid-col-'.$gridColCount.'</span></p></td>'); 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>'); echo('</tr>');
} }
?> ?>
@ -103,9 +102,9 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<td> <td>
<p><span class="code mr-xs">grid-gap-xs</span></p> <p><span class="code mr-xs">grid-gap-xs</span></p>
</td> </td>
<td> <!--<td>
<p><span class="code mr-xs">gap-xs</span></p> <p><span class="code mr-xs">gap-xs</span></p>
</td> </td>-->
<td rowspan="6"> <td rowspan="6">
<span class="t-super-muted">Specifies the inter-cell gap size</span></p> <span class="t-super-muted">Specifies the inter-cell gap size</span></p>
</td> </td>
@ -115,15 +114,11 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
foreach($gridGapSizes as &$gridGapSize){ foreach($gridGapSizes as &$gridGapSize){
echo('<tr>'); echo('<tr>');
echo('<td><p><span class="code mr-xs">grid-gap-'.$gridGapSize.'</span></p></td>'); 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>'); echo('</tr>');
} }
?> ?>
</table> </table>
<?php
echo('<hr class="subtle my-s">');
?>
</div> </div>
</details> </details>

2
htdocs/parts/lists_base.php
View File

@ -80,7 +80,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
Please note that the following classes must be applied to the root element and any nested Please note that the following classes must be applied to the root element and any nested
list's root element too. list's root element too.
</p> </p>
<div class="grid col-3"> <div class="grid grid-col-3">
<div> <div>
<p><b>Outside (Default)</b></p> <p><b>Outside (Default)</b></p>
<ul class="debug l-bullets l-bullet-outside my-xs"> <ul class="debug l-bullets l-bullet-outside my-xs">

4
htdocs/parts/rounding.php
View File

@ -17,7 +17,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</p> </p>
<h3 class="t-w-500 t-size-12 my-s">Regular sizes</h3> <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>
@ -27,7 +27,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div> </div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Special size</h3> <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> </div>

2
htdocs/parts/spacing.php
View File

@ -21,7 +21,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
Using margins would have the same effect, if you ignore margin folding. Using margins would have the same effect, if you ignore margin folding.
</p> </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>

6
scss/core/grid.scss
View File

@ -7,13 +7,15 @@
} }
@mixin grid-col-maker($col-count, $middle-part) { @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); grid-template-columns: repeat(#{$col-count}, 1fr);
} }
} }
@mixin grid-gap-maker($gap-size-key, $gap-size-value) { @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}; grid-gap: #{$gap-size-value};
} }
} }

46
scss/nibblepoker.scss
View File

@ -17,29 +17,6 @@
/* Variables */ /* Variables */
@import '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 */
/* Site > Layouts */ /* Site > Layouts */
@ -71,5 +48,28 @@
@import 'site/content'; // Uses fixed sizes and floats @import 'site/content'; // Uses fixed sizes and floats
@import 'site/modal'; @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';
/* 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 */ /* Extras */
@import 'site/splide'; @import 'site/splide';