Maintenant que nous avons Photoshopé ce que nous espérons accomplir avec la zone de recherche, nous nous sommes mis à le construire avec HTML et CSS. Nous avons déjà chargé notre police d'icônes, nous la plaçons donc sur la page. Font Explorer X nous aide à montrer le caractère HTML approprié à utiliser pour la loupe.
Nous ajoutons le balisage à notre fichier d'inclusion d'en-tête et commençons un tout nouveau fichier Sass (_search.scss) pour écrire le CSS pour cette nouvelle zone. Nous nous assurons que CodeKit connaît ce nouveau fichier. Malheureusement, dans ces premiers screencasts, CodeKit prend parfois un certain temps à se rafraîchir, ce que je découvre plus tard simplement parce que j'ai un projet en particulier avec trop de fichiers. Vous pouvez résoudre ce problème en réduisant simplement le répertoire dans lequel vous avez la surveillance CodeKit.
Nous positionnons absolument la zone de recherche dans l'en-tête de manière à ce qu'elle soit placée à droite et en haut de la zone de contenu principale. Nous ajustons la taille et le placement de la loupe en ciblant l'icône spécifiquement. Nous positionnons les choses avec des pourcentages afin qu'ils correspondent parfaitement à notre design réactif. Nous ajoutons :hoveret :focusétats ainsi il est évident que vous pouvez cliquer dessus.
Nous terminons en écrivant du JavaScript qui ouvrira et fermera la zone de recherche. Nous aurions pu avoir les animations directement dans le JavaScript (puisque nous utilisons jQuery), mais à la place, tout ce que nous faisons est de changer les noms de classe sur le CSS. C'est ce que j'aime à considérer comme un «CSS basé sur l'état» où JavaScript ne contrôle que les noms de classe qui déclarent l'état dans lequel se trouve la page (ou la zone), et le CSS contrôle à quoi ressemble la page dans cet état (et comment elle y parvient. ). Cela signifie que nous faisons des choses comme les transitions en CSS, qui est à mon avis leur place et sera bien meilleure à long terme (c'est-à-dire que les transitions CSS sont accélérées par le matériel alors que les transitions JavaScript ne le sont pas, ce ne sont que des itérations rapides de styles en ligne).
