We springen hier een klein beetje naar voren. Dit is een behoorlijk uitgebreide screencast-serie, maar het duurt maar 40 uur of zo en natuurlijk is dit echte project eigenlijk meer een paar honderd. In dit geval was de sprong voorwaarts om de spread van twee pagina's een beetje op te maken. We doorlopen die veranderingen in het begin.
De linker- en rechterpagina's hebben een gedeelde en een andere klassenaam. Dit komt heel vaak voor, ik vind in veel verschillende scenario's in webdesign. In dit geval hebben de pagina's hetzelfde verloop en hetzelfde formaat. Maar ze verschillen wanneer we een CSS3- skew()transformatie toepassen . Dit geeft ons een nogal nette "open boek" -effect. Omdat al deze effecten met CSS worden gemaakt, worden ze mooi geschaald (op een manier die een afbeelding vrijwel zeker niet zou doen).
We hadden een slimme oplossing voor gelijke hoogte, maar helaas breekt dat door ons slimme open boek scheef. In plaats daarvan gebruiken we gewoon een vleugje JavaScript.
Ten eerste, terwijl we naar het JavaScript kijken, schrijven we een regel die alle "letters" zonder kinderen zal verbergen. Er zijn bijvoorbeeld geen selectors die beginnen met "Z", maar we hebben een pagina gepubliceerd met de naam dat, alleen om uitgebreid te zijn. We ontdekken die (en verbergen ze vervolgens) met de uiterst handige jQuery- :has()selector.
Voor gelijke hoogtes meten we beide kolommen, beslissen welke de hoogste is en stellen ze beide op de hoogste in. We moeten een ietwat hacky setTimeout gebruiken om het correct te laten werken, omdat het laden van @ font-face wat tijd kost en de hoogte beïnvloedt. We zouden uiteindelijk een soort callback van de font loader kunnen gebruiken. (Of misschien is dat overdreven).
Daarna gaan we naar enkele almanakpagina's. Trucking nu snel! We hebben dit soort dingen zo vaak gedaan, het is geen verrassing dat we sneller gaan. We kloppen deze sjabloon in wezen op dezelfde manier als we een enkele blogpost of een generieke pagina of iets dergelijks hebben opgemaakt.
We gebruiken een "zwarte balk" voor de broodkruimels, waardoor dit ontwerppatroon wordt gecementeerd als iets dat we keer op keer zullen gebruiken voor navigatie op de site-sectie.