Wir springen hier nur ein kleines bisschen vorwärts. Dies ist eine ziemlich umfassende Screencast-Serie, aber sie dauert nur etwa 40 Stunden, und dieses tatsächliche Projekt ist natürlich eher ein paar hundert Stunden. In diesem Fall war der Sprung nach vorne, um die zweiseitige Doppelseite ein wenig aufzustylen.
Die linke und rechte Seite haben jeweils einen gemeinsamen und einen unterschiedlichen Klassennamen. Dies ist meiner Meinung nach in vielen verschiedenen Szenarien im Webdesign sehr verbreitet. In diesem Fall teilen sich die Seiten den gleichen Farbverlauf und die gleiche Größe. Aber sie unterscheiden sich, wenn wir eine CSS3 skew()-Transformation anwenden. Dies verleiht uns einen ziemlich netten "offenes Buch"-Effekt. Da all diese Effekte mit CSS erstellt werden, skalieren sie gut (auf eine Weise, wie es ein Bild fast sicherlich nicht könnte).
Wir hatten eine clevere Lösung für gleiche Höhen, aber leider bricht diese wegen unseres cleveren schrägen "offenes Buch"-Krams. Stattdessen verwenden wir einfach ein wenig JavaScript.
Zuerst, während wir uns den JavaScript-Code ansehen, schreiben wir eine Zeile, die alle "Buchstaben" versteckt, die keine Kinder haben. Zum Beispiel gibt es keine Selektoren, die mit "Z" beginnen, aber wir haben eine veröffentlichte Seite mit diesem Namen, 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 dann beide auf die höchste. Wir müssen ein etwas umständliches setTimeout verwenden, damit es richtig funktioniert, da das Laden von @font-face etwas Zeit in Anspruch nimmt und die Höhen beeinflusst. Wir könnten letztendlich eine Art Schriftart-Lade-Callback verwenden. (Oder das wäre vielleicht übertrieben).
Dann widmen wir uns einzelnen Almanac-Seiten. Wir arbeiten jetzt schnell! Wir haben diese Art von Dingen jetzt so oft gemacht, dass es keine Überraschung ist, dass wir schneller vorankommen. Wir bringen diese Vorlage im Wesentlichen auf Vordermann, auf die gleiche Weise, wie wir einen einzelnen Blogbeitrag oder eine generische Seite oder etwas Ähnliches gestaltet haben.
Wir verwenden eine "schwarze Leiste" für die Breadcrumbs und zementieren dieses Designmuster als etwas, das wir immer wieder für die Navigation von Website-Bereichen verwenden werden.