Erstellen eines Konferenzplanes mit CSS Grid

Das Gefühl der Leistung, neue Technologien geschickt zu verwenden, ist beispiellos! Es ist gut, verschiedene Einführungsführer zu lesen und coole Demonstrationen zu schätzen, aber nur wenn Sie sie in Ihrem eigenen Projekt tatsächlich verwenden, können Sie seine Essenz wirklich verstehen.

Ich habe ein neues Verständnis des CSS -Netzes erhalten, um ein flexibles Layout für den Besprechungsplan aufzubauen. Die verschiedenen Anforderungen des Projekts entsprechen den Vorteilen des Netzes: zweidimensionales (vertikales und horizontales) Layout und komplexe Positionierung von Kinderelementen. Während des Aufbaus des Proof of Concept entdeckte ich einige Tricks, um den Code sehr lesbar und sehr interessant zu verwenden.

Die endgültige Demo enthielt einige interessante CSS -Gitterfunktionen und zwang mich, sich in einige Netzdetails zu befassen, die nicht oft in der täglichen Entwicklung aufgetreten waren.

Bevor Sie beginnen, ist es am besten, einen weiteren Registerkarte zu öffnen und sich auf die CSS-Gitterhandbuch von CSS-Tricks zu verweisen, um die Konzepte jederzeit im Text zu sehen.

Definition von Layoutanforderungen

Ich machte mich daran, das folgende Layout zu erstellen, das von WordCamp inspiriert wurde-Hunderte von WordPress-Konferenzen, die jedes Jahr auf der ganzen Welt gehalten werden. Diese Aktivitäten variieren in Größe und Form, aber alle verwenden das gleiche Zeitplan -Layout -Tool.

Ich habe mehrmals WordCamp angeordnet und WordCamp -Websites entworfen, damit ich die Mängel vorhandener HTML -Tabellenlayouts verstehe. Wenn der Zeitplan nicht dem einheitlichen Raster entspricht, dann ... ¯ \ _ (ツ) _/¯

Um einen besseren Ansatz zu finden, habe ich zuerst die Layoutanforderungen aufgelistet:

• Besprechung der variablen Länge (begrenzt auf festgelegte Zeitschritte)
  Stellen Sie sich vor, Sie haben einstündige Vorlesungen in drei Räumen gleichzeitig und zweistündige Seminare im anderen Raum.
• Eine Konferenzspur über einen oder mehrere "Tracks" wird häufig mit einem bestimmten Raum auf dem Veranstaltungsort verbunden. In Bezug auf WordCamp kann der Veranstaltungsort mit einer Wand abgerissen werden, um zwei Zimmer zu verschmelzen!
• Der Zeitplan kann die Freizeit
  beinhalten Last-Minute-Stornierungen oder ultra-Short-Meetings belassen Platz im Zeitplan.
• Entwickelt, um mit CSS anpassbar zu sein
  WordCamp -Websites erlauben nur Themeneinstellungen über CSS.
• Das Layout kann automatisch basierend auf CMS -Inhalt
  generiert werden Da wir Layouts basierend auf strukturierten Konferenzdaten auf Tausenden von Websites erstellen, können wir uns nicht auf übermäßig kluge oder angepasste HTML oder CSS verlassen.

Start: Stabile HTML

Bevor ich CSS schreibe, beginne ich immer mit soliden HTML.

Obere Ebene<div> Wird die <code>.schedule haben und als Netz übergeordnetes Element dienen. Jede einzigartige Startzeit hat ihren eigenen Titel, gefolgt von allen zu dieser Zeit beginnen. Die Markierungen für jedes Meeting sind nicht wichtig, aber stellen Sie sicher, dass Sie sich das Layout nicht ansehen müssen, um zu wissen, wann und wo sich das Treffen befindet. (Sie werden später verstehen, warum.)

<h2 id="Besprechungsplan"> Besprechungsplan</h2>
<div class="schedule">

  <h3 id="Uhr">8:00 Uhr</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-Konferenzthemen-a"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Konferenzthemen</a></h4>
    8:00 Uhr - 9:00 Uhr
    Spur 1
    Name des Sprechers</div>


  <h3 id="Uhr">9:00 Uhr</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-Konferenzthemen-a"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Konferenzthemen</a></h4>
    9:00 Uhr - 10:00 Uhr
    Spur 1
    Name des Sprechers</div>




</div>

Mobiles Layout und Gitterfall sind fertig!

Fügen Sie einige Ihrer eigenen CSS hinzu, um die Seite zu verschönern, und unser mobiles Layout und unser Fallback ohne CSS -Gitterbrowser sind fertig!

So sieht es aus, wie ich die Farbe benutze, die ich verwende:

Gitterlayout hinzufügen

Jetzt ist das eigentliche CSS -Gitterteil!

