Zdaj, ko smo Photoshopped, kaj upamo, da bomo dosegli z iskalnim področjem, smo se lotili gradnje z HTML in CSS. Pisavo ikone že imamo naložene, zato jo postavimo na stran. Font Explorer X nam pomaga prikazati ustrezen znak HTML, ki ga lahko uporabimo za povečevalno steklo.
V glavno datoteko za vključitev dodamo oznako in zaženemo povsem novo datoteko Sass (_search.scss), da napišemo CSS za to novo področje. Zagotavljamo, da CodeKit ve za to novo datoteko. Na žalost v teh zgodnjih predvajanju zaslona CodeKit včasih traja nekaj časa, da se osveži, kar kasneje odkrijem samo zato, ker imam tam en sam projekt, v katerem je preveč datotek. To lahko popravite tako, da preprosto zožite imenik, v katerem imate uro CodeKit.
Območje iskanja absolutno postavimo v glavo, tako da je postavljeno na desni in vrh področja glavne vsebine. Velikost in postavitev lupe prilagodimo s posebnim usmerjanjem ikone. Stvari postavimo z odstotki, tako da se tesno prilegajo našemu odzivnemu dizajnu. Dodajamo :hoverin :focusnavajamo tudi, tako da je očitno, da ga lahko kliknete.
Zaključimo s pisanjem nekaj JavaScript, ki bo odprl in zaprl območje iskanja. Animacije bi lahko imeli prav v JavaScript-u (ker uporabljamo jQuery), namesto tega pa v CSS spremenimo imena razredov. To je tisto, kar najraje smatram kot "CSS, ki temelji na državi", kjer JavaScript samo nadzoruje imena razredov, ki razglašajo, v kakšnem stanju je stran (ali območje), CSS pa nadzoruje, kako je stran videti v tem stanju (in kako pride tja) ). To pomeni, da delamo stvari, kot so prehodi v CSS, kar je po mojem mnenju tja, kamor sodijo, in bo dolgoročno veliko boljše (tj. Prehodi CSS so strojno pospešeni, prehodi JavaScript pa ne, so le hitre ponovitve vstavljenih stilov).