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">
<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 class="p-l border r-xl bkgd-dark my-xs"></div>
<span class="code mb-s">.bkgd-dark</span>
@ -31,7 +31,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div>
<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>
<p class="t-w-500">40% opacity (Title bars)</p>
<div class="p-l border r-xl bkgd-grid40 my-xs"></div>
@ -57,7 +57,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div>
<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>
<p class="t-w-500">Transparent</p>
<div class="p-l border r-xl bkgd-transparent my-xs"></div>
@ -66,7 +66,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div>
<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>
<p class="t-w-500">Blue</p>
<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>
</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>
<p class="t-w-500">Red</p>
<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.
</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>
<h3 class="t-w-500 t-size-12 mt-s">Unstyled button</h3>
<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
on their intended action by simply giving them another class.
</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>
<button class="p-xs r-s border btn-primary">Primary button</button>
<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>
<div class="px-s">
<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
<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>
<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>
<p><span class="code">div.grid.col-1&gt;div</span></p>
<div class="grid col-2 debug p-xxs mb-xs mt-m">
<p><span class="code">div.grid.grid-col-1&gt;div</span></p>
<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 #2</div>
</div>
<p><span class="code">div.grid.col-2&gt;div*2</span></p>
<div class="grid col-6 debug p-xxs mb-xs mt-m">
<p><span class="code">div.grid.grid-col-2&gt;div*2</span></p>
<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 #2</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 #6</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>
<h3 class="t-w-500 t-size-12 my-xs mt-l">Grid gaps</h3>
<div class="px-s">
<p class="mb-m">
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.
Inter-cell gaps can also be setup by using the <span class="code">grid-gap-X</span> classes and
replacing the <span class="code">X</span> with the standard size suffixes.
</p>
<div class="gap-xs">
<?php
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++) {
echo('<div class="bkgd-blank-dark debug">Cell #' . $iGap . '</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>
@ -78,9 +77,9 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<td>
<p><span class="code mr-xs">grid-col-1</span></p>
</td>
<td>
<!--<td>
<p><span class="code mr-xs">col-1</span></p>
</td>
</td>-->
<td rowspan="6">
<span class="t-super-muted">Specifies the column count</span></p>
</td>
@ -90,7 +89,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
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('<td><p><span class="code mr-xs">col-'.$gridColCount.'</span></p></td>');
echo('</tr>');
}
?>
@ -103,9 +102,9 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<td>
<p><span class="code mr-xs">grid-gap-xs</span></p>
</td>
<td>
<!--<td>
<p><span class="code mr-xs">gap-xs</span></p>
</td>
</td>-->
<td rowspan="6">
<span class="t-super-muted">Specifies the inter-cell gap size</span></p>
</td>
@ -115,15 +114,11 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
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('<td><p><span class="code mr-xs">gap-'.$gridGapSize.'</span></p></td>');
echo('</tr>');
}
?>
</table>
<?php
echo('<hr class="subtle my-s">');
?>
</div>
</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
list's root element too.
</p>
<div class="grid col-3">
<div class="grid grid-col-3">
<div>
<p><b>Outside (Default)</b></p>
<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>
<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-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>
@ -27,7 +27,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div>
<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>

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.
</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-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>

6
scss/core/grid.scss
View File

@ -7,13 +7,15 @@
}
@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);
}
}
@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};
}
}

46
scss/nibblepoker.scss
View File

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