Meine Momente der Inspiration während des Konstruktionsprozesses stammen aus dem Lesen von Robins Artikel über CSS-Tricks, "Making Bar-Charts mit CSS Grid". Kurz gesagt: Eine Rasterreihe entspricht 1% der Höhe des Diagramms, sodass die Anzahl der Zeilen, die die Balkenspannweite betrifft, dem Prozentsatz entspricht, den sie darstellt.

 .chart {
  Anzeige: Grid;
  Raster-Template-Reihen: Wiederholung (100, 1fr); /* 1 Zeile = 1%! */
}

.Fifty-Prozent-Bar {
  Gitterreihe: 51 /101; / * 101 - 51 = 50 => 50% */
}

Dadurch wurde mir klar, dass das Netz perfekt für jedes Layout ist, das sich auf eine Art inkrementelle Regeleinheit bezieht. Im Zeitplan ist das Gerät Zeit ! In dieser Demo werden wir 30-minütige Schritte verwenden, aber Sie können sie an Ihre Anforderungen anpassen. (Beachten Sie nur Chromes Fehler, es beschränkt das Netzlayout auf 1000 Zeilen.)

Die erste Version, die ich ausprobiert habe, verwendet eine ähnliche Syntax und einige grundlegende Mathematik, um die Besprechungen in ein Balkendiagramm zu setzen, das dem von Robin ähnelt. Wir verwenden acht Zeilen, da zwischen 8 Uhr und 12 Uhr acht 30-minütige Schritte vorhanden sind. Denken Sie daran, dass implizite Gitterlinienzahlen bei 1 (statt 0) (statt 0) beginnen, sodass die Gitterlinien von 1 bis 9 nummeriert sind.

 .Zeitplan {
  Anzeige: Grid;
  Raster-Template-Reihen: Wiederholung (8, 1fr);
}

.Session-1 {
  Gitterreihe: 1/3; /* 8: 00-9: 00 AM, 3-1 = 2 30-minütige Inkremente*//
}

.Session-2 {
  Gitterreihe: 3/6; /* 9: 00-10: 30 Uhr, 6-3 = 3 30 Minuten Inkremente*//
}

Der Nachteil dieser Technik ist, dass das Platzieren von Gegenständen mit vielen Zeilen sehr abstrakt und verwirrend ist. (Diese Frage fügt Robins Bar -Diagramm -Demonstration auch viel Komplexität hinzu.)

Hier kommen benannte Grid -Linien ins Spiel! Anstatt sich auf Gitterzeilennummern zu verlassen, können wir jeder Zeile gemäß der entsprechenden Zeit einen vorhersehbaren Namen geben.

 .Zeitplan {
  Anzeige: Grid;
  Raster-Template-Reihen:
    [Zeit-0800] 1fr
    [Zeit-0830] 1fr
    [Zeit-0900] 1fr
    [Zeit-0930] 1fr;
    /* usw...
        Hinweis: Verwenden Sie die 24-Stunden-Zeit als Zeilenname*/
}

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

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

Das ist sehr leicht zu verstehen. Es besteht keine Notwendigkeit für komplexe mathematische Berechnungen, um die Anzahl der Zeilen vor oder nach Beginn des Meetings zu bestimmen oder endet. Noch besser ist, dass wir die in WordPress gespeicherten Informationen verwenden können, um Gridline -Namen und Besprechungslayoutstile zu generieren. Fügen Sie die Start- und Endzeiten in das Netz hinzu und es ist in Ordnung!

Da es im Zeitplan mehrere Spuren gibt, müssen wir für jeden Track eine Spalte einrichten. Der Track funktioniert ähnlich wie die Zeit mit den benannten Track -Linien für jede Gitterlinie. Es gibt auch eine zusätzliche erste Spalte für den Startzeittitel.

 .Schedule { / * Fortsetzung * /
  Grid-Template-Säulen:
    [Zeiten] 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];
}

Aber hier gehen wir noch einen Schritt weiter. Jede Zeile erhält zwei Namen: einen Track, der den Start angibt, den sie startet, und einen Track, der das Ende anzeigt. Dies ist nicht ausschließlich notwendig, aber es wird den Code klarer, insbesondere wenn das Meeting mehrere Spalten umfasst.

Sobald die Zeit- und Track-basierte Grid-Linien definiert sind, müssen wir jetzt nur noch die Zeit und die Verfolgung des Meetings kennen, um ein Meeting zu platzieren!

 .Session-8 {
  Gitterreihe: Zeit-1030 / Zeit-1100;
  Grid-Säule: Track-2-Start / Track-3-End; /* Cross zwei Tracks! */
}

Wenn wir das alles zusammenstellen, erhalten wir einen langen, aber extrem lesbaren Code, der sehr angenehm zu verwenden ist.

 @media Bildschirm und (Min-Width: 700px) {
  .Zeitplan {
    Anzeige: Grid;
    Raster-Lack: 1EM;
    Raster-Template-Reihen:
      [Tracks] Auto /* Vorhaben! */
      [Zeit-0800] 1fr
      [Zeit-0830] 1fr
      [Zeit-0900] 1fr
      [Zeit-0930] 1fr
      [Zeit-1000] 1fr
      [Zeit-1030] 1fr
      [Time-1100] 1fr
      [Time-1130] 1fr
      [Zeit-1200] 1fr;
    Grid-Template-Säulen:
      [Zeiten] 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 {
    Grid-Säule: Zeiten;
  }
}

<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>

Der endgültige Code verwendet den Inline -Stil für die Platzierung der Platzierung, was sich für mich richtig anfühlt. Wenn Sie dies nicht mögen und einen moderneren Browser verwenden, können Sie den Leitnamen über eine CSS -Variable an CSS übergeben.

Schnellbeschreibung: Verwenden Sie FR -Einheiten und automatische Werte, um die Linienhöhe festzulegen

Ein bemerkenswertes Detail ist die Verwendung von FR -Einheiten, um die Zeilenhöhe zu definieren.

Wenn Sie 1FR verwenden, um die Zeilenhöhe zu bestimmen, haben alle Zeilen die gleiche Höhe. Diese Höhe wird durch den Inhalt der höchsten Reihe im Zeitplan bestimmt. (Ich musste W3C -Spezifikationen über FR lesen, um dies herauszufinden!) Dies erzeugt einen schönen Zeitplan, der proportional zur Zeit ist, aber auch zu sehr hohen Layouts führen kann.

Wenn Ihr Zeitplanraster beispielsweise 15-minütige Schritte von 7 bis 18 Uhr verwendet, gibt es insgesamt 48 Rasterreihen. In diesem Fall möchten Sie möglicherweise Auto als Zeilenhöhe verwenden, da die Höhe jeder Rasterreihe durch ihren Inhalt bestimmt wird, sodass die Planung kompakter ist.

Ein Satz über Hilfsfunktionen

Einige CSS -Gittertechnologien verfügen über Zugänglichkeitsbedenken. Insbesondere kann die Fähigkeit, die Reihenfolge der Information auf eine Weise zu ändern, die nicht mit der Quellenreihenfolge übereinstimmt, zu Problemen für diejenigen verursacht werden, die die Tastaturnavigation verwenden.

In diesem Layout wird diese Funktion verwendet, um Elemente willkürlich in das Netz zu platzieren, sodass Vorsicht erforderlich ist. Da der Titel und die Quellordnung jedoch mit der Visualisierung der Startzeit übereinstimmen, scheint es mir, dass dies eine sichere Möglichkeit zu sein scheint, sie zu verwenden.

Wenn Sie inspiriert sind, etwas Ähnliches zu tun, überlegen Sie sich sorgfältig über Barrierefreiheit . In diesem Fall ist es sinnvoll, die Informationen in chronologischer Reihenfolge anzuordnen, aber ich kann mir einen legitimen Fall vorstellen, in dem die Registerkarte eher nach unten als horizontal ist. (Es sollte nicht zu schwierig sein, diese Demo zu ändern!)

Was auch immer Sie tun, denken Sie immer nach Barrierefreiheit.

Fügen Sie den Namen der Klebstrack hinzu

Schließlich ist es an der Zeit, Tracknamen hinzuzufügen, die wie Tabellentitel an der Spalte aussehen. Da die Konferenzstrecke bereits sichtbar ist, habe ich mich entschlossen, aria-hidden="true" zu verwenden, um den "Titel" in der assistiven Technologie zu verbergen.

Der Trackname befindet sich im ersten Zeilenraster und wird bequem "Tracks" bezeichnet. Solange Sie keine seltsamen Überlaufprobleme haben, wird position: sticky diese Namen beim Scrollen sichtbar.

 Spur 1
Spur 2
Spur 3
Spur 4

 .Track-Slot {
  Anzeige: Keine; /* nur bei Verwendung von Netzlayout*/sichtbar*/
}

@Supports (Anzeige: Grid) {
  @media Bildschirm und (Min-Width: 700px) {    
    .Track-Slot {
      Gitterreihe: Tracks;
      Anzeige: Block;
      Position: klebrig;
      Top: 0;
      Z-Index: 1000;
      Hintergrundfarbe: RGBA (255.255.255, .9);
    }
  }
}

Dies ist ein cleverer Schliff für die endgültige Präsentation. ✨

Ergebnis

Hier ist, was wir nach allem, was wir zusammengestellt haben, aussehen!

Wir haben gerade angefangen

Dieser Zeitplan ist definitiv die befriedigendste CSS -Gitter -App, die ich je gemacht habe. Ich mag seine "datengesteuerte" und semantische Reihenbenennung, und die Zugänglichkeit und die CMS-Anforderungen werden ohne Unannehmlichkeiten perfekt übereinstimmen.

Die einzige verbleibende Frage für mich ist, welche anderen Arten von "datengesteuerten" Netze aufgebaut werden können. Ich habe einige großartige Kalenderlayouts und ein Monopol -Brettlayout gesehen. Was ist also mit Fußballstadien, Zeitlinien, Esstischen oder Theatersitzen? Was noch?