Open Time

Après avoir pas mal — mais raisonnablement tout de même, hein ? — joué avec les flexbox dans les CSS de l’admin de Dotclear, ça faisait un moment que ça me titillait de jouer aussi avec les grid.

C’est chose faite avec le truc que j’ai mis en route hier, pour résoudre — pas complètement, mais de façon satisfaisante tout de même — l’organisation que je souhaitais :

• 2 colonnes (sur laptop), avec une petite à gauche et une grande à droite :
  1. L’entête (avec le titre, …) dans la colonne de gauche, suivie par ce qu’on met d’habitude dans la sidebar (soit les volets navigation et extra des widgets)
  2. Le contenu dans la colonne de droite, suivi par le footer contenant habituellement deux ou trois bricoles et le volet supplémentaire des widgets)
• 1 seule colonne (sur mobile), avec dans l’ordre l’entête, le contenu, la sidebar et le footer

Côté template il a fallu que je clone le __layout.html de dotty pour supprimer la div #wrapper qui isolait les blocs #main et .sidebar des deux autres et empêchait donc d’obtenir l’organisation souhaitée ; je n’ai pour l’instant touché à rien d’autre de ce côté (mais ça risque pour régler à la marge deux ou trois bricoles).

Tandis que côté CSS, ça donne ça :

// Layout (mobile first)
#page {
  display: grid;
  grid-row-gap: 1rem;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, min-content);
}
.header {
  grid-row: 1;
}
#main {
  grid-row: 2;
}
.sidebar {
  grid-row: 3;
}
.footer {
  grid-row: 4;
}

Puis une autre partie pour gérer les écrans plus larges :

$medium-screen: 58em;
@media (min-width: $medium-screen) {
  #page {
    display: grid;
    grid-column-gap: 2rem;
    grid-template-columns: 18rem 1fr;
    grid-template-rows: min-content 1fr min-content;
  }
  .header {
    grid-column: 1;
    grid-row: 1;
  }
  .sidebar {
    grid-column: 1;
    grid-row: 2 / span 2;
  }
  #main {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .footer {
    grid-column: 2;
    grid-row: 3;
  }
}

J’aurais tout aussi bien pu utiliser le système d‘area au lieu des numéros de ligne et colonne, probablement avec quelque chose ressemblant à :

// Layout and base font-size (mobile first)
#page {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 1rem;
  grid-template-rows: repeat(4, min-content);
  grid-template-areas:
  "head"
  "main"
  "side"
  "foot";
}
.header {
  grid-area: head;
}
#main {
  grid-area: main;
}
.sidebar {
  grid-area: side;
}
.footer {
  grid-area: foot;
}

$medium-screen: 58em;
@media (min-width: $medium-screen) {
  #page {
    display: grid;
    grid-column-gap: 2rem;
    grid-template-columns: 18rem 1fr;
    grid-template-areas:
    "head main"
    "side main"
    "side foot";
  }
}

Il me reste encore un problème d’affichage (peut-être un bug d’implémentation du système grid) quand il y a une combinaison d’utilisation de la dimension 1fr pour la taille de la colonne de droite sur laptop et ce que j’utilise pour éviter les retours à la ligne dans les éléments <pre><code> ; pas moyen de trouver, pour l’instant, une solution, ça dépasse à droite, sans que j’arrive à identifier pourquoi !

Bref, y’a encore du pain sur la planche…