Sekarang kita telah melakukan photoshop tentang apa yang ingin kita capai dengan area pencarian, kita mulai membangunnya dengan HTML dan CSS. Kami sudah memuat font ikon kami, jadi kami menempatkannya di halaman. Font Explorer X membantu kami menunjukkan karakter HTML yang tepat untuk digunakan pada kaca pembesar.
Kami menambahkan markup ke file termasuk header kami dan memulai file Sass baru (_search.scss) untuk menulis CSS untuk area baru ini. Kami memastikan CodeKit mengetahui tentang file baru ini. Sayangnya dalam screencast awal ini CodeKit kadang-kadang membutuhkan beberapa saat untuk menyegarkan, yang kemudian saya temukan hanya karena saya memiliki satu proyek tertentu di sana dengan terlalu banyak file di dalamnya. Anda dapat memperbaikinya hanya dengan mempersempit direktori tempat Anda memiliki jam CodeKit.
Kami benar-benar memposisikan area pencarian di dalam tajuk sehingga ditempatkan di kanan dan atas area konten utama. Kami menyesuaikan ukuran dan penempatan kaca pembesar dengan menargetkan ikon secara spesifik. Kami memposisikan barang dengan persentase agar sesuai dengan desain responsif kami. Kami menambahkan :hoverdan :focusmenyatakan juga sehingga jelas Anda dapat mengkliknya.
Kami akhiri dengan menulis beberapa JavaScript yang akan membuka dan menutup area pencarian. Kami bisa saja memiliki animasi tepat di JavaScript (karena kami menggunakan jQuery), tetapi yang kami lakukan hanyalah mengubah nama kelas pada CSS. Inilah yang saya anggap sebagai "CSS berbasis status" di mana JavaScript hanya mengontrol nama kelas yang menyatakan status halaman (atau area), dan CSS mengontrol tampilan halaman dalam kondisi tersebut (dan bagaimana halaman tersebut sampai di sana ). Ini berarti kita melakukan hal-hal seperti transisi dalam CSS, yang menurut saya tempatnya dan akan jauh lebih baik dalam jangka panjang (yaitu transisi CSS diakselerasi dengan perangkat keras sedangkan transisi JavaScript tidak, itu hanya iterasi cepat dari gaya sebaris).