Nous sautons un peu en avant ici. Il s'agit d'une série de screencast assez complète, mais ce n'est que 40 heures environ et bien sûr, ce projet réel ressemble en fait à quelques centaines. Dans ce cas, le saut en avant consistait à styliser un peu la double page. Nous traversons ces changements au début.
Les pages gauche et droite ont un nom de classe partagé et un nom de classe différent. C'est très courant que je trouve dans de nombreux scénarios de conception Web. Dans ce cas, les pages partagent le même dégradé et le même dimensionnement. Mais ils diffèrent lorsque nous appliquons une skew()transformation CSS3 . Cela nous donne un effet de «livre ouvert» plutôt soigné. Parce que tous ces effets sont créés avec CSS, ils s'adaptent bien (d'une manière qu'une image ne le ferait presque certainement pas).
Nous avions mis en place une solution intelligente d'égalité des hauteurs, mais malheureusement, à cause de notre astucieux livre ouvert, cela se brise. Au lieu de cela, nous utilisons juste une touche de JavaScript.
Tout d'abord, en regardant le JavaScript, nous écrivons une ligne qui masquera toutes les «lettres» qui n'ont pas d'enfants. Par exemple, il n'y a pas de sélecteurs commençant par «Z», mais nous avons publié une page intitulée juste pour être complète. Nous les découvrons (puis les masquons) avec le :has()sélecteur jQuery ultra-utile .
Pour des hauteurs égales, nous mesurons les deux colonnes, décidons laquelle est la plus haute, puis les définissons toutes les deux sur la plus haute. Nous devons utiliser un setTimeout légèrement hacky pour que cela fonctionne correctement car le chargement de @ font-face prend un peu de temps et affecte les hauteurs. Nous pourrions finalement utiliser une sorte de rappel de chargeur de polices. (Ou, cela pourrait être exagéré).
Ensuite, nous passons à des pages d'almanach uniques. Camionnage rapide maintenant! Nous avons fait ce genre de choses tellement de fois maintenant, il n'est pas surprenant que nous progressions plus vite. Nous mettons essentiellement ce modèle en forme de la même manière que nous avons conçu un seul article de blog ou une page générique ou quelque chose du genre.
Nous utilisons une «barre noire» pour le fil d'Ariane, cimentant ce modèle de conception comme quelque chose que nous utiliserons encore et encore pour la navigation dans les sections du site.