Po dodaniu Photoshopa do tego, co mamy nadzieję osiągnąć w obszarze wyszukiwania, zabraliśmy się za tworzenie go za pomocą HTML i CSS. Mamy już załadowaną czcionkę ikony, więc umieszczamy ją na stronie. Eksplorator czcionek X pomaga nam pokazać właściwy znak HTML do użycia w lupie.
Dodajemy znaczniki do naszego pliku nagłówkowego i rozpoczynamy nowy plik Sass (_search.scss), aby zapisać CSS dla tego nowego obszaru. Upewniamy się, że CodeKit wie o tym nowym pliku. Niestety, w tych wczesnych screencastach CodeKit czasami trochę potrwa, aby odświeżyć, co później odkrywam tylko dlatego, że mam tam jeden konkretny projekt, w którym jest po prostu zbyt wiele plików. Możesz to naprawić, po prostu zawężając katalog, w którym masz zegarek CodeKit.
Absolutnie pozycjonujemy obszar wyszukiwania w nagłówku, tak aby był umieszczony po prawej stronie i u góry głównego obszaru zawartości. Dostosowujemy rozmiar i położenie lupy, celując specjalnie w ikonę. Umieszczamy rzeczy za pomocą wartości procentowych, aby dobrze pasowały do naszego responsywnego projektu. Dodajemy :hoveri :focuspodajemy, więc jest oczywiste, że możesz na to kliknąć.
Na koniec piszemy JavaScript, który otworzy i zamknie obszar wyszukiwania. Mogliśmy mieć animacje bezpośrednio w JavaScript (ponieważ używamy jQuery), ale zamiast tego wszystko, co robimy, to zmienianie nazw klas w CSS. To jest to, co lubię nazywać „stanem CSS” gdzie JavaScript kontroluje tylko nazwy klas, które deklarują, w jakim stanie jest strona (lub obszar), a CSS kontroluje, jak strona wygląda w tym stanie (i jak się tam znajduje ). Oznacza to, że robimy takie rzeczy jak przejścia w CSS, które moim zdaniem są tam, gdzie należą i będą o wiele lepsze na dłuższą metę (tj. Przejścia CSS są przyspieszane sprzętowo, podczas gdy przejścia JavaScript nie, są po prostu szybkimi iteracjami stylów wbudowanych).