Teraz, keď sme vo Photoshope, čo dúfame, že dosiahneme v oblasti vyhľadávania, pustili sme sa do jej vytvárania pomocou HTML a CSS. Naše ikonové písmo už máme načítané, takže ho umiestnime na stránku. Aplikácia Font Explorer X nám pomáha zobraziť správne znaky HTML, ktoré môžeme použiť pre zväčšovacie sklo.
Pridáme značku do nášho súboru na zahrnutie do hlavičky a začneme úplne nový súbor Sass (_search.scss), aby sme napísali CSS pre túto novú oblasť. Zaisťujeme, aby CodeKit vedel o tomto novom súbore. Bohužiaľ v týchto skorých screencastoch CodeKit niekedy chvíľu trvá, kým sa obnoví, čo neskôr objavím len preto, že mám jeden konkrétny projekt, v ktorom je príliš veľa súborov. Môžete to napraviť iba zúžením adresára, v ktorom máte hodinky CodeKit.
Absolútne umiestnime oblasť vyhľadávania do hlavičky tak, aby bola umiestnená vpravo a hore od hlavnej oblasti obsahu. Dimenziu a umiestnenie lupy upravíme konkrétnym zameraním na ikonu. Umiestňujeme veci s percentami tak, aby to zapadalo do nášho responzívneho dizajnu. Pridávame :hovera :focusuvádzame tiež, takže je zrejmé, že na ňu môžete kliknúť.
Dokončíme to napísaním kódu JavaScript, ktorý otvorí a zatvorí oblasť vyhľadávania. Mohli sme mať animácie priamo v JavaScripte (keďže používame jQuery), ale namiesto toho stačí zmeniť názvy tried v CSS. To je to, čo by som rád považoval za „stavový CSS“, kde JavaScript iba riadi názvy tried, ktoré deklarujú, v akom stave je stránka (alebo oblasť), a CSS kontroluje, ako stránka v tomto stave vyzerá (a ako sa tam dostane) ). To znamená, že robíme veci ako prechody v CSS, ktoré podľa môjho názoru patria tam a budú z dlhodobého hľadiska oveľa lepšie (tj. Prechody CSS sú hardvérovo akcelerované, zatiaľ čo prechody JavaScriptu nie, sú to iba rýchle iterácie vložených štýlov).