Artık arama alanıyla başarmayı umduğumuz şeyi Photoshop yaptığımıza göre, onu HTML ve CSS ile oluşturmaya başladık. Simge yazı tipimizi zaten yükledik, bu yüzden sayfaya yerleştirdik. Font Explorer X, büyüteç için kullanılacak uygun HTML karakterini göstermemize yardımcı olur.
İşaretlemeyi başlık include dosyamıza ekliyoruz ve bu yeni alan için CSS'yi yazmak için yepyeni bir Sass dosyası (_search.scss) başlatıyoruz. CodeKit'in bu yeni dosya hakkında bilgi sahibi olmasını sağlıyoruz. Ne yazık ki bu ilk ekran videolarında CodeKit'in yenilenmesi bazen biraz zaman alıyor, daha sonra keşfettiğim şey, içinde çok fazla dosya bulunan belirli bir projem var. CodeKit saatinizin olduğu dizini daraltarak bunu düzeltebilirsiniz.
Arama alanını kesinlikle başlık içinde konumlandırıyoruz, böylece ana içerik alanının sağında ve üstünde yer alıyoruz. Özel olarak simgeyi hedefleyerek büyütecin boyutunu ve yerleşimini ayarlıyoruz. Her şeyi, duyarlı tasarımımıza tam olarak uyacak şekilde yüzdelerle konumlandırıyoruz. Ekliyoruz :hoverve :focusbelirtiyoruz, böylece üzerine tıklayabileceğiniz açık.
Arama alanını açıp kapatacak bir JavaScript yazarak bitiriyoruz. Animasyonları doğrudan JavaScript'te alabilirdik (jQuery kullandığımız için), ancak bunun yerine yaptığımız tek şey CSS'deki sınıf adlarını değiştirmek. Bu, JavaScript'in sayfanın (veya alanın) hangi durumda olduğunu bildiren sınıf adlarını kontrol ettiği ve CSS'nin sayfanın o durumda nasıl göründüğünü (ve oraya nasıl ulaşacağını kontrol ettiği "durum tabanlı CSS” olarak düşünmek istediğim şeydir. ). Bu, CSS'de geçişler gibi şeyler yaptığımız anlamına geliyor, bence bunların ait oldukları ve uzun vadede çok daha iyi olacakları (yani CSS geçişleri donanımla hızlandırılırken JavaScript geçişleri değil, bunlar yalnızca satır içi stillerin hızlı yinelemeleridir).