Aller au contenu principal

Structurer mes pages avec layout breakout

Guillaume Barbier

Temps de lecture : ~ 6 minutes

Structurer mes pages

Pour pousser l'expérience jusqu'au bout, j'ai intégré mes marges de sécurités dans la grille et supprimé toutes mes grilles existantes pour appliquer celle-ci.

Intégrer les marges de sécurités dans ma grille contenu

Une fois les marges de sécurité intégrées, j'obtiens la grille suivante (j'ai ajouté une safe "safe-fullwidth" pour pouvoir placer des éléments en pleine largeur sans toucher les bords de l'écran) :

// In __config.scss
$mobile-side-safe-zone : 24px;
$max-txt-content-width : 720px;

%content-grid {
  display: grid;
  grid-template-columns: 
    [fullwidth-start]
      $mobile-side-safe-zone
      [safe-fullwidth-start]
        minmax(0, 1fr)
        [breakout-start]
          minmax(0, 4rem)
          [content-start] 
            min(100% - (2 * $mobile-side-safe-zone), $max-txt-content-width)
          [content-end]
          minmax(0, 4rem)
        [breakout-end]
        minmax(0, 1fr)
      [safe-fullwidth-end]
      $mobile-side-safe-zone
    [fullwidth-end];
}

Adapter ma grille aux articles

Mais dans les articles, je souhaite pouvoir, dès que j'ai la place nécessaire, afficher ma table des contenus en permanence, sur le côté (gauche).

Je créé donc une zone "sidebar" :

// In __config.scss
$mobile-side-safe-zone : 24px;
$max-txt-content-width : 720px;

%content-grid {
  display: grid;
  grid-template-columns: 
    [fullwidth-start]
      $mobile-side-safe-zone
      [safe-fullwidth-start sidebar-start] 
        minmax(0, 1fr)
        [breakout-start sidebar-end]
          minmax(0, 4rem)
          [content-start]
            min(100% - (2 * $mobile-side-safe-zone), $max-txt-content-width)
          [content-end]
          minmax(0, 4rem)
        [breakout-end]
        minmax(0, 1fr) 
      [safe-fullwidth-end]
      $mobile-side-safe-zone 
    [fullwidth-end];
}

Petit problème : j'ai peu d'espace disponible pour afficher ma sidebar, l'espace restant étant réparti équitablement à gauche et à droite.

La solution que j'ai trouvé est de réduire à 0 la partie droite et de ne la restaurer que graduellement sur les écrans les plus larges :

// In __config.scss
$mobile-side-safe-zone : 24px;
$max-txt-content-width : 720px;

%content-grid {
  display: grid;
  grid-template-columns: 
    [fullwidth-start]
      $mobile-side-safe-zone
      [safe-fullwidth-start sidebar-start] 
        minmax(0, 1fr)
        [breakout-start sidebar-end]
          minmax(0, 4rem)
          [content-start]
            min(100% - (2 * $mobile-side-safe-zone), $max-txt-content-width)
          [content-end]
          minmax(0, 4rem)
        [breakout-end]
        minmax(0, var(--right-screen-col-size, 0)) 
      [safe-fullwidth-end]
      $mobile-side-safe-zone 
    [fullwidth-end];

  @media screen and (min-width: 1440px){
		--right-screen-col-size: .5fr;
	}
  @media screen and (min-width: 1600px){
		--right-screen-col-size: 1fr;
	}
}

Définir la structure verticale : une spécificité des articles

Pour mes articles, j'ai une structure verticale très spécifiques des contenus :

  1. L'en-tête de mon article (titre, auteurice, temps de lecture, etc.)
  2. La table des matières (quand elle n'est pas exfiltré sur le bord gauche)
  3. Le contenu de l'article
  4. Un pied de page qui contient une navigation permettant de passer d'articles en articles

Pour me permettre de manipuler ces contenus (notamment la table des matières) et les positionner librement, je créé une nouvelle structure, uniquement en rangées qui va venir se superposer aux colonnes définies globalement.

Cette structure sera pour l'instant exclusive aux contenus de type "articles" (ce qui inclus mes entrées de journal). Je la place donc dans mon nouveau fichier CSS _layout-article.scss :

// In _layout-article.scss
.log-entry,
.article {
  article,
  #article-content {
    grid-column: fullwidth;
    @extend %content-grid;
  }
  article {
    grid-template-rows: 
      [header-start sidebar-start] 
        auto 
      [header-end toc-start]
        auto
      [toc-end content-start]
        auto
      [content-end sidebar-end footer-start]
        auto
      [footer-end];
  }
}

