Construire un calendrier de conférence avec la grille CSS

Le sentiment d'accomplissement de l'habitude d'utiliser de nouvelles technologies est sans précédent! Il est bon de lire divers guides d'introduction et d'apprécier des démonstrations intéressantes, mais ce n'est que lorsque vous les utilisez dans votre propre projet que vous pouvez vraiment comprendre son essence.

J'ai acquis une nouvelle compréhension de la grille CSS dans le processus de construction d'une disposition flexible pour le calendrier des réunions. Les différentes exigences du projet sont parfaitement conformes aux avantages de la grille: disposition bidimensionnelle (verticale et horizontale) et positionnement complexe des éléments enfants. Pendant le processus de construction de la preuve de concept, j'ai découvert quelques astuces pour rendre le code très lisible et très intéressant à utiliser.

La démo finale comprenait des fonctionnalités intéressantes de la grille CSS et m'a forcé à creuser dans des détails de la grille qui ne sont pas souvent rencontrés dans le développement quotidien.

Avant de commencer, il est préférable d'ouvrir un autre onglet et de consulter le Guide de la grille CSS de CSS-Tricks pour voir les concepts impliqués dans le texte à tout moment.

Définition des exigences de mise en page

J'ai décidé de créer la disposition suivante, inspirée par WordCamp - des centaines de conférences sur le thème de WordPress tenues dans le monde entier chaque année. Ces activités varient en taille et en forme, mais toutes utilisent le même outil de mise en page du calendrier.

J'ai aidé à organiser WordCamp plusieurs fois et à concevoir des sites Web WordCamp, donc je comprends les lacunes des dispositions de table HTML existantes. Si le calendrier ne se conforme pas à la grille unifiée, alors ... ¯ \ _ (ツ) _ / ¯

Pour trouver une meilleure approche, j'ai d'abord répertorié les exigences de mise en page:

• Réunion de longueur variable (limité à régler les incréments de temps)
  Imaginez avoir des conférences d'une heure dans trois pièces en même temps et des séminaires de deux heures dans l'autre pièce.
• Une piste de conférence sur un ou plusieurs "pistes" est souvent associée à une pièce spécifique sur le site. En ce qui concerne WordCamp à Seattle, le lieu peut être démoli d'un mur pour fusionner deux pièces!
• L'horaire peut inclure le temps libre
  Les annulations de dernière minute ou les réunions ultra-short laisseront de la place dans le calendrier.
• Conçu pour être personnalisable avec CSS
  Les sites Web WordCamp autorisent uniquement les paramètres de thème via CSS.
• La disposition peut être générée automatiquement en fonction du contenu CMS
  Étant donné que nous construisons des dispositions basées sur des données de conférence structurées sur des milliers de sites Web, nous ne pouvons pas compter sur un HTML ou CSS trop intelligent ou personnalisé.

Démarrer: HTML stable

Avant d'écrire un CSS, je commence toujours par un solide HTML.

Niveau supérieur<div> Aura la classe <code>.schedule et servira d'élément parent maillé. Chaque heure de début unique a son propre titre suivi de toutes les réunions qui commencent à ce moment-là. Les marques de chaque réunion ne sont pas importantes, mais assurez-vous que vous n'avez pas besoin de regarder la mise en page pour savoir quand et où se trouve la réunion. (Vous comprendrez pourquoi plus tard.)

<h2 id="Calendrier-des-réunions"> Calendrier des réunions</h2>
<div class="schedule">

  <h3 id="h">8h00</h3>
  <div class="session session-1">
    <h4 id="a-href-https-www-php-cn-link-ac-c-dd-dc-b-e-fe-c-e-b-Sujets-de-conférence-a"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Sujets de conférence</a></h4>
    8h00 - 9h00
    Piste 1
    Nom de l'orateur</div>


  <h3 id="h">9h00</h3>
  <div class="session session-2">
    <h4 id="a-href-https-www-php-cn-link-ac-c-dd-dc-b-e-fe-c-e-b-Sujets-de-conférence-a"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Sujets de conférence</a></h4>
    9h00 - 10h00
    Piste 1
    Nom de l'orateur</div>




</div>

La disposition mobile et le secours de la grille sont terminés!

Ajoutez une partie de votre propre CSS pour embellir la page, et notre disposition mobile et notre repli sans navigateur de grille CSS sont terminés!

Voici à quoi cela ressemble en utilisant la couleur que j'utilise:

Ajouter la disposition de la grille

Est maintenant la partie réelle de la grille CSS!

