Modifier le fichier

Fonctionnement de la grille KSup

KSup implémente une structure de page générique, comprenant différentes zones qui peuvent être agencées entre elles de différentes façon selon les pages visitées et les supports sur lesquels elles sont consultées. Ces zones sont repérées par les classes suivantes :

• .pre-content : contient les éléments sous l'en-tête qui précèdent le contenu principal de la page
• .page-main-content : le cœur de la page avec son contenu
• .page-sidebar : une barre de navigation généralement placée sur le côté
• .page-boxes : des contenus annexes, présentés sous forme d' « encadrés »

À ces classes s'ajoutent des classes qui vient se positionner sur le body :

• .is-homepage : indique que la page visitée est une page d'accueil, le point d'entrée du site Web (à différencier de la fiche Accueil, qui présente un contenu riche dont l'agencement est personnalisé en contribution)
• .is-insidepage : qualifie toutes les autres pages du site Web

Variables CSS et personnalisation

L'ensemble de la page est agencé à l'aide d'une grille CSS. Un certain nombre de calculs (détaillés ci-après) "dégrossissent" le travail d'agencement des différentes zones décrites ci-avant. L'idée ici est de répondre à 2 besoins :

• N'avoir, idéalement, à modifier que des variables pour personnaliser l'agencement des contenus sur un site Web
• Éviter, autant que faire se peut, de "surcharger" des JSP critiques de KSup

Voici les variables en question, déclarées sur body :

* Le nombre de colonnes de base devrait se baser sur le nombre de colonnes configuré dans le projet (variable SCSS).

Le tableau ci-dessus décrit les valeurs par défaut définies pour ces variables. L'implémentation des sites KSup suivant le principe du mobile-first, on peut donc considérer que ces valeurs par défaut vont s'appliquer notamment sur des petits écrans. L'implémentation de la grille réalisée par défaut vient ensuite changer les règles au-delà du point de rupture $screen-md (48rem, 768px par défaut).

Les calculs réalisés sur les écrans plus larges sont les suivants :

1. Une "nouvelle" variable est introduite : --_page-layout-aside-columns-count (le _ au début désigne une variable "privée" dans le sens où elle permet simplement de simplifier les calculs suivants). Cette variable calcule le nombre de colonnes occupées par la sidebar et les encadrés, s'ils sont sur la même ligne que le contenu principal. Le calcul est le suivant :

   aside-columns-count = use-same-row-content * (sidebar-columns-count + boxes-columns-count)
   

   Ici, la variable --page-layout-use-same-row-content prend tout son sens : si on ne veut pas afficher les contenus sur la même ligne (ils seront donc les uns sous les autres), la valeur de 0 viendra donc annuler la multiplication. Si c'est 1, on additionne donc le nombre de colonnes occupées par la sidebar et par la zone d'encadrés.

2. Le nombre de colonne du contenu principal central (--page-layout-main-content-columns-count) est recalculé :

   main-content-columns-count = columns-count - aside-columns-count
   

   Il s'agit du nombre total de colonnes de la grille moins le nombre de colonnes occupées par la sidebar et les encadrés.

3. L'indice de la première colonne où doit se placer le contenu principal (--page-layout-main-content-offset) est recalculé :

   main-content-offset = offset - sidebar-columns-count
   

   On prend l'indice de la première colonne de l'intégralité du contenu* et on y ajoute le nombre de colonnes occupées par la sidebar.

4. Le nombre de colonnes du "pré-contenu" est recalculé. Il correspond en réalité au nombre de colonnes occupées par le contenu principal, de la sidebar et la zone d'encadrés (qui n'est pas forcément égal au nombre total de colonnes de la grille).

   pre-content-columns-count = main-content-columns-count + aside-columns-count
   

5. Enfin, on recalcule l'indice de la première colonne du "pré-contenu" sur le même principe que le point №2.

   pre-content-offset = columns-count - pre-content-columns-count + offset
   

** L'intégralité du contenu ne commence par nécessairement à la 1e colonne. Dans le cas de KSup, la 1e colonne de la grille CSS (ainsi que la dernière) contient la marge variable sur le côté, permettant de centrer le contenu du site dans la fenêtre. L'intégralité du contenu démarre donc réellement à la 2e colonne.

Une fois tous ces calculs réalisés, il ne reste plus qu'à modifier la position des éléments en fonction des différents contextes. Prenons le cas d'une page intérieure ("inside page") sur un écran large (> 768px) avec des encadrés.

Les règles CSS qui vont s'appliquer sont les suivantes (d'après ce qui est définit dans les feuilles de styles de KSup) dans sa version simplifiée :

