Acum, după ce am Photoshop, ceea ce sperăm să realizăm cu zona de căutare, ne-am apucat să o construim cu HTML și CSS. Avem deja fontul pictogramă încărcat, așa că îl plasăm pe pagină. Font Explorer X ne ajută să afișăm caracterul HTML adecvat de utilizat pentru lupă.
Adăugăm marcajul la fișierul nostru de header include și începem un fișier Sass nou (_search.scss) pentru a scrie CSS pentru această nouă zonă. Ne asigurăm că CodeKit știe despre acest fișier nou. Din păcate, în aceste screencasts timpurii, CodeKit durează uneori să se reîmprospăteze, ceea ce am descoperit mai târziu doar pentru că am un proiect special acolo, cu doar prea multe fișiere în el. Puteți remedia acest lucru doar restrângând directorul în care aveți CodeKit ceas.
Poziționăm absolut zona de căutare în antet, astfel încât să fie plasată în partea dreaptă și sus a zonei principale de conținut. Reglăm dimensiunea și amplasarea lupei, vizând în mod specific pictograma. Poziționăm lucrurile cu procente astfel încât să se potrivească perfect cu designul nostru receptiv. Adăugăm :hoverși :focusafirmăm, de asemenea, astfel încât este evident că puteți da clic pe el.
Încheiem scriind niște JavaScript care vor deschide și închide zona de căutare. Am fi putut avea animațiile chiar în JavaScript (deoarece folosim jQuery), dar în schimb nu facem decât să schimbăm numele claselor de pe CSS. Acesta este ceea ce îmi place să cred că este „CSS bazat pe stări” în care JavaScript controlează doar numele claselor care declară în ce stare se află pagina (sau zona) și CSS controlează cum arată pagina în starea respectivă (și cum ajunge acolo) ). Acest lucru înseamnă că facem lucruri precum tranziții în CSS, ceea ce, după părerea mea, aparțin și va fi mult mai bun pe termen lung (de exemplu, tranzițiile CSS sunt accelerate hardware, în timp ce tranzițiile JavaScript nu sunt, sunt doar iterații rapide ale stilurilor inline).