Mes moments d'inspiration pendant le processus de construction sont venus de la lecture de l'article de Robin sur CSS-Tricks, «Faire des graphiques à barres avec la grille CSS». En bref: une ligne de grille représente 1% de la hauteur du graphique, donc le nombre de lignes que la barre s'étend est le même que le pourcentage qu'il représente.

 .graphique {
  Affichage: grille;
  Grid-Template Rows: Repeat (100, 1FR); / * 1 ligne = 1%! * /
}

.fifty-percent-bar {
  Grid-Row: 51/101; / * 101 - 51 = 50 => 50% * /
}

Cela m'a fait réaliser que la grille est parfaite pour toute mise en page liée à une sorte d'unité incrémentielle de règle. Dans le cas du calendrier, l'unité est temps ! Dans cette démo, nous utiliserons des incréments de 30 minutes, mais vous pouvez les ajuster à vos besoins. (Soyez conscient du bug de Chrome, il limite la disposition de la grille à 1000 lignes.)

La première version que j'ai essayée utilise une syntaxe similaire et quelques mathématiques de base pour mettre les réunions dans un graphique à barres similaire à celle de Robin. Nous utilisons huit lignes car il y a huit incréments de 30 minutes entre 8h et 12h. N'oubliez pas que les numéros de ligne de grille implicites commencent à 1 (plutôt que 0), donc les lignes de grille sont numérotées de 1 à 9.

 .calendrier {
  Affichage: grille;
  Grid-Template Rows: Repeat (8, 1FR);
}

.Session-1 {
  Grid-Row: 1/3; / * 8: 00-9: 00 AM, 3 - 1 = 2 incréments de 30 minutes * /
}

.Session-2 {
  Grid-Row: 3/6; / * 9: 00-10: 30 h, 6-3 = 3 incréments de 30 minutes * /
}

L'inconvénient de cette technique est que placer des articles sur une grille avec de nombreuses lignes est très abstrait et déroutant. (Cette question ajoute également beaucoup de complexité à la démonstration des graphiques à barres de Robin.)

