Nå som vi har Photoshoppet det vi håper å oppnå med søkeområdet, satte vi oss i gang med å bygge det med HTML og CSS. Vi har allerede ladet ikonfonten vår, så vi plasserer den på siden. Font Explorer X hjelper oss med å vise riktig HTML-tegn som skal brukes til forstørrelsesglasset.
Vi legger til markeringen i toppteksten inkluderer fil og starter en helt ny Sass-fil (_search.scss) for å skrive CSS for dette nye området. Vi sørger for at CodeKit vet om denne nye filen. Dessverre tar CodeKit noen ganger en stund å oppdatere i disse tidlige skjermsendinger, noe jeg senere oppdager er bare fordi jeg har ett bestemt prosjekt der inne med altfor mange filer i den. Du kan fikse det ved bare å begrense katalogen der du har CodeKit watch.
Vi plasserer søkeområdet absolutt i overskriften slik at det plasseres til høyre og øverst i hovedinnholdsområdet. Vi justerer størrelsen og plasseringen av forstørrelsesglasset ved å målrette ikonet spesifikt. Vi posisjonerer ting med prosenter slik at det passer perfekt til vårt responsive design. Vi legger til :hoverog :focussier også, så det er åpenbart at du kan klikke på det.
Vi avslutter med å skrive litt JavaScript som åpner og lukker søkeområdet. Vi kunne ha hatt animasjonene rett i JavaScript (siden vi bruker jQuery), men i stedet er alt vi gjør å endre klassenavn på CSS. Dette er det jeg liker å tenke på som "statsbasert CSS" der JavaScript bare styrer klassenavn som deklarerer hvilken tilstand siden (eller området) er i, og CSS styrer hvordan siden ser ut i den tilstanden (og hvordan den kommer dit ). Dette betyr at vi gjør ting som overganger i CSS, som etter min mening er hjemmehørende og vil være langt bedre på lang sikt (dvs. at CSS-overganger er maskinvareakselerert mens JavaScript-overganger ikke er, de er bare raske gjentakelser av innebygde stiler).