Tagad, kad esam Photoshopped to, ko mēs ceram sasniegt ar meklēšanas apgabalu, mēs sākām to veidot, izmantojot HTML un CSS. Mums jau ir ielādēts mūsu ikonas fonts, tāpēc mēs to ievietojam lapā. Font Explorer X palīdz mums parādīt pareizo HTML rakstzīmi, ko izmantot palielināmajam stiklam.
Mēs pievienojam marķējumu galvenes iekļaušanas failam un sākam pavisam jaunu Sass failu (_search.scss), lai rakstītu CSS šai jaunajai vietnei. Mēs pārliecināmies, ka CodeKit zina par šo jauno failu. Diemžēl šajos agrīnajos ekrānuzņēmumos CodeKit dažreiz prasa laiku, lai to atsvaidzinātu, ko es vēlāk atklāju tikai tāpēc, ka man ir viens konkrēts projekts, kurā ir pārāk daudz failu. To var novērst, vienkārši sašaurinot direktoriju, kurā esat skatījies CodeKit.
Meklēšanas apgabals tiek absolūti novietots galvenē tā, lai tas būtu izvietots galvenā satura apgabala labajā un augšējā daļā. Pielāgojam palielināmā stikla lielumu un izvietojumu, īpaši mērķējot uz ikonu. Mēs pozicionējam lietas ar procentiem tā, lai tā būtu cieši saistīta ar mūsu atsaucīgo dizainu. Mēs pievienojam :hoverun :focusnorādām arī, tāpēc ir skaidrs, ka varat noklikšķināt uz tā.
Mēs beidzam, uzrakstot JavaScript, kas atvērs un aizvērs meklēšanas apgabalu. Mums animācijas varēja būt tieši JavaScript (tā kā mēs izmantojam jQuery), bet tā vietā viss, ko mēs darām, ir mainīt klases nosaukumus CSS. To es gribētu domāt par “štata CSS”, kur JavaScript kontrolē tikai klases nosaukumus, kas paziņo, kādā stāvoklī atrodas lapa (vai apgabals), un CSS kontrolē, kā lapa izskatās šajā stāvoklī (un kā tā tur nonāk) ). Tas nozīmē, ka mēs darām tādas lietas kā pārejas CSS, kas, manuprāt, ir tās vietas, kur tās pieder, un ilgtermiņā būs daudz labākas (ti, CSS pārejas tiek paātrinātas aparatūrā, savukārt JavaScript pārejas nav, tās ir tikai straujas iekšējo stilu atkārtojumi).