diff --git a/htdocs/parts/backgrounds.php b/htdocs/parts/backgrounds.php index 33d9a79..031dd31 100644 --- a/htdocs/parts/backgrounds.php +++ b/htdocs/parts/backgrounds.php @@ -14,7 +14,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

Simple colors

-
+
.bkgd-dark @@ -31,7 +31,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

Grid backgrounds

-
+

40% opacity (Title bars)

@@ -57,7 +57,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

Special backgrounds

-
+

Transparent

@@ -66,7 +66,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

Colored backgrounds

-
+

Blue

@@ -88,7 +88,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) { .bkgd-green-light
-
+

Red

diff --git a/htdocs/parts/buttons.php b/htdocs/parts/buttons.php index 27dbf99..e2a6c39 100644 --- a/htdocs/parts/buttons.php +++ b/htdocs/parts/buttons.php @@ -17,7 +17,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) { for colors only.

-
+

Unstyled button

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

-
+
diff --git a/htdocs/parts/grids.php b/htdocs/parts/grids.php index 578355b..7897269 100644 --- a/htdocs/parts/grids.php +++ b/htdocs/parts/grids.php @@ -15,22 +15,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

Basic grids

- Grids are defined by combining the .grid and .col-X + Grids are defined by combining the .grid and .grid-col-X classes where X represents the number of columns and can be 1, 2, 3, 4, 6 or 8.

-
+
Cell #1
-

div.grid.col-1>div

-
+

div.grid.grid-col-1>div

+
Cell #1
Cell #2
-

div.grid.col-2>div*2

-
+

div.grid.grid-col-2>div*2

+
Cell #1
Cell #2
Cell #3
@@ -38,25 +38,24 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
Cell #5
Cell #6
-

div.grid.col-6>div*6

+

div.grid.grid-col-6>div*6

Grid gaps

- Inter-cell gaps can also be setup by using the grid-gap-X or - col-gap-X classes and replacing the X - with the standard size suffixes. + Inter-cell gaps can also be setup by using the grid-gap-X classes and + replacing the X with the standard size suffixes.

'); + echo('
'); for($iGap = 1; $iGap <= 6; $iGap++) { echo('
Cell #' . $iGap . '
'); } echo('
'); - echo('

div.grid.col-3.grid-gap-' . $gapSize . '>div*6

'); + echo('

div.grid.grid-col-3.grid-gap-' . $gapSize . '>div*6

'); } ?>
@@ -78,9 +77,9 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

grid-col-1

- + Specifies the column count

@@ -90,7 +89,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) { foreach($gridColCounts as &$gridColCount){ echo(''); echo('

grid-col-'.$gridColCount.'

'); - echo('

col-'.$gridColCount.'

'); + //echo('

col-'.$gridColCount.'

'); echo(''); } ?> @@ -103,9 +102,9 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

grid-gap-xs

- + Specifies the inter-cell gap size

@@ -115,15 +114,11 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) { foreach($gridGapSizes as &$gridGapSize){ echo(''); echo('

grid-gap-'.$gridGapSize.'

'); - echo('

gap-'.$gridGapSize.'

'); + //echo('

gap-'.$gridGapSize.'

'); echo(''); } ?> - - '); - ?>
diff --git a/htdocs/parts/lists_base.php b/htdocs/parts/lists_base.php index d3e826c..91f6307 100644 --- a/htdocs/parts/lists_base.php +++ b/htdocs/parts/lists_base.php @@ -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.

-
+

Outside (Default)

    diff --git a/htdocs/parts/rounding.php b/htdocs/parts/rounding.php index 4664adb..aa31f9b 100644 --- a/htdocs/parts/rounding.php +++ b/htdocs/parts/rounding.php @@ -17,7 +17,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

    Regular sizes

    -
    +
    .r-0
    .r-xs
    .r-s
    @@ -27,7 +27,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

    Special size

    -
    +
    .r-r
    diff --git a/htdocs/parts/spacing.php b/htdocs/parts/spacing.php index 9cc9a03..6598038 100644 --- a/htdocs/parts/spacing.php +++ b/htdocs/parts/spacing.php @@ -21,7 +21,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) { Using margins would have the same effect, if you ignore margin folding.

    -
    +

    .p-xxs

    .p-xs

    .p-s

    diff --git a/scss/core/grid.scss b/scss/core/grid.scss index 966331f..ed30c99 100644 --- a/scss/core/grid.scss +++ b/scss/core/grid.scss @@ -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}; } } diff --git a/scss/nibblepoker.scss b/scss/nibblepoker.scss index 3fdaa48..608487e 100644 --- a/scss/nibblepoker.scss +++ b/scss/nibblepoker.scss @@ -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';