Csak egy tizenéves kicsit ugrunk előre. Ez egy elég átfogó screencast sorozat, de csak körülbelül 40 óra, és ez a tényleges projekt valójában inkább hasonlít néhány százra. Ebben az esetben az előrelépés a kétoldalas terjedelem kissé stilizálása volt. Az elején végigjárjuk ezeket a változásokat.
A bal és a jobb oldalon egy megosztott és egy másik osztálynév található. Ez nagyon szokatlan, sok különböző forgatókönyvben találom meg a webdesignt. Ebben az esetben az oldalak ugyanazt a színátmenetet és méretet osztják meg. De különböznek, ha CSS3 skew()transzformációt alkalmazunk. Ez egy meglehetősen ügyes „nyitott könyv” hatást eredményez. Mivel ezek a hatások CSS-sel jönnek létre, szépen méreteznek (oly módon, hogy egy kép szinte biztosan nem).
Van egy okos egyenlő magasságú megoldás a helyünkön, de sajnos okos nyitott könyvbeli ferde-jó cuccaink miatt ez megszakad. Ehelyett csak egy kis JavaScript-et használunk.
Először, miközben a JavaScriptet nézzük, írunk egy sort, amely elrejti azokat a „betűket”, amelyeknek nincs gyermekük. Például nincs olyan választó, amely „Z” betűvel kezdődne, de van egy oldalunk, amelyet csak átfogónak hívunk. Ezeket felfedezzük (majd elrejtjük) az ultra hasznos jQuery :has()választóval.
Az egyenlő magasságokhoz megmérjük a két oszlopot, eldöntjük, melyik a legmagasabb, majd állítsuk mindkettőt a legmagasabbra. Kicsit hacker setTimeout-t kell használnunk a megfelelő működéshez, mert a @ font-face betöltés kis időt vesz igénybe és befolyásolja a magasságot. Végül használhatnánk valamilyen betűtípus-betöltő visszahívást. (Vagy ez lehet, hogy túlzás).
Ezután egyetlen almanach oldalra lépünk. Gyorsan tovább szállít! Olyan sokszor tettünk ilyesmit, most már nem meglepő, hogy gyorsabban haladunk. Ezt a sablont lényegében ugyanolyan formába öntjük, mint egyetlen blogbejegyzést vagy egy általános oldalt, vagy bármi hasonlót.
A "morzsákhoz" fekete sávot használunk, amely ezt a tervezési mintát megszilárdítja, amit újra és újra felhasználunk a webhely-szakasz navigációhoz.