Wir springen hier nur ein kleines bisschen vorwärts. Dies ist eine ziemlich umfassende Screencast-Serie, aber es sind nur ungefähr 40 Stunden und natürlich ähnelt dieses eigentliche Projekt eher ein paar hundert. In diesem Fall bestand der Sprung nach vorne darin, die Doppelseite ein wenig zu stylen. Wir gehen diese Veränderungen am Anfang durch.
Die linke und rechte Seite haben einen gemeinsamen und einen anderen Klassennamen. Dies ist sehr häufig, was ich in vielen verschiedenen Szenarien im Webdesign finde. In diesem Fall haben die Seiten den gleichen Farbverlauf und die gleiche Größe. Sie unterscheiden sich jedoch, wenn wir eine CSS3- skew()Transformation anwenden . Dies gibt uns einen ordentlichen "Open Book" -Effekt. Da alle diese Effekte mit CSS erstellt werden, lassen sie sich gut skalieren (so, wie es ein Bild mit ziemlicher Sicherheit nicht tun würde).
Wir hatten eine clevere Lösung für gleiche Höhen, aber leider bricht sie aufgrund unseres cleveren, offenen Schräglaufs zusammen. Stattdessen verwenden wir nur einen Hauch von JavaScript.
Zuerst schreiben wir beim Betrachten des JavaScript eine Zeile, in der alle „Buchstaben“ ausgeblendet werden, die keine Kinder haben. Zum Beispiel gibt es keine Selektoren, die mit "Z" beginnen, aber wir haben eine Seite veröffentlicht, die so genannt wird, nur um umfassend zu sein. Wir entdecken diese (und verstecken sie dann) mit dem äußerst nützlichen jQuery- :has()Selektor.
Für die gleichen Höhen messen wir beide Spalten, entscheiden, welche am höchsten ist, und setzen sie dann beide auf die höchste. Wir müssen ein leicht hackiges setTimeout verwenden, damit es richtig funktioniert, da das Laden von @ font-face etwas Zeit in Anspruch nimmt und die Höhe beeinflusst. Wir könnten letztendlich eine Art Font Loader-Rückruf verwenden. (Oder das könnte übertrieben sein).
Dann gehen wir zu einzelnen Almanachseiten über. Jetzt schnell weiterfahren! Wir haben so etwas schon so oft gemacht, dass es keine Überraschung ist, dass wir uns schneller bewegen. Wir bringen diese Vorlage im Wesentlichen auf die gleiche Weise in Form, wie wir einen einzelnen Blog-Beitrag oder eine generische Seite oder ähnliches gestaltet haben.
Wir verwenden einen „schwarzen Balken“ für die Semmelbrösel und zementieren dieses Entwurfsmuster als etwas, das wir immer wieder für die Navigation in Site-Abschnitten verwenden werden.