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> Besprechungsplan</h2>
<div class="schedule">

  <h3>8:00 Uhr</h3>
  <div class="session session-1">
    <h4><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Konferenzthemen</a></h4>
    8:00 Uhr - 9:00 Uhr
    Spur 1
    Name des Sprechers</div>


  <h3>9:00 Uhr</h3>
  <div class="session session-2">
    <h4><a href="http://ipnx.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?