Van egy kis Photoshop-makettünk, amelyről itt dolgozhatunk, miközben folytatjuk az egyes galériaoldalak sablonjának építését.
Először felépítettük a Következő és az Előző linkeket. Abszolút helyzetben vannak a galéria sávjában, hogy a bárban lévő többi gomb és dolog ellenére is az oldalra helyezhessük őket. Ugyanazt az osztályt veszik fel, mint az Egy beküldés gombot, így ott állandóság van.
Következő lépésként ez a nagyon vékony bal oldali oszlop található, ahol szövegeket kaphatunk. 1/8-as 7/8-as rácsból indulunk ki, de az 1/8-as egy kicsit túl vékony. Megváltoztatjuk 1/4 3/4-re, de ez túl sok. Tehát, mint a mesebeli babamedve, 1/6 5/6 is pont megfelelő volt.
Végezünk néhány tipográfiai munkát abban a keskeny oszlopban, hozzáadva a címet (egy
természetesen, mivel ez az oldal legfontosabb címe), a leírás és más szakaszok. A tipográfia nagy része egyszerűen a helyére esik az egyszerű és stabil tipográfiai beállítás alapján.
Az 5/6 rács mind a képhez tartozik. Szép és nagy, ami nagyon jó. Világosszürke háttérrel rendelkezik, akárcsak a képek a blogbejegyzésekben (pl
Gondolkodunk azon, hogy kicsit megszerettessük a címkék stílusát. Körülnézünk a CodePen-en (itt található egy link a „címkék” címkéhez, a META ALERT). Végül azt gondoljuk, hogy ez túlteljes, és hagyjuk őket normál linkként.
A „teljes méret” gombot a lehető legegyszerűbb módon működtetjük, megnyitunk egy új ablakot, amely a teljes méretű kép mérete és a benne lévő kép megjelenítésével. Olyan, mint egy modális doboz a 2000-es évek elejéről! De szeretem. Egyszerű, nincs szüksége egy csomó kódra (mint például egy villanyszekrény), és nyilvánvaló, hogy interakcióba lép. Még jobb, ha engem kérdezel.