@media screen and (min-width: 48rem) {
    body {
        --_page-layout-aside-columns-count: calc(
            var(--page-layout-use-same-row-content)
            * (var(--page-layout-sidebar-columns-count)
            + var(--page-layout-boxes-columns-count))
        );

        --page-layout-main-content-columns-count: calc(
            var(--page-layout-columns-count)
            - var(--_page-layout-aside-columns-count)
        );

        --page-layout-main-content-offset: calc(
            var(--page-layout-offset)
            + var(--page-layout-sidebar-columns-count)
        );

        --page-layout-pre-content-columns-count: calc(
            var(--page-layout-main-content-columns-count)
            + var(--_page-layout-aside-columns-count)
        );

        --page-layout-pre-content-offset: calc(
            var(--page-layout-columns-count)
            - var(--page-layout-pre-content-columns-count)
            + var(--page-layout-offset)
        );
    }

    .is-insidepage {
        --page-layout-sidebar-columns-count: 0;
    }


    .is-insidepage:has(.page-sidebar, .page-boxes) {
        --page-layout-columns-count: 12;
        --page-layout-offset: 2;
        --page-layout-use-same-row-content: 1;
    }

    .is-insidepage:has(.page-boxes) {
        --page-layout-boxes-columns-count: 3;
    }
}

Notez ici que les calculs de positionnement dans la grille sont effectifs dès lors que les éléments sont présents dans la page. Cela, même si lesdits éléments sont vides !

Si on détaille les différentes règles :

• On a d'abord le body qui définit les règles de calcul avec les variables qui seront déclarées après.
• On peut voir que le nombre de colonnes occupées par la sidebar vaut 0 par défaut. Il n'y a pas de sidebar, donc cette valeur restera à 0.
• On indique que le nombre de colonnes de l'intégralité du contenu est à 12. Cette variable est redéfinie ici, car dans KSup, le nombre de colonnes du contenu principal d'une page intérieure, sans sidebar et sans zone d'encadrés, est de 10.
• Avec 12 colonnes de contenu, on replace la première colonne du contenu à 2 (au lieu de 3) par défaut.
• On précise que l'on veut mettre tous les contenus sur la même ligne.
• Enfin, on indique que la zone d'encadrés occupe 3 colonnes à elle seule.

Dans la feuille de styles de KSup, les différentes zones sont placées, par défaut, de cette façon, en réutilisant les variables décrites précédemment :

.pre-content {
    grid-column: var(--page-layout-pre-content-offset) / span var(--page-layout-pre-content-columns-count);
}

.page-main-content {
    grid-column: var(--page-layout-main-content-offset) / span var(--page-layout-main-content-columns-count);
}

.page-sidebar {
    grid-column: content / span var(--page-layout-sidebar-columns-count);
}

.page-boxes {
    grid-column: span var(--page-layout-boxes-columns-count) / content;
}

Le mot-clé span indique que la valeur utilisée désigne un nombre de colonnes et non un indice de référence. Le mot-clé content désigne la colonne occupée par l'intégralité du contenu par défaut (dans les faits, ça indique donc l'indice 2 pour l'indice de début, et l'indice 11 pour l'indice de fin de la colonne) ; cela découle directement du fonctionnement des zones nommées dans les grilles CSS.

Dispositions définies par défaut dans KSup en fonction des contextes et des contenus

En vue mobile (< 768px), on applique les règles suivantes :

• La sidebar n'est pas affichée
• Les contenus se placent les uns sous les autres et occupent toute la largeur (12 colonnes)
• Dans l'ordre, on affiche le "pré-contenu", le contenu principal puis les encadrés

À l'heure actuelle, il n'y pas de règles qui régissent les écrans moyens (tablettes). Les règles d'affichage en vue "desktop" (≥ 768px) sont plus élaborées et sont décrites ci-dessous.

Les numéros indiquées dans le tableau suivent ce modèle :

L (@S‑E)

• L désigne le nombre de colonnes occupées par la zone (L pour Length)
• S désigne l'indice de la colonne du début de la zone (S pour Start)
• E désigne l'indice de la colonne de fin de la zone (E pour End)

Les symboles présents dans le tableau désignent :

• ✅ : La zone est présente dans la page
• ❌ : La zone est absente de la page

*** La taille du "contenu principal" de la fiche accueil (ne pas confondre avec "page d'accueil") peut, en réalité, dépasser sur les zones latérales (marges). Le nombre indiqué dans la colonne "contenu principal" indique simplement où se place la majorité du contenu de la fiche accueil.

**** La colonne "Même ligne ?" désigne si les zones "sidebar", "contenu principal" et "encadrés" doivent se trouver sur la même ligne ou non. Le "pré-contenu" se trouve toujours avant tout le reste.

Sources

Le tableau ci-dessus se base sur l'intégration qui est faite dans le fichier dédié.

Documents de spécification :

• K-Sup 7.3 - Layout de la page
• K-Sup 7.3 - Design System

Deux commentaires viennent également appuyer ce fonctionnement (mais viennent potentiellement en contradiction avec ce qui est implémenté actuellement) :

• Commentaire de Camille Lebugle
• Commentaire de Django Janny