Sad kad smo Photoshopirali ono što se nadamo postići pomoću područja pretraživanja, krenuli smo u izgradnju s HTML-om i CSS-om. Već imamo učitan font fonta, pa ga stavljamo na stranicu. Font Explorer X pomaže nam da pokažemo odgovarajući HTML znak koji se koristi za povećalo.
Dodamo oznaku u datoteku za zaglavlje i započinjemo potpuno novu Sass datoteku (_search.scss) da napišemo CSS za ovo novo područje. Pazimo da CodeKit zna za ovu novu datoteku. Nažalost, u ovim ranim screencast-ima CodeKit-u ponekad treba malo vremena da se osvježi, što kasnije otkrivam samo zato što tamo imam jedan određeni projekt s previše previše datoteka. To možete popraviti samo sužavanjem direktorija u kojem imate sat CodeKit.
Područje pretraživanja apsolutno postavljamo unutar zaglavlja tako da je smješteno s desne i gornje strane glavnog sadržaja. Veličinu i položaj povećala prilagođavamo specifičnim ciljanjem ikone. Stvari postavljamo u postotke tako da se dobro uklapaju u naš responzivni dizajn. Dodamo :hoveri :focusdržave, tako da je očito da možete kliknuti na nju.
Završavamo pisanjem JavaScript-a koji će otvoriti i zatvoriti područje pretraživanja. Mogli smo imati animacije točno u JavaScript-u (budući da koristimo jQuery), ali umjesto toga sve što radimo je da promijenimo imena klasa na CSS-u. To je ono što volim smatrati "CSS-om na temelju države" gdje JavaScript samo kontrolira nazive klasa koji deklariraju u kojem je stanju stranica (ili područje), a CSS kontrolira kako stranica izgleda u tom stanju (i kako tamo dolazi) ). To znači da radimo stvari poput prijelaza u CSS-u, što po mom mišljenju pripada i dugoročno će biti daleko bolji (tj. CSS-ovi prijelazi su hardverski ubrzani, dok JavaScript prijelazi nisu, oni su samo brze iteracije ugrađenih stilova).