C'est là que les lignes de grille nommées entrent en jeu! Au lieu de compter sur les numéros de ligne de la grille, nous pouvons donner à chaque ligne un nom prévisible en fonction du temps correspondant.

 .calendrier {
  Affichage: grille;
  Rows-template de grille:
    [Time-0800] 1FR
    [Time-0830] 1FR
    [Time-0900] 1FR
    [Time-0930] 1FR;
    /* etc...
        Remarque: utilisez l'heure 24h / 24 comme nom de ligne * /
}

.Session-1 {
  Grid-Row: Time-0800 / Time-0900;
}

.Session-2 {
  Grid-Row: Time-0900 / Time-1030;
}

C'est très facile à comprendre. Il n'y a pas besoin de calculs mathématiques complexes pour déterminer le nombre de lignes avant ou après le début de la réunion ou la fin. Encore mieux, nous pouvons utiliser les informations stockées dans WordPress pour générer des noms de grille et des styles de mise en page de réunion. Ajoutez le début et la fin des temps à la grille et c'est OK!

Puisqu'il y a plusieurs pistes dans le calendrier, nous devons configurer une colonne pour chaque piste. La piste fonctionne de manière similaire à Time, en utilisant des lignes de piste nommées pour chaque ligne de grille. Il y a également une première colonne supplémentaire pour le titre de temps de début.

 .Schedule {/ * Suite * /
  Grid-Template-Colonnes:
    [Times] 4EM
    [track-1-start] 1fr
    [track-1-end Track-2-Start] 1FR
    [Track-2-end Track-3-Start] 1FR
    [Track-3-End Track-4-Start] 1FR
    [Track-4-End];
}

Mais ici, nous faisons plus loin les lignes de grille de dénomination. Chaque ligne obtient deux noms: une piste qui indique la piste qu'il démarre et une piste qui indique la fin. Ce n'est pas strictement nécessaire, mais cela rend le code plus clair, surtout lorsque la réunion s'étend sur plusieurs colonnes.

Une fois le temps et les lignes de grille basées sur la piste, nous n'avons plus qu'à connaître l'heure et la trace de la réunion pour placer toute réunion!

 .Session-8 {
  Grid-Row: Time-1030 / Time-1100;
  grille-colonne: track-2-start / track-3-end; / * Traverse deux pistes! * /
}

En mettant tout cela ensemble, nous obtenons un code long mais extrêmement lisible qui est très agréable à utiliser.

 Écran @Media et (Min-Width: 700px) {
  .calendrier {
    Affichage: grille;
    Grid-Gap: 1em;
    Rows-template de grille:
      [Tracks] Auto / * préfiguration! * /
      [Time-0800] 1FR
      [Time-0830] 1FR
      [Time-0900] 1FR
      [Time-0930] 1FR
      [Time-1000] 1FR
      [Time-1030] 1FR
      [Time-1100] 1FR
      [Time-1130] 1FR
      [Temps-1200] 1FR;
    Grid-Template-Colonnes:
      [Times] 4EM
      [track-1-start] 1fr
      [track-1-end Track-2-Start] 1FR
      [Track-2-end Track-3-Start] 1FR
      [Track-3-End Track-4-Start] 1FR
      [Track-4-End];
  }

  .Time-slot {
    Colonne de grille: temps;
  }
}

<div style="grid-column: track-1; grid-row: time-0800 / time-0900;">

</div>
<div style="grid-column: track-2; grid-row: time-0800 / time-0900">

</div>

Le code final utilise le style en ligne pour le placement des réunions, ce qui me convient. Si vous n'aimez pas faire cela et utilisez un navigateur plus moderne, vous pouvez passer le nom de ligne à CSS via une variable CSS.

Description rapide: utilisez les unités FR et les valeurs automobiles pour définir la hauteur de la ligne

Un détail notable est l'utilisation d'unités FR pour définir la hauteur des lignes.

Lorsque vous utilisez 1FR pour déterminer la hauteur de la ligne, toutes les lignes ont la même hauteur. Cette hauteur est déterminée par le contenu de la ligne la plus élevée dans le calendrier. (J'ai dû lire les spécifications du W3C sur FR pour comprendre cela!) Cela produit un bon calendrier proportionnel au temps, mais peut également conduire à des dispositions très élevées.

Par exemple, si votre grille d'horaire utilise des incréments de 15 minutes de 7 h à 18 h, il y a 48 lignes de grille au total. Dans ce cas, vous voudrez peut-être utiliser l'auto comme hauteur de ligne, car la hauteur de chaque ligne de grille est déterminée par son contenu, de sorte que la planification est plus compacte.

Une phrase sur les fonctions auxiliaires

Certaines technologies CSS Grid ont des problèmes d'accessibilité. Plus précisément, la possibilité de modifier visuellement l'ordre des informations d'une manière qui ne correspond pas à l'ordre source peut entraîner des problèmes pour ceux qui utilisent la navigation au clavier.

Cette disposition utilise cette fonctionnalité pour placer des éléments arbitrairement sur la grille, donc la prudence est requise. Cependant, comme l'ordre du titre et de la source s'aligne sur la visualisation de l'heure de début, il me semble que cela semble être un moyen sûr de l'utiliser.

Si vous êtes inspiré à faire quelque chose de similaire, réfléchissez soigneusement aux fonctionnalités d'accessibilité . Dans ce cas, il est logique d'organiser les informations dans l'ordre chronologique, mais je peux imaginer un cas légitime où l'ordre de l'onglet est vers le bas plutôt que horizontal. (Modifier cette démo pour le faire ne devrait pas être trop difficile!)

Quoi que vous fassiez, considérez toujours l'accessibilité.

Ajouter le nom de la piste collante

Enfin, il est temps d'ajouter des noms de piste qui ressemblent à des titres de table en haut de chaque colonne. Étant donné que la piste de conférence est déjà visible, j'ai choisi d'utiliser aria-hidden="true" pour cacher le "titre" dans la technologie d'assistance.

Le nom de la piste est situé dans la grille de première rangée et est commodément nommé "Tracks". Tant que vous n'avez pas de problèmes de débordement étranges, position: sticky gardera ces noms visibles pendant le défilement.

 Piste 1
Piste 2
Piste 3
Piste 4

 .track-slot {
  Affichage: aucun; / * Visible uniquement lors de l'utilisation de la mise en page de la grille * /
}

@Supports (affichage: grille) {
  Écran @Media et (Min-Width: 700px) {    
    .track-slot {
      Grid-Row: Tracks;
      Affichage: bloc;
      Position: collante;
      en haut: 0;
      Z-Index: 1000;
      Color en arrière-plan: RGBA (255 255 255, .9);
    }
  }
}

Il s'agit d'une touche finale intelligente pour la présentation finale. ✨

résultat

Voici à quoi nous avons présenté pour ressembler après tout ce que nous avons réunis!

Nous venons de commencer

Ce calendrier est certainement l'application CSS Grid la plus satisfaisante que j'ai jamais faite. J'aime sa dénomination des lignes "axée sur les données" et sémantique, et les exigences d'accessibilité et de CMS sont parfaitement adaptées sans aucun inconvénient.

La seule question restante pour moi est quels autres types de maillage "basé sur les données" peuvent être construits? J'ai vu de superbes dispositions de calendrier et une disposition de la planche monopole. Alors qu'en est-il des stades de football, des chronologies, des tables à manger ou des sièges de théâtre? quoi d'autre?