Most, hogy Photoshoppingot elértünk, amit remélni fogunk elérni a keresési területtel, nekiláttunk HTML és CSS segítségével felépíteni. Már betöltöttük az ikon betűtípusunkat, ezért ezt elhelyezzük az oldalon. A Font Explorer X segít abban, hogy megmutassuk a nagyítóhoz használandó HTML karaktereket.
Hozzáadjuk a jelölést a fejlécünkbe tartozó fájlhoz, és elindítunk egy vadonatúj Sass fájlt (_search.scss), hogy megírjuk az új terület CSS-jét. Biztosítjuk, hogy a CodeKit tudjon erről az új fájlról. Sajnos ezekben a korai képernyőfájlokban a CodeKit néha eltart egy ideig, mire a későbbiekben kiderül, csak azért, mert van egy bizonyos projektem, túl sok fájl van benne. Ezt úgy javíthatja ki, hogy szűkíti a könyvtárat, amelyben a CodeKit figyeli.
A keresési területet abszolút úgy helyezzük el a fejlécen belül, hogy az a fő tartalmi terület jobb és felső részén legyen. A nagyító méretét és elhelyezését úgy állítjuk be, hogy kifejezetten az ikont célozzuk meg. Százalékosan pozícionáljuk a dolgokat, hogy azok jól illeszkedjenek az érzékeny kialakításunkhoz. Hozzáadunk :hoverés :focusállítunk is, így nyilvánvaló, hogy rákattinthat.
Befejezésül írunk néhány JavaScriptet, amely megnyitja és bezárja a keresési területet. Lehetett volna az animációk közvetlenül a JavaScript-ben (mivel a jQuery-t használjuk), de ehelyett annyit teszünk, hogy megváltoztatjuk az osztályneveket a CSS-en. Ezt szeretem „állami alapú CSS-ként” elképzelni, ahol a JavaScript csak azokat az osztályneveket vezérli, amelyek kijelölik, hogy az oldal (vagy terület) milyen állapotban van, a CSS pedig azt, hogy az oldal hogyan néz ki ebben az állapotban (és hogyan kerül oda) ). Ez azt jelenti, hogy olyan dolgokat csinálunk, mint az átmenetek a CSS-ben, amely véleményem szerint az a hely, ahová tartoznak, és sokkal jobb lesz hosszú távon (azaz a CSS-átmenetek hardveresen gyorsulnak, míg a JavaScript-átmenetek nem, csak a belső stílusok gyors iterációi).