Les poupées russes

Je réapplique la grille de contenu sur #article-content afin de me permettre plus tard d'utiliser cette grille pour déplacer mes contenus

Je place ensuite chacun de mes contenus dans son emplacement dédié, avec un traitement particulier pour la table des matières

// In _layout-article.scss
#table-of-content {
  grid-row: toc;
  padding-bottom: 40px;
  h2 {
    font-size: var(--size-txt-h4);
    font-weight: bold;
  }
}

@media screen and (min-width: 1200px) {
  #table-of-content {
    grid-area: sidebar;
    position: sticky;
    top: $target-breathing-room;
    max-height: 100vh;
  }
}

Garantir l'aspect sticky d'éléments très hauts

position: sticky; marche très bien avec les grilles CSS mais ici j'ai un petit problème : la zone sidebar que j'ai créé est très longue, ce qui "casse" le comportement sticky. En effet, la table des matières a alors une taille dépassant la hauteur de l'écran et le comportement sticky ne s'active pas car peu importe combien de temps on défile , l'élément "table des matière" est toujours affiché (même si la partie affichée est une zone vide et inintéressante)

Pour solutionner ce problème, j'applique une hauteur maximale à ma table des matières, équivalente à la hauteur de l'écran : ainsi je suis sûr que ma table des matière reste affichée.

Pied de page fixe et crise de nerf avec iOS 26

J'avais pour idée de figer en bas de l'écran mon pied de page afin de permettre de rapidement parcourir mes entrées de journal.

C'était l'idée… mais Apple a décidé qu'il en serait autrement.

En effet, en testant sur mon téléphone (récemment passé sous iOS, contraint et forcé par le refus catégorique d'Apple de fournir des mises à jours de sécurité sur iOS 18[1]), je me suis rendu compte que mon pied de page figé créait simplement une barre disgracieuse au-dessus de la barre d'adresse tandis que le reste du contenu continuais à apparaître en transparence sous cette barre d'adresse (encore un problème que nous n'avions pas et que Apple nous a gentiment créé en ajoutant de la transparence dans tous les sens).

J'ai écumé le web à la recherche d'une solution (google, stack overflow, reddit, etc.), sans succès.

Sur certains site (comme celui d'Apple, par exemple), l'interface de Safari se "re-opacifie" avec la teinte de fond de la page, mais impossible de trouver une documentation explicitant le mécanisme et comment le provoquer.

J'ai réussis à brièvement l'activer en manipulant des propriétés dans l'inspecteur mais sans arriver à le pérenniser. Certains suggèrent que ce comportement s'activerait uniquement quand l'affichage d'une modale est détectée, puis resterait même après que celle-ci ait disparue (ce qui ressemble plus à un bogue qu'une fonctionnalité).

Comme je ne compte pas provoquer l'ouverture d'une modale simplement pour contourner les problèmes créés par Apple, je laisse tomber cette idée. Je la revisiterai peut-être si Apple daigne corriger leurs bêtises ou au moins nous donner un peu de contrôle dessus.

On était bien sans IE6, c'est pénible qu'Apple s'entête à faire de Safari son successeur spirituel !

  1. Pour les appareils compatible iOS 26. Les appareils non-compatibles reçoivent heureusement des mises à jours de sécurité pour iOS 18. Un moyen pour Apple de respecter ses engagements en terme de support tout en nous forçant à adopter son nouveau système et son stupide, bancal nouveau design. Liquid Ass is 💩 ↩︎