Sekarang setelah kami Photoshopped apa yang kami harapkan dapat dicapai dengan kawasan carian, kami mula membina dengan HTML dan CSS. Kami sudah memuatkan fon ikon kami, jadi kami meletakkannya di halaman. Font Explorer X membantu kami menunjukkan watak HTML yang sesuai untuk digunakan untuk kaca pembesar.
Kami menambahkan markup ke header include file dan memulakan fail Sass yang baru (_search.scss) untuk menulis CSS untuk kawasan baru ini. Kami memastikan CodeKit mengetahui mengenai fail baru ini. Malangnya dalam screencast awal ini CodeKit kadang-kadang memerlukan sedikit masa untuk menyegarkan, yang kemudian saya dapati hanya kerana saya mempunyai satu projek tertentu di sana dengan terlalu banyak fail di dalamnya. Anda boleh memperbaikinya dengan hanya menyempitkan direktori di mana anda mempunyai jam tangan CodeKit.
Kami benar-benar meletakkan kawasan carian di dalam tajuk sehingga ditempatkan di sebelah kanan dan atas kawasan kandungan utama. Kami menyesuaikan ukuran dan penempatan kaca pembesar dengan menyasarkan ikon secara khusus. Kami meletakkan sesuatu dengan peratusan sehingga sesuai dengan reka bentuk responsif kami. Kami menambah :hoverdan :focusmenyatakan juga jadi jelas anda boleh mengkliknya.
Kami menyelesaikan dengan menulis beberapa JavaScript yang akan membuka dan menutup kawasan carian. Kami mungkin mempunyai animasi langsung di JavaScript (kerana kami menggunakan jQuery), tetapi yang kami lakukan hanyalah menukar nama kelas di CSS. Inilah yang ingin saya fikirkan sebagai "CSS berdasarkan keadaan" di mana JavaScript hanya mengawal nama kelas yang menyatakan keadaan halaman (atau kawasan), dan CSS mengawal rupa halaman dalam keadaan tersebut (dan bagaimana ia sampai di sana ). Ini bermaksud kita melakukan perkara seperti peralihan dalam CSS, yang menurut saya berada di mana ia berada dan akan menjadi jangka panjang yang lebih baik (iaitu peralihan CSS dipercepat perkakasan sementara peralihan JavaScript tidak, mereka hanyalah lelaran cepat dari gaya sebaris).