Nyní, když jsme ve Photoshopu dosáhli toho, čeho chceme dosáhnout v oblasti vyhledávání, pustili jsme se do jeho vytváření pomocí HTML a CSS. Již máme načten naše ikonové písmo, takže ho umístíme na stránku. Font Explorer X nám pomáhá ukázat správné znaky HTML, které lze použít pro zvětšovací sklo.
Přidáme značku do našeho záhlaví zahrnout soubor a spustit zcela nový soubor Sass (_search.scss) psát CSS pro tuto novou oblast. Zajistíme, aby CodeKit věděl o tomto novém souboru. Bohužel v těchto raných screencastech CodeKit někdy chvíli trvá, než se obnoví, což později objevím jen proto, že tam mám jeden konkrétní projekt, který obsahuje příliš mnoho souborů. Můžete to opravit pouhým zúžením adresáře, ve kterém máte hodinky CodeKit.
Absolutně umístíme oblast hledání do záhlaví tak, aby byla umístěna vpravo a nahoře od hlavní oblasti obsahu. Upravíme velikost a umístění lupy konkrétním zaměřením na ikonu. Věci umisťujeme s procenty tak, aby to dobře odpovídalo našemu responzivnímu designu. Přidáváme :hovera :focusuvádí také, takže je zřejmé, že na něj můžete kliknout.
Dokončíme tím, že napíšeme nějaký JavaScript, který otevře a zavře oblast hledání. Mohli jsme mít animace přímo v JavaScriptu (protože používáme jQuery), ale místo toho vše, co děláme, je změnit názvy tříd v CSS. To je to, o čem bych rád přemýšlel jako o „CSS založeném na stavu“, kde JavaScript pouze řídí názvy tříd, které deklarují, v jakém stavu je stránka (nebo oblast), a CSS kontroluje, jak stránka vypadá v tomto stavu (a jak se tam dostane) ). To znamená, že děláme věci jako přechody v CSS, což je podle mého názoru tam, kam patří, a budou dlouhodobě mnohem lepší (tj. Přechody CSS jsou hardwarově akcelerovány, zatímco přechody v JavaScriptu nejsou, jsou to jen rychlé iterace vložených stylů).