Nu hvor vi har Photoshopped, hvad vi håber at opnå med søgeområdet, satte vi os i gang med at opbygge det med HTML og CSS. Vi har allerede indlæst vores ikonfont, så vi placerer den på siden. Font Explorer X hjælper os med at vise det rette HTML-tegn, der skal bruges til forstørrelsesglasset.
Vi tilføjer markeringen til vores header inkluderer fil og starter en helt ny Sass-fil (_search.scss) for at skrive CSS til dette nye område. Vi sørger for, at CodeKit kender til denne nye fil. Desværre tager CodeKit nogle gange et stykke tid at opdatere i disse tidlige screencasts, hvilket jeg senere opdager er bare fordi jeg har et bestemt projekt derinde med alt for mange filer i det. Du kan rette det ved bare at indsnævre kataloget, hvor du har CodeKit-ur.
Vi placerer absolut søgeområdet i overskriften, så det placeres til højre og øverst i hovedindholdsområdet. Vi justerer størrelsen og placeringen af forstørrelsesglasset ved at målrette specifikt mod ikonet. Vi placerer ting med procenter, så det passer perfekt til vores lydhøre design. Vi tilføjer :hoverog :focusstater også, så det er indlysende, at du kan klikke på det.
Vi afslutter med at skrive noget JavaScript, der åbner og lukker søgeområdet. Vi kunne have haft animationerne lige i JavaScript (da vi bruger jQuery), men i stedet er alt, hvad vi gør, at ændre klassenavne på CSS. Dette er hvad jeg kan lide at tænke på som "statsbaseret CSS", hvor JavaScript bare styrer klassenavne, der erklærer, hvilken tilstand siden (eller området) er i, og CSS styrer, hvordan siden ser ud i den tilstand (og hvordan den kommer dertil ). Dette betyder, at vi laver ting som overgange i CSS, hvilket efter min mening er, hvor de hører hjemme og vil være langt bedre på lang sigt (dvs. CSS-overgange er hardwareaccelereret, mens JavaScript-overgange ikke er, de er bare hurtige iterationer af inline-stilarter).