Nyt kun olemme Photoshoppineet mitä toivomme saavutettavan hakualueella, aloitimme sen rakentamisen HTML: llä ja CSS: llä. Kuvakkeen fontti on jo ladattu, joten sijoitamme sen sivulle. Font Explorer X auttaa meitä näyttämään oikean HTML-merkin suurennuslasille.
Lisätään merkintä otsikkotiedostoon ja aloitetaan upouusi Sass-tiedosto (_search.scss) tämän alueen CSS: n kirjoittamiseksi. Varmistamme, että CodeKit tietää tästä uudesta tiedostosta. Valitettavasti näissä varhaisissa näytöissä CodeKit päivittyy joskus jonkin aikaa, minkä myöhemmin huomaan vain siksi, että minulla on yksi tietty projekti, jossa on aivan liian monta tiedostoa. Voit korjata sen vain kaventamalla hakemistoa, jossa sinulla on CodeKit-kello.
Sijoitamme hakualueen ehdottomasti otsikossa niin, että se sijoitetaan pääsisältöalueen oikealle ja yläpuolelle. Säädämme suurennuslasin kokoa ja sijoittamista kohdistamalla kuvakkeen nimenomaan. Sijoitamme asiat prosentteina niin, että ne sopivat tiiviisti reagoivaan suunnitteluun. Lisäämme :hoverja ilmoitamme :focusmyös, joten on selvää, että voit napsauttaa sitä.
Lopetamme kirjoittamalla JavaScriptin, joka avaa ja sulkee hakualueen. Animaatiot olisivat voineet olla suoraan JavaScriptissä (koska käytämme jQueryä), mutta sen sijaan kaikki mitä teemme, on muuttaa luokkien nimiä CSS: ssä. Tämän pidän mielestäni "osavaltiopohjaisena CSS: nä", jossa JavaScript ohjaa vain luokkien nimiä, jotka ilmoittavat, missä tilassa sivu (tai alue) on, ja CSS ohjaa sivun ulkomuotoa kyseisessä tilassa (ja miten se pääsee sinne) ). Tämä tarkoittaa, että teemme asioita, kuten siirtymät CSS: ssä, mikä on mielestäni minne ne kuuluvat ja ovat pitkällä aikavälillä paljon parempia (ts. CSS-siirtymät ovat laitteistokiihdytettyjä, kun taas JavaScript-siirtymät eivät, ne ovat vain inline-tyylien nopeaa iterointia).