From 69b3cf29c936b4c69881a9c7fe05cb07be5f0940 Mon Sep 17 00:00:00 2001 From: Herwin Date: Sat, 16 Nov 2024 17:12:18 +0100 Subject: [PATCH] Improved lists and their documentation, core is done Update intro.php, lists.php, and lists.scss --- htdocs/parts/intro.php | 30 ++++++---- htdocs/parts/lists.php | 127 +++++++++++++++++++++++++++++++++++++++-- scss/core/lists.scss | 60 +++++++++++++------ 3 files changed, 183 insertions(+), 34 deletions(-) diff --git a/htdocs/parts/intro.php b/htdocs/parts/intro.php index 2325247..c819a1c 100644 --- a/htdocs/parts/intro.php +++ b/htdocs/parts/intro.php @@ -3,6 +3,8 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) { header('HTTP/1.1 403 Forbidden'); die(); } + +global $root_path; ?>
@@ -26,25 +28,29 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

Design philosophy

-

Core Stylesheet

-

These rules apply to the "core" part of the stylesheet:

-
    +

    Core stylesheet rules:

    +
    • No implicit sizes, margins or paddings
    • No styles from class-less DOM, except for styling elements
    • Self-sufficient and embeddable as a single file or text blob
    • Competitive minified size
      • -
    • Standardized naming scheme
      • +
    • Standardized & consistent naming scheme
    - -

    Site Stylesheet

    -
      + +

      Site stylesheet rules:

      +
      • Prefabs for common elements
        • -
          +
          • Bound to specific elements
            • -
          • ???
            • -
          • ???
            • -
          • No forced smooth transition
            • -
          • MUST be snappy on low-end hardware, no snagging allowed
            • +
          +
        • No forced smooth transition
          • +
        + +

        General rules

        +
          +
        • Must be snappy on low-end hardware, no snagging or slowdowns allowed
          • +
            +
          • Tested on an old Chuwi Ubook X internally
diff --git a/htdocs/parts/lists.php b/htdocs/parts/lists.php index c05a3fb..43b6254 100644 --- a/htdocs/parts/lists.php +++ b/htdocs/parts/lists.php @@ -11,15 +11,132 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
-

???.

+

Blank lists

+

+ By default, ordered and unordered lists have no bullet.
+ This behavior can be used to create custom styled lists that still remain helpful for SEO and accessibility. +

+ -
-
    + +

    Normal lists

    +

    + Regular-looking lists can be created by simply adding the .l-bullets + or .list-bullets class to list's root element.
    + These classes must also be used for any nested children lists ! +

    +
    +
    • Line 1
      • -
    • Line 2
      Line 2 continued
      • +
    • Line 2
      Line 2 continued after a br
    • Line 3
      • +
        +
      • Line 3.1
        • +
      • Line 3.2
        • +
      +
    • Line 4
    +
    +
      +
    1. Salt
      2. +
    2. Packs of crisps
      3. +
        +
      1. Salt and pepper
        2. +
      2. Paprika
        3. +
      +
    3. Olive oil
      4. +
    +
    + +

    Bullet position

    +

    + By default, the lists do not include their bullet in the parent element.
    + This is due to the fact that the imposed spacings when using + list-style-position: inside; looks like absolute trash. +

    +

    + This behavior can be changed by using the .l-bullet-inside + or list-bullet-inside classes.
    + Alternatively, a nicer manual spacing can be applied by using the .l-bullet-manual + or list-bullet-manual classes. +

    +

    + Please note that the following classes must be applied to the root element and any nested + list's root element too. +

    +
    +
    +

    Outside (Default)

    +
      +
    • Item 1
      • +
    • Item 2
      • +
    • Item 3
      • +
    + ul.l-bullets.l-bullet-outside>li*3 +
    +
    +

    Inside

    +
      +
    • Item 1
      • +
    • Item 2
      • +
    • Item 3
      • +
    + ul.l-bullets.l-bullet-inside>li*3 +
    +
    +

    Manual (Recommended)

    +
      +
    • Item 1
      • +
    • Item 2
      • +
    • Item 3
      • +
    + ul.l-bullets.l-bullet-manual>li*3 +
    +
    + +

    Bullet styles

    +

    + Each list and its entry can have its bullets' style changed by using the following classes in the + ul, ol or li elements.
    + The type property also works as expected in these cases. +

    +

    + Please note that some of the more exotic bullet styles may not fit properly when using + the manual position as shown below.
    + This is a known issue and won't be fixed as it is an edge-case. +

    +
      +
    • + Disc: .l-bullet-disc, .list-bullet-disc +
      • +
    • + Square: .l-bullet-square, .list-bullet-square +
      • +
    • + Decimal: .l-bullet-decimal, .list-bullet-decimal +
      • +
    • + Decimal: .l-bullet-decimal-leading, .list-bullet-decimal-leading +
      • +
    • + Gregorian: .l-bullet-georgian, .list-bullet-georgian +
      • +
    • + Chinese: .l-bullet-chinese, .list-bullet-chinese +
      • +
    • + Kannada: .l-bullet-kannada, .list-bullet-kannada +
      • +
    • + None: .l-bullet-none, .list-bullet-none +
      • +
    - TODO: All a detail of all classes
diff --git a/scss/core/lists.scss b/scss/core/lists.scss index b9236e8..5eaaa18 100644 --- a/scss/core/lists.scss +++ b/scss/core/lists.scss @@ -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) { - list-style-type: decimal; - padding-left: 1.5rem; +ol { + &.l-bullets, &.list-bullets { + list-style-type: decimal; + } } -li { - //list-style-type: disc; - - /*&> li { - list-style-type: circle; - }*/ +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; + } } -/*ul.no-bullet, ol.no-bullet { - list-style-type: none; - padding-left: 0; -}*/ +ul, ol, li { + &.list-bullet-none, &.l-bullet-none { + list-style-type: none; + } + &.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; + } +}