Nu när vi har fotograferat vad vi hoppas kunna åstadkomma med sökområdet, började vi bygga det med HTML och CSS. Vi har redan laddat vårt ikonteckensnitt, så vi lägger det på sidan. Font Explorer X hjälper oss att visa rätt HTML-karaktär att använda för förstoringsglaset.
Vi lägger till markeringen i vår rubrik inkludera fil och startar en helt ny Sass-fil (_search.scss) för att skriva CSS för detta nya område. Vi ser till att CodeKit känner till den här nya filen. Tyvärr tar CodeKit ibland en stund att uppdatera i dessa tidiga skärmutsändningar, vilket jag senare upptäcker är bara för att jag har ett visst projekt där med alldeles för många filer i det. Du kan fixa det genom att bara begränsa katalogen där du har CodeKit watch.
Vi placerar absolut sökområdet i rubriken så att det placeras till höger och högst upp i huvudinnehållsområdet. Vi justerar storlek och placering av förstoringsglaset genom att rikta in sig specifikt på ikonen. Vi placerar saker med procent så att det passar perfekt med vår responsiva design. Vi lägger till :hoveroch :focusanger också så det är uppenbart att du kan klicka på det.
Vi avslutar med att skriva lite JavaScript som öppnar och stänger sökområdet. Vi kunde ha haft animationerna direkt i JavaScript (eftersom vi använder jQuery), men i stället är allt vi gör att ändra klassnamn på CSS. Det här är vad jag gillar att tänka på som "statsbaserad CSS" där JavaScript bara styr klassnamn som deklarerar vilket tillstånd sidan (eller området) är i, och CSS styr hur sidan ser ut i det tillståndet (och hur den kommer dit ). Det betyder att vi gör saker som övergångar i CSS, vilket enligt min mening är hemma och kommer att bli mycket bättre på lång sikt (dvs. CSS-övergångar är hårdvaruaccelererade medan JavaScript-övergångar inte är det, de är bara snabba iterationer av inline-stilar).