Nu we hebben gefotoshopt wat we hopen te bereiken met het zoekgebied, zijn we begonnen het te bouwen met HTML en CSS. We hebben ons pictogramlettertype al geladen, dus plaatsen we dat op de pagina. Font Explorer X helpt ons bij het tonen van het juiste HTML-teken om voor het vergrootglas te gebruiken.
We voegen de opmaak toe aan ons header-include-bestand en starten een gloednieuw Sass-bestand (_search.scss) om de CSS voor dit nieuwe gebied te schrijven. We zorgen ervoor dat CodeKit op de hoogte is van dit nieuwe bestand. Helaas duurt het bij deze vroege screencasts soms even voordat CodeKit is vernieuwd, wat ik later ontdek omdat ik daar een bepaald project heb met gewoon veel te veel bestanden erin. U kunt dat oplossen door de map waarin u CodeKit-watch heeft, te verkleinen.
We plaatsen het zoekgebied absoluut binnen de koptekst, zodat het rechts en bovenaan het hoofdinhoudsgebied wordt geplaatst. We passen de grootte en plaatsing van het vergrootglas aan door specifiek op het pictogram te richten. We positioneren dingen met percentages zodat het precies past bij ons responsieve ontwerp. We voegen :hoveren :focusstaten ook toe, dus het is duidelijk dat u erop kunt klikken.
We eindigen met het schrijven van wat JavaScript dat het zoekgebied opent en sluit. We hadden de animaties goed in JavaScript kunnen hebben (aangezien we jQuery gebruiken), maar in plaats daarvan veranderen we alleen de klassenamen in de CSS. Dit is wat ik graag beschouw als 'state-based CSS', waarbij JavaScript alleen klassennamen beheert die aangeven in welke staat de pagina (of gebied) zich bevindt, en CSS bepaalt hoe de pagina eruitziet in die staat (en hoe het daar terechtkomt ). Dit betekent dat we dingen doen als overgangen in CSS, wat naar mijn mening is waar ze thuishoren en op de lange termijn veel beter zullen zijn (dwz CSS-overgangen worden hardware-versneld terwijl JavaScript-overgangen dat niet zijn, het zijn slechts snelle iteraties van inline-